Lazy Loading

Recent hebben we aan een site gewerkt, die voornamelijk uit hoge kwaliteit foto's bestaat. Iets wat we nog niet vaak hebben gedaan bij Insyde. Bij de meeste websites zijn de afbeeldingen klein genoeg, dat de impact op de performance niet echt een probleem oplevert. Zodra je echter met schermvullende afbeeldingen te maken krijgt, kan de pagina er soms seconden langer over doen om te laden. Het optimaliseren van afbeeldingen levert dan een enorme performancewinst op. In dit blogartikel licht ik een aantal manieren toe, waarop we bij dit project de laadsnelheid van de website geoptimaliseerd hebben.

Vanuit design-oogpunt is een site met veel foto's een begrijpelijke keuze. Dit kan een zeer aantrekkelijke website opleveren. Vanuit implementatie oogpunt levert dit echter wat uitdagingen op: Afbeeldingen kunnen een flinke impact hebben op de performance van een website. Als je een website opent, moet deze (tijdelijk) gedownload worden door je browser. Hoe groter de afbeelding, hoe meer bytes er gedownload moeten worden. Vervolgens moet de afbeelding door de browser geïnterpreteerd worden, om deze op het scherm te tonen. Het laden van de webpagina duurt daardoor langer door elke afbeelding die erop staat.

Afbeeldingen optimaliseren

Een foto, direct van de camera, kan ontzettend groot zijn. Met betere camera's krijg je betere foto's, deze zijn ook weer groter. Deze bestanden bevatten bijzonder veel informatie over bijvoorbeeld kleur, voor elke pixel in de afbeelding. Gelukkig, door hoe onze ogen werken, zijn er details en kleurverschillen in de foto's die wij niet kunnen zien. Deze data kunnen we dus weggooien, zonder dat wij een verschil kunnen zien in kwaliteit van de afbeelding.


Vergrote uitsnede van een foto. Deze afbeelding is van 186 MB naar 149 KB gekrompen. Pas na ver inzoomen is het verschil te zien

Er zijn nog veel meer technieken die toegepast (kunnen) worden om een afbeelding te verkleinen zonder kwaliteitsverlies, en vele met een klein beetje kwaliteitsverlies. Per situatie verschilt het welke technieken je kan en wil toepassen, voor het beste resultaat. Voor dit project hebben we een aantal regels vastgezet in Photoshop, die sommige afbeeldingen in hoge kwaliteit hebben verkleind van 4mb naar 200kb. Een flink verschil, waarmee we al enorm veel winst behaald hebben voor de website. Met de hoeveelheid plaatjes die in dit project op een pagina kunnen staan, was dit echter nog niet genoeg.

Apparaatspecifieke formaten

Op dit moment worden websites op vele apparaten bekeken: van pc, naar tablet, naar mobiel. Elk van deze apparaten heeft een afwijkend schermformaat, met als resultaat dat afbeeldingen op elk apparaat op een ander formaat getoond worden. De afbeeldingen worden echter pas naar het juiste formaat geschaald, als deze al gedownload zijn. Dit betekent, dat op een mobiele telefoon dezelfde grote afbeelding wordt gebruikt als op je grote computerscherm. Dit is natuurlijk zonde, er wordt veel meer data gedownload dan daadwerkelijk nodig is, en het schalen van de afbeelding kost ook nog eens tijd.

Dit probleem zijn we steeds vaker aan het aanpakken. We hebben bij dit project van elke afbeelding een aantal formaten gemaakt, optimaal voor een bepaalde grootte scherm. Bij het laden van de pagina wordt gekeken wat het formaat van je scherm is en op basis daarvan wordt voor een bepaalde afbeelding gekozen. Op deze manier zorgen we ervoor dat er nooit (veel) meer data wordt gebruikt dan nodig.

Lazy loading

Als je een webpagina opent, zie je wel eens afbeeldingen inladen. Iets wat je zeker vroeger nog veel zag, zijn afbeeldingen die langzaam van boven naar beneden worden opgebouwd. Wat niet meteen opvalt, is dat er vaak tegelijkertijd buiten beeld nog meer afbeeldingen worden ingeladen. Elk van deze afbeeldingen wil tegelijk getekend worden met alle andere elementen op de pagina, en zit het inladen van deze elementen dus ook in de weg. Sommige van deze afbeeldingen komen misschien niet eens in beeld. Extra zonde van de laadtijd dus.

Een oplossing hiervoor is het zogeheten lazy loaden van afbeeldingen: Afbeeldingen pas laden, vlak voordat deze zichtbaar worden. De webpagina hoeft dan bij het laden niet op de afbeeldingen te wachten, en is sneller in beeld. Afbeeldingen die nooit in beeld komen, worden gewoon niet gedownload, wat op mobiel ook nog eens fijn is voor je datategoed.

Ideaal, waarom gebeurt dit niet altijd?

Er zitten een aantal uitdagingen aan dit proces. Als een afbeelding nog niet is ingeladen, wordt de ruimte op de pagina ook niet zomaar gereserveerd. Dit zorgt ervoor, dat als de afbeelding dan wel ingeladen wordt, dat elementen op de pagina gaan verspringen. Bijzonder storend als je een pagina probeert te bekijken. Daarnaast moet je bepalen, wanneer je welke afbeelding moet inladen. Dit kan makkelijk buiten beeld gedaan worden, als een gebruiker op een pagina scrollt. Maar, als je op een anker klikt, dan spring je in een keer naar een lager deel van de pagina. In dat geval weet de pagina pas dat de afbeeldingen geladen moeten worden, als de gebruiker er al is. Dan krijg je lege plekken, en wederom verspringende elementen.

Er is geen eenduidige oplossing voor. Per pagina, en eigenlijk per afbeelding, moet gekeken worden hoe deze het beste ingeladen kan worden. Sommige afbeeldingen zal je alsnog op de normale manier willen inladen, omdat deze meteen zichtbaar moeten zijn voor de gebruiker. Bij andere is het niet erg dat je een vertraging ziet: als je de afmetingen weet kan je de ruimte alvast reserveren. Weer andere kan je eerst een zeer lage (en dus kleine) kwaliteit versie van de afbeelding inladen, en daarna vertraagd de hoge kwaliteit versie. Als je website snel genoeg is, zie je dat niet eens.

Gedurende de hele bouw van de website hebben we hier dus rekening mee gehouden. Alle afbeeldingen zijn geoptimaliseerd en geschaald naar 3 formaten (desktop, tablet, mobiel). We maken gebruik van een plugin, genaamd beLazy, die het inladen van veel van de afbeeldingen voor ons afhandelt. Zelf hebben we gekeken op welke plek welke methode het beste was voor de gebruiker en deze toegepast.

Het volledig optimaliseren van de afbeeldingen van een website is dus nog heel wat werk. Maar, resultaat is er zeker. Het project laadt nu sneller en soepeler dan een hoop andere websites, die veel minder afbeeldingen gebruiken. De afbeeldingen zijn echter nog steeds haarscherp in alle browsers. 

Benieuwd naar het resultaat?

Bekijk de website van Uipkes Houten Vloeren. Probeer hem op mobiel, tablet en op je desktop! 

Geschreven door Joey Simsen

Programmeur

Blijf up-to-date en ontvang updates in je mailbox

Lees ook deze interessante blogs

Kiezen van een webdesignbureau: waar moet je op letten?

Je wilt een nieuwe website en bent op zoek naar een goed webdesignbureau. In Nederland zijn er zeker honderd webdesignbureaus en een groot aantal ZZP’ers die websites maken. Allemaal pretenderen ze goed te zijn. Maar hoe scheid je het kaf van het koren en kies je een bureau die bij jouw organisatie past? Wij zetten 14 punten op een rij waar op je moet letten bij de keuze van een webdesignbureau.

Watervalmethode vs Scrum

Scrum is geliefd bij veel software-ontwikkelaars. Zo ook bij ons; wij houden echt van scrummen. Maar soms – heel soms – werken wij nog volgens de watervalmethode. Dit doen wij vooral bij projecten waarbij de projectleider aan de klantzijde geen beslissingsbevoegdheid heeft en elk stap aan een leidinggevende, het management of een stuurgroep moet worden verantwoord. Soms is de watervalmethode ook meer geschikt voor website waarop content centraal staat en al in een vroeg stadium...

Totaalpakket: grondig renoveren website, inclusief teksten en beelden

Het besluit is genomen: je wilt een nieuwe website voor je bedrijf. Dit besluit is meteen de startpunt van een reeks volgende beslissingen. Wat te doen met de content – foto’s en teksten – op de huidige site? Passen deze nog bij de nieuwe weg die je in wilt slaan? Of doen deze juist afbreuk aan de nieuwe website en de communicatieboodschap die je wilt uitdragen? En wat als nieuwe teksten nodig zijn: zelf schrijven of iemand anders? En zo ja, wie dan? Oftewel: keuzes,...

Ruim 300 opdrachtgevers gingen je voor

Bekijk deze voorbeelden en laat je inspireren