critical rendering path คือลำดับขั้นตอนที่เบราว์เซอร์รันเพื่อเปลี่ยน HTML, CSS, และ JS ให้เป็นพิกเซลบนหน้าจอ อะไรก็ตามที่ต้องเสร็จ ก่อน การ paint ครั้งแรกคือสิ่งที่ render-blocking
critical rendering path คือลำดับขั้นตอนที่เบราว์เซอร์รันเพื่อเปลี่ยน HTML, CSS, และ JS ให้เป็นพิกเซลบนหน้าจอ อะไรก็ตามที่ต้องเสร็จ ก่อน การ paint ครั้งแรกคือสิ่งที่ render-blocking
<script> ธรรมดาจะหยุดการ parse HTML ขณะที่มันดาวน์โหลดและรัน<!-- Blocks parsing: browser waits here before continuing -->
<script src="/app.js"></script>
<!-- defer: download in parallel, run after HTML is parsed, in order -->
<script src="/app.js" defer></script>
<!-- async: download in parallel, run as soon as ready (order not guaranteed) -->
<script src="/analytics.js" async></script>
ใช้ defer สำหรับโค้ดแอปที่แตะ DOM และใช้ async สำหรับ script ที่เป็นอิสระอย่าง analytics ฝัง critical CSS แบบ inline และโหลดส่วนที่เหลือโดยไม่บล็อก
นี่คือโมเดลความคิดที่อยู่เบื้องหลังการแก้ปัญหาเวลาโหลดแทบทุกอย่าง: CSS/JS ที่ render-blocking คือสาเหตุอันดับต้น ๆ ของการ paint ครั้งแรกที่ช้าและ LCP ที่แย่ การรู้ว่า ทำไม จึงมี defer/async แสดงว่าคุณเข้าใจเบราว์เซอร์ ไม่ใช่แค่ไวยากรณ์
คลังคำถามสัมภาษณ์งาน IT พร้อมคำตอบโดยละเอียด — ตั้งแต่ระดับ Junior ถึง Senior
บริจาค