menu melayang

Minggu, 05 Desember 2021    

Hilangkan Resource Yang Memblokir Render - Memuat CSS Setelah Pemuatan HTML

Advertisement
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"
Hilangkan Resource Yang Memblokir Render - 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

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
PELUANG sebelum.webp

Sesudah

sesudah.webp
  • 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
peluang sesudah
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.
Advertisement

KONSULTASI VIA WA

Hubungi Saya Via WhatsApp

BLOG POST

RELATED POST

Back to Top

APA YANG ANDA CARI ?

PRODUK DIGITAL


PAKET NELPON TELKOMSEL PAKET SMS TELKOMSEL
TOOLS OTOMATIS SELLER SHOPEE TOOLS OTOMATIS KONTEN AFFILIATE SHOPEE tools otomatis facebook
DAFTAR AGEN PULSA KOLEKSI PRODUK ARMAILA

MY PRODUCT

Advertisement

FACEBOOK

AGEN PULSA

RANDOM POST