Cumulative Layout Shift.

Om de CLS te begrijpen kunnen we het beste het woord cumulative voor nu even vergeten. En daarmee inzoomen op de layout shift, wat precies is wat het al zegt: het verschuiven (of beter verspringen) van de layout. De reden dat dit ‘erg’ is in de ogen van Google heeft te maken met de gebruikers ervaring. Onderstaande Gif laat dat volgens mij perfect zien. Daarmee kan de CLS als bijzonder irritant ervaren worden.

Waarom ontstaat die CLS dan als die zo bijzonder irritant is. De grote boosdoener is JavaScript. En dit is eigenlijk een beetje flauw, want zoveel kan Javascript er nou ook weer niet aan doen. Dus laten we het erop houden dat het een combinatie is van degene die JavaScript heeft geimplementeerd en het enthousiasme waarmee JavaScript maar al te graag aanwezig wil zijn.

Om goed uit te leggen wat er precies gebeurt ‘onder de motorkap’ bij een CLS kunnen we het beste eerst een analogie gebruiken om te begrijpen hoe JavaScript precies werkt wanneer een pagina laadt. En deze analogie is het zetten van een ouderwets lekker bakje koffie. Let wel we gebruiken hiervoor geen Nespresso, maar een echt filter koffiezet apparaat.

Goed om koffie te zetten met een filter apparaat hebben we een aantal stappen die we achter elkaar dienen uit te voeren. Doen we dat op de juiste manier, dan zetten we koffie. Doen we dat niet op de juiste manier, dan krijgen we waarschijnlijk iets wat in de buurt komt van koffie. Allereerst vullen we het apparaat met voldoende water voor de hoeveelheid koffie die we willen gaan zetten. Dan stoppen we een filter in het apparaat, gooien daar de koffie bij, sommige mensen doen er dan nog een snufje zout bij (om de smaak een boost te geven) en daarna zet je het apparaat aan. Dan wachten we even et voila de koffie is klaar. Wat gebeurt er als we de volgorde omgooien. Dan gaat het waarschijnlijk mis, als we als laatste stap de koffie in de filter stoppen, dan krijgen we alleen warm water in de kan en geen koffie. Echter kunnen we het proces ook iets versnellen, als we namelijk met z’n tweeen koffie zetten dan kan jij alvast de filter en de koffie in het apparaat doen, terwijl ik het apparaat vul met water. Dit scheelt weer tijd en zo hebben we eerder koffie. We kunnen dus koffie zetten door synchroon alle stappen uit te voeren, maar ook koffie zetten door asynchroon alle stappen uit te voeren. Dit asynchroon uitvoeren dient dan wel juist te gebeuren anders krijgen we geen koffie.

JavaScript werkt in wezen op soortgelijke wijze. Wanneer een webpagina laadt, dan wordt alle aanwezig code die van de server door jouw browser wordt ontvangen van boven naar beneden geladen. Komt jouw browser een (java)script tegen dan gaat deze dit uitvoeren voordat het verder gaat naar de volgende regel met code. Zodra de browser het einde van de pagina heeft bereikt en alle scripts geladen zijn is de pagina geladen. Dit is de laadtijd. Deze laadtijd wordt enorm beinvloedt door de hoeveelheid JavaScript die op een pagina aanwezig is. Elke script wordt namelijk uitgevoerd en pas als het script helemaal geladen is gaat de browser door naar de volgende stap. Heb je dus hele omvangrijke scripts, dan dient de brwoser zich daar eerst een weg door te ploegen voordat deze door kan met het laden van de rest. Gelukkig hebben knappe koppen hier iets op gevonden. En dat is het asynchroon laden van JavaScript.

Nog niet helemaal duidelijk?

    Andere artikelen lezen?