Critical rendering path ialah urutan langkah yang browser jalankan untuk menukar HTML, CSS, dan JS menjadi piksel pada skrin. Apa-apa yang mesti selesai sebelum paint pertama ialah render-blocking.
Critical rendering path ialah urutan langkah yang browser jalankan untuk menukar HTML, CSS, dan JS menjadi piksel pada skrin. Apa-apa yang mesti selesai sebelum paint pertama ialah render-blocking.
<script> biasa menghentikan penghuraian HTML semasa ia memuat turun dan berjalan.<!-- Menyekat penghuraian: browser menunggu di sini sebelum meneruskan -->
<script src="/app.js"></script>
<!-- defer: muat turun secara selari, jalankan selepas HTML dihurai, mengikut turutan -->
<script src="/app.js" defer></script>
<!-- async: muat turun secara selari, jalankan sebaik sedia (turutan tidak dijamin) -->
<script src="/analytics.js" async></script>
Guna defer untuk kod aplikasi yang menyentuh DOM, dan async untuk skrip bebas seperti analitik. Inline-kan CSS kritikal dan muatkan selebihnya tanpa menyekat.
Inilah model mental di sebalik hampir setiap pembetulan masa-muat: CSS/JS render-blocking ialah punca utama paint pertama yang perlahan dan LCP yang lemah. Mengetahui mengapa defer/async wujud menunjukkan anda memahami browser, bukan sekadar sintaks.
Pustaka soalan temu duga IT dengan jawapan terperinci — daripada Junior hingga Senior.
Derma