A Core Web Vitals a Google által meghatározott mérőszámok összessége, amelyek egy weboldal felhasználói élményét mérik. 2021 óta ezek a mutatók a Google rangsorolási jelzéseinek részét képezik — ami azt jelenti, hogy egy gyenge pontszám hátrányosan befolyásolhatja az SEO-t. A képek az egyik fő tényező, amely befolyásolja ezeket a pontszámokat — pozitívan és negatívan egyaránt.
A három Core Web Vitals mutató
A Google a Core Web Vitals segítségével a felhasználói élmény három dimenzióját méri:
| Mutató | Mit mér | "Jó" küszöbérték | "Fejlesztést igényel" küszöbérték |
|---|---|---|---|
| LCP (Largest Contentful Paint) | A legnagyobb látható elem betöltési ideje | ≤ 2,5 másodperc | 2,5 és 4 másodperc között |
| INP (Interaction to Next Paint) | Felhasználói interakciókra való reagálás | ≤ 200 ms | 200 és 500 ms között |
| CLS (Cumulative Layout Shift) | Az elrendezés vizuális stabilitása | ≤ 0,1 | 0,1 és 0,25 között |
LCP és képek: a közvetlen kapcsolat
Az LCP (Largest Contentful Paint) azt az időt méri, amely a böngésző nézetablakában lévő legnagyobb látható elem megjelenítéséhez szükséges. A weboldalak túlnyomó többségénél ez az elem egy kép — hero kép, főbanner, termékkép. Egy nehéz vagy rosszul betöltött kép ezért közvetlenül felelős a gyenge LCP pontszámért.
A képekhez kapcsolódó LCP javítása érdekében:
- Modern formátumok használata: a WebP és AVIF azonos vizuális minőség mellett jelentősen könnyebb mint a JPEG és PNG
- Az LCP kép előtöltése: adjon hozzá egy <link rel="preload"> taget a <head>-be, hogy a böngészőt prioritásos hero kép betöltésre kényszerítse
- Kerülje a lazy loadingot az LCP képnél: soha ne alkalmazzon loading="lazy"-t arra a képre, amely az LCP lesz — ez pontosan azt késlelteti, amit a Google mér
- Képek kiszolgálása CDN-ről: a szerver földrajzi közelsége csökkenti a Time to First Byte (TTFB) értéket, amely közvetlenül befolyásolja az LCP-t
- Képek megfelelő méretezése: soha ne szolgáljon ki 3000px széles képet 800px-es megjelenítéshez
Tudta? a PageSpeed Insights vagy a Chrome DevTools (Teljesítmény fül → kattintson az LCP jelölőre) segítségével azonosíthatja, hogy melyik kép alkotja az LCP-t. Ez az azonosítás minden optimalizálás elengedhetetlen első lépése.
CLS és képek: elrendezési eltolások
A CLS (Cumulative Layout Shift) a betöltés során bekövetkező váratlan elrendezési eltolásokat méri. A meghatározott méretek nélküli képek az egyik leggyakoribb oka a gyenge CLS pontszámnak: a böngésző nem ismeri a kép méretét a betöltése előtt, ami az oldal "ugrását" okozza, amikor megjelenik.
A megoldás egyszerű és univerzális: mindig adja meg a width és height attribútumokat az img tagokon. Ez lehetővé teszi a böngészőnek, hogy pontosan a szükséges helyet foglalja le még a kép letöltése előtt.
INP és képek: közvetett hatás
Az INP (Interaction to Next Paint) az oldal felhasználói interakciókra (kattintások, bevitelek) való reagálását méri. A képek nem befolyásolják közvetlenül az INP-t, de a böngésző főszálát monopolizáló nagyon nehéz képek közvetve ronthatják ezt a mutatót a JavaScript eseményfeldolgozás blokkolásával.
A nagy képek (több megabájtos PNG-k, nagy felbontású TIFF-ek) dekódolása a főszál blokkolását okozhatja. A decoding="async" attribútum lehetővé teszi ennek a dekódolásnak az elhalasztását, hogy ne blokkolja az interakciókat.
Képekkel kapcsolatos legjobb gyakorlatok a Core Web Vitalshoz
- Formátum: használjon WebP-t vagy AVIF-et minden tartalomképhez
- Méretek: mindig adja meg a width és height értékeket az összes img tagon
- Lazy loading: használja a loading="lazy" értéket az összes képernyőn kívüli képhez, az LCP képet kivéve
- Preload: csak az LCP képet töltse elő a <link rel="preload" as="image"> segítségével
- Reszponzív képek: használja a srcset attribútumot a megfelelő méret kiszolgálásához minden képernyőfelbontáshoz
- Tömörítés: tömörítsen minden képet egy olyan eszközzel, mint a Squoosh, Sharp vagy ImageMagick feltöltés előtt
- CDN: tárolja a képeket CDN-en a földrajzi betöltési késleltetés csökkentése érdekében
Tudta? a Google PageSpeed Insights és a Lighthouse a Core Web Vitals mérésének és a problémás képek azonosításának referencia eszközei. A Google Search Console szintén kínál Core Web Vitals jelentést a látogatók valós adatain alapulva (CrUX — Chrome User Experience Report), amely megbízhatóbb a laboratóriumi teszteknél a felhasználók valós élményének értékeléséhez.