Web Performance Optimization เบื้องต้น

ความเร็วของเว็บไซต์ส่งผลโดยตรงต่อ user experience, conversion rate และ SEO โดย Google ใช้ Core Web Vitals เป็นส่วนหนึ่งของ ranking signal ตั้งแต่ปี 2021 Core Web Vitals ประกอบด้วย LCP (Largest Contentful Paint) ที่วัดความเร็วในการโหลด content หลัก, FID (First Input Delay) หรือ INP ที่วัด responsiveness และ CLS (Cumulative Layout Shift) ที่วัดความเสถียรของ layout เทคนิคที่ช่วยได้มากที่สุดคือการ optimize รูปภาพ ซึ่งมักเป็นสาเหตุหลักของหน้าเว็บที่โหลดช้า ควรใช้ format WebP หรือ AVIF, กำหนด width และ height ที่ถูกต้อง, และใช้ lazy loading สำหรับรูปที่ไม่อยู่ใน viewport แรก Code splitting และ lazy loading component ช่วยลด JavaScript ที่ต้องโหลดและ parse ตั้งแต่แรก โดยใช้ dynamic import ใน Next.js เพื่อแยก component ขนาดใหญ่ออกเป็น chunk แยกต่างหาก การตั้งค่า Cache-Control headers ที่เหมาะสมสำหรับ static assets ช่วยให้ browser cache ไฟล์ได้นานขึ้น ลดการ request ซ้ำ ซึ่ง Vercel ทำสิ่งนี้ให้อัตโนมัติสำหรับ Next.js