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...
Silakan pilih sistem komentar anda ⇛   

Silakan berkomentar dengan sopan. Jangan buang-buang waktu anda hanya untuk melakukan SPAM di sini.

Ozik Jarwo Kode Jarwo
Ozik Jarwo author
# 3 Maret 2018 15.42

Nda gan. Selama ini saya pakai cara ini juga, structured data tetap aman...

Balas
Abdul Kode Jarwo
Abdul
# 3 Maret 2018 14.17

gan mau tanya ini merusak struktur SEO blog tidak yha? terimakasih

Balas
Ozik Jarwo Kode Jarwo
Ozik Jarwo author
# 9 Januari 2018 17.32

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

Balas
Zaini Zaina Zainu Kode Jarwo
Zaini Zaina Zainu
# 9 Januari 2018 15.29

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
Ozik Jarwo Kode Jarwo
Ozik Jarwo author
# 31 Desember 2017 09.41

Iya dong hehehe...

Balas
Anonim Kode Jarwo
Anonim
# 30 Desember 2017 15.34

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

Balas
Ozik Jarwo Kode Jarwo
Ozik Jarwo author
# 24 Desember 2017 09.15

Sama sama (y)

Balas
septian todo Lauk Kode Jarwo
septian todo Lauk
# 24 Desember 2017 06.44

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
Ozik Jarwo Kode Jarwo
Ozik Jarwo author
# 10 Desember 2017 10.20

Efek template jadul. Saran pakai template terbaru.

Balas
Renaldy Ramadani Kode Jarwo
Renaldy Ramadani
# 10 Desember 2017 07.39

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

Balas
Ozik Jarwo Kode Jarwo
Ozik Jarwo author
# 9 Desember 2017 07.59

Siap tunggu aja

Balas
Sang Penghibur Kode Jarwo
Sang Penghibur
# 8 Desember 2017 13.06

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
Sang Penghibur Kode Jarwo
Sang Penghibur
# 8 Desember 2017 13.05

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
Sang Penghibur Kode Jarwo
Sang Penghibur
# 8 Desember 2017 13.04

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
Ozik Jarwo Kode Jarwo
Ozik Jarwo author
# 5 Desember 2017 13.34

Ganti kedua head, baru simpan...

Jangan disimpan dulu sebelum diganti keduanya

Balas
Sang Penghibur Kode Jarwo
Sang Penghibur
# 5 Desember 2017 10.56

tidak bisa mengganti kode head pertama gan, muncul peringatan merah

Balas