เพิ่มความเร็วเว็บไซต์: เทคนิคที่ทำให้เว็บโหลดใน 1 วินาที

ความเร็วเว็บส่งผลตรงต่อ SEO และ conversion rate ลูกค้าวิจัยพบว่า 1 วินาทีช้าลง = ยอดขายลด 7% บทความนี้คือเทคนิคที่ผมใช้จริง

1. วัดก่อนแก้ — Core Web Vitals

Google วัด 3 ตัวหลัก:

• LCP (Largest Contentful Paint) — เวลาที่เนื้อหาหลักโหลดเสร็จ ต้อง < 2.5 วินาที
• FID (First Input Delay) — เวลาที่เว็บตอบสนองการคลิกแรก ต้อง < 100ms
• CLS (Cumulative Layout Shift) — การกระตุกของหน้าจอ ต้อง < 0.1

2. ใช้ Next.js Image Component

รูปภาพคือสาเหตุอันดับ 1 ของเว็บช้า Next.js มี next/image ที่:

• แปลงรูปเป็น WebP อัตโนมัติ (เล็กลง 30-50%)
• Lazy load — โหลดรูปเมื่อใกล้เข้าหน้าจอ
• กำหนดขนาดล่วงหน้า ป้องกัน CLS
• Responsive — ส่งรูปขนาดเหมาะกับแต่ละ device

3. Code Splitting และ Lazy Loading

ไม่โหลดทุกอย่างพร้อมกัน โหลดเฉพาะที่จำเป็นตอนแรก ที่เหลือโหลดทีหลัง:

• ใช้ dynamic import() สำหรับ component หนัก
• Next.js แบ่งหน้าอัตโนมัติ แต่ละหน้าโหลดเฉพาะ code ของตัวเอง
• library จากภายนอกโหลดเฉพาะเมื่อใช้งาน

4. Font Optimization

ฟอนต์เป็นอีกสาเหตุของเว็บช้า:

• ใช้ next/font เพื่อโหลดฟอนต์จาก Google Fonts แบบ self-hosted
• ใช้ font-display: swap แสดงฟอนต์สำรองก่อน ไม่บล็อกการโหลด
• โหลดเฉพาะ weight ที่ใช้ ไม่ต้องโหลดทั้ง family

5. Caching Strategy

• Static Generation — หน้าที่ไม่เปลี่ยนบ่อย สร้าง HTML ตอน build
• ISR (Incremental Static Regeneration) — อัปเดตหน้า static เป็นระยะ
• CDN — ใช้ Vercel/Cloudflare CDN กระจายเนื้อหาทั่วโลก

6. ลด JavaScript Bundle Size

• ตรวจ bundle ด้วย @next/bundle-analyzer
• เปลี่ยน library หนักเป็นทางเลือกเบากว่า
• Tree shaking — ไม่ import ส่วนที่ไม่ใช้

ผลลัพธ์จริง

เว็บลูกค้าที่ผมทำ หลัง optimize ได้คะแนน:

• Performance: 98-100
• Accessibility: 95-100
• SEO: 100
• LCP: 0.8-1.2 วินาที

สรุป: ความเร็วเว็บไม่ใช่เรื่องยาก แต่ต้องทั้งตอนเขียนโค้ดและตอน deploy ใช้ Next.js ช่วยได้เยอะมาก แต่ก็ต้องเข้าใจหลักการเบื้องหลัง

📌 อยากให้เว็บโหลดเร็วและติดอันดับ Google? ดู บริการทำเว็บไซต์ ของผม หรือ ปรึกษาฟรี ได้เลย