# Core Web Vitals egy igazi Next.js oldalon

> Az LCP, INP és CLS három szám, három különböző javítással. A legtöbb lassú oldal ugyanazon a négy dolgon bukik el, és egyikhez sem kell újraírás.

A Lighthouse-pontszám tünet, nem diagnózis. Az alábbi javítások azok, amelyek valódi ügyfél-buildjeinken tényleg mozdították a mutatót — beleértve ezt az oldalt is, ami egy 3D-s szobát tölt be, és mégis megfelel.

## A kép szokott lenni a tettes

Az oldal legnagyobb eleme szinte mindig egy tömörítetlenül, méretezetlenül és későn érkező hero-kép. Egy jól méretezett AVIF/WebP explicit méretekkel egyszerre javítja a legrosszabb LCP-t és a legrosszabb CLS-t — ez az egyetlen változás rendszeresen többet ér, mint egy hónap framework-finomítás.

## Amit nem küldesz ki, azért nem is fizetsz

A route-szintű kódszeletelés ingyenes a Next.js-ben, és mégis rendszeresen tönkreteszi egyetlen nehéz komponens importja a lap tetején. A szoba ezen az oldalon épp ezért tölti lustán a renderert: a HTML, a szöveg és a linkek már az első textúra előtt interaktívak.

## A betűkészlet layout-adó

A betöltési stratégia nélküli webfont garantált layout-ugrás. Preloadold azt az egy súlyt, ami a címsort rendereli, a többit swapold, és állíts metrika-felülírást, hogy a fallback ugyanazt a dobozt foglalja.

## Amit érdemes elvinni

- Először a hero-képet javítsd — az egyszerre LCP és CLS.
- Szeletelj a route-határon; auditáld a fölötte lévő importokat.
- Preloadolj egy betűsúlyt, és metrika-egyeztesd a fallbacket.
- Mérj egy középkategóriás telefonon 4G-n, nem MacBookon wifin.

## Címkék

Next.js, Web Vitals, Performance, Images

## Ezt is megépítjük

https://dfieldsolutions.hu/hu/szolgaltatasok/web-performance

## Több a laborból

- https://dfieldsolutions.hu/hu/labor/ai-search-visibility-checklist.md — Az AI-keresési láthatósági checklista, amit ezen az oldalon futtatunk
- https://dfieldsolutions.hu/hu/labor/eaa-accessibility-deadline.md — Az EU-s akadálymentesítési határidő lejárt — mi él még
- https://dfieldsolutions.hu/hu/labor/structured-data-aeo.md — Strukturált adat, amit a válaszmotor is tud használni
- https://dfieldsolutions.hu/hu/labor/local-seo-playbook.md — A helyi SEO-lista, amit mi is végigjárunk

---

Source: https://dfieldsolutions.hu/hu/labor/web-vitals-playbook
DField Solutions — Dunakeszi, Hungary — dezso@dfieldsolutions.com
Booking: see https://dfieldsolutions.hu/en/contact