Lazy loading is een term die lekker ‘bekt’. Maar wat betekent het eigenlijk? Het verwijst naar het vertraagd laden van ‘assets’ op een webpagina. In deze blog geven we een ‘definitie’ en leggen we natuurlijk uit wat de voordelen zijn. HubSpot heeft een nieuwe feature waarbij je lazy loading gebruikt om foto’s en afbeeldingen in te laden. Zonder een regel code te typen!
Wat is lazy loading?
Lazy loading is een interessante optie om te gebruiken op webpagina’s die vol staan met afbeeldingen en foto’s. Denk bijvoorbeeld aan een overzichtspagina met producten, een gallery of een zakelijk smoelenboek.
Lazy loading richt zich op de afbeeldingen die ‘onder de vouw’ staan, dus op het gedeelte van de pagina dat (nog) niet zichtbaar is in de viewport. De afbeeldingen die daar staan - bijvoorbeeld product 4 tot en met 20 - worden bij lazy loading niet standaard geladen. Dat gebeurt pas wanneer de gebruiker die producten wil zien en daadwerkelijk gaat scrollen.
Scrolt de gebruiker een beetje? Dan worden afbeeldingen 4 tot en met 6 getoond. Scrolt hij nog verder? Dan volgen afbeelding 7 t/m 9. Je zal het principe begrijpen. Na scrollen worden de placeholder images vervangen door de previews van de echte afbeeldingen. Wanneer de pagina trouwens voor de allereerste keer wordt opgevraagd, zullen in eerste instantie alleen de foto’s - in ons voorbeeld afbeeldingen 1 t/m 3 - 'boven de vouw' worden geladen.
Door lazy loading in te zetten, geef je de visitor een prettige gebruikservaring. Je laadt bestanden pas wanneer de gebruiker daarom ‘vraagt’. Denk bij lazy loading aan de uitdrukking ‘u vraagt, wij draaien’.
Wat zijn de voordelen van lazy loading?
Hierboven hebben we het principe van lazy loading uitgelegd. Een groot deel van het moderne dataverkeer bestaat uit afbeeldingen. Om die reden is lazy loading vooral interessant voor webpagina’s die zwaar leunen op afbeeldingen en foto’s.
Waarom zou je trouwens niet alle onderdelen van een webpagina standaard laden? Dat lijkt veel eenvoudiger. Denk weer aan het gebruiksgemak en het bieden van service aan je bezoeker. Vaak zijn dat mensen die jouw pagina's op een mobiel raadplegen en die maar weinig ruimte hebben op hun kleine scherm. Door lazy loading zal ...
- de webpagina sneller laden.
- de bandbreedte van het dataverkeer worden teruggebracht.
- er een minder groot beroep worden gedaan op de computerkracht van de server en cliënt.
Bovenstaande punten hebben weer een positief effect op je organische ranking en ook op de bounce rate van pagina’s waar veel afbeeldingen op staan. Heel belangrijk voor iedere zakelijke website!
Lazy loading van afbeeldingen in HubSpot
In het verleden programmeerde je lazy loading bijvoorbeeld met JavaScript lazy-loading libraries. In HubSpot hoef je daar als marketeer geen slapeloze nachten meer over te hebben. Gebruik je de standaard afbeeldingen module? Voeg die dan toe aan een pagina, en selecteer vervolgens 'lazy loading' in de 'image loading' toggle.
Het kan natuurlijk ook zijn dat je een ‘custom module’ gebruikt. Wanneer die module een mogelijkheid biedt voor een afbeelding dan worden de ‘loading opties’ standaard getoond met de default waarde ‘lazy’. Realiseer je echter dat een developer deze ‘loading opties’ kan verbergen, zodat ze niet zichtbaar worden in de editor.
HubSpot kent ook ‘Rich Text Modules’. Als je een afbeelding toevoegt aan zo’n module, dan wordt deze standaard op ‘lazy loading’ gezet. Je kan dat echter aanpassen. Dat doe je door de module te selecteren, op het ‘pencil’ icoontje te klikken, vervolgens op de ‘advanced tab’ te klikken in de ‘image editing popover’ en deze optie dan op ‘default’ te zetten in plaats van ‘lazy load’.
Lazy loading is een nieuwe feature in de HubSpot CMS Hub. Wil je meer weten over de mogelijkheden om intuïtief mooie webpagina’s en landingpages te bouwen met HubSpot? Wij staan klaar om alle facetten en features van deze marketing-, sales- en servicesoftware toe te lichten.
