💡 เริ่มต้นกับ Performance
⚠️ เว็บไซต์ช้า = เสียโอกาส!
📉 สถิติที่น่าตกใจ:
- 1 วินาที = สูญเสีย 7% conversion
ลูกค้าหายไป!
- 3 วินาที = 53% ออกจากเว็บ
ผู้คนไม่อดทนรอ
- Google ลดอันดับ SEO
เว็บช้า = อันดับแย่
✅ เว็บเร็ว = ข้อดีเพียบ:
- ลูกค้าซื้อมากขึ้น
- Google ให้อันดับดี
- ประหยัดค่า server
📊 Core Web Vitals (ตัวชี้วัดหลัก)
LCP
Largest Contentful Paint
เวลาที่เนื้อหาหลักแสดงครบ
✅ ดี: น้อยกว่า 2.5s
⚠️ ปรับปรุง: 2.5-4s
❌ แย่: มากกว่า 4s
FID/INP
First Input Delay
เวลาตอบสนองเมื่อผู้ใช้คลิก
✅ ดี: น้อยกว่า 100ms
⚠️ ปรับปรุง: 100-300ms
❌ แย่: มากกว่า 300ms
CLS
Cumulative Layout Shift
การเปลี่ยนแปลงเลย์เอาต์
✅ ดี: น้อยกว่า 0.1
⚠️ ปรับปรุง: 0.1-0.25
❌ แย่: มากกว่า 0.25
🛠️ เครื่องมือวัด Performance
เครื่องมือสำคัญที่ควรรู้จัก:
# 1. Lighthouse (ในเบราว์เซอร์) - เปิด Chrome DevTools (F12) - ไปที่แท็บ Lighthouse - คลิก "Generate report" # 2. PageSpeed Insights (ออนไลน์) https://pagespeed.web.dev/ # 3. Next.js Bundle Analyzer npm install --save-dev @next/bundle-analyzer # 4. Web Vitals ใน Next.js npm install web-vitals
🎯 ยินดีด้วย! คุณเรียนจบบทที่ 14 แล้ว
ตอนนี้คุณสามารถเพิ่มประสิทธิภาพเว็บไซต์ Next.js ให้เร็วขึ้นอย่างมีนัยสำคัญได้แล้ว! เว็บไซต์ของคุณจะโหลดเร็ว ประหยัดค่าใช้จ่าย และทำให้ผู้ใช้มีความสุขมากขึ้น