Browsers zijn slim, slimmer dan je denkt. Kleine kans dat je ooit hebt gehoord van preload scanners of look-ahead preparser. Toch maakt je website er gebruik van.
Veel genoemde maatregelen om je website te verbeteren, is:
- Je scripts naar de footer verplaatsen;
- Het defer attribuut voor script-elementen.
JavaScript defer versus verplaatsen naar de footer
Een kanttekening bij het verplaatsen van je JavaScript bestanden naar de footer, is dat de script-verwijzingen naar je JavaScript bestanden pas later in de broncode staan. Oftewel, de browser zou de script elementen en dus JavaScript bestanden later kunnen detecteren, dan wanneer je een script-element in je header plaats, voorzien met het defer-attribuut. Dit klopt in de basis; een browser rendert je code van links naar rechts en van boven naar beneden.
Browsers zijn slim: Preload scanner
Om die reden is het toevoegen van een defer-attribuut de meest waterdichte methode, ook dankzij de browser-ondersteuning van het defer-attribuut. Desondanks kan het zijn dat je geen verschil merkt in laadtijden, tussen defer, of je script elementen. Dit komt doordat browsers al sinds 2009 erg slim zijn. Ook de toenmalige Internet Explorer versie!
Browsers zijn namelijk voorzien van preload scanners, ook wel look-ahead preparsers genoemd. Dit betekent dat wanneer de browser in zijn werk wordt opgehouden vanwege render blocking resources, het onder water alvast op zoek gaat naar ander werk dat het kan verrichten, door script elementen te detecteren. Voorheen was dit wegens het HTTP/1 protocol en daarmee gelimiteerde gelijktijdige downloads minder effectief dan sinds we HTTP/2 hebben, geïntroduceerd in 2015.
Werkzaamheden voor JavaScript optimalisatie
Veel systemen en platformen, zoals een Wordpress of Magento in respectievelijk het website en webshop ecosysteem, zijn niet gebouwd met een performance first gedachtegoed. Dat levert automatisch veel resultaten op wanneer je in Google zou zoeken op Magento, Wordpress en "slow" als trefwoord:
- "Magento slow"
Ongeveer 1.440.000 resultaten - "Wordpress slow"
Ongeveer 192.000.000 resultaten
Ook JavaScript is vanwege zijn groei een reden van hun pagespeed en performance bottlenecks. Gevolg is dat dergelijke maatregelen vaak arbeidsintensief zijn, doordat het code en daarmee website functionaliteiten kan breken, wanneer optimalisatie niet doordacht wordt gedaan of er in de fundamenten niet voldoende bij stil is gestaan.
