Képek lazy loadingja

A lazy loading azt jelenti, hogy a látható területen kívüli képek nem azonnal töltődnek be, hanem csak amikor a felhasználó odagörget. Elég a loading="lazy" attribútum.

Lazy loading nélkül a böngésző az oldal legalján lévő képeket is letölti, amelyeket a felhasználó talán sosem lát, ez hátráltatja az első renderelést és pazarolja az adatot. A lazy loading gyorsítja az indulást és spórol az átvitellel.

1. 1Adj loading="lazy" attribútumot a látható területen kívüli képeknek és iframe-eknek.
2. 2NE használj lazyt a hajtás feletti fő képen (LCP kép), azt ellenkezőleg a lehető leghamarabb akarod (akár preloaddal).
3. 3Mindig add meg a width és height értékeket, hogy a layout ne ugráljon (CLS).