Laadtijd als SEO-factor 1: de head
Met Google’s nieuwe caffeine zoekmachine om de hoek, rijzen er steeds meer vragen over welke factoren in meer of mindere mate een rol gaan spelen in het vernieuwde algoritme van de zoekmachine. Eén van de belangrijkste factoren waar door Google in de toekomst hoogstwaarschijnlijk meer aandacht aan besteed gaat worden, is de laadtijd van een website.
In het kader van “voorbereid zijn op de toekomst”, bespreek ik in dit eerste artikel uit de serie ‘laadtijd’ hoe het <HEAD>-element van een site dusdanig gestructureerd kan worden, dat de laadtijd van de site zo laag mogelijk blijft. Want als er ergens makkelijk winst te behalen is, is het wel in dit ogenschijnlijk onbelangrijkje stukje HTML.
De head
Even als opfrisser. Het W3C definieert het head-element als volgt:
The HEAD element contains information about the current document, such as its title, keywords that may be useful to search engines, and other data that is not considered document content. User agents do not generally render elements that appear in the HEAD as content. They may, however, make information in the HEAD available to users through other mechanisms.
Vrij vertaald, houdt dit in dat het <head>-element alle data bevat die niet tot de inhoud van het document gerekend wordt. Denk hierbij aan de titel, de description en de karaktercodering, maar ook de stylesheet en eventuele javascripts.
Serialisatie
Een browser kan in principe meerdere resources tegelijk downloaden. Elementen als afbeeldingen, stylesheets en tekst kunnen in principe zonder al teveel problemen tegelijk gedownload worden, aangezien ze verder onafhankelijk van elkaar zijn. Dit gedrag, dat parallellisatie genoemd wordt, zorgt ervoor dat de browser in zo kort mogelijke tijd een bruikbare versie van een webpagina kan presenteren.
Zodra een browser echter een javascript (extern of intern) tegen komt, blokkeert deze en start geen nieuwe parallelle downloads tot het script ingeladen danwel uitgevoerd is. Dit gedrag, dat serialiseren wordt genoemd, komt voort uit het feit dat het script misschien later in het document aangeroepen wordt en dus compleet ingeladen dient te zijn. Het is om deze reden dat scripts als Google analytics altijd onderaan een pagina ingeladen moeten worden; mochten de servers van Google niet bereikbaar zijn, dan kan in ieder geval de site nog ingeladen worden.
Het belang van volgorde
Als je de laadtijd van een site zo laag mogelijk wilt houden, is het van belang dat een browser zo min mogelijk tijd besteedt aan het wachten in seriële modus. Dit is mogelijk door gebruik te maken van het feit, dat een browser in seriële modus wél eerder gestarte parallelle downloads afmaakt. Concreet betekent dit, dat het het beste is eerst een parallelle download te starten en pas daarna de browser een seriële download aan te bieden.
Een voorbeeld waar dit vaak fout gaat, is dus in de head. Door een browser hier eerst een javascript aan te bieden en daarna pas een stylesheet, blijft de browser ‘hangen’ op het javascript, om pas na uitvoering hiervan te starten met de stylesheet. Plaatsen we de stylesheet echter vóór het javascript, dan zal de browser terwijl deze ‘hangt’ op het script, nog wel de eerder gestarte download van de stylesheet afmaken. Zorg er dus voor dat seriële downloads als javascripts pas ná parallelle downloads worden gestart! De situatie wordt geïllustreerd in onderstaande afbeelding:
Afbeelding: door de juiste elementen in de juiste volgorde op te vragen, kan veel tijd gewonnen worden. Links blokkeert de browser op het script, om pas na voltooiing de download voor de stylesheet te starten. Rechts start de browser met de stylesheet en terwijl deze wordt gedownload, wordt al met het script gestart. Hoewel de browser op het script blokkeert, wordt de stylesheet wel afgemaakt.
Een blauwdruk voor een goede head
Het is dus van groot belang de volgorde van de elementen in de header goed voor elkaar te hebben. Een voorbeeld van een goede head ziet er zo uit:
<head>
<title>Paginatitel</title>
<meta name="description" content="Omschrijving" />
<link rel="stylesheet" type="text/css" href="style.css" />
<link rel="shortcut icon" href="favicon.ico" />
<script type="text/javascript" src="script.js"></script>
<script type="text/javascript">
intern script
</script>
</head>
Op deze manier worden de scripts ingeladen terwijl de overige downloads (de favicon, de stylesheet) al gestart zijn. Tijdens het inladen van de javascript, worden deze downloads keurig netjes afgemaakt, waardoor de browser relatief weinig tijd besteedt aan het puur wachten op javascript.
Let op: een scherpe ziel zal snel opmerken dat het hoe dan ook beter is zoveel mogelijk javascript helemaal onderaan, vlak voor de </body>, te plaatsen. Dit is echter niet altijd mogelijk. In gevallen waar het wel mogelijk is, kun je bovenstaand principe ook toepassen, maar dan met zaken als footer afbeeldingen.
Stem / voeg toe / tweet : 
