Iedereen wil een snelle website. Bezoekers hebben geen geduld en Google heeft een hekel aan trage laadtijden. Een van de technieken die we gebruiken om sites soepel te houden is 'lazy loading'. Klinkt als luiheid, maar het is eigenlijk heel slim.
Toch zijn er een paar punten waar je even moet opletten. Want als je alles maar 'lui' inlaadt, werk je jezelf soms tegen. Zeker in Yootheme Pro is het goed om te weten hoe je de instellingen voor afbeeldingen en video's tot in de puntjes regelt.
Wat is lazy loading precies?
Stel je voor: je bestelt een driegangendiner. De ober zet niet direct alles tegelijk op tafel. Het hoofdgerecht wordt pas gebracht als je eraan toe bent.
Lazy loading doet hetzelfde met je website. Moderne browsers laden standaard alleen de media die direct zichtbaar zijn op het scherm. De afbeeldingen die verder naar beneden staan (onder de 'vouw'), worden pas ingeladen zodra de bezoeker scrolt. Dit scheelt data en zorgt dat de pagina sneller bruikbaar is.
Wanneer lazy loading tegen je werkt
Lazy loading is geweldig, behalve voor de allereerste afbeelding die je bezoeker ziet. Vaak is dit de grote header, een achtergrondfoto of een 'Hero' afbeelding.
Als deze afbeelding 'lazy' wordt geladen, wacht de browser heel even met het ophalen ervan. Dat zorgt voor een vertraging in de LCP (Largest Contentful Paint). In mensentaal: je bezoeker ziet eerst een wit vlak, en pas een fractie later 'floept' de foto erin. Dat voelt traag.
De oplossing: Eager loading Voor die ene blikvanger bovenaan wil je dat hij direct, zonder wachten, wordt ingeladen. In Yootheme Pro kun je dit makkelijk instellen, ook voor achtergrondafbeeldingen:
- Open de Yootheme Pro builder.
- Klik op het element (Image) of de Sectie (voor achtergrondfoto's).
- Ga naar Settings.
- Zoek de optie Loading (vaak onder het kopje Image).
- Zet deze op 'load image eagerly'.
Hoe zit het met video's?
Video's zijn de zwaargewichten van je website. Die wil je dus zéker niet inladen als ze nog niet in beeld zijn. Yootheme heeft hiervoor een slimme functie toegevoegd in de recente updates.
Gebruik je video's (MP4) die je zelf host? Dan kun je het attribuut preload="none" toevoegen. Yootheme en UIkit zorgen er dan automatisch voor dat de video pas wordt binnengehaald zodra deze de 'viewport' (het zichtbare scherm) binnenkomt. Zo blijft je pagina licht en snel, zonder dat je kwaliteit inlevert.
Voorkom een dansende pagina
Niets is zo irritant als een tekst die verspringt omdat er plotseling een plaatje wordt ingeladen. Google noemt dit Cumulative Layout Shift (CLS) en straft dit af.
Yootheme Pro en moderne browsers hebben hiervoor de width en height attributen nodig. Zorg er dus voor dat je afbeeldingen in de bibliotheek de juiste afmetingen hebben. Yootheme vult dit dan automatisch voor je in, zodat de browser ruimte vrijhoudt voor de foto nog voordat hij geladen is.
Kortom
Laat lazy loading lekker zijn werk doen voor alles waarvoor je moet scrollen, en gebruik preload="none" voor je video's. Maar voor die ene afbeelding bovenaan de pagina? Zet die op 'eager'.
Het is een kleine aanpassing, maar het maakt net dat verschil voor een topervaring. Heb je hulp nodig om je site sneller te maken of kom je er niet uit met de instellingen? Trek even aan de bel. Wij maken er geen punt van om even met je mee te kijken.
Kennis omzetten in resultaat?
Een informatief artikel is een goed startpunt. Maar de echte groei voor je bedrijf zit in de professionele uitvoering. Geen tijd of zin om zelf met de techniek, het ontwerp of de vindbaarheid van je website aan de slag te gaan? Als jouw partner nemen we dit werk graag volledig uit handen. Zo kun jij je focussen op wat echt telt: je onderneming.