SEO

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

LCP คือ Largest Contentful Paint — ตัวชี้วัด Core Web Vitals ที่สำคัญที่สุดสำหรับ ranking บน Google บทความอธิบายสาเหตุ LCP ช้า + วิธีแก้แบบเป็นขั้นเป็นตอนสำหรับ WordPress และ Next.js

3 min read
ปรึกษาโปรเจกต์ฟรี ดูบริการทั้งหมด

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

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

สารบัญ

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

ระดับ LCP
🟢 ดี < 2.5 วินาที
🟡 ต้องปรับ 2.5 – 4.0 วินาที
🔴 แย่ > 4.0 วินาที

ต้องผ่าน 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

Tool ข้อดี ใช้สำหรับ
PageSpeed Insights Free, field + lab data ตรวจหน้าเดียว
GSC Core Web Vitals Real Google data ตรวจทั้งเว็บ
Chrome DevTools Detailed waterfall Debug แต่ละ session
WebPageTest Multi-location Compare ทั่วโลก
Lighthouse CI Automate CI/CD pipeline

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

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

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

ดูเพิ่ม:

FAQ

LCP ต้องเร็วแค่ไหนถึงผ่าน?

< 2.5 วินาที สำหรับ 75% ของ session (field data ใน Search Console)

LCP กับ FCP ต่างกันยังไง?

FCP = First Contentful Paint = เห็น content อะไรก็ได้ครั้งแรก · LCP = เห็น content ใหญ่ที่สุดบน viewport ครั้งแรก LCP สะท้อน UX จริงดีกว่า

Preload กี่รูปได้?

1 รูป (LCP image) เพียงพอ ถ้า preload หลายรูปจะแย่งกัน bandwidth

Cloudflare APO ราคาเท่าไหร่?

$5/เดือน/zone จ่ายผ่าน Cloudflare dashboard

WordPress + Cloudflare APO LCP เหลือเท่าไหร่?

ปกติ 4-6s → 1.5-2.5s ขึ้นกับ theme + plugin หน้านี้ aim ให้ผ่าน 2.5s ก็พอ

Next.js + Vercel LCP เหลือเท่าไหร่?

0.8-1.5s by default ผ่านสบาย

ค่าใช้จ่ายแก้ LCP บริการ Hashbox?

  • WordPress audit + fix: 30,000-80,000 บาท

  • Rebuild Next.js: 80,000 บาท ขึ้นไป
    ดู SEO-Ready Website pricing

สรุป: LCP คือตัวชี้วัดสำคัญที่สุดของ Core Web Vitals วัดเวลาที่ user เห็น content ใหญ่ที่สุดบน viewport ครั้งแรก เป้าหมาย <2.5s วิธีแก้: ลด TTFB (Cloudflare APO), preload LCP image, defer CSS/JS, optimize image WebP/AVIF, ใช้ font-display swap WordPress แก้ได้แต่มี ceiling Next.js + Vercel ผ่านได้สบายตั้งแต่ default config

#Core Web Vitals #LCP #Next.js #Page Speed #Performance #WordPress
Hashbox Audit

ให้ทีมช่วยดูโจทย์นี้ต่อ

ส่งเว็บไซต์หรือ brief ที่กำลังทำอยู่ให้เราช่วยชี้จุดที่ควรแก้ก่อน ทั้งด้าน SEO, conversion, tracking และ AI workflow

Priority fixes Roadmap Quick wins
รับคำแนะนำฟรี → ดูบริการทั้งหมด
อ่านต่อ

บทความที่เกี่ยวข้อง