Lazy loading utan JavaScript

Bilder tar upp mycket av bandbredden på webbplatser. För att snabba upp upplevelsen av din webbplats eller app är det många som använder sig av något som kallas för lazy loading. Det innebär i stora drag att man inte laddar in bilderna som är utanför skärmen förrän de ska visas upp på sidan, dvs när någon scrollar dit.

Tidigare användes JavaScript för att lösa detta, men nu börjar det komma inbyggt i webbläsarna. Google Chrome är först ut. Från och med Chrome version 76, vilken redan finns tillgänglig för användning, kan du använda attributet loading och sätta det till antingen lazy, auto eller eager.

<img loading="lazy" src="bild.png" alt="Bilden">

 

Vad betyder de olika alternativen?

lazy: Vänta med att ladda in bilden tills den når ett visst avstånd från skärmens kant. Här kan du spara bandbredd!

eager: Ladda resursen direkt, oavsett position på sidan.

auto: Standardläget för webbläsaren, vilket i praktiken är detsamma som att inte lägga till loading-attributet över huvud taget. Beter sig oftast som eager.

Mer info hittar du på web.dev

Leave a Reply

Your email address will not be published.