Laadtijd als SEO-factor 2: javascript deferral
In dit tweede deel van de serie “laadtijd als SEO-factor” gaan we verder in op het terugdringen van de invloed van javascript op de laadtijd van een site. Want hoewel in deel 1 al duidelijk werd hoe we het blokkeren van een browser op scripts kunnen minimaliseren, kunnen we middels deferred execution en deferred loading de optimalisatie nog een stapje verder voeren.
Recap: script blocking
Eerst even een korte recap: zodra een browser een resource tegenkomt (CSS, favicon, afbeelding), opent deze een extra kanaaltje om deze resource tegelijk met de rest van de pagina te downloaden. Dit zorgt proces zorgt ervoor dat de browser de content zo snel mogelijk accuraat weer kan geven op het scherm. Dit geldt voor alle resources, behalve scripts. Omdat de uitvoer van een script gevolgen kan hebben voor andere pagina-onderdelen, blijft de browser net zo lang ‘hangen’ op het script tot dit gedownload en uitgevoerd is. In het geval van grote scripts kan dit ervoor zorgen dat de laadtijd van de pagina negatief beïnvloed wordt.
Deferred execution
Een groot deel van de javascripts op het web bestaat uit functionaliteit die geen directe invloed heeft op de weergave van de content op een site. Dat wil zeggen: terwijl ze ingeladen worden, verandert er eigenlijk niets op de pagina zelf. Denk hierbij aan analytics en allerlei event handlers (onclick bijvoorbeeld) die eigenlijk pas na een gebruikersactie in actie treden. Middels het HTML-attribuut defer is het mogelijk de browser de uitvoer (en dus niet het inladen!) van dergelijke scripts uit te laten stellen tot deze ‘tijd heeft’. Een voorbeeld:
<script type="text/javascript" defer="defer">
alert("Eerste script");
</script>
<script type="text/javascript">
alert("Tweede script");
</script>
<p>Content</p>
Als je deze code uitvoert (klik hier voor een live versie), zul je twee dingen opmerken:
- Het dialogbox voor het tweede script wordt eerder weergegeven dan de box voor het eerste script.
- Het dialogbox voor het eerste script wordt pas weergegeven nadat de complete pagina is ingeladen.
Deze methode kan dus mooi gebruikt worden om zaken als google analytics pas op te starten nadat de pagina is ingeladen. Echter, er is wel een grote valkuil: je kunt deferred execution niet gebruiken op scripts die later inline aangeroepen moeten worden! Onderstaand voorbeeld werkt bijvoorbeeld niet (zie live versie):
<script type="text/javascript" defer="defer">
<!--
function halloWereld() {
alert("Hallo wereld!");
}
//-->
</script>
<script type="text/javascript">
<!--
halloWereld();
//-->
</script>
Er verschijnt in dit script geen dialogbox. Dit heeft te maken met het feit, dat het aanmaken van de functie halloWereld() middels deferral is uitgesteld tot na het inladen van de pagina. De functie-aanroep halloWereld() die in het tweede script wordt gedaan, komt dus niet aan! Er zijn hier twee oplossingen: óf je stelt het tweede script óók uit, of je stelt het eerste script niet uit. Conclusie: deferred execution kan handig zijn om de content van de site sneller op beeld te krijgen, maar kijk uit met afhankelijkheden!
Deferred loading
Let op: in deze bespreking wordt uitgegaan van een begrip van het Document Object Model.
Een betere, zij het complexere, manier om javascript uit te stellen is deferred loading. Hierbij wordt niet alleen de uitvoer, maar ook het eigenlijke inladen van een script uitgesteld tot na het inladen van de rest van de pagina. In het geval van grote externe scripts kan dit ervoor zorgen dat de site een heel stuk sneller in beeld verschijnt. Door gebruik te maken van het window.onload-event is het mogelijk javascripts pas na het daadwerkelijke laden van een pagina op iedere gewenste plaats in het document te haken. Voorwaarde hiervoor is wel, dat de plaats waar je het javascript hebben wilt, voorzien is van een marker; een element met een uniek id-attrbuut. Een voorbeeld van een script:
<script type="text/javascript">
<!--
window.onload = function() {
myScript = document.createElement("script");
myScript.type="text/javascript";
myScript.src="http://www.domein.nl/externjavascript.js";
marker = document.getElementById('marker');
marker.appendChild(myScript);
}
//-->
</script>
Dit script kun je het beste plaatsen vlak voor de
