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.
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.
Cara Menonaktifkan Bundle Css Blogger
- Tambahkan kode
b:css='false'kedalam tag pembukaan html seperti berikut<html b:css='false' class..> - Selanjutnya parse atau ganti kode penutup body
</body>menjadi<!--</body>--></body>
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.
| Default | Parse Mode |
|---|---|
<head> | <head> |
</head> | </head><!--<head/>--> |
</body> | <!--</body>--></body> |
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'/>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;
<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'/>
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.- Buka URL file external di tab baru misalnya https://corjs.com/.../allmin.js
- Copy semua file atau kode yang ditampilkan,
- Kemudian tambahkan/masukkan kedalam html blog
<style type='text/css'>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).
File css here...
</style>
<script type='text/javascript'>
//<![CDATA[
File js here...
//]]>
</script>
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.
Komentar
Posting Komentar