Artikel ini merupakan update terbaru cara optimalkan pengiriman css pada template Blogger. Dimana cara usang sudah tidak efektif lagi untuk mengatasi problem CSS Bundle yang memblokir perenderan konten di paruh atas, karena pihak Blogger telah mengeluarkan kedua css eksternalnya dari tag
Untuk dikala 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 problem ini, ada dua pilihan yang sanggup ditempuh.
1. Menghilangkan CSS Bundle sepenuhnya
Jika Anda menentukan opsi ini, anda harus benar-benar akil dalam mendesain ulang blog. karena, akan terjadi berbagai perubahan pada tampilan blog, hampir semua widget terkena dampak akhir 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 isyarat
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 berdasarkan saya, ini merupakan solusi paling gampang untuk mengatasi problem CSS Bundle pada Blogger.
Sebelum menghilangkan CSS Bundle pada tag
Contoh isyarat CSS Bundle
Di atas ialah tumpuan isyarat CSS Bundle dari template blog saya. Untuk melihat isyarat tersebut Anda sanggup memakai 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 isyarat pemutus link CSS Bundle belum tersimpan. Salin isyarat CSS Bundle milik Anda, kemudian pastekan sempurna di atas isyarat
Selanjutnya, pasang isyarat
Baca juga : Cara mempercepat loading blog
Catatan :
Tambahkan keterangan
Contoh : Pada template Simple Blogger, nilai padding pada elementmengkered menyusut. Untuk mengatasinya, tambahkan keterangan
<b:skin>. Hal ini mengakibatkan menurunnya performa kecepatan loading blog yang sangat signifikan, apalagi jika dilihat memakai alat Google PageSpeed Insights, hasil laporan performa kecepatan blog sanggup jadi pada level kismin (poor).Untuk dikala 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 problem ini, ada dua pilihan yang sanggup ditempuh.
1. Menghilangkan CSS Bundle sepenuhnya
Jika Anda menentukan opsi ini, anda harus benar-benar akil dalam mendesain ulang blog. karena, akan terjadi berbagai perubahan pada tampilan blog, hampir semua widget terkena dampak akhir 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 isyarat
b:css='false' ke dalam tag html. Pada template Blogspot, penampakannya akan terlihat ibarat 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 berdasarkan saya, ini merupakan solusi paling gampang untuk mengatasi problem CSS Bundle pada Blogger.
Sebelum menghilangkan CSS Bundle pada tag
<head>, sebaiknya salin terlebih dahulu isyarat CSS Bundle milik Anda. Kode tersebut hanya sanggup dilihat pada page source. Terakhir saya lihat, letaknya sempurna di bawah isyarat <head>.Contoh isyarat CSS Bundle
<link href='https://www.blogger.com/static/v1/widgets/521441841-css_bundle_v2.css' rel='stylesheet' type='text/css'/>
Di atas ialah tumpuan isyarat CSS Bundle dari template blog saya. Untuk melihat isyarat tersebut Anda sanggup memakai 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 isyarat pemutus link CSS Bundle belum tersimpan. Salin isyarat CSS Bundle milik Anda, kemudian pastekan sempurna di atas isyarat
</body>.Selanjutnya, pasang isyarat
b:css='false' ibarat pada opsi pertama. Simpan Tema.Baca juga : Cara mempercepat loading blog
Catatan :
Tambahkan keterangan
!important pada nilai atribut dari class atau id yang mengalami perubahan akhir 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;} 
