Rýchlosť Stredný dopad Ľahké 5–15 min

Rozmery obrázkov (width/height)

Bez rozmerov obrázka poskakuje layout (CLS).

Čo to je

Keď <img> nemá uvedené width a height, prehliadač do načítania nevie, koľko miesta obrázok zaberie a po jeho dorazení obsah „poskočí“. To meria metrika CLS (Cumulative Layout Shift).

Prečo to riešiť

Poskakovanie layoutu je frustrujúce (používateľ klikne na niečo iné, než chcel) a Google ho penalizuje cez CLS v Core Web Vitals.

Ako na to

1Uvádzaj width a height pri všetkých <img> (prehliadač si z nich vypočíta pomer strán).
2Prípadne rezervuj miesto cez aspect-ratio v CSS.
3To isté platí pre embedy a reklamy, rezervuj im priestor.

Príklad

Zle

<img src="foto.webp" alt="...">

Správne

<img src="foto.webp" alt="..." width="800" height="600">

Záver

Doplniť rozmery obrázkov je päťminútovka s priamym dopadom na CLS, jednu z Core Web Vitals. Kombinuj s lazy loadingom a modernými formátmi. Rezervuj miesto aj embedom a reklamám, aby nič neposkakovalo.

Súvisiace témy