Cara Mengatasi (Mengoptimalkan CSS) Eliminate Render Blocking CSS Terbaru

Apa sih Eliminate render-blocking CSS ?
Kalau menurut saya pribadi sih sebuah pesan bukan eror, tapi ibarat peringatan dari pagespeed insight.

Berikut contoh eror Render blocking css versi gambar :


Terus apa resiko apa yang terjadi jika tamplate kita terdeteksi eror Eliminate render blocking CSS ?
Ini menyebabkan penundaan dalam perenderan laman Anda Istilahnya mengurangi loading blog anda mungkin.

Lantas pesan eror tersebut harus segera di optimalkan atau diatasi agar loading blog kita semakin ngebut. Tentunya loading blog kalau cepat otomatis pengunjung juga suka dengan blog kita.

Lalu bagaimana cara mengatasi atau mengoptimalkan Eliminate render blocking CSS?
Gampang banget kalau kita tau caranya pastinya kan. Simak aja langsung tutorial berikut ini :

  • Masuk ke tamplate and buka edit html nya.
  • Jangan lupa selalu back up sebelum edit tamplate anda untuk meminimalisir kesalahan saat edit tamplate.
  • Lanjut cari kode yang eror di tamplate agan liat contohnya seperti di gambar diatas
    atau seperti kode berikut misalnya :
    <link href='https://www.blogger.com/static/v1/widgets/1535467126-widget_css_2_bundle.css' rel='stylesheet' type='text/css'/>
  • Hapus kode yang eror, tapi copy dulu link css nya yang berwarna biru di notepad.
  • Setelah itu cari kode Berikut </body>Gunakan Ctrl+f or F3
  • Jika sudah ketemu pasti kode dibawah ini diatasnya
<script type="text/javascript"> var cb = function () { var l = document.createElement('link'); l.rel = 'stylesheet'; l.href ='https://www.blogger.com/static/v1/widgets/1535467126-widget_css_2_bundle.css'; var h = document.getElementsByTagName('head')[0]; h.parentNode.insertBefore(l, h); }; var raf = requestAnimationFrame || mozRequestAnimationFrame || webkitRequestAnimationFrame || msRequestAnimationFrame; if(raf) raf(cb); else window.addEventListener('load', cb); </script>
  • Ganti kode https://www.blogger.com/static/v1/widgets/1535467126-widget_css_2_bundle.css dengan kode css agan yang mengalami render blocking css (yang eror)
  • Klik simpan dan cek di PageSpeed.
Jika anda mengikuti tutorial dengan benar otomatis eror tidak lagi kelihatan alias sudah benar.
(Mas Pardi)
    Share This :

    Artikel terkait : Cara Mengatasi (Mengoptimalkan CSS) Eliminate Render Blocking CSS Terbaru

    Posting Lebih Baru Posting Lama

    0 komentar: