In dit help artikel leggen we uit hoe je “lazy loading” toepast op afbeeldingen en video’s. Onder meer in te zetten bij CMS items/pagina’s en artikel(groepen) pagina’s. Voor de homepage kan onze servicedesk hiervoor een instelling activeren.
Wat is Lazy loading?
Lazy loading zorgt ervoor dat een website niet in één keer in zijn geheel wordt geladen. Ideaal voor websites die over veel afbeeldingen of reacties beschikken. Zo voorkom je dat een bezoeker aardig wat tijd kwijt is aan het laden van de gehele website, terwijl dit wellicht overbodig is.
Lazy loading is dus ideaal om ervoor te zorgen dat jouw bezoeker niet teveel tijd kwijt is om een website te laden, alhoewel het in bepaalde situaties ook onhandig kan zijn. Zo kan het op een fotografie-website storend zijn. Vaak gaat het dan om de foto’s en willen je bezoekers deze allen direct in beeld zien.
Wanneer je voor een afbeelding ”lazy loading” wilt inschakelen zal de afbeelding in HTML moeten worden opgemaakt.
Een afbeelding zonder lazy loading ziet er in HTML zo uit:
<img alt=”ALT-tekst voor de afbeelding” src=”https://urlvandeafbeelding” />
LET OP: Lazy loading heeft alleen zin wanneer je het toepast bij afbeeldingen die niet direct zichtbaar zijn dan wel “onder de vouw”* staan!
*Above the fold wordt in internet marketing termen gebruikt om aan te duiden wat in beeld te zien is voordat een bezoeker gaat scrollen. “Boven de vouw” dus in goed Nederlands. “Onder de vouw” betreft hetgeen eronder. Natuurlijk verschilt dit nogal eens per scherm en per browser.
Wil je nu een afbeelding voorzien van ”lazy loading” dan moet er een ”class” toegevoegd worden aan de afbeelding, dit doe je op de volgende manier:
<img class=”lazyload” alt=”ALT-tekst voor de afbeelding” src=”/img/placeholder.png” data-src=”https://urlvandeafbeelding” />
Lazy Loading is kun je ook toepassen op video’s die worden ingeladen. Hiervoor is de werkwijze bijna identiek aan die van de afbeeldingen.
Een Embedded video (bijvoorbeeld van youtube) wordt in een Iframe ingeladen. Dit ziet er als volgt uit:
<iframe width=”560″ height=”315″ src=”https://www.youtube.com/embed/-KvV-wAQYUg” frameborder=”0″ allow=”accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture” allowfullscreen></iframe>
Ook hiervoor geldt, het heeft alleen zin om lazy loading toe te passen als de video onder ”de vouw” staat.
Ook voor de video’s geldt dat er een ”Class” moet worden toegevoegd aan het Iframe. Dit doe je op de volgende manier:
<iframe class=”lazyload” width=”560″ height=”315″ data-src=”https://www.youtube.com/embed/Ir7J0eEuWgk” frameborder=”0″ allow=”accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture” allowfullscreen></iframe>