Cara Mengatasi Problem Css Bundle Di Blogger
Cara optimalkan pengiriman Css Pada Template blog. untuk mengatasi dilema CSS Bundle yang memblokir perenderan konten di paruh atas, karena pihak Blogger telah mengeluarkan kedua css eksternalnya dari tag <b:skin>. Hal ini menyebabkan menurunnya performa kecepatan loading blog yang sangat signifikan, apalagi bila dilihat memakai alat Google PageSpeed Insights, hasil laporan performa kecepatan blog sanggup jadi pada level terendah (poor).
Baca Juga : Cara Memasang Anti Bom Klik Diblog
Pada ketika 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 dilema ini, ada dua pilihan yang sanggup ditempuh. yaitu sebagai berikut.
1. Menghilangkan CSS Bundle sepenuhnya
apabila Anda menentukan opsi ini, anda harus benar-benar cendekia dalam mendesain ulang blog. karena, akan terjadi berbagai perubahan pada tampilan blog, hampir semua widget terkena imbas 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.
Baca Juga : Cara Memasang Lazyload Mempercepat Loading Blog
dengan 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 menyerupai 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 dilema CSS Bundle pada Blogger.
Baca Juga : Cara Submit Artikel Dengan Fetch As Untuk Cepat Keindex
Sebelum menghilangkan CSS Bundle pada tag <head>, sebaiknya salin terlebih dahulu arahan CSS Bundle milik Anda. Kode tersebut hanya sanggup dilihat pada page source. Terakhir saya lihat, letaknya sempurna di bawah kode <head>.
Contoh arahan CSS Bundle
<link href='https://www.blogger.com/static/v1/widgets/521441841-css_bundle_v2.css' rel='stylesheet' type='text/css'/>
Di atas yaitu teladan arahan CSS Bundle dari template blog saya. Untuk melihat arahan tersebut Anda sanggup 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 arahan pemutus link CSS Bundle belum tersimpan. Salin arahan CSS Bundle milik Anda, kemudian pastekan sempurna di atas kode </body>.
Selanjutnya, pasang kode b:css='false' seperti pada opsi pertama. Simpan Tema.
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 footerdalam @media tidak bekerja dengan semestinya. Akibatnya tampilan untuk versi mobile jadi
.footer-inner, .main-inner .column-center-inner, .main-inner .column-right-inner{padding:0;}
Demikian Cara Mengatasi Masalah CSS Bundle di Blogger, agar bermanfaat.
