Det finns en rad olika sätt att förbättra laddningstiderna på en sajt. Ett av dessa är att använda sig av vad som kallas “lat inläsning” av bilder. I dagens artikel reder vi ut innebörden av begreppet, dess fördelar, samt tipsar om hur du enklast går tillväga vid en implementation.
Vad är lat inläsning av bilder?
Genom att använda sig av lat inläsning av bilder, laddas enbart de resurser som syns på besökarens skärm. Övriga laddas först när det finns ett behov för detta, dvs. när besökaren scrollat ner till dessa element på en sida.
Vilka fördelar har lat inläsning av bilder?
Fördelen med att använda sig av lat inläsning är att det går mycket snabbare för en sida med ett stort antal bilder att nå ett stadie där den uppfattas som färdigladdad av besökaren. Detta är viktigt för att generera en så bra användarupplevelse som möjligt – vilket i sin tur kan minska avvisningsfrekvensen, öka spenderad tid på sidan, och till och med höja dess konverteringsgrad.
Hur implementerar man lat inläsning av bilder?
Först av allt vill jag inleda med att påpeka att det finns fler än ett sätt att implementera lat inläsning av bilder på en sida.
Den metod jag rekommenderar är dock väldigt enkel och baserat på vanlig HTML-kod.
Ni adderar helt enkelt bara loading=”lazy” till den nuvarande kod-strängen för respektive bild.
- Kod-exempel för bild utan lat inläsning:
<img src=”bildens_namn.jpg” alt=”valfri alt-text”>
- Kod-exempel för bild med lat inläsning:
<img loading=”lazy” src=”bildens_namn.jpg” alt=”valfri alt-text”>
Genom denna enkla åtgärd får ni således bilder som först laddas in då dessa är relevanta att visa, vilket kommer göra en stor skillnad för alla er med bildtunga sajter.
Var dock noga med att EJ implementera lat inläsning för de bilder som är synliga i toppen av en sida, utan behov av att scrolla nedåt. Det finns nämligen ingen anledning att använda sig av denna funktion för dessa bilder, eftersom de bör vara inkluderade vid den första uppritningen av sidan.
Notera även att WordPress bör vara uppdaterat till den senaste versionen av CMS:et för att säkerställa att allt fungerar som det ska.