Hai rakan sebet Armaila.com. Kali ini saya ingin sharing tentang hal yang dilakukan saat muncul notif "Hilangkan Resource Yang Memblokir Render" ketika melakukan pengecekan Data Web Inti sebagai lanjutan dari artikel "Masalah CLS: lebih dari 0,25 (seluler)" sebelumnya. Setelah googling dengan mengetik keyword "Hilangkan Resource Yang Memblokir Render" bahkan dengan lebih rincin dengan mengetik "allintitle:Hilangkan Resource Yang Memblokir Render" maka ada Sekitar 4 hasil (0,34 detik) yang memberikan informasi terkait hal itu.
Dari hasil yang diberikan oleh google terserbut. Saya mempraktekkan panduan yang ada di web ybierling yaitu pada bagian "Memuat CSS Setelah Pemuatan HTML"
Memuat CSS Setelah Pemuatan HTML
Salah satu cara untuk menghilangkan yang memblokir render atau Eliminate render-blocking resources saat optimasi Largest Contentful Paint (LCP) untuk mendapatkan angka di 2,5 detik versi seluler adalah dengan melakukan setting pemuatan HTML terlebih dahulu selanjutnya CSS yang dimuat.
Untuk membuat CSS dimuat setelah HTML maka perlu menambahkan kode berikut ini yang bisa diletakkan diatas kode </body>:
<script>
var cb = function() {
var l = document.createElement('link'); l.rel = 'stylesheet';
l.href = './style.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>
Dan Berikut ini adalah perubahan dan pengaruh dari kode diatas
Sebelum
- First Contentful Paint: 2,3 dtk
- Time to Interactive: 4,0 dtk
- Speed Index: 4,2 dtk
- Total Blocking Time: 70 md
- Largest Contentful Paint: 3,4 dtk
- Cumulative Layout Shift: 0,003
Sesudah
- First Contentful Paint: 2,3 dtk
- Time to Interactive: 4,0 dtk
- Speed Index: 3,4 dtk
- Total Blocking Time: 80 md
- Largest Contentful Paint: 3,1 dtk
- Cumulative Layout Shift: 0,003
Walaupun tidak memberikan perubahan yang mencolok. Namun sudah ada beberapa poin yang mendapatkan nilai maksimal Speed Index: 3,4 dtk misalnya.
Demikianlah artike seputar blogging. Semoga saja bermanfaat. Selamat mencoba dan semoga berhasil.