Cara Mengatasi Render Blocking Resources Dari Template Blogger

Cara Mengatasi Render-blocking resources -  Sedikitnya ada dua jenis resources pada template blogger yang menyebabkan bloking first paint pada halaman blog. Yang pertama resources yang berasal dari platform blogger (resources default) yang biasa kita sebut dengan bundle css blogger dan resources pihak ketiga (3rd party) seperti bundle css fontawesome dan library javascript.

Kedua jenis resources (bundle css/js) tersebut sebenarnya bukan hal buruk untuk situs blog, kita hanya perlu memuatnya secara tidak sinkron (asynchron) jika memungkinkan, Dan khusus untuk bundle css/js bawaan blogger langkah terbaik saat ini untuk mengatasinya adalah adalah dengan menonaktifka-nya. Karena sangat tidak mungkin untuk memodifikasi kode tersebut.

Dampak Negatif Render-Blocking Resources

[ads id="ads1"]
Yang paling nyata dampak negatif render-blocking resources adalah (bloking first paint) yaitu ketika browser memuat halaman blog yang pertama kali terlihat adalah layar putih, di butuhkan waktu beberapa milisecond untuk menampilkan halaman blog secara utuh seperti yang terlihat pada ilustrasi berikut.
Render-Blocking Resources

Cara Menonaktifkan Bundle Css Blogger

  1. Tambahkan kode b:css='false' kedalam tag pembukaan html seperti berikut <html b:css='false' class..>
  2. Selanjutnya parse atau ganti kode penutup body </body> menjadi &lt;!--</body>--&gt;&lt;/body&gt;
Lihat contoh gambar berikut ini;
Contoh Menonaktifkan Bundle Css Blogger
Kemudian lakukan audit pada blog untuk memastikan resources yang menyebabkan bloking first paint sudah teratasi atau belum (Gunakan Web.dev measure atau PageSpeed Insights untuk mengaudit blog).

Jika sudah teratasi maka cukupkan tindakan sampai disitu, jika belum atau masih ada bundle default blogger yang menyebabkan render-blocking resources, maka kamu perlu memparse tag head pembuka dan tag head penutup seperti berikut.
DefaultParse Mode
<head>&lt;head&gt;
</head>&lt;/head&gt;&lt;!--<head/>--&gt;
</body>&lt;!--</body>--&gt;&lt;/body&gt;

Render-Blocking Resources - Third Party

Seperti yang telah saya jelaskan diatas Render-blocking resources dari sumber pihak ketiga (third party) di sebabkan oleh css dan js eksternal yang dimuat secara synchron seperti;
<link href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css'/>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js'/>
<script src='https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.0.0-beta.2.4/owl.carousel.min.js'/>
Jadi untuk mengatasinya tambahkan kode async='async' atau defer='defer' pada masing-masing bundle css/js, atau gunakan bantuan mini script untuk memuat css dan js eksternal secara asynchron seperti berikut;
function loadCSS(e,t,n){"use strict";var i=window.document.createElement("link");
var o=t||window.document.getElementsByTagName("script")
[0];i.rel="stylesheet";i.href=e;i.media="only x";o.parentNode.insertBefore(i,o);
setTimeout(function(){i.media=n||"all"})}loadCSS("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css");
loadCSS("https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js");

Metode Lainnya Untuk Mengatasi Render Blocking Resources

Jika ketiga cara diatas masih belum efektif untuk mengatasi render blocking resources dari template blog anda, silahkan gunakan metode import css dan js external kedalam html blog anda, berikut panduan lengkapnya.
  1. Buka URL file external di tab baru misalnya https://corjs.com/.../allmin.js
  2. Copy semua file atau kode yang ditampilkan,
  3. Kemudian tambahkan/masukkan kedalam html blog
Notes: Jika file external berupa css, tambahkan di area head situs dan di dalam tag <style>, Tetapi jika file berupa javascript atau js tambahkan ke area body dan di dalam tag <script> yang di html blog anda. Lihat contoh berikut ini:
<style type='text/css'>
File css here...
</style>

<script type='text/javascript'>
//<![CDATA[
File js here...
//]]>
</script>
Metode import css dan js eksternal seperti paling umum digunakan untuk menghindari atau mengatasi render blocking resources, termasuk situs blog ini juga menerapkan metode import untuk mengeliminasi render blocking resources dari sumber pihak ketiga (3rd party resources).

Saya rasa semua penjelasan diatas sudah cukup membantu untuk mengatasai render-blocking resources yang di sebabkan oleh bundle css dan js eksternal maupun bundle css bawaan blogger.

Jika kamu ingin mengetahui lebih banyak tentang cara mengatasi render-blocking resources  dari template blogger, ikuti terus blog cordialblogger.com karena pada artikel selanjutnya saya akan membahas permasalahan serupa dengan solusi atau metode yang berbeda untuk mengatasinya.
Lebih baru Lebih lama
Close