2026.08.28.
Weboldal fejlesztés és SEO

Core Web Vitals gyors képek és betűtípus optimalizálásával.

Temesvári László

Core Web Vitals javítása: Amikor a képek és betűtípusok döntenek

Üdvözöllek! Ha olvasod ezt a cikket, valószínűleg már találkoztál azzal a frusztráló érzéssel, amikor egy weboldal lassan tölt be, a képek „ugrálnak”, vagy a szöveg hirtelen vált betűtípust. Nem csak a felhasználók idegeire megy, de ma már közvetlenül befolyásolja a keresőmotorok rangsorolását is. Itt jönnek képbe a Core Web Vitals (CWV), a Google által meghatározott, valós felhasználói élményt mérő metrikák. Jó hír: ezek jelentős részét a képek és betűtípusok intelligens optimalizálásával lehet javítani, ami nem csak a web performance érdekében, hanem üzleti szempontból is kritikus.

Mint webfejlesztő vagy honlapkészítő szolgáltató, ezzel közvetlenül javíthatod ügyfeleid láthatóságát és konverzióit. És nem, ehhez nem kell mágikus trükk – csak némi frontend figyelmesség.

Miért fáj a lassú oldal? A Core Web Vitals rövid ismertetője

A Core Web Vitals három fő metrikából áll, melyek közül kettő nagyon is érzékeny a médiatartalomra: 1. Largest Contentful Paint (LCP): Az oldal legnagyobb elemének (gyakran egy képnek vagy címsornak) megjelenésének ideje. Cél: 2,5 másodperc alatt. 2. Cumulative Layout Shift (CLS): A váratlan layout-mozgások mértéke (pl. egy későn betöltött kép odébb tolja a gombot). Cél: 0,1 alatt. 3. First Input Delay (FID): Az interakcióra való reagálás gyorsasága. Kevésbé függ a médiától, de a teljes oldalsúlyt befolyásolja.

A lényeg: a LCP-t és CLS-t a képek és betűtípusok direkt módon tudják rombolni vagy menteni.

1. A kép-optimalizálás: Több, mint a méret csökkentése

A leggyakoribb hiba, hogy feltöltenek egy 4000 pixel széles, több megabájtos képet, majd CSS-sel kicsinyítenek. A böngésző akkor is letölti a teljes fájlt. A megoldás okos kiszolgálás.

Megoldás a backend oldalon (PHP példa)

Egy jó WordPress weboldal készítés során vagy egy egyedi PHP backendnél a kiszolgáló oldalán kell intelligensen választani a képméretet. Itt egy egyszerű példa, hogyan szolgálhatnál ki optimalizált képet a kérés alapján:

Ezután a HTML-ben már nem a hatalmas original.jpg-re hivatkozunk, hanem: Példa

Természetesen éles környezetben cache-elést és könyvtárhasználatot (pl. Intervention Image) javaslok.

A frontend felelőssége: srcset, loading, sizes

A modern HTML lehetővé teszi, hogy a böngésző válassza ki a legmegfelelőbb képet a képernyőméret és a sávszélesség alapján. Ez kulcs a jó LCP érdekében.

<img src="kep-800.jpg" alt="Leíró szöveg" loading="lazy" width="800" height="600">

A loading="lazy" attribútum pedig azt jelenti, hogy a kép csak akkor töltődik be, amikor a görgetés során közel kerül a nézetportéhoz, csökkentve a kezdeti adatmennyiséget.

2. A betűtípusok láthatatlan terhe

A webfontok gyönyörűek, de ha nincsenek megfelelően kezelve, brutális LCP és CLS problémákat okozhatnak. A probléma a „láthatatlan szöveg flash”-ben (FOIT) rejlik: a böngésző letölti a fontot, és addig nem jelenít meg semmit, vagy egy tartalék betűtípust használ, majd vált. Ez layout shiftet okoz.

Hogyan zabolázzuk meg a fontokat? (CSS/SCSS stratégia)

/* 1. Font-display swap használata - Ez a legegyszerűbb lépés */
@font-face{ 
  font-family: 'SajátFont';
  src: url('sajatfont.woff2') format('woff2');
  font-display: swap; /* Azonnal megjelenít tartalék fonttal, majd cserél */
 }

/* 2. Preload fontok, amik biztosan kelleni fognak (pl. a legelső fejlécben) */
/* Ezt a HTML  részébe írjuk, vagy CSS-sel */
/*  */

/* 3. SCSS-ben könnyen kezelhetjük a font stack-eket és a tartalékokat */
$font-primary: 'SajátFont', 'Segoe UI', system-ui, sans-serif;

body {
  font-family: $font-primary;
  /* A font-weight és font-style előre definiálása segít a renderelésben */
  font-weight: 400;
  font-style: normal;
}

A swap érték biztosítja, hogy a szöveg azonnal látható legyen (jó az LCP-re), majd a betűtípus betöltődése után cserélődik (csökkenti a CLS-t, mert a helye nem változik, csak a megjelenése).

Gyakori buktatók, amiket céges döntéshozónak is érdemes tudnia

* Túl sok betűtípus-változat: Minden súly (light, regular, bold, stb.) és stílus (italic) egy külön fájlt jelent. Korlátozd 2-3 változatra. * Nem optimalizált képek CMS-ből: Ha ügyfeled WordPress weboldalt frissít, oktasd meg a kép-optimalizálás alapjaira, vagy telepíts egy jó kompressziós bővítményt (pl. ShortPixel, EWWW). * A „látható területen” lévő LCP elem késői betöltése: Az oldal tetején lévő, nagy hero kép ne legyen lazy load-olva, és használjon modern formátumot (WebP).

Összegzés: Teljesítmény = Üzlet

Egy kisvállalkozó vagy döntéshozó szemszögéből nézve a Core Web Vitals javítása nem technikai költség, hanem üzleti beruházás. A gyorsabb oldalak magasabb konverzióval, alacsonyabb vásárló megtartási költséggel (bounce rate) és jobb SEO pozícióval járnak.

Egy webfejlesztőként ezek az optimalizációk beépíthetők a munkafolyamatodba. Automatizált képátméretező szkriptekkel (PHP), okos CSS szabályokkal és a megfelelő HTML attribútumok használatával olyan weboldalakat készíthetsz, amelyek nem csak szépek, hanem lényegében gyorsak és stabilak a felhasználó számára.

Ne feledd: a cél nem a 100/100 pontszám a PageSpeed Insights-ban, hanem egy olyan felhasználói élmény biztosítása, amelyben senki nem vár a tartalomra, és semmi nem ugrál a keze/alatta. A képek és betűtípusok ebben kulcsszerepet játszanak – tartsd őket kordában.

A weboldalon megjelenő szöveges és vizuális tartalmak előállításához mesterséges intelligenciát (AI) használunk.

Kapcsolódó cikkek