แก้ 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 อาจใช้ async ได้ -->
<script async src="https://example.com/ads.js"></script>
<!-- 4) ฟอนต์: preconnect + preload + swap -->
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="preload" as="font" href="/fonts/Inter-Var.woff2" type="font/woff2" crossorigin>
<style>@font-face{font-family:Inter;src:url(/fonts/Inter-Var.woff2) format('woff2');font-display:swap;}</style>
<!-- 5) รูป LCP: preload + ไซส์ชัด -->
<link rel="preload" as="image" href="/img/hero.avif" imagesizes="100vw" imagesrcset="/img/hero.avif 1x, /img/hero@2x.avif 2x">
<img src="/img/hero.avif" alt="Hero" width="1280" height="720" decoding="async" fetchpriority="high">
เวิร์กโฟลว์ 6 ขั้น (ทำจริงในโปรเจกต์)
- วัดปัจจุบันด้วย Lighthouse/PageSpeed Insights (มือถือก่อน)
- ลิสต์ไฟล์ CSS/JS ที่บล็อก → ตัด critical CSS สำหรับพับแรก
- Inline critical CSS + โหลด CSS ที่เหลือแบบ async
- ใส่
defer/async ให้ JS ตามการพึ่งพา, ย้ายสคริปต์ลงท้าย
- เพิ่ม
preconnect/preload ให้ฟอนต์/รูป LCP/สคริปต์สำคัญ
- ทดสอบซ้ำ ดู LCP/INP/CLS และปรับปรุงจนผ่านเกณฑ์
คำแนะนำเพิ่มเติม (Webflow/ทั่วไป)
- วางโค้ด Head สำหรับ preconnect/preload และ critical CSS
- วางโค้ด Footer สำหรับสคริปต์ที่ใช้
defer
- รวมไฟล์/ลบโค้ดที่ไม่ใช้, ตรวจ third-party ที่หนัก (แท็ก/แชต/วิเคราะห์)
อ้างอิงภายนอก (มาตรฐาน/แนวทาง)
บริการที่เกี่ยวข้อง (Internal Links)
อ่านต่อ (บทความที่เกี่ยวข้อง)
FAQ (People Also Ask)
ควรเลือก async หรือ defer สำหรับ JS?
ส่วนใหญ่ใช้ defer กับสคริปต์ที่อ้าง DOM เพราะจะรันหลังพาร์สเสร็จและรักษาลำดับ; async เหมาะกับสคริปต์อิสระ (เช่น แท็กวิเคราะห์/โฆษณา)
Critical CSS ต้องใหญ่แค่ไหน?
เฉพาะองค์ประกอบพับแรก (layout/typography/สีหลัก) ปกติไม่เกินไม่กี่ KB เพื่อหลีกเลี่ยงบวม
แก้ฟอนต์เว็บให้ไม่บล็อกอย่างไร?
ใช้ preconnect ต้นทางฟอนต์, preload ไฟล์หลัก, และ font-display:swap เพื่อลด FOIT/FOUT
อัปเดตล่าสุด: 24 Aug 2025
เกี่ยวกับผู้เขียน
Vision X Brain — ทีม Website/SEO/CRO & Webflow ที่ช่วยธุรกิจทำเว็บให้เร็ว น่าเชื่อถือ และคอนเวิร์ตสูง เราออปติมाइซ์ CWV, วางสคีมา และปรับสถาปัตยกรรมคอนเทนต์ให้เติบโตอย่างยั่งยืน
