Ketika sobat menggunakan pagespeed insights dari google untuk memeriksa kecepatan loading blog sobat, dan memakai blogger sebagai hosting blog sobat, pasti muncul saran pengoptimalan yang memungkinkan yaitu menghilangkan JavaScript dan CSS yang memblokir perenderan di konten paruh atas. Karena memang ada kode javascript (.js) atau cascading style sheets (.css) bawaan blogger yang dirender dari luar dan disematkan dalam bentuk link alamat pada template default dari blogger.
Untuk menghapus kode css widget blogger dan membuat loading blog menjadi lebih cepat, kita dapat memperbaikinya dengan memasukkan kode css eksternal itu ke dalam tema html dari blog kita pada tubuh dari tag head. Seperti yang saya lakukan pada blog dewainside ini. Sobat dapat memeriksanya sendiri kalau memang penasaran.
Note : Dengan menghapus kode widget bundle.css blogger biasanya akan membuat munculnya gambar obeng dan kunci serta pensil yang dapat muncul di tampilan pada pengunjung blog. Anda dapat menghilangkannya dengan cara berikut : Menghilangkan gambar obeng dan kunci atau menghapus gambar pensil.
Untuk menghapus kode css widget blogger dan membuat loading blog menjadi lebih cepat, kita dapat memperbaikinya dengan memasukkan kode css eksternal itu ke dalam tema html dari blog kita pada tubuh dari tag head. Seperti yang saya lakukan pada blog dewainside ini. Sobat dapat memeriksanya sendiri kalau memang penasaran.
Note : Dengan menghapus kode widget bundle.css blogger biasanya akan membuat munculnya gambar obeng dan kunci serta pensil yang dapat muncul di tampilan pada pengunjung blog. Anda dapat menghilangkannya dengan cara berikut : Menghilangkan gambar obeng dan kunci atau menghapus gambar pensil.
Menghilangkan widget css bundle yang memblokir perenderan di konten paruh atas
Cara 1. Menghilangkan dengan b:css='false'
Cukup dengan menambahkan kode b:css='false' pada html template awal blog kamu. |
| b:css ='false' |
Cara 2. Menghilangkan dengan mengubah tag head
Langkah 1. Mengganti kode html tag pembuka dan penutup head<head> dengan <head>dan pada tag penutup head :
</head> dengan </head><!--<head/>-->
**Kalau dicek lagi masih ada bundle.css yang memblokir maka lanjut ke langkah 2. Biasa hal ini terjadi untuk template default bawaan blogger. Umumnya tidak terjadi pada template external.
Lihat link widget bundle.css blogger di pengujian pagespeed insight pada situs yang sobat uji.
Untuk lebih mudahnya berikut di bawah sudah saya cantumkan alamat link kode bundle.css dari blogger untuk tampilan desktop ataupun mobile.
 |
| link widget bundle.css blogger |
https://www.blogger.com/static/v1/widgets/1171200566-widget_css_mobile_2_bundle.css
https://www.blogger.com/static/v1/widgets/3213516723-css_bundle_v2.css
Setelah sobat membuka dua link css berbeda di atas, copy konten dari kode css blogger tersebut dan paste sesuai dengan pengkondisian tampilan mobile dan desktop pada tulisan yang saya beri warna merah di bawah ini :
Untuk lebih mudahnya, sobat dapat menggunakan notepad++ atau langsung buka Edit HTML pada Tema blog sobat.
<head>Masukkan kode di atas yang sudah sobat maksimalkan sesudah tag pembuka <head> atau sebelum tag penutup </head><!--<head/>--> yang sobat edit pada Langkah 1 seperti gambar berikut:
.
.
.
<b:if cond="data:blog.isMobile">
<style type="text/css">
------KODE CSS_Mobile_2_Bundle.css DISINI --------------
</style>
<b:else/>
<style type="text/css">
------KODE CSS_2_Bundle.css DISNI --------------
</style>
</b:if>
.
.
.
</head><!--<head/>-->
Langkah 3. Simpan Tema blogger sobat.
Selamat blog anda sudah terhindar dari JavaScript dan widget CSS bundle yang memblokir perenderan di konten paruh atas.
Thanks gan worked!
BalasHapussaya gak ngerti di langkah duanya. maksudnya apa ya? copy link gmn si, gak ngerti :(
BalasHapusbuka link newtab dari alamat:
Hapusa. mobile)
https://www.blogger.com/static/v1/widgets/1171200566-widget_css_mobile_2_bundle.css
b. desktop)
https://www.blogger.com/static/v1/widgets/3213516723-css_bundle_v2.css
Habis itu Copy-Paste kodenya dari link yang kamu buke ke format yang berwarna MERAH contoh diatas.
Terima kasih gan infonya
BalasHapusGan Kalau masalahnya seperti ini gimana cara betulin nya ya? mohon bantuannya, masih pemula
BalasHapus1. Mengurangi waktu server
2. manfaatkan penyimpanan cache browser
Dua2nya untuk domain/hosting blogspot masih belum bisa gan. Untuk waktu server biasanya tergantung lokasi negara, semisal visitor dari indonesia akan tertuju ke blogspot.co.id agar waktu respon server lebih cepat. Tapi semua domain blogspot bakalan redirect ke negara visitornya kok.
HapusTapi tenang aja gan google servernya gede kok, ndak bakalan lemot. Mending fokus ke konten aja. :)
kalau layout (tata letak) jadi berantakan karena hal diatas gmn itu ya?
BalasHapusterlihat berantakan di dasboard --> layout? sejatinya tidak masalah asal tidak merubah tampilan pada visitornya, setidaknya kita mengerti posisi setiap gadget / widget nya.
Hapus