<b:skin>. Hal ini menyebabkan menurunnya performa kecepatan loading blog yang sangat signifikan, apalagi kalau dilihat menggunakan alat Google PageSpeed Insights, hasil laporan performa kecepatan blog bisa jadi pada level kismin (poor).Untuk saat ini, pada hasil laporan analisis PageSpeed Insights hanya terdapat satu css eksternal yang memblokir perenderan, khususnya pada perangkat mobile / seluler, yaitu widget Bundle css. Untuk mengatasi masalah ini, ada dua pilihan yang bisa ditempuh.
1. Menghilangkan CSS Bundle sepenuhnya
Jika Anda memilih opsi ini, anda harus benar-benar pandai dalam mendesain ulang blog. karena, akan terjadi banyak sekali perubahan pada tampilan blog, hampir semua widget terkena dampak akibat dari pemutusan link css eksternal tersebut. Dan perubahannya berlaku pada semua perangkat, seluler maupun desktop. Kecuali, template dan widget yang Anda gunakan bukan bawaan Blogger.
Untuk menghilangkan pemuatan stylesheet eksternal Blogger (CSS Bundle), caranya sangat mudah, cukup pasang kode
b:css='false' ke dalam tag html. Pada template Blogspot, penampakannya akan terlihat seperti di bawah ini.<html b:css='false' b:version='2' class='v2' expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
2. Menunda Pemuatan CSS Bundle
Opsi ini bukan tanpa resiko, perubahan tampilan mungkin tetap ada, khususnya pada tampilan versi seluler dan hanya pada template Blogger yang sudah responsive. Tapi menurut saya, ini merupakan solusi paling mudah untuk mengatasi masalah CSS Bundle pada Blogger.
Sebelum menghilangkan CSS Bundle pada tag
<head>, sebaiknya salin terlebih dahulu kode CSS Bundle milik Anda. Kode tersebut hanya bisa dilihat pada page source. Terakhir saya lihat, letaknya tepat di bawah kode <head>.Contoh kode CSS Bundle
<link href='https://www.blogger.com/static/v1/widgets/521441841-css_bundle_v2.css' rel='stylesheet' type='text/css'/>
Di atas adalah contoh kode CSS Bundle dari template blog saya. Untuk melihat kode tersebut Anda bisa menggunakan PageSpeed Insights atau melalui Google search console > pilih properti > perayapan > ambil sebagai Google > ambil > klik tanda dua panah pada url yang telah di ambil. Dengan catatan kode pemutus link CSS Bundle belum tersimpan. Salin kode CSS Bundle milik Anda, lalu pastekan tepat di atas kode
</body>.Selanjutnya, pasang kode
b:css='false' seperti pada opsi pertama. Simpan Tema.Baca juga : Cara mempercepat loading blog
Update
Perubahan besar pada Google Pagespeed test membuat cara penundaan Blogger CSS bundle di atas menjadi tidak efektif lagi. Untuk mengatasinya ikuti langkah berikut
Gunakan
rel='preconnect' untuk mencegah Blogger CSS bundle memblokir proses render utama.Karena sumbernya menggunakan SSL (https), tambahkan juga
rel='dns-prefetch'.Contoh:
<link href='https://www.blogger.com/static/v1/widgets/521441841-css_bundle_v2.css' rel='preconnect dns-prefetch stylesheet' type='text/css'/>
Cara tersebut juga bisa digunakan untuk mencegah stylesheet pihak ketiga lainnya agar tidak memblokir rendering utama.
Catatan :
Tambahkan keterangan
!important pada nilai atribut dari class atau id yang mengalami perubahan akibat dari penundaan pemuatan css eksternal Blogger.Contoh : Pada template Simple Blogger, nilai padding pada element
main dan footer dalam @media tidak bekerja dengan semestinya. Akibatnya tampilan untuk versi mobile jadi !important pada CSS berikut..footer-inner, .main-inner .column-center-inner, .main-inner .column-right-inner{padding:0;}
27 comments:
makasih gan, yang b:css work itu, blog saya jadi enteng.
Sama-sama gan, terima kasih juga atas kunjungannya
Berhasil, terima kasih sekali Mas.
Ya, sama sama. Jangan lupa periksa tampilan blog pd versi seluler maupun desktop, barangkali ada perubahan lain setelah menyembunyikan css Bundle.
Maksud tanda 2 panah apa umm
Trimakasihh ummm... Suksesss
Setelah url diambil, diujung sebelah kanan ada tombol / ikon dua panah, klik untuk melihat deretan kode html yang diambil. Anda bisa lihat kode css Bundlenya disitu.
trik yang pertama di taruh di atas kode body ya mas.??
Maksudnya kode b:css nya, bukan di atas body, tapi disisipkan pada tag html, paling atas. Lihat contoh.
bisa di lihat screenshotnya gak gann... plisss
Kolom ini tidak mendukung gan. Sederhana ko
Cukup kode <html> diubah menjadi <html b:css='false'>
Untuk template default contohnya seperti di dalam artikel
Terima kasih banyak gan. skor pagespeed insight saya langsung jadi 99/100. cara nomer satu yang saya pakai
Sama-sama gan, tapi yang terpenting adalah masalah CSS Bundle diparuh atas bisa teratasi,untuk hasil PageSpeed mungkin akan bervariasi sebab banyak faktor lain yang mempengaruhinya
gan , newbie masih belum terlalu paham mau pasang kode !important nya , berikan contoh nya gan
pingin mempercepat blog saya juga gan
Gimana ya, masing" tema punya karakter tersendiri gan, jadi ini soal kejelian. Contoh paling umum, biasanya tampilan pd versi desktop bergeser ke kiri, biar balik ke tengah, body{margin:0 auto;} diubah menjadi body{margin:0 auto!important;}
Coba baca post sebelumnya gan "cara optimalkan pengiriman css" disana banyak contohnya, link nya ada di atas
Kalau semisal sudah terlanjut pakai carai ini, khususnya cara pertama, terus template amburadul. Balikinnya macam mana? apa dengan di hapus b:css='false' akan balik seperti semula tampilan templatenya?
Ya, otomatis akan normal kembali.
makasih gan .tutorialnya mudah digunakan ga ribet.salam kenal gan.jika boleh link tutorial untuk daftar bacaan saya di blog.ditunggu konfirmasi baliknya.
Sama-sama gan, konfirmasi kmn ya? Kurang tau saya. Tapi, silahkan saja, yang penting bisa bermanfaat,
makasih gan atas ijinnya maksudnya saya mau cantumkan link agan https://bakuloreg.blogspot.com ke dalam blog daftar bacaan saya.hehe semoga sukses selalu dan buat para blogger lainnya salam kenal dari my blog bima hartono masih pemula.
Ok gan, salam kenal juga,
pasang kode b:css='false' dimananya ya gan>
Sudah banyak contohnya di atas gan, baca baik-baik, termasuk bagian komentarnya
kalo misal buat template baru kode css harusnya di taro dimana mas?
Om.. Tutornya bagus-bagus,, Punya saya work juga om, tapi setelah tak pasang Iklan AdSense untuk versi moblie menjadi turun jauh om.. padahal 1 Iklan saja.. Klu versi dekstop aman om ku.. Solusinya Om.. makasih..
Resiko pasang iklan Adsense di paruh atas, coba turunkan posisi iklan agak ke bawah, trus pasang kode berikut pada <head>
<link crossorigin='' href='https://pagead2.googlesyndication.com' rel='preconnect dns-prefetch'/><link crossorigin='' href='https://googleads.g.doubleclick.net' rel='preconnect dns-prefetch'/>
Tes ulang setelah 1x24jam
!important nya dipasang dimana ya, maksudnya disebelahmana .footer-inner, .main-inner .column-center-inner, .main-inner .column-right-inner{padding:0;}
Malum noob om jadi mohon pencerahannya
Post a Comment