# Core Web Vitals 2026: คู่มือ INP, LCP, CLS เพิ่มความเร็วเว็บ Next.js สำหรับ SME ไทย
ตั้งแต่เดือนมีนาคม 2024 Google ได้แทนที่ FID (First Input Delay) ด้วย INP (Interaction to Next Paint) อย่างเป็นทางการ ทำให้แลนด์สเคปของ Web Performance เปลี่ยนไปอย่างสิ้นเชิง เว็บไซต์ที่เคยได้คะแนน "Good" อาจตกชั้นเป็น "Poor" ได้ทันทีในรายงาน Search Console เพราะ INP วัด ทุกการ interact ของผู้ใช้ ไม่ใช่แค่ครั้งแรกเหมือน FID
สำหรับทีม Dev ที่ใช้ Next.js เป็นหลักและทีม PM ที่ดูแลผลิตภัณฑ์ Digital ของ SME ไทย Core Web Vitals ไม่ใช่แค่ตัวเลขสำหรับวิศวกร — มันคือ Ranking Factor ของ Google ที่ส่งผลต่ออันดับการค้นหา และมีงานวิจัยจาก Deloitte ระบุว่าการลด LCP เพียง 0.1 วินาทีสามารถเพิ่ม Conversion Rate บน Mobile ได้ถึง 8.4%
บทความนี้จะอธิบายแก่นของ Core Web Vitals ปี 2026 ทั้ง 3 ตัว พร้อมขั้นตอนปรับปรุงเฉพาะสำหรับ Next.js 14/15 ที่ใช้ App Router + React Server Components — ครบจบในที่เดียว ไม่ต้องเสียเงินจ้าง Consultant
Core Web Vitals 3 ตัวที่ต้องรู้ในปี 2026
| Metric | วัดอะไร | เกณฑ์ "Good" | เปลี่ยนแปลงปี 2026 |
|---|---|---|---|
| LCP (Largest Contentful Paint) | เวลาที่ Element ใหญ่ที่สุดบนหน้าจอโหลดเสร็จ | ≤ 2.5s | เน้น Image/Video Optimization |
| INP (Interaction to Next Paint) | ความหน่วงในการตอบสนอง interact ของผู้ใช้ | ≤ 200ms | แทนที่ FID ตั้งแต่ 03/2024 |
| CLS (Cumulative Layout Shift) | ปริมาณ Element ที่กระโดดขณะโหลด | ≤ 0.1 | เพิ่มน้ำหนักใน Mobile |
ที่สำคัญ Google ใช้ข้อมูลจริงจาก Chrome User Experience Report (CrUX) ของผู้ใช้ใน 28 วันล่าสุด ดังนั้นการแก้ไขที่ทำวันนี้จะเริ่มเห็นผลใน Search Console ประมาณ 2-4 สัปดาห์หลังจากนั้น
INP คืออะไร และทำไมร้ายกว่า FID
INP วัดเวลาตั้งแต่ผู้ใช้คลิก/แตะ/พิมพ์ จนถึง next paint ของหน้าจอ — และเก็บค่าสูงสุดของทุก interaction ในช่วง session นั้น (98th percentile) ในขณะที่ FID วัดเฉพาะ first input
สาเหตุหลักที่ทำให้ INP สูงคือ:
ทีมที่ใช้ Next.js Pages Router เก่าควรพิจารณาย้ายไป App Router เพราะ React Server Components ตัด JavaScript bundle ออกจาก client ได้มาก ลด INP โดยอัตโนมัติ
ขั้นตอนปรับปรุง LCP บน Next.js
1. ใช้ next/image แทน img tag
Next.js Image Component จะสร้าง responsive srcset, แปลงเป็น AVIF/WebP, lazy-load อัตโนมัติ และส่ง priority hint ให้ browser
2. ทำ Hero Image ให้เป็น priority
ใส่ `priority` prop ใน Hero Image เพื่อให้ browser preload ก่อน — ลด LCP ได้ 200-500ms ทันที
3. ใช้ font-display: swap + next/font
ใช้ `next/font/google` เพื่อ self-host fonts จาก Google Fonts ลดการเรียก external และใช้ font-display: swap ป้องกัน FOIT (Flash of Invisible Text)
4. Cache & CDN
Deploy บน Vercel/Cloudflare Pages เพื่อใช้ Edge Network ทั่วโลก ลด TTFB ในไทยเหลือต่ำกว่า 100ms
5. ใช้ Streaming SSR
App Router รองรับ React Suspense + Streaming ทำให้ส่ง HTML ทยอยทีละส่วน ผู้ใช้เห็น Above-the-fold เร็วขึ้น
ขั้นตอนปรับปรุง INP บน Next.js
1. Code Splitting แบบ Aggressive
ใช้ `dynamic()` import สำหรับ Component หนัก เช่น Chart, Modal, Editor ที่ไม่ได้ใช้ทันที
2. ลด Hydration Cost
ย้าย Logic ไปฝั่ง Server Component (default ใน App Router) ใส่ `"use client"` เฉพาะ Component ที่จำเป็น
3. ใช้ React 19's useTransition
ห่อ State Update ที่หนักด้วย `startTransition()` เพื่อให้ React จัดลำดับใหม่และไม่บล็อก Main Thread
4. Defer Third-party Scripts
ใช้ `next/script` พร้อม strategy="lazyOnload" หรือ Partytown เพื่อย้าย analytics/ads scripts ไป Web Worker
5. ลด Event Listener Overhead
ใช้ Event Delegation บน Parent Element แทนการผูก listener กับ Element ลูกหลายตัว
ขั้นตอนปรับปรุง CLS บน Next.js
1. กำหนด width/height ให้ทุก Image และ Video
แม้ใช้ next/image อย่าลืมกำหนด width/height หรือใช้ fill prop พร้อมกำหนด aspect ratio ของ Parent Container
2. Reserve Space สำหรับ Ad/Embed
สร้าง wrapper div ที่มี min-height เท่ากับ ad slot ที่จะแสดง ป้องกัน layout shift เมื่อ ad โหลดเสร็จ
3. ใช้ size-adjust ใน Web Font
กำหนด `size-adjust`, `ascent-override`, `descent-override` ใน @font-face เพื่อให้ fallback font กิน space เท่ากับ web font
4. หลีกเลี่ยง Banner ที่ Insert Above
เลื่อน Cookie Banner / Promo Banner ลงมาด้านล่าง หรือใช้ `position: fixed` ไม่ให้ดัน Content เดิม
ตารางเปรียบเทียบเครื่องมือ Measure Web Vitals
| Tool | ประเภท Data | จุดเด่น | จุดสังเกต |
|---|---|---|---|
| PageSpeed Insights | Lab + Field | ฟรี, ใช้ CrUX จริง | Field data ต้องมี traffic พอ |
| Lighthouse CI | Lab | รัน Auto ใน CI/CD | ไม่สะท้อน real user |
| Web Vitals JS | Field (RUM) | วัด session จริงทุก user | ต้องส่งเข้า Analytics เอง |
| SpeedCurve | Field + Lab | Dashboard ครบ | ราคาเริ่ม $200/เดือน |
| Vercel Speed Insights | Field | ผูกกับ Vercel native | ใช้ได้เฉพาะบน Vercel |
โค้ดตัวอย่าง: เก็บ Web Vitals ส่งเข้า GA4
```javascript
// app/layout.tsx (Next.js 15 App Router)
import { Analytics } from '@vercel/analytics/react';
import { SpeedInsights } from '@vercel/speed-insights/next';
export default function RootLayout({ children }) {
return (
<html lang="th">
<body>
{children}
<Analytics />
<SpeedInsights />
</body>
</html>
);
}
```
หรือใช้ web-vitals package ส่งเข้า GA4 เอง:
```javascript
import { onINP, onLCP, onCLS } from 'web-vitals';
const sendToGA = (metric) => {
window.gtag('event', metric.name, {
value: Math.round(metric.value),
metric_id: metric.id,
metric_rating: metric.rating,
});
};
onINP(sendToGA); onLCP(sendToGA); onCLS(sendToGA);
```
สรุปและขั้นตอนถัดไป
Key Takeaways:
INP คือ Web Vital ตัวใหม่ที่กระทบเว็บไซต์ส่วนใหญ่ — ทีมที่ยังไม่ optimize จะตก Ranking ใน 2026 อย่างแน่นอน Next.js App Router + React Server Components คือ "ทางลัด" ที่ลด INP ได้มากที่สุด เพราะตัด JavaScript bundle จาก client การลงทุนทำ Performance Tuning ให้คะแนน CWV ผ่านเกณฑ์ Good ทั้ง 3 ตัวมี ROI สูงทั้งในแง่ SEO และ Conversion
หากทีมของคุณกำลังพัฒนา Web App บน Next.js หรือ Laravel แล้วเจอปัญหา Web Vitals ตก ต้องการ Audit + Optimize ระบบให้พร้อมรับปริมาณผู้ใช้จริง ทีม [ADS FIT](https://www.adsfit.co.th/#contact) ยินดีให้คำปรึกษา — Adjust System, Fit for Your Business
อ่านบทความที่เกี่ยวข้อง: [Turbopack Next.js 15](https://www.adsfit.co.th/blog/turbopack-nextjs-15-rust-bundler-guide-sme-thailand-2026), [Cloudflare Workers](https://www.adsfit.co.th/blog/cline-open-source-ai-coding-agent-vscode-byok-guide-sme-thailand-2026), [SigNoz Observability](https://www.adsfit.co.th/blog/signoz-open-source-observability-apm-datadog-alternative-guide-sme-thailand-2026)