Core Web Vitals Next.js-szel: hogyan lett 4.5s-ből 0.9s LCP

A Core Web Vitals Google-ranking faktor, és a felhasználó is érzi a különbséget. Íme egy valódi audit egy Next.js-alapú B2B SaaS marketing oldalról — névtelenítve, de a számok pontosak. A teljes folyamatot a Webfejlesztés szolgáltatásunk keretében is futtatjuk.

Kiindulás

• LCP: 4.5s (piros)
• CLS: 0.21 (piros)
• INP: 420ms (narancs)
• TTFB: 1.1s (narancs)

1. Hero image + font: a leglátványosabb nyereség

A hero image nem volt priority loaded, és a custom font a font-display: auto-val várakozásra kényszerítette az első renderelést. Két apró változtatással (-1.4s LCP):

// Before
<Image src={heroImg} alt="" />

// After
<Image
  src={heroImg}
  alt="Hero illustration"
  priority
  fetchPriority="high"
  sizes="(min-width: 1024px) 600px, 100vw"
/>

2. RSC határok: lelassított részek kivágása

A marketing oldalon semmi sem kellett, hogy interaktív legyen a hajtás felett. RSC-re váltva a hydration-payload 110kb-ról 22kb-re csökkent, az INP 420ms-ról 180ms-re.

3. Edge + ISR

A blog-oldalakon 300s ISR + edge runtime. A TTFB 1.1s-ről 90ms-re zuhant. A vendégfelhasználók most Singapore-ból is szub-másodperc alatt érik el a főoldalt.

4. CLS: a jelenlegi 0.00

• Reklám / embed magasság-reserve, nincs hely-visszafoglalás.
• Font-size-adjust a fallback-hez — nincs szövegugrás.
• Image aspect-ratio minden képnél.

Eredmény, 3 hét után

• LCP: 0.9s (zöld)
• CLS: 0.01 (zöld)
• INP: 120ms (zöld)
• TTFB: 90ms (zöld)
• Organic trafik +34% három hónap alatt

Tanulság

Nem kell refaktorálni az egész appot. 3–5 konkrét változtatás a látogatói útvonal 20%-ában elhozza a CWV-zöld státuszt. Ha szeretnéd, mi is lefuttatjuk rajtad — 1–2 hét az audit és a javító PR-ek.