Content-visibility als performance booster

Sinds 2019 is het mogelijk om het attribuut ‘loading=”lazy”’ te koppelen aan delen van je website (afbeeldingen en Iframes) om ervoor te zorgen dat niet alles direct wordt ingeladen. Dit komt de snelheid van je website ten goede.

Met de nieuwe release van Google Chrome 85 wordt er ook een nieuw attribuut gelanceerd, namelijk “content-visibility”. Hiermee krijgen we nog meer mogelijkheden op het gebied van performance op webpagina’s. Bij Searchresult hebben we hier al met deze nieuwe attribuut geëxperimenteerd en we vertellen jullie graag over onze ervaringen.

Wat doet “content-visibility”?

Met lazy loading geef je aan dat afbeeldingen niet direct worden ingeladen. Je kiest er dan vaak voor om afbeeldingen die onderin de pagina staan – en dus niet direct in de huidige viewport – later in te laden, ten behoeve van de laadsnelheid van je pagina. Deze afbeeldingen worden dan pas geladen wanneer je naar beneden scrollt, nét voordat de afbeelding in beeld komt. Dit levert in veel gevallen al een grote besparingen op de totale laadtijd van de pagina. 

Met content-visibility kunnen we objecten van een pagina labelen die niet opgebouwd worden als ze niet in beeld zijn. Denk bijvoorbeeld aan een gedeelte (DIV) van een artikel dat afbeeldingen, een header en tekst bevat. Door deze DIV te labelen met de tag “content-visibility:auto” , worden alle elementen in die sectie niet meegenomen als de pagina voor het eerst wordt gerenderd. De niet gerenderde onderdelen worden pas opgebouwd vlak voordat ze in beeld komen. 

Doordat je kunt bepalen welke elementen wel en niet worden opgebouwd bij de initiële load van je pagina, kun je dus flink wat tijd winnen in de renderfase van een pagina.

De voordelen van content-visibility

  • Snellere load van de pagina door het verminderen van renderen
  • Een lagere blocking time (snellere interactieve pagina)

Content visibility is niet hetzelfde als lazy loading. Bij content visibility worden de gelabelde elementen niet gerenderd, maar worden alle requests (bestanden) wel ingeladen. 

Bij lazy-loading wordt de afbeelding pas ingeladen als deze opgevraagd wordt, terwijl het bij content-visibility dus zo is dat de inhoud van alle content (tekst, afbeeldingen, video, etc) wel direct ingeladen wordt. 

Hoewel we ons in deze test toeleggen op alleen content visibility, is het ook zeker interessant om voor de volgende keer te kijken naar de implementatie van content visibility in combinatie met native lazy loading

Experiment met content-visibility

Om de theorie in de praktijk te testen, hebben we een experiment opgezet. We hebben 2 identieke pagina’s gebouwd die allebei bestaan uit een flink aantal contentblokken. Één pagina is zonder content-visibility en bij 1 pagina hebben wij de rood gearceerde blokken met content-visibility gelabeld.

Opzet content-visibility attribuut

De URL’s staan hieronder bij de bronvermelding weergegeven. 

Verwachtingen 

De verwachtingen zijn dat we vooral verschil zouden gaan zien in de painting en rendering (verschillende fasen bij het opbouwen) van een pagina. Omdat de testpagina’s niet zo groot waren zou het verschil echt in de milliseconden aan te tonen zijn. Een verschil dat natuurlijk groter is bij pagina’s van grotere omvang; met veel scripts, afbeeldingen en content die van elders wordt ingeladen. 

Testresultaten 

Zoals verwacht zien wij een verschil in rendering en painting waarbij de variant met content-visibility gemiddeld 5 tot 7x sneller wordt opgebouwd. Dit gebeurt dus doordat de verschillende secties pas opgebouwd worden, net voordat ze in beeld komen. 

Index-a.html index-b.html (met content-visibility)

Conclusie

Content visibility is een zeer welkome aanbieding in de toolkit van web performance. Hoewel het attribuut minder ingrijpend is als native lazy-loading, is het er toch een die we zeker gaan gebruiken voor onze klanten. Die tienden van seconden tellen namelijk ook mee in de klantbeleving. Vooral op grotere blogs of flinke pagina’s met ingewikkelde lay-outs, receptensites en e-commerce partijen kan dit in goede samenwerking met lazy loading tot kleine performance boosts leiden op ondersteunde browsers. 

Opzet van het experiment

We hebben twee identieke demo pagina’s opgezet, die alledrie gebruik maken van een div structuur met geneste elementen om de pagina vorm te geven. We laden hierbij enkel eigen bestanden in (css en javascript) en laten elementen als video’s van youtube erbuiten om een zo’n steriel mogelijke testomgeving te creëren. Op de afbeelding is duidelijk te zien welke secties zijn gemarkeerd.

Opzet content-visibility attribuut

De testen zijn uitgevoerd op een incognito chrome venster zonder enige extensies. Getest is op een Macbook pro 2015 I5 met 8gig intern. De chrome instellingen simuleren een gemiddelde mobiele telefoon op een snelle 3g verbinding. Het dichtknijpen van deze verbinding (lagere cpu en netwerksnelheid) doen wij om het resultaat duidelijker in beeld te krijgen. Op een snelle computer zul je namelijk niet snel iets merken van de winst. Deze winst is vooral te behalen op langzamere apparaten en tragere netwerken.  

De URL’s staan hieronder bij de bronvermelding weergegeven. 

Bronnen

https://web.dev/content-visibility/ 

Testpagina’s

https://thijsvanbeers.nl/content-visibility/index-a.html 

https://thijsvanbeers.nl/content-visibility/index-b.html

 

Thijs van Beers
Thijs van Beers

Senior SEO Specialist

t.vanbeers@searchresult.nl


Welkom.
Vanaf november is Searchresult veranderd in Springbok.
Nieuwsgierig?