เชี่ยวชาญ Google Lighthouse: ทดสอบและเพิ่มประสิทธิภาพเว็บไซต์

Speed เว็บ = Ranking factor สำคัญ User ชอบเว็บเร็ว → Conversion สูง Google Rank เว็บเร็วสูงกว่า TechCult โหลดเร็ว (เฮฮ่า) หากกังวลเว็บช้า → Google Lighthouse ช่วยทดสอบ Performance

Google Lighthouse คืออะไร?

Open-source Automated Tool สำหรับ Developer/Owner ประเมินคุณภาพ Web Page: Performance, Accessibility, Best Practices, SEO (Mobile + Desktop) → รายงานรายละเอียด + คำแนะนำ Optimize

4 วิธีรัน Lighthouse

Method 1: Chrome Extension

1. Chrome Web Store → Lighthouse Extension → Add to Chrome
2. Add extension
3. เปิดเว็บที่ต้องการ → Extension (Puzzle) → Lighthouse → Generate report

Method 2: PageSpeed Insights

ใช้ Lighthouse เป็น Engine

1. เข้า PageSpeed Insights
2. ใส่ URL → Analyse

ได้ Chrome User Experience Report (Real User Data) + Lighthouse Score (Mobile/Desktop)

Method 3: DevTools Panel

เหมาะสำหรับ Localhost / Site ที่ต้อง Login

1. เปิดเว็บ → Right-click → Inspect
2. More tabs (>>) → Lighthouse
3. Analyze page load → รอผล

Tip: เลือก Device ให้ถูก + เปิด Categories ทั้งหมด

3 Testing Modes:

• Navigation: Overall (Performance, Accessibility, SEO)
• Timespan: วัดโหลด/โต้ตอบ ต้อง Interact ระหว่างรัน
• Snapshot: Skor หน้าปัจจุบัน

Method 4: Command Line (Node Module)

ต้องมี Node.js

npm install -g lighthouse
lighthouse --view 
lighthouse --help

Lighthouse คำนวณ Score ยังไง?

รวม 5 หมวด: Performance, Accessibility, Best Practices, SEO, PWA → Score 0-100

Performance Metrics

• FCP (First Contentful Paint): Element แรกโผล่กี่ ms
• LCP (Largest Contentful Paint): Element ใหญ่สุดมองเห็นได้กี่ ms
• CLS (Cumulative Layout Shift): Layout Shift ระหว่างโหลด (ต่ำ = เสถียร)
• TBT (Total Blocking Time): Main Thread Blocked นานแค่ไหน
• Speed Index: เนื้อหาทั้งหมดมองเห็นครบกี่ ms

Weighted Average → Performance Score (Metric Scores ไม่แสดงใน Report → กด See Calculator ดูรายละเอียด)

Accessibility

User-centric: ง่ายสำหรับพิการ → Pass/Fail เท่านั้น (ไม่มี Partial)

• Alt Text รูปภาพครบ ถูกต้อง
• Semantic HTML (headings, lists)
• Color Contrast ตาม WCAG

Best Practices

Web Dev Standards: Modern JS, HTTPS, Minification, Security Headers, robots.txt

• Avoid Large JS Libraries
• Avoid Unused CSS
• Enable Text Compression
• Eliminate Render-blocking Resources
• Leverage Browser Caching
• Serve Static Assets with Efficient Cache Policy

SEO

Optimize สำหรับ Search Engine: Meta Description, Title Tags, Keywords, Structure

• Document Title, Description, Headings, Images, Links, Meta Description, Robots.txt

อ่านผลยังไง?

• 0-49 (แดง): Poor
• 50-89 (ส้ม): Needs Improvement
• 90-100 (เขียว): Good

Score คลาดเคลื่อนได้ เพราะ: ทุกรัน = Single Page Load, Dynamic Content (Ads), Extensions, Hardware/Network ต่างกัน

ปรับปรุง Lighthouse Score

Focus Performance ก่อน → เว็บเร็ว = UX ดี + SEO ดี → ค่อย Focus Accessibility, SEO, Best Practices

Bonus Tips สำหรับมือใหม่

• อย่าหงุดหงิดกับ Recommendations เยอะ → ทำจากสำคัญสุดก่อน
• ใช้ Report ติดตาม Progress → Score ควรขึ้นเรื่อยๆ
• Test หลาย Device/Browser → Lighthouse = Single Test

หวังว่าคู่มือนี้ช่วยเข้าใจ Google Lighthouse ทดสอบ Performance เว็บ ถามเพิ่มได้ด้านล่างครับ