🔥 แค่ 5 นาที เปลี่ยนมุมมองได้เลย

วินิจฉัยและแก้ไข Render-Blocking Resources เพื่อเพิ่มคะแนน PageSpeed

June 30, 2025

ยาวไป อยากเลือกอ่าน?

แก้ Render-Blocking Resources โดย: แยก critical CSS แล้ว inline, โหลด CSS ที่เหลือแบบ async, ใส่ defer/async ให้สคริปต์ที่ไม่จำเป็นตอนแรก, preload ฟอนต์/รูป LCP และ preconnect ต้นทางสำคัญ จากนั้นวัด LCP/INP/CLS ด้วย Lighthouse/PSI และปรับซ้ำจนผ่านเกณฑ์.

Fix Render-Blocking Resources ให้คะแนน PageSpeed พุ่ง (2025)

เป้าหมาย ทำให้ “พับแรก” (above-the-fold) เร็วและวาดจอได้ทันที โดยไม่ต้องรอ CSS/JS ที่ไม่จำเป็น วิธีด้านล่างนี้ทำได้กับทุกสแตก และยิ่งเข้าท่ากับสแตติกไซต์/เว็บที่คุมโค้ดได้ เช่น Webflow, Headless, หรือธีมที่แก้ได้

ทำไมถึงช้า? (อะไรที่บล็อกเรนเดอร์)

ตัวการ	สัญญาณ	ผลกระทบต่อ CWV	แนวทางแก้
CSS ไฟล์ใหญ่/หลายไฟล์	PSI ชี้ “Eliminate render-blocking resources”	LCP ช้า, FCP ช้า	Critical CSS inline, โหลดส่วนที่เหลือแบบ async
JS บนหัวหน้า (blocking)	สคริปต์ไม่มี `defer/async`	LCP/INP แย่	ย้ายลงท้าย, ใส่ `defer`, แยกโค้ด
ฟอนต์เว็บ	ไฟล์ฟอนต์โหลดช้า/คิวรอ	LCP/CLS จาก FOIT/FOUT	`preconnect`, `preload`, `font-display:swap`
ภาพฮีโร่ LCP	ไม่ preload/ไม่มีขนาดชัด	LCP ช้า/CLS ขยับ	`preload` + ใส่ width/height อย่างถูกต้อง

เช็กลิสต์แก้แบบเร็ว

หัวข้อ	ทำอะไร	ตัวอย่าง/หมายเหตุ
Critical CSS	ดึงสไตล์ที่จำเป็นกับพับแรกมา inline	`<style>/* critical */ ... </style>`
Async CSS	โหลดไฟล์ที่เหลือแบบไม่บล็อก	`<link rel="preload" as="style" href="app.css" onload="this.rel='stylesheet'">`
Defer JS	เลื่อนสคริปต์ที่ไม่จำเป็นตอนแรก	`<script src="app.js" defer></script>`
Preconnect/Preload	อุ่นการเชื่อมต่อ/ลำดับโหลดสิ่งสำคัญ	`<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>`
Fonts	ลด FOIT/FOUT	`@font-face{font-display:swap}`

โค้ดตัวอย่างที่ใช้บ่อย

<!-- 1) Inline critical CSS (ย่อให้สั้นและเฉพาะพับแรก) -->
<style>/* critical */ header{display:grid} .hero{min-height:60vh} ... </style>

<!-- 2) โหลด CSS ที่เหลือแบบ async -->
<link rel="preload" href="/assets/app.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
<noscript><link rel="stylesheet" href="/assets/app.css"></noscript>

<!-- 3) เลื่อน JS ที่ไม่จำเป็นตอนแรก -->
<script defer src="/assets/app.js"></script>
<!-- สำหรับสคริปต์ที่ไม่พึ่งพา DOM อาจ

ลูกค้าบอกเลยว่าเว็บใหม่ ทำให้น่าเชื่อถือขึ้นแบบก้าวกระโดด

หลังรีแบรนด์กับ Vision X Brain ยอดขายพุ่ง x3 ภายใน 2 เดือน!