Blog
Critical CSS
Critical CSS คืออะไร? เทคนิคช่วยให้เว็บโหลดไวขึ้น ลด LCP
🔥 แค่ 5 นาที เปลี่ยนมุมมองได้เลย

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

By Tanakit Chaithip
July 9, 2025
ยาวไป อยากเลือกอ่าน?
Critical CSS

CSS ปกติเป็น render-blocking resource — เบราว์เซอร์ต้องดาวน์โหลดและ parse CSS ทั้งไฟล์ก่อนจะแสดงหน้าจอ ถ้าไฟล์ CSS ใหญ่ 200KB+ ผู้ใช้จะเห็นหน้าว่างนานขึ้น Critical CSS คือเทคนิคที่แยกสไตล์จำเป็นสำหรับ above-the-fold ออกมา inline ทันที แล้วโหลดส่วนที่เหลือทีหลัง

บทความนี้จาก Vision X Brain สรุปวิธีทำ Critical CSS — ตั้งแต่แนวคิด เครื่องมือ ขั้นตอน จนถึงการวัดผลผ่าน Core Web Vitals

Critical CSS คืออะไร

Critical CSS คือ CSS ที่จำเป็นสำหรับ render above-the-fold content (ส่วนที่เห็นก่อนเลื่อน) โดย:

  • Inline: ใส่ Critical CSS ใน <style> tag ใน <head> ของ HTML
  • Defer: โหลดไฟล์ CSS เต็มแบบ non-blocking (preload + onload)
  • ผลลัพธ์: หน้าแสดงผลได้เร็วขึ้น โดยไม่ต้องรอ CSS ทั้งไฟล์

ทำไม Critical CSS ช่วยเรื่อง Performance

ด้านCritical CSSCSS ทั้งไฟล์ผลต่อ UX/SEO
First Paintแสดงเร็วทันทีรอโหลด/parse ครบก่อนLCP ต่ำลง conversion ดีขึ้น
FOUC Riskต่ำ (ถ้าครอบคลุมครบ)อาจเกิดถ้าไฟล์ใหญ่/ช้าลดอาการ "หน้าว่างแล้ววาบ"
Complexityต้องแยกและ maintain 2 ส่วนง่ายกว่าเพิ่มงาน dev เล็กน้อย แลก UX ดีขึ้น
เหมาะกับเว็บที่เน้น conversion/SEOเว็บเล็ก CSS ไม่ใหญ่เว็บธุรกิจควรทำ Critical CSS

วิธีทำ Critical CSS — ขั้นตอน

1. ระบุ Above-the-fold Elements

ดูว่าหน้าจอแรก (ก่อนเลื่อน) มี element อะไรบ้าง:

  • Header / Navigation
  • Hero section (พาดหัว, CTA, ภาพหลัก)
  • Logo, ไอคอน
  • Typography ที่ใช้ใน fold แรก

2. ดึง Critical CSS

ใช้เครื่องมืออัตโนมัติ:

  • Critical (npm package): generate Critical CSS จาก URL โดยอัตโนมัติ
  • Penthouse: headless Chrome-based Critical CSS generator
  • PurgeCSS: ลบ unused CSS ก่อน แล้วค่อยแยก Critical

3. Inline + Defer

<!-- 1) Inline Critical CSS ใน head -->
<style>
  /* Critical CSS สำหรับ above-the-fold */
  body { margin:0; font:16px/1.6 system-ui, sans-serif; }
  .header { display:flex; align-items:center; padding:12px 0; }
  .hero { padding:56px 0; }
  .btn-primary { display:inline-block; padding:12px 24px;
    background:#1e3a8a; color:#fff; border-radius:8px; }
</style>

<!-- 2) โหลด CSS เต็มแบบ non-blocking -->
<link rel="preload" href="/style.css" as="style"
      onload="this.onload=null;this.rel='stylesheet'">
<noscript><link rel="stylesheet" href="/style.css"></noscript>

4. วัดผล

  • Lighthouse: ดู "Eliminate render-blocking resources" — ควรหายไปหลังทำ Critical CSS
  • WebPageTest: เทียบ filmstrip ก่อน/หลัง — first paint เร็วขึ้นเท่าไร
  • CrUX: ดู LCP จาก real users — เป้าหมาย LCP < 2.5 วินาที

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

ชนิดหน้าส่วนที่เป็น Criticalขนาดแนะนำ
หน้าแรก / LandingHeader, Hero, CTA, container8-20 KB
หน้าบทความHeader, ชื่อเรื่อง, byline, body text6-15 KB
หน้าบริการ/สินค้าHeader, Hero, การ์ดราคา, CTA8-18 KB

ยิ่ง Critical CSS เล็ก = ยิ่ง inline ได้เร็ว ไม่ควรเกิน 14KB (ขนาด 1 TCP round-trip)

Critical CSS กับ Webflow

Webflow จัดการ CSS อัตโนมัติผ่าน build process แต่สามารถ optimize เพิ่มได้:

  • ลด unused classes — ลบ style ที่ไม่ใช้ออก
  • ใช้ Variable Fonts แทน font หลายไฟล์ — ลด render-blocking font requests
  • Preload hero image — ให้ LCP element โหลดก่อน
  • ลด third-party scripts — ทุก external CSS/JS ที่ render-blocking = LCP ช้าลง

ข้อควรระวัง

  • FOUC (Flash of Unstyled Content): ถ้า Critical CSS ครอบคลุมไม่ครบ จะเห็น content กระโดดเมื่อ CSS เต็มโหลดเสร็จ — ทดสอบบน slow 3G
  • Maintenance: ถ้า design เปลี่ยน ต้อง regenerate Critical CSS — ตั้ง CI/CD pipeline
  • อย่า inline CSS ทั้งไฟล์: ถ้า CSS ใหญ่ 200KB การ inline ทั้งหมดจะทำให้ HTML ใหญ่เกินไป — inline แค่ critical

ถ้าต้องการเว็บที่โหลดเร็วและ Core Web Vitals ผ่าน — ปรึกษา Vision X Brain

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

Critical CSS ต่างจาก CSS Minification ยังไง?

CSS Minification แค่ลดขนาดไฟล์ (ลบ whitespace/comments) แต่ยัง render-blocking อยู่ Critical CSS แยกสไตล์จำเป็นออกมา inline ทำให้หน้าแสดงผลได้โดยไม่ต้องรอไฟล์ CSS — ทำทั้ง 2 อย่างควบคู่กันดีที่สุด

เว็บเล็กต้องทำ Critical CSS ไหม?

ถ้า CSS ทั้งไฟล์เล็กกว่า 20KB อาจไม่จำเป็น เพราะ overhead ของการ maintain 2 ส่วนไม่คุ้ม แต่ถ้า CSS ใหญ่กว่า 50KB และ Lighthouse แจ้ง render-blocking resources ควรทำ

Critical CSS ช่วย SEO ไหม?

ช่วยทางอ้อม LCP ที่ดีขึ้นเป็น Core Web Vitals ranking factor ของ Google หน้าที่โหลดเร็วได้ UX ดีกว่า bounce rate ต่ำกว่า engagement สูงกว่า

ใช้เครื่องมืออะไร generate Critical CSS?

Critical (npm) เหมาะกับ build pipeline ส่วน Penthouse เหมาะกับ headless Chrome-based workflow ถ้าใช้ WordPress มี plugin อย่าง Autoptimize ที่ทำให้อัตโนมัติ

บทความแนะนำ

แชร์

Recent Blog

ทำไมการปรับปรุงเว็บไซต์ E-commerce ถึงช่วยเพิ่มยอดขายได้ทันที
ทำไมการปรับปรุงเว็บไซต์ E-commerce ถึงช่วยเพิ่มยอดขายได้ทันที

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

ดูเพิ่มเติม
5 เทคนิคการออกแบบเว็บไซต์สำหรับธุรกิจ Startups ที่ช่วยเพิ่มอัตราการแปลงลูกค้า
5 เทคนิคออกแบบเว็บไซต์ Startup ที่เพิ่มยอดขาย 2026

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

ดูเพิ่มเติม
ทำไมเลือก Webflow Design Development เพื่อเว็บไซต์ที่ใช้งานง่าย?
ทำไมเลือก Webflow Design Development เพื่อเว็บไซต์ที่ใช้งานง่าย?

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

ดูเพิ่มเติม