Vorige week werd bekend dat Google Chrome binnenkort native lazy loading gaat ondersteunen. Dat betekent dat jij jouw website nog sneller kan maken, zonder dat dit veel kennis, tijd of geld kost. Hoe het werkt? We leggen het je graag uit!
Wat is Lazy Loading?
Lazy loading is een webdevelopmentmethode waarmee het downloaden van afbeeldingen wordt uitgesteld.
- Bij ‘normale’ websites wordt de gehele pagina geladen als een gebruiker de pagina bezoekt. Ook afbeeldingen onderaan de pagina, die niet zichtbaar zijn zonder te scrollen, worden direct ingeladen. Dit zorgt voor een lange laadtijd. Een lange laadtijd is nadelig voor zowel de gebruikerservaring als voor SEO.
- Bij websites die gebruikmaken van lazy loading worden afbeeldingen pas ingeladen als ze in beeld komen. Afbeeldingen die onderaan de pagina staan, worden dus pas gedownload als de bezoeker naar beneden scrolt. Dit voorkomt onnodige gegevensoverdracht en lange laadtijden.
Wat verandert er nu?
Lazy loading is niet nieuw: het was al een veelgebruikte techniek op websites die veel foto’s bevatten. Het toepassen van lazy loading vereiste echter de nodige kennis van webdevelopment of het gebruik van een JavaScript-library.
Google heeft nu echter aangekondigd dat de browser Chrome de techniek van lazy loading als ingebouwde (native) functionaliteit gaat aanbieden. Dat betekent dat je lazy loading eenvoudig kunt toepassen zónder dat je afhankelijk bent van derden. Ook betekent dit dat lazy loading altijd werkt, ook als de gebruiker JavaScript heeft uitgeschakeld in zijn browser.
Lazy loading toepassen
Het toepassen van lazy loading bij een afbeelding is heel eenvoudig: het enige wat je hoeft te doen is het toevoegen van het attribuut “loading” bij de afbeeldingen in de broncode.
<img src="afbeelding.jpg" loading="lazy" height="300" width="300" />
Er zijn drie geldige waarden voor het attribuut “loading”:
- auto: standaard laadgedrag van de browser, deze waarde staat gelijk aan het niet-gebruiken van “loading”.
- lazy: pas lazy loading toe op de afbeelding.
- eager: laad de afbeelding onmiddellijk, ongeacht waar deze zich op de pagina bevindt.
Lazy loading in WordPress
Om lazy loading binnen WordPress toe te passen, ga je naar de pagina die je wilt bewerken en klik je op het tabblad “Tekst” in plaats van “Visual”. Je kunt nu bovenstaand attribuut aan de afbeelding in de broncode toevoegen.
WordPress en Yoast (de ontwikkelaar van de Yoast SEO plugin) hebben nog niet gereageerd, maar wellicht dat een van deze twee partijen ondersteuning gaat bieden voor een gebruiksvriendelijke manier van het toepassen van lazy loading in WordPress.
Andere browsers
De genoemde ontwikkeling geldt alleen voor Google Chrome vanaf versie 76. Het attribuut “loading” wordt dus niet ondersteund door andere browsers zoals Safari of Firefox. We sluiten echter niet uit dat deze browsers na verloop van tijd deze functionaliteit ook zullen ondersteunen.
Tip
Gebruik lazy loading altijd in combinatie met de attributen “height” en “width” waarmee de afmetingen van de afbeelding worden doorgegeven. Zo voorkom je dat de omliggende content verspringt als de afbeelding nog niet geladen is.
Online marketing bureau
Heb je meer vragen over het optimaliseren van laadsnelheid of heb je andere vragen over online marketing? Neem contact op met online marketing bureau Sageon in Utrecht. We helpen je graag!
