Blog
PageSpeed
วินิจฉัยและแก้ไข Render-Blocking Resources เพื่อเพิ่มคะแนน PageSpeed
🔥 แค่ 5 นาที เปลี่ยนมุมมองได้เลย

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

By Tanakit Chaithip
June 30, 2025
ยาวไป อยากเลือกอ่าน?
PageSpeed

แก้ 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 อาจ
แชร์

Recent Blog

เคล็ดลับการออกแบบเว็บไซต์ด้วย Webflow: เพิ่มความเร็วและประสิทธิภาพทันที
เคล็ดลับการออกแบบเว็บไซต์ด้วย Webflow: เพิ่มความเร็วและประสิทธิภาพทันที

เว็บไซต์ของคุณช้าอยู่หรือเปล่า? หากใช่ นี่คือปัญหาที่คุณต้องแก้ไขเพื่อให้ลูกค้าไม่ออกจากเว็บไซต์ อ่านต่อเพื่อค้นพบเคล็ดลับการออกแบบที่ช่วยเพิ่มความเร็ว!

ดูเพิ่มเติม
5 เหตุผลที่เว็บไซต์ของคุณควรปรับปรุงเพื่อเพิ่มผลลัพธ์ทันที
5 เหตุผลที่เว็บไซต์ของคุณควรปรับปรุงเพื่อเพิ่มผลลัพธ์ทันที

เคยรู้สึกว่าเว็บไซต์ของคุณไม่ดึงดูดลูกค้าไหม? บทความนี้จะช่วยคุณหาวิธีปรับปรุงและทำให้ลูกค้าอยู่ต่อมากขึ้น อ่านต่อ...

ดูเพิ่มเติม
5 วิธีเร่งความเร็วเว็บไซต์ให้โหลดทันใจ
5 วิธีเร่งความเร็วเว็บไซต์ให้โหลดทันใจ

เคยรู้สึกหงุดหงิดเมื่อเว็บไซต์ของคุณโหลดช้าไหม? ปัญหานี้สามารถแก้ไขได้ด้วยเทคนิคที่เราจะแบ่งปัน อ่านต่อเพื่อค้นหาวิธีที่ทำให้เว็บคุณเร็วขึ้น!

ดูเพิ่มเติม