Critical rendering path adalah urutan langkah yang dijalankan browser untuk mengubah HTML, CSS, dan JS menjadi piksel di layar. Apa pun yang harus selesai sebelum paint pertama bersifat render-blocking.
Critical rendering path adalah urutan langkah yang dijalankan browser untuk mengubah HTML, CSS, dan JS menjadi piksel di layar. Apa pun yang harus selesai sebelum paint pertama bersifat render-blocking.
<script> biasa menghentikan parsing HTML sementara ia mengunduh dan berjalan.<!-- Memblokir parsing: browser menunggu di sini sebelum melanjutkan -->
<script src="/app.js"></script>
<!-- defer: unduh secara paralel, jalankan setelah HTML diparse, sesuai urutan -->
<script src="/app.js" defer></script>
<!-- async: unduh secara paralel, jalankan segera setelah siap (urutan tidak dijamin) -->
<script src="/analytics.js" async></script>
Gunakan defer untuk kode aplikasi yang menyentuh DOM, dan async untuk script independen seperti analytics. Inline CSS kritis dan muat sisanya tanpa memblokir.
Ini adalah model mental di balik hampir setiap perbaikan waktu-muat: CSS/JS yang render-blocking adalah penyebab utama paint pertama yang lambat dan LCP yang buruk. Mengetahui mengapa defer/async ada menunjukkan bahwa kamu memahami browser, bukan sekadar sintaksnya.
Perpustakaan pertanyaan wawancara IT dengan jawaban mendetail — dari Junior hingga Senior.
Donasi