Lazy loading met een façade

Vele die werken aan page speed en Web Vitals zullen zich afgevraagd hebben wat Lazy loading met een façade is. Er is namelijk een melding in de Google page speed test dat zegt: “Bepaalde resources van derden kunnen via lazy loading worden geladen met een façade”. Dit onderdeel heeft invloed op de TBT (Total Blocking Time). TBT is één van de belangrijkste onderdelen van page speed en Web Vitals, namelijk 30%.

Zoals de melding al aangeeft gaat het om bronnen van derden en in dit geval in het algemeen Iframes. Denk hierbij aan Youtube en/of Vimeo video’s en Google maps bijvoorbeeld. Deze worden normaal getoond middels een Iframe.

Waarom Lazy loading met een façade

Waarschijnlijk ben je hier gekomen omdat je de melding “Bepaalde resources van derden kunnen via lazy loading worden geladen met een façade” hebt gezien in de Google page speed test. Het probleem is dat er één of meerder onderdelen op de pagina staan die code van andere website laden. Dit kunnen zaken zijn als Google maps, YouTube video’s, reviews of een chat. Deze worden allemaal geladen in een iframe wat lazy loading met een façade mogelijk maakt.

Als je bijvoorbeeld een youtube video op de website plaats, plaats je eigenlijk een iframe. In dit iframe wordt de video getoond die eigenlijk op YouTube wordt afgespeeld. Dit betekent dat de website alles van Youtube moet laden. Niet alleen de video maar ook aardig wat JavaScript. Eerst moet er een verbinding gemaakt worden, van alles moet gedownload worden en daarna in de browser getoond worden. Dit kost allemaal dure tijd die je niet zo maar wilt verspillen.

Lazy loading met een façade

De truc van Lazy loading met een façade is eigenlijk heel simpel. In eerste instantie toon je niet de video of wat dan ook maar toon je een façade, een statisch element, zoals een afbeelding. Bijvoorbeeld voor een video kan je een afbeelding van de video gebruiken. Je zou dan net zo iets kunnen doen als met lazy load voor afbeeldingen. Als het iframe in beeld komt dan wordt het geladen. Dit kan gedaan worden met jQuery of JavaScript. Met video’s kan het zelfs dat je wacht tot iemand op de afbeelding klikt en dan pas alles laad.

De lazy load is veel makkelijker dan men zou denken. Voor een duidelijk uitleg hoe je dit kan doen kan je lezen op Lazy Load YouTube video’s

Er zijn ook andere zaken die op dezelfde manier werken. Denk bijvoorbeeld aan een chat, ook deze kan men eerst tonen met een afbeelding. Als men dan klikt op de afbeelding wordt pas alles geladen. De opzet hiervan is afhankelijk van welk soort chat je gebruik wilt maken. Hier zal uiteindelijk wel JavaScript voor gebruikt moeten worden om het te triggeren.

Voor andere zaken zoals reviews die van een andere website komen en Google maps. Deze kunnen allemaal eerst getoond worden als een afbeelding in een link. De link verwijst dan naar de pagina waar de werkelijke reviews en Google map staan. Als men dan klikt op de afbeelding gaat men naar die pagina.

Gebruik lazy loading met een façade of niet?

Ten eerste zal de website een stuk sneller worden. Ten tweede is het een onderdeel van TBT wat 30% van het totaal is, dus zeker de moeite waard. En ten derde wil je natuurlijk de bezoekers de beste ervaring bieden.

Probleem is dat dit voor de meeste behoorlijk lastig kan zijn maar huur anders een ervaren freelance website ontwikkelaar in om dit goed voor je op te zetten. De resultaten zijn het allemaal waard.