Hoeveel scheelt lazy loading in laadtijd?
Wat lazy loading scheelt in laadtijd, hangt af van hoeveel er onder de vouw staat. Bij een lange pagina met veel beeld is dat de helft van het startgewicht of meer.
Bij een korte pagina met drie afbeeldingen die allemaal meteen in beeld staan, scheelt het niets.
Meet het daarom per pagina.
Een rekenvoorbeeld
Een pagina met twintig afbeeldingen van honderd kilobyte weegt twee megabyte. Staan er vier in beeld, dan laadt je vierhonderd kilobyte in plaats van twee megabyte.
Dat is een verschil van seconden op een mobiele verbinding. Meer daarover lees je bij pagespeed.
Waar de grootste winst zit
Bij ingesloten vensters. Eén video die pas na een klik laadt, scheelt vaak meer dan alle afbeeldingen samen.
Meer daarover lees je bij of het ook werkt voor video’s en kaarten.
Wat het niet verandert
Het totale gewicht van je pagina als iemand helemaal doorscrollt. Alles wordt dan alsnog geladen.
De winst zit in het begin, niet in het totaal. Meer daarover lees je bij cache.
Mijn vuistregels
- Meet per pagina; het verschil loopt sterk uiteen.
- Verklein je afbeeldingen ook; dat werkt aanvullend.
- Let op de score voor het grootste element.
- Laad video’s na een klik voor de grootste sprong.
Die tweede is belangrijk: lazy loading en verkleinen versterken elkaar.
Hoe je het meet
Kijk in het netwerktabblad naar het aantal verzoeken en het gewicht direct na het laden, zonder te scrollen.
Vergelijk dat met dezelfde pagina na volledig doorscrollen. Het verschil is je winst. Meer daarover lees je bij frontend.
Wat je bezoeker merkt
Dat de pagina sneller bruikbaar is. Dat is een ander gevoel dan een pagina die volledig geladen is.
Meer daarover lees je bij wat lazy loading is.