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'
b:css ='false'

Cara 2. Menghilangkan dengan mengubah tag head

Langkah 1. Mengganti kode html tag pembuka dan penutup head
<head>     dengan     &lt;head&gt;
dan pada tag penutup head :
</head>     dengan     &lt;/head&gt;&lt;!--<head/>--&gt;
**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
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.
&lt;head&gt;
.
.
.
<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>
.
.
.
&lt;/head&gt;&lt;!--<head/>--&gt;
Masukkan kode di atas yang sudah sobat maksimalkan sesudah tag pembuka &lt;head&gt; atau sebelum tag penutup &lt;/head&gt;&lt;!--<head/>--&gt; 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.

8 komentar:

  1. saya gak ngerti di langkah duanya. maksudnya apa ya? copy link gmn si, gak ngerti :(

    BalasHapus
    Balasan
    1. buka link newtab dari alamat:
      a. 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.

      Hapus
  2. Terima kasih gan infonya

    BalasHapus
  3. Gan Kalau masalahnya seperti ini gimana cara betulin nya ya? mohon bantuannya, masih pemula

    1. Mengurangi waktu server

    2. manfaatkan penyimpanan cache browser

    BalasHapus
    Balasan
    1. 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.
      Tapi tenang aja gan google servernya gede kok, ndak bakalan lemot. Mending fokus ke konten aja. :)

      Hapus
  4. kalau layout (tata letak) jadi berantakan karena hal diatas gmn itu ya?

    BalasHapus
    Balasan
    1. terlihat berantakan di dasboard --> layout? sejatinya tidak masalah asal tidak merubah tampilan pada visitornya, setidaknya kita mengerti posisi setiap gadget / widget nya.

      Hapus

Setiap komentar sangat dihargai, namun karena keterbatasan waktu tidak dapat online setiap saat untuk me-reply komentar setiap orang. Komentar Spam (link aktif, o*at, p*rn*, j*di, dan sejenisnya) akan dimoderasi. Terima kasih atas perhatiannya dan Berkunjung kembali :)