Render-blocking resources เป็นสาเหตุอันดับต้นที่ทำให้เว็บโหลดช้า CSS และ JavaScript ที่ block การ render ทำให้ผู้ใช้เห็นหน้าจอขาวนานกว่าที่ควร บทความนี้อธิบายวิธีวินิจฉัยและแก้ไข render-blocking resources เพื่อเพิ่ม PageSpeed score

Render-Blocking Resources คืออะไร

เมื่อ browser โหลดหน้าเว็บ จะหยุดแสดงผล (block rendering) จนกว่าจะโหลด CSS และ JavaScript บางไฟล์เสร็จ ไฟล์เหล่านี้เรียกว่า render-blocking resources ยิ่งมีมาก ยิ่งใช้เวลานานกว่าผู้ใช้จะเห็นเนื้อหา

วิธีวินิจฉัย

1. Google PageSpeed Insights

ใส่ URL แล้วดูส่วน "Eliminate render-blocking resources" จะแสดงไฟล์ที่ block rendering พร้อมเวลาที่ประหยัดได้ถ้าแก้

2. Chrome DevTools Performance Tab

เปิด DevTools → Performance → Record page load ดู waterfall chart จะเห็นว่า resource ไหน block rendering นานที่สุด

3. Lighthouse Audit

รัน Lighthouse ใน DevTools ส่วน Performance จะชี้ render-blocking resources พร้อมคำแนะนำเฉพาะ

วิธีแก้ไข

ประเภทวิธีแก้ผลลัพธ์
CSS ขนาดใหญ่แยก Critical CSS inline ใน head, defer CSS ที่เหลือFirst Paint เร็วขึ้น
CSS ที่ไม่ได้ใช้ลบ unused CSS ด้วย PurgeCSS หรือ Coverage tabลดขนาดไฟล์
JavaScript ใน headย้ายไป body หรือใช้ async/deferไม่ block HTML parsing
Third-party scriptsLazy load (เช่น chat widget, analytics)ลด initial load time
Web Fontsใช้ font-display: swap, preload fontText เห็นเร็วขึ้น

Critical CSS คืออะไร

Critical CSS คือ CSS ที่จำเป็นสำหรับ above-the-fold content (ส่วนที่เห็นก่อน scroll) โดย inline CSS นี้ใน <head> แล้ว defer CSS ที่เหลือ ผู้ใช้จะเห็น content เร็วขึ้นโดยไม่ต้องรอโหลด CSS ทั้งหมด

async vs defer: ใช้อันไหนเมื่อไหร่

Attributeพฤติกรรมเหมาะกับ
asyncโหลดพร้อมกัน execute ทันทีที่โหลดเสร็จScript ที่ไม่ขึ้นกับ DOM: analytics, ads
deferโหลดพร้อมกัน execute หลัง HTML parse เสร็จScript ที่ต้องใช้ DOM: UI framework, interaction
ไม่ใส่หยุด parse HTML จนโหลด+execute เสร็จCritical script ที่ต้องรันก่อน (น้อยมาก)

คำถามที่พบบ่อย

แก้ render-blocking แล้ว PageSpeed จะดีขึ้นเท่าไหร่

ขึ้นกับจำนวนและขนาด resources ที่ block โดยทั่วไปเห็น LCP ดีขึ้น 0.5-2 วินาที และ PageSpeed score เพิ่ม 10-30 จุด

Webflow มีปัญหา render-blocking ไหม

Webflow จัดการ CSS/JS ค่อนข้างดี แต่ custom code ที่เพิ่มเอง (analytics, chat widgets, third-party scripts) อาจเป็น render-blocking ให้ใส่ async/defer หรือ lazy load

ต้องแก้ทุกไฟล์ที่ PageSpeed บอกไหม

เน้นไฟล์ที่ใหญ่ที่สุดและ block นานที่สุดก่อน ไฟล์เล็กๆ ที่ block 50ms อาจไม่คุ้มค่าแก้ ดูค่า "potential savings" ที่ PageSpeed แสดง

ทำให้เว็บโหลดเร็วขึ้น

Render-blocking resources เป็นปัญหาที่แก้ได้และเห็นผลชัด ถ้าต้องการทีมที่ช่วย optimize เว็บ ให้ PageSpeed สูงและ Core Web Vitals ผ่าน — คุยกับเรา

บทความแนะนำ