Lighthouse 100 ทำยังไง? คู่มือทำเว็บผ่าน 100/100/100/100 ปี 2026
Lighthouse คือเครื่องมือวัดคุณภาพเว็บของ Google ครอบคลุม Performance, Accessibility, Best Practices, SEO บทความอธิบายวิธี optimize ให้ได้ 100/100/100/100 ทั้ง WordPress และ Next.js
คำตอบสั้น: Lighthouse คือเครื่องมือ open-source ของ Google ที่วัดคุณภาพเว็บ 4 หมวด: Performance, Accessibility, Best Practices, SEO คะแนนเต็ม 100/100 ต่อหมวด เว็บที่ผ่าน 100/100/100/100 มีโอกาส rank ดีกว่าและ user experience ดีกว่ามาก
Lighthouse 100 ไม่ใช่ “เป้าหมายในตัวเอง” — แต่เป็น proxy สำหรับ web quality ที่ Google ใช้ตัดสิน ranking โดยตรงผ่าน Page Experience Signal บทความนี้อธิบายวิธีไล่ score แต่ละหมวดให้ผ่าน 100
Lighthouse คืออะไร?
Lighthouse คือ open-source automation tool ของ Google ที่ build เข้าใน Chrome DevTools + PageSpeed Insights + CI/CD pipelines วัดคุณภาพเว็บผ่าน lab simulation (ไม่ใช่ field data)
Key insight: Lighthouse score เป็น lab data — ไม่ใช่สิ่งที่ Google ใช้ rank โดยตรง Google ใช้ field data จาก CrUX (real user) แต่ผ่าน Lighthouse 100 = ฐานที่ดีต่อ field data
4 หมวดที่ต้องผ่าน 100
| หมวด | น้ำหนัก | สำคัญต่อ SEO |
|---|---|---|
| Performance | สูงสุด | ✓ ผ่าน Core Web Vitals |
| SEO | สูง | ✓ ผ่าน Crawlability + meta |
| Accessibility | กลาง | ทางอ้อม + UX |
| Best Practices | กลาง | ทางอ้อม + Security |
Performance 100 ทำยังไง?
Performance score คำนวณจาก 5 metrics: LCP (25%, <2.5s), TBT (30%, <200ms), CLS (25%, <0.1), FCP (10%, <1.8s), Speed Index (10%, <3.4s)
10 จุดที่ต้องทำเพื่อ Performance 100
- Preload LCP image ด้วย
<link rel="preload" as="image" fetchpriority="high"> - Inline critical CSS ใน head
- Defer non-critical CSS
- Defer/async ทุก script ที่ไม่ใช่ critical
- Use modern image formats (WebP/AVIF)
- Set explicit width/height ทุก img/video → ลด CLS
- Self-host fonts + preload + display:swap
- Code splitting — load JS เฉพาะหน้าที่ใช้
- Avoid large layout shifts
- Use CDN + HTTP/2 หรือ HTTP/3
WordPress plugins: WP Rocket, FlyingPress, Perfmatters
Next.js built-in tools: next/image, next/font, App Router (RSC), ISR + Vercel Edge
Accessibility 100 ทำยังไง?
Accessibility score วัด WCAG 2.1 AA compliance:
- ทุก
<img>มี alt attribute - Form input มี label associated
- Color contrast ratio ≥ 4.5:1 สำหรับ body text
- Semantic HTML — ใช้
<button>,<nav>,<main> - ARIA labels เฉพาะที่จำเป็น
- Skip link สำหรับ keyboard nav
- Lang attribute
<html lang="th"> - Heading hierarchy h1 → h2 → h3 ไม่กระโดด
Best Practices 100 ทำยังไง?
- HTTPS เท่านั้น (no mixed content)
- ไม่มี vulnerable JS libraries — update jQuery, lodash, scan ผ่าน
npm audit - Image aspect ratio ตรง
- ไม่ใช้ deprecated APIs
- CSP (Content Security Policy) header
- Permissions Policy header เปิดเฉพาะ feature ที่ใช้
- Console error เป็น 0
SEO 100 ทำยังไง?
<title>tag ไม่ว่าง + unique- Meta description ไม่ว่าง
- robots.txt valid
- Indexable (no noindex meta)
- Canonical tag
- Hreflang ถูก (ถ้ามี multilingual)
- Tap targets ใหญ่พอ (≥48×48px)
- Crawlable links
- Structured data validate
- Mobile viewport meta
Lighthouse 100 ในเครื่อง vs ใน production
| สภาพ | Score | Why |
|---|---|---|
localhost |
100/100/100/100 ง่าย | ไม่มี network latency |
| Vercel preview | 95-100 | edge cache คุ้ม |
| Production + CDN | 90-100 | ขึ้นกับ user location |
| Production + heavy plugin | 60-85 | overhead เยอะ |
| Mobile + 4G | -10 to -15 จาก desktop | throttling |
Insight: Score 100 ใน lab ไม่ได้แปลว่าผ่าน CWV ใน production ต้องดู CrUX field data ใน GSC ด้วย
ทำเว็บใหม่ที่ Lighthouse 100 ตั้งแต่ build แรก
การ retrofit เว็บเดิมให้ผ่าน 100 ทุกหมวดเป็นไปได้แต่ใช้เวลานาน วิธีที่ scalable ที่สุดคือ build บน stack ที่ออกแบบมาเพื่อ Lighthouse 100 ตั้งแต่ต้น (Next.js + Vercel หรือ Astro + Cloudflare)
ที่ Hashbox เราใช้ บริการรับทำเว็บไซต์ SEO-Ready ที่บังคับ Lighthouse 95+ Mobile / 100 Desktop เป็น Build Gate ใน CI — ไม่ผ่าน = ไม่ deploy
ดูเพิ่ม: LCP คือ? วิธีแก้ · Core Web Vitals คือ? · Schema Markup คือ?
FAQ
Lighthouse score เป็น ranking factor ของ Google ไหม?
ไม่โดยตรง · Google ใช้ field data จาก CrUX แต่ Lighthouse 100 = พื้นฐานที่ทำให้ CWV field ผ่านง่าย
Lighthouse 100 ทำได้ทุกเว็บไหม?
ทำได้ แต่ WordPress + heavy plugin อาจติด 92-98 · Next.js/Astro บน Vercel/Cloudflare ทำ 100/100/100/100 ได้ง่าย
วัด Lighthouse ที่ไหนดี?
PageSpeed Insights · Chrome DevTools Lighthouse tab · WebPageTest
Mobile score ต่ำกว่า Desktop ทำไม?
Lighthouse throttle mobile: 4G + slower CPU — สะท้อน user จริงบนมือถือ
Cloudflare APO ช่วย Lighthouse แค่ไหน?
WordPress: TTFB ลด → LCP/TBT ดีขึ้น → Performance +15-25 points
ราคา service ทำให้ Lighthouse 100?
Audit + fix: 30,000-80,000 บาท · Rebuild ใหม่: 80,000+ บาท ดู SEO-Ready pricing
สรุป: Lighthouse 100/100/100/100 คือเป้าหมาย web quality ที่ทำได้ผ่านการ optimize Performance, Accessibility, Best Practices, SEO ครบทุกด้าน Next.js + Vercel ทำได้สะดวกที่สุด · WordPress ทำได้ถึง 95+ ถ้า config ถูก
ให้ทีมช่วยดูโจทย์นี้ต่อ
ส่งเว็บไซต์หรือ brief ที่กำลังทำอยู่ให้เราช่วยชี้จุดที่ควรแก้ก่อน ทั้งด้าน SEO, conversion, tracking และ AI workflow