Képméretek, lusta betöltés

Két gyakori képhiba rontja a betöltést. Ha a képnek nincs megadott mérete, a böngésző nem tudja előre, mennyi helyet hagyjon neki, ezért betöltéskor elugrik alatta a tartalom (ez a CLS mutató). Ha a lap alján lévő képek is azonnal betöltődnek, elviszik a sávszélességet a látható tartalom elől.

Hogyan mérjük

A riport mobilnak emulált böngészőben betölti az oldalt, és a kész lapon végigmegy a képeken (legfeljebb 2000-et néz meg). Csak azokat számolja, amelyeknek van látható szélessége.

• Méret nélküli kép: nincs rajta egyszerre width és height attribútum.
• Azonnal betöltődő hajtás alatti kép: a kép teteje a képernyő magasságán túl van, és nincs rajta loading="lazy".
• Nem mérhető: az oldalon nincs látható kép.
• Megfelelő: egyik hiba sincs.
• Hiba: legalább az egyik előfordul. Súlyossága: alacsony. A riport külön megadja a két darabszámot.

Fontos, hogy a teszt a HTML-attribútumokat nézi. Ha a méretet csak CSS-sel (például aspect-ratio-val) adod meg, de az <img>-en nincs width és height, a teszt akkor is hibát jelez. A böngésző a width és height attribútumokból számol képarányt, ezért ezeket érdemes mindig kiírni.

A “hajtás alatti” helyzet a betöltött lap mobil képernyőméretéből jön; más képernyőn más képek esnek a hajtás alá.

Hogyan javítsd

1. Adj minden képnek width és height attribútumot a kép tényleges (természetes) méretével. CSS-ben a height: auto megtartja az arányt, ha a kép kisebb helyen jelenik meg.
2. Ha a méretet nem tudod előre, a CSS aspect-ratio tulajdonság is helyet foglal a képnek; ettől a teszt még kérheti az attribútumokat.
3. A hajtás alatti képekre tedd rá a loading="lazy" attribútumot.
4. A lap tetején lévő, látható képeken, különösen a fő (hero) képen ne legyen loading="lazy": ezt a böngésző előbb tölti le, ha nem halasztod. A web.dev külön kiemeli, hogy a legnagyobb tartalmi elem képét soha ne töltsd lustán.

HTML

HTML

<img src="/kepek/kep.webp" width="640" height="360" alt="A kép leírása" loading="lazy">

A loading="lazy" csak a hajtás alatti képekre kerüljön. A hajtás fölöttiekre csak a width és a height kell.

CSS

CSS

img {
  max-width: 100%;
  height: auto;
}

WordPress

WordPressben a médiatárból a tartalomba szúrt képekre a WordPress magától teszi rá a méretet és a lusta betöltést (a wp_filter_content_tags szűrő). A méret nélküli képek többnyire a témából vagy egy oldalépítőből jönnek; ott kell javítani. A WordPress 6.3 óta a wp_get_loading_optimization_attributes() függvény adja a loading és fetchpriority attribútumokat, és a már kézzel megadott attribútumokat nem írja felül.

Hogyan ellenőrizd

• Futtasd újra a riportot: mindkét darabszámnak 0-nak kell lennie.
• A böngésző fejlesztői eszközeiben (Elements) nézd meg a képek attribútumait.
• A PageSpeed Insights a CLS értékben mutatja a javulást. Lásd még: Labor-CLS.