Mengatasi Render Blocking & CSS Delivery Widget Bundle Blogger

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

Rabu, September 20, 2017 - 14 komentar

14 komentar untuk Mengatasi Render Blocking & CSS Delivery Widget Bundle Blogger.

Silakan masukkan komentar anda. Jangan habiskan waktu hanya untuk melakukan SPAM disini.


Perlihatkan Semua Komentar Tutup Semua Komentar
.
Sang Penghibur
Selasa, 05 Desember 2017 10.56.00 WITA

tidak bisa mengganti kode head pertama gan, muncul peringatan merah

Balas Hapus
.
Ozik Jarwo
Selasa, 05 Desember 2017 13.34.00 WITA

Ganti kedua head, baru simpan...

Jangan disimpan dulu sebelum diganti keduanya

Balas Hapus
.
Sang Penghibur
Jumat, 08 Desember 2017 13.04.00 WITA

barusan sudah saya coba kembali gan, namun belum ada perubahan pada saat dicek ulang di google inside, apakah memerlukan waktu dlu agar terlihat perbuahan Poor
55 / 100

Balas Hapus
.
Sang Penghibur
Jumat, 08 Desember 2017 13.05.00 WITA

saya cek web agan sudah bagus persen nya berada di 91/100 dan 100/100, apakah agan melakukan settingan dari contoh panduan diatas ya?

Balas Hapus
.
Sang Penghibur
Jumat, 08 Desember 2017 13.06.00 WITA

mantap gan, versi destop sudah mencapai 90 / 100 dalam posisi good, sisa yang versi mobile lg gan, mungkin lg proses x ya. makasih info nya gan

Balas Hapus
.
Renaldy Ramadani
Minggu, 10 Desember 2017 07.39.00 WITA

mas, kok popular pos sama label jadi rusak widgetnya mas? tolong solusinya mas

Balas Hapus
.
Ozik Jarwo
Minggu, 10 Desember 2017 10.20.00 WITA

Efek template jadul. Saran pakai template terbaru.

Balas Hapus
.
septian todo Lauk
Minggu, 24 Desember 2017 06.44.00 WITA

matap gan :)setelah cek di google pageSpeed insights blog saya berubah total dari sebelumnya cuma 80% sekarang jadi 92%..

makasih ya gan tutorialnya..
semoga makin sukses :)

Balas Hapus
.
Sabtu, 30 Desember 2017 15.34.00 WITA

Gila, agan ini page speed insightnya sempurna, wow...

Balas Hapus
.
Zaini Zaina Zainu
Selasa, 09 Januari 2018 15.29.00 WITA

terima kasih banyak mas Jarwo!!!pagespeed blog saya yang awalnya 76 (mobile) menjadi 84. sedangkan untuk desktop yang awalnya 90 kini menjadi 95. Pokoknya mantap dah.
tapi hati tetap iri sama speed blog milik mas Jarwo ini..heheheh

Balas Hapus
.
Ozik Jarwo
Selasa, 09 Januari 2018 17.32.00 WITA

Sama-sama gan. Iri berarti agan harus belajar lebih supaya 100 juga hehehe...

Balas Hapus