Masalah Render Blocking & CSS Delivery Widget Bundle Blog

    Pada artikel seputar Google PageSpeed Insights ini saya akan membagikan cara mengatasi render-blocking (css delivery) untuk CSS widget bawaan blogger. Render-blocking merupakan masalah yang timbul dikarenakan script eksternal besar yang diload secara synchronous didalam blog, sehingga pengunjung yang jaringannya jelek akan melihat tampilan blank saat membuka blog tersebut.

    Penjelasan


    Apa itu CSS widget bawaan blogger?

    Yaitu CSS bawaan dari setiap template yang ada di blog dengan fungsi agar widget-widget dapat tampil dengan semestinya. Contoh CSSnya bisa anda lihat disini:

    https://www.blogger.com/static/v1/widgets/3730162741-widget_css_bundle.css

    Sudah anda lihat link diatas? Begitu banyak kodenya bukan?

    Hal inilah yang membuat blog anda melambat, terlebih script ini diload secara bersamaan dengan blog atau lebih sering disebut synchronous. Selain itu, CSS ini juga tidak terlalu berguna dikarenakan hanya widget-widget yang jarang dipakai yang rusak tampilannya.

    Cara Mengatasi


    Nah masalahnya ketika anda ingin menghapusnya, script ini tidak akan anda temukan didalam Edit HTML pada Tema. Anda hanya bisa menemukannya bila menginspect blog tersebut. Berhubung script ini berada di tag head, jadi inilah waktu yang tepat kita belajar memanipulasi lagi!

    • Seperti bisa, sekarang silakan anda buka blogger.com > Tema > Edit HTML
    • Klik disembarang kode, lalu tekan Ctrl + F sehingga muncul kotak pencarian kode
    • Sekarang ketikkan kode ini didalam kotak pencarian lalu tekan enter

    <head>

    • Bila sudah ketemu, silakan hapus dan ganti kode tersebut menjadi seperti ini:

    &lt;head&gt;

    • Selesai, sekarang kembali ke kotak pencarian, lalu cari lagi kode ini:

    </head>

    • Hapus kode tersebut dan ganti dengan ini:

    &lt;textarea readonly disabled style=&#39;display:none&#39;&gt;
    &lt;!--<head/>--&gt;
    &lt;/textarea&gt;
    &lt;head/&gt;

    • Selesai, sekarang simpan template lalu cek kembali apakah masalah masih tetap muncul atau sudah terselesaikan.

    Penutup


    Mungkin ada minusnya dari melakukan cara yang satu ini, yaitu beberapa widget seperti contact form yang berubah bentuk menjadi simpel. Tetapi tenang saja anda dapat menggantinya dengan widget pihak ketiga lainnya atau mendesain ulang sendiri...