Welke impact hebben marketing scripts op website performance?

Script laden

Een script laden is geen rocket science. Je kan dit makkelijk asynchroon laten verlopen, zodat andere resources ondertussen ook geladen kunnen worden (zie het async woord op de voorbeeld script-tag hierboven). Je moet hierbij wel zicht hebben op de hoeveelheid scripts over heel de website en hoe groot die zijn. Het is zonde om veel extra MB’s aan data in te laden, als dit niet nodig is. Bovendien is de laadsnelheid altijd afhankelijk van het netwerk van de gebruiker, zoals 3G, 4G, wifi of internet via de kabel. De kwaliteit van dit netwerk kan wisselen. 

Script interpreteren

Het script interpreteren is een browser taak die vaak onderschat wordt. De browser denkt dan na over de betekenis van het script. Dit proces is sterk afhankelijk van het type apparaat en is een van de zwaarste stappen die JS doorloopt in je browser. In dit artikel wordt uitgelegd wat dat interpreteren precies inhoudt, en wat het kost (korte antwoord: tijd). Het komt op twee dingen neer: 

1. Parsing: de betekenis van de aangeleverde code achterhalen. Je kan dit vergelijken met het proces in je eigen hersenen dat een stuk tekst ontleedt en dit vervolgens begrijpt. 
2. Compiling: de code omzetten in een andere vorm van code die daadwerkelijk uitgevoerd kan worden door een browser.

Je kan dit vergelijken met het proces in je hoofd wat een doel (zoals: iets zeggen tegen aan een ander) omzet in voor de ander begrijpelijke taal. Het uitvoeren (uitspreken) staat hier nog los van.

Het parsen en compilen van JavaScript kost CPU-kracht, en dus tijd. Het kost tijd en energie voor de processor in het apparaat dat je gebruikt om dit uit te voeren. En die CPU-kracht is soms voldoende aanwezig, vooral op de betere apparaten, maar lang niet altijd. Goedkope telefoons (die ook in Nederland populair zijn) hebben een veel minder sterke CPU dan een iPhone of een goede laptop. In onderstaande afbeelding vind je een vergelijking van een aantal populaire apparaten en hun processorkracht bij 1 MB-bundel JavaScript.

Script uitvoeren

Ook het uitvoeren, het executen, kost rekenkracht en dus tijd. Dit houdt in dat de code is begrepen en vertaald en de browser de opdracht nu kan uitvoeren. In tegenstelling tot het laden van een script, is het parsen, compilen en executen van JS wel allemaal blocking. Dit betekent dat de browser de pagina tijdelijk niet kan updaten, omdat het met iets anders bezig is. Voor alle processen op een pagina, ook die te maken hebben met CSS, heeft de browser maar één stel “hersenen”. Er is één main thread dat maar één ding tegelijk kan doen. Bijvoorbeeld: als je browser een while-loop uitvoert in JS, kan de gebruiker niet tegelijkertijd een button aanklikken. Er is ruimte voor letterlijk 1 taak tegelijk.

Tegenwoordig is dit dan ook de meest genoemde reden dat Google een website als “langzaam’ beoordeelt. Ondanks dat een pagina snel gedownload kan zijn, gebeurt er daarna nog zoveel op de pagina dat de bezoeker alsnog moet wachten.

In mijn volgende blog ga ik dieper in op de moderne definitie van performance. Wat is performance volgens Google Precies? En hoe meet je de performance?