⚡ Speed is a Feature
ในโลกของ SEO ปี 2026 ความเร็วไม่ใช่แค่ "ทางเลือก" แต่มันคือ "ข้อบังคับ" ครับ Google ประกาศชัดเจนว่า User Experience (UX) เป็นปัจจัยหลักในการจัดอันดับ และตัววัด UX ที่เที่ยงตรงที่สุดก็คือ Core Web Vitals
ถ้าเว็บคุณโหลดช้าเกิน 3 วินาที ผู้ใช้ 53% จะกดออกทันที... นั่นหมายถึง Traffic หายไปครึ่งนึงก่อนที่เขาจะได้เห็นเนื้อหาของคุณด้วยซ้ำ!
มาดูกันว่า 3 ปีศาจที่เราต้องปราบมีอะไรบ้าง และ Next.js จะช่วยเราได้ยังไงครับ
🏎️ 1. LCP (Largest Contentful Paint) - ความเร็วในการโหลด
เป้าหมาย: น้อยกว่า 2.5 วินาที
LCP วัดว่า "เนื้อหาชิ้นใหญ่ที่สุด" (เช่น รูปหน้าปก หรือ Headline) โหลดเสร็จตอนไหน
✅ Next.js Solution: next/image
ตัวการหลักที่ทำ LCP พังคือ รูปภาพ ครับ Next.js มี <Image /> component ที่ช่วยเราได้มาก:
import Image from 'next/image'
export default function HeroImage() {
return (
<div className="relative h-[400px]">
<Image
src="/hero-banner.jpg"
alt="Hero Banner"
fill // ปรับขนาดอัตโนมัติ
priority // 🚀 บังคับโหลดทันที (LCP Booster!)
sizes="(max-width: 768px) 100vw, 50vw" // โหลดรูปเล็กถ้าจอเล็ก
className="object-cover"
/>
</div>
)
}
Senior Tip: ใส่ priority ให้กับรูปที่อยู่บนสุดของหน้า (Above the fold) เสมอครับ มันบอก Browser ว่า "หยุดทำอย่างอื่น แล้วโหลดรูปนี้ก่อน!"
🧱 2. CLS (Cumulative Layout Shift) - ความนิ่งของหน้าจอ
เป้าหมาย: น้อยกว่า 0.1
เคยไหมครับ? กำลังจะกดปุ่ม แต่จู่ๆ มีรูปโฆษณาโผล่มาดันปุ่มหนี ทำให้เรากดผิด... นั่นแหละคือ CLS Google เกลียดสิ่งนี้มาก เพราะมันน่ารำคาญสุดๆ
✅ Next.js Solution: Size & Font Optimization
- กำหนดขนาดรูปเสมอ: ถ้าใช้
<img>ธรรมดา ต้องใส่width/heightแต่ถ้าใช้next/imageมันจัดการจองพื้นที่ไว้ให้แล้ว (Placeholder) - ใช้
next/font: ฟอนต์โหลดช้าทำให้ข้อความขยับ (Flash of Unstyled Text)
import { Inter } from 'next/font/google'
// Next.js จะโหลดฟอนต์มาเก็บไว้ (Self-hosted) ไม่ต้องไปดึงจาก Google ทีหลัง
const inter = Inter({ subsets: ['latin'], display: 'swap' })
export default function RootLayout({ children }) {
return (
<html lang="en" className={inter.className}>
<body>{children}</body>
</html>
)
}
👆 3. INP (Interaction to Next Paint) - ความไวในการตอบสนอง
เป้าหมาย: น้อยกว่า 200 มิลลิวินาที
INP มาแทน FID (First Input Delay) ครับ มันวัดว่า "พอกดปุ่มแล้ว หน้าจอเปลี่ยนเร็วแค่ไหน" ถ้ากดแล้วหน่วงๆ เหมือนแล็ก (Lag) แปลว่า JavaScript เราทำงานหนักเกินไป
✅ Next.js Solution: Dynamic Import & Server Components
พยายามลด JavaScript (Client-side Bundle) ให้เหลือน้อยที่สุด
import dynamic from 'next/dynamic'
// 🐌 Heavy Component: โหลดเฉพาะตอนจะใช้จริง
const HeavyChart = dynamic(() => import('@/components/HeavyChart'), {
loading: () => <p>Loading Chart...</p>,
ssr: false // ไม่ต้องรันที่ Server
})
export default function Page() {
return (
<div>
<h1>Lightweight Page</h1>
{/* Chart จะโหลดทีหลัง ไม่ขวางการกดปุ่มของผู้ใช้ */}
<HeavyChart />
</div>
)
}
🏆 4. Lighthouse: กระจกวิเศษบอกคะแนน
ก่อน Deploy อย่าลืมเปิด Chrome DevTools -> Lighthouse แล้วกด Analyze page load นะครับ ถ้าทำตามข้างบน รับรองว่าต้องเห็น สีเขียว ทั้งแผงแน่นอน!
Performance ไม่ใช่แค่เรื่องเทคนิค แต่มันคือการ "ใส่ใจ" ผู้ใช้งานครับ เว็บเร็ว = ผู้ใช้มีความสุข = Google รักครับ 💚
Mission Accomplished
You've reached the end of this module. Time to apply these senior mindsets to your real-world projects!