Menghilangkan CSS yang Memblokir di Blog

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.

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>

**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.

Langkah 2. Memasukkan kode css ke dalam format html

Lihat link widget bundle.css blogger di pengujian pagespeed insight pada situs yang sobat uji.

link widget bundle.css blogger

Untuk lebih mudahnya berikut di bawah sudah saya cantumkan alamat link kode bundle.css dari blogger untuk tampilan desktop ataupun mobile.

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>
.
.
.
<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>

Masukkan kode di atas yang sudah sobat maksimalkan sesudah tag pembuka <head> atau sebelum tag penutup </head> yang sobat edit pada Langkah 1 seperti gambar berikut:

Langkah 3. Simpan Tema blogger sobat.

Selamat blog anda sudah terhindar dari JavaScript dan widget CSS bundle yang memblokir perenderan di konten paruh atas.

Info Hari

Cari Blog Ini