Lighthouse 100 ทำยังไง? คู่มือทำเว็บผ่าน 100/100/100/100 ปี 2026

คำตอบสั้น: Lighthouse คือเครื่องมือ open-source ของ Google ที่วัดคุณภาพเว็บ 4 หมวด: Performance, Accessibility, Best Practices, SEO คะแนนเต็ม 100/100 ต่อหมวด เว็บที่ผ่าน 100/100/100/100 มีโอกาส rank ดีกว่าและ user experience ดีกว่ามาก

ถ้าเพิ่งเริ่มทำ SEO อ่านภาพรวมทั้งระบบก่อนได้ที่ SEO คืออะไร? คู่มือฉบับ 2026 — บทความนี้เจาะลึกเสาเดียวในสี่เสานั้น

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

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

1. Preload LCP image ด้วย <link rel="preload" as="image" fetchpriority="high">
2. Inline critical CSS ใน head
3. Defer non-critical CSS
4. Defer/async ทุก script ที่ไม่ใช่ critical
5. Use modern image formats (WebP/AVIF)
6. Set explicit width/height ทุก img/video → ลด CLS
7. Self-host fonts + preload + display:swap
8. Code splitting — load JS เฉพาะหน้าที่ใช้
9. Avoid large layout shifts
10. 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:

1. ทุก <img> มี alt attribute
2. Form input มี label associated
3. Color contrast ratio ≥ 4.5:1 สำหรับ body text
4. Semantic HTML — ใช้ <button>, <nav>, <main>
5. ARIA labels เฉพาะที่จำเป็น
6. Skip link สำหรับ keyboard nav
7. Lang attribute <html lang="th">
8. Heading hierarchy h1 → h2 → h3 ไม่กระโดด

Best Practices 100 ทำยังไง?

1. HTTPS เท่านั้น (no mixed content)
2. ไม่มี vulnerable JS libraries — update jQuery, lodash, scan ผ่าน npm audit
3. Image aspect ratio ตรง
4. ไม่ใช้ deprecated APIs
5. CSP (Content Security Policy) header
6. Permissions Policy header เปิดเฉพาะ feature ที่ใช้
7. Console error เป็น 0

SEO 100 ทำยังไง?

1. <title> tag ไม่ว่าง + unique
2. Meta description ไม่ว่าง
3. robots.txt valid
4. Indexable (no noindex meta)
5. Canonical tag
6. Hreflang ถูก (ถ้ามี multilingual)
7. Tap targets ใหญ่พอ (≥48×48px)
8. Crawlable links
9. Structured data validate
10. Mobile viewport meta

Lighthouse 100 ในเครื่อง vs ใน production

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 คือ?

อยากได้เว็บที่ Lighthouse 100 ตั้งแต่วันเปิดตัว? ทุกเว็บจากบริการรับทำเว็บไซต์ SEO-Readyของ Hashbox ต้องผ่าน Build Gate นี้ก่อน deploy — หรือส่ง URL เว็บเดิมมาตรวจฟรีที่ Website Audit

FAQ: คำถามที่พบบ่อยเรื่อง Lighthouse 100