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

Critical CSS คืออะไร? เทคนิคช่วยให้เว็บโหลดไวขึ้น

July 9, 2025

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

Critical CSS คือสไตล์ที่จำเป็นสำหรับการเรนเดอร์โฟลด์แรก ซึ่งอินไลน์ไว้ใน HTML เพื่อให้หน้าปรากฏเร็ว ลดการบล็อกการเรนเดอร์และค่า LCP จากนั้นโหลด CSS ที่เหลือแบบ non-blocking (preload/onload) แนวทางนี้ช่วยให้เว็บรู้สึกไวขึ้นโดยไม่เปลี่ยนดีไซน์เดิม.

Critical CSS คืออะไร? ทำไมช่วยให้เว็บ “รู้สึกไว” และ LCP ต่ำลง

ภาพรวมเร็วๆ CSS ปกติเป็น render-blocking เบราว์เซอร์ต้องดาวน์โหลด/พาร์สครบก่อนจะเพนต์หน้าจอ Critical CSS แยก “สไตล์ที่ต้องใช้ในโฟลด์แรก” ออกมาอินไลน์ทันที แล้วค่อยโหลดส่วนที่เหลือแบบไม่บล็อกการเรนเดอร์ ช่วยให้ LCP ลดลงและ UX ดีขึ้น

แนวทางทำงาน (Workflow สั้นๆ)

ระบุองค์ประกอบบนโฟลด์แรก (ฮีโร่, เมนู, เฮดไลน์, CTA)
ดึงสไตล์ที่ทำให้ส่วนเหล่านี้ “แสดงผลได้สมบูรณ์” มาเป็น Critical
อินไลน์ Critical CSS ใน <head> ของ HTML
โหลดไฟล์ CSS เต็ม แบบไม่บล็อก (เช่น preload + onload)
ตรวจ Core Web Vitals (โดยเฉพาะ LCP/INP/CLS) และปรับจูน

ตาราง: Critical CSS vs CSS ทั้งก้อน (สำหรับทีมธุรกิจ)

หัวข้อ	Critical CSS	โหลด CSS ทั้งก้อน	ผลต่อผู้ใช้/SEO
ความเร็วการแสดงผลแรก	แสดงเร็วทันที	รอโหลด/พาร์สครบ	LCP ต่ำลง โอกาสคอนเวิร์ตดีขึ้น
ความซับซ้อน	ต้องแยก/บำรุงสองส่วน	ง่ายกว่า	เพิ่มงาน Dev เล็กน้อยแลก UX ที่ดีกว่า
ความเสี่ยง FOUC/FOIT	ต่ำ (ถ้าครอบคลุมครบ)	อาจเกิด ถ้าไฟล์ใหญ่/ช้า	ลด “วาบ” ของสไตล์/ฟอนต์
TCO (12–24 เดือน)	จูนครั้งแรก แต่คุ้มต่อประสิทธิภาพ	บำรุงง่าย แต่เสียความเร็ว	เว็บที่เน้นรายได้/ลีดมักคุ้มทำ Critical

งบขนาด (Budget) ที่แนะนำ

ชนิดหน้า	ส่วนที่มักเป็น Critical	งบขนาด (ประมาณ)	หมายเหตุ
หน้าโฮม/แลนดิ้ง	ฮีโร่, เมนู, เฮดไลน์, CTA, สเกลลิ่งคอนเทนเนอร์	8–20 KB	เลี่ยงยูทิลิตีที่ไม่ใช้จริงในโฟลด์แรก
หน้าบทความ	เฮดเดอร์, ชื่อเรื่อง, byline, บล็อกข้อความ, CTA	6–15 KB	แยกสไตล์ตัวหนังสือ/ตารางที่จำเป็น
หน้าบริการ/สินค้า	ฮีโร่, การ์ดราคา/คุณสมบัติ, CTA	8–18 KB	รูปฮีโร่ควรเป็น LCP ที่โหลด/แคชดี

โค้ดตัวอย่าง: อินไลน์ Critical + โหลด CSS ที่เหลือแบบ non-blocking

<!-- 1) Inline Critical CSS ใน <head> -->
<style>/* critical.css (ย่อแล้ว) */
  :root{--brand:#1e3a8a}
  body{margin:0;font:16px/1.6 system-ui,-apple-system,Segoe UI,Roboto}
  .container{max-width:1120px;margin:0 auto;padding:0 16px}
  header[role="banner"]{display:flex;align-items:center;justify-content:space-between;padding:12px 0}
  .hero{padding:56px 0}
  .btn-primary{display:inline-block;padding:10px

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

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