LCP คืออะไร? วิธีแก้ LCP ให้ต่ำกว่า 2.5 วินาที (WordPress + Next.js)

คำตอบสั้น: LCP (Largest Contentful Paint) คือเวลาที่ใช้ในการ render element ที่ใหญ่ที่สุดบนหน้าจอแรก วัดเป็นวินาทีตั้งแต่ user เริ่ม navigate Google กำหนดเกณฑ์ดี <2.5s · ต้องปรับ 2.5-4.0s · แย่ >4.0s LCP เป็น 1 ใน Core Web Vitals 3 ตัวที่ส่งผลต่อ ranking โดยตรง

ถ้าเพิ่งเริ่มทำ SEO อ่านภาพรวมทั้งระบบก่อนได้ที่ SEO คืออะไร? คู่มือฉบับ 2026 — บทความนี้เจาะลึกเสาเดียวในสี่เสานั้น

LCP คือตัวชี้วัดความเร็วของหน้าเว็บที่ Google ใช้ตัดสิน “ความน่าใช้” ในการ rank บทความนี้อธิบายสาเหตุ LCP ช้าและวิธีแก้ทุกระดับ ตั้งแต่ quick wins ใน WordPress ไปจนถึงการ rebuild บน Next.js

สารบัญ

• LCP คืออะไร?

• LCP element หาเจอยังไง?

• 4 สาเหตุหลักของ LCP ช้า

• วิธีแก้ LCP ใน WordPress

• วิธีแก้ LCP ใน Next.js

• Tools สำหรับวัด LCP

• FAQ

LCP คืออะไร?

Largest Contentful Paint (LCP) วัดเวลาที่ user เห็น “content ที่ใหญ่ที่สุด” ครั้งแรกบน viewport มักเป็น:

• รูป hero ขนาดใหญ่

• Video poster image

• ก้อน text headline

• Background image ที่ render เป็น CSS

LCP ไม่ใช่ First Contentful Paint (FCP) ซึ่งคือ “เห็น content อะไรก็ได้ครั้งแรก” LCP เป็นมาตรฐานที่สะท้อนประสบการณ์ user มากกว่า

เกณฑ์ Google

ต้องผ่าน 75% ของ session (วัดจาก CrUX — Chrome User Experience Report)

LCP element หาเจอยังไง?

วิธีที่ 1: Chrome DevTools

1. เปิดหน้าเว็บ → DevTools → Performance tab

2. Record session 5 วินาที

3. ดู “Web Vitals” lane → click LCP marker

4. Element จะ highlight ใน Elements panel

วิธีที่ 2: PageSpeed Insights

• เปิด pagespeed.web.dev

• ใส่ URL

• Scroll ลงดู “Largest Contentful Paint element” — จะแสดง screenshot + selector

วิธีที่ 3: JavaScript snippet

new PerformanceObserver((list) => {
  const entries = list.getEntries();
  const last = entries[entries.length - 1];
  console.log('LCP element:', last.element);
  console.log('LCP time:', last.startTime);
}).observe({ type: 'largest-contentful-paint', buffered: true });

4 สาเหตุหลักของ LCP ช้า

1. TTFB (Time to First Byte) ช้า

TTFB > 800ms = LCP จะไม่มีทางผ่าน 2.5s

• Server response ช้า

• ไม่มี CDN

• WordPress + heavy plugins ทำให้ DB query เยอะ

2. Render-blocking CSS/JS

<link rel="stylesheet"> + <script> ใน <head> block render

• CSS file ใหญ่ที่ block first paint

• JS ที่ไม่ใช้ defer/async

3. รูป LCP ไม่ optimize

• ไม่มี preload

• ไม่มี fetchpriority="high"

• ขนาดใหญ่เกิน (5MB JPG)

• format เก่า (JPG แทน WebP/AVIF)

4. Font loading ช้า

Custom font load หลัง CSS = LCP text ต้องรอ font swap

วิธีแก้ LCP ใน WordPress

Quick wins (ทำได้ภายใน 1 ชั่วโมง)

1. เปิด Cloudflare APO ($5/mo) แก้ TTFB ได้ทันทีจาก 1.5s → 200ms

2. Preload hero image ใส่ใน <head> ผ่าน Rank Math / Yoast custom code:

<link rel="preload" as="image" href="/wp-content/uploads/hero.jpg" fetchpriority="high">

3. Lazy-load รูปทุกตัวยกเว้น hero WordPress 5.5+ มี native lazy loading แล้ว แต่ต้องตรวจว่า hero ใช้ loading="eager" + fetchpriority="high"

4. Defer non-critical CSS ผ่าน WP Rocket หรือ Autoptimize plugin

Medium effort (1 วัน)

5. Convert images to WebP/AVIF ใช้ plugin ShortPixel หรือ EWWW Image Optimizer

• WebP เล็กกว่า JPG 30%

• AVIF เล็กกว่า JPG 50%

6. ลด plugin ที่ inject script เข้า head

• Elementor: ระวัง widget heavy

• WPBakery: render-blocking สูง

• WooCommerce: ลด plugin extension ที่ไม่ใช้

7. Switch theme เป็น lightweight GeneratePress, Kadence, Astra — เร็วกว่า theme premium ทั่วไป 2-3 เท่า

Heavy lift (1 สัปดาห์)

8. ย้ายไป managed hosting Kinsta, WP Engine, Cloudways — TTFB <300ms by default

9. ใช้ critical CSS inline Plugin: WP Rocket “Optimize CSS Delivery” → extracts above-the-fold CSS, inlines in head

10. Rebuild บน Next.js + Headless WordPress ดู Next.js vs WordPress 2026 — แก้ LCP ได้แน่นอน

วิธีแก้ LCP ใน Next.js

Next.js มี built-in optimization ครบ แต่ต้องใช้ให้ถูก:

1. Use next/image กับ LCP image

import Image from 'next/image';

<Image
  src="/hero.jpg"
  alt="Hero"
  width={1200}
  height={630}
  priority
  fetchPriority="high"
/>

priority prop = preload + fetchpriority high

2. Use next/font แทน @font-face

import { Inter } from 'next/font/google';
const inter = Inter({ subsets: ['latin'], display: 'swap' });

Next.js จะ self-host font + preload อัตโนมัติ

3. Server Components สำหรับ above-the-fold

ลด client-side JS bundle → faster render

4. ISR (Incremental Static Regeneration)

Static + cache ที่ edge = LCP <1s ทั่วโลก

5. Vercel Edge Network

TTFB <100ms ในเอเชีย

Tools สำหรับวัด LCP

ทำเว็บใหม่ที่ LCP <1s ตั้งแต่ launch

การไล่แก้ LCP บนเว็บเดิมใช้เวลานานและบางครั้งไม่ผ่านเกณฑ์ ทางที่ดีคือ build ใหม่บน stack ที่ออกแบบมาให้ LCP เขียวตั้งแต่ต้น เช่น Next.js + Vercel

ที่ Hashbox เราใช้ บริการรับทำเว็บไซต์ SEO-Ready ที่บังคับ LCP <2.5s เป็น Build Gate ก่อน deploy การันตี Lighthouse 95+ Mobile

ดูเพิ่ม:

• Core Web Vitals คือ? LCP, INP, CLS Guide

• Schema Markup คือ? JSON-LD Guide

• Next.js vs WordPress 2026

LCP ยังแดงแก้ไม่หาย? ส่ง URL มาตรวจฟรีที่ Website Audit เราบอกว่าแก้บนเว็บเดิมได้แค่ไหน — หรือดูบริการรับทำเว็บไซต์ SEO-Readyที่ Core Web Vitals เขียวทุก URL ตั้งแต่วันแรก

FAQ: คำถามที่พบบ่อยเรื่อง LCP