Een snellere website met het kritieke weergavepad

Het verbeteren van de websitesnelheid is voor veel SEO-specialisten een zware opgave. En dat is niet zonder reden: het bijschaven van de snelheid is een mes dat aan twee kanten snijdt. Aan de ene kant verhoogt het de gebruikersvriendelijkheid, wat kan leiden tot meer conversies, maar het verlaagt ‘pogosticking’ (zoekers die van de zoekresultatenpagina naar de website gaan en daarna weer terugkeren naar de zoekresultatenpagina). De snelheid van een website is daarnaast ook een ranking factor op zichzelf. Het kritieke weergavepad is een belangrijk aspect van de websitesnelheid. Wat moet er precies gebeuren bij het inladen van een website en op welke manier wordt dit uitgevoerd?

Waarom het kritieke weergavepad?

Doordat websites uiteenlopende componenten hebben die moeten worden ingeladen, worden ze traag. Het laden via een kritiek weergavepad geeft de mogelijkheid om een grote pagina met veel bronnen even snel in te laden als een kleine pagina (met minder bronnen).

Een aantal jaar geleden waren websites vaak enkel opgebouwd uit HTML. Nu is een groot percentage geconstrueerd uit HTML, maar ook uit CSS en Javascript. Het laden van de pagina’s via het kritieke weergavepad zorgt ervoor dat ook deze pagina’s even snel (of sneller) kunnen laden.

“Een goed weergavepad geeft je een significant voordeel over je concurrenten”

Om een pagina correct weer te geven, moet een browser alle bronnen opvragen bij de server. Een eenvoudige pagina wordt bijvoorbeeld op de volgende manier ingeladen:

1. De browser download het HTML-document
2. De browser leest (‘parsed’) de HTML en ziet dat er een CSS- en Javascriptdocument aanwezig is, en één afbeelding
3. De browser begint met het downloaden van de afbeelding
4. De browser kan de pagina niet weergeven zonder het CSS- en Javascriptdocument
5. De browser download het CSS-document en leest het
6. De browser kan nog steeds niet de pagina weergeven omdat het nog het Javascriptdocument mist
7. De browser download het Javascriptdocument en leest het
8. Nu kan de browser de gehele pagina weergeven

Dit is een voorbeeld van een zeer eenvoudig weergavepad. De kans is groot dat het weergavepad voor jouw pagina een stuk ingewikkelder is. Wanneer je pagina acht Javascriptbestanden heeft, moet de browser acht keer naar de server om deze één voor één te downloaden en te lezen. Een groot gedeelte van de websites heeft een onlogisch weergavepad. Dit maakt dat wanneer je wel een goed weergavepad hebt, je een significant voordeel over je concurrenten hebt.

Het kritische gedeelte van de website

Om op een optimale manier enkel het kritische gedeelte van de website als eerste in te laden, moeten we een aantal dingen waarmaken:

• Het aantal kritische bronnen minimaliseren (CSS, Javascript)
• Het aantal kritische bytes minimaliseren
• De lengte van het kritieke weergavepad verkorten

Met kritisch bedoelen we: het eerste aanzicht van de pagina dat de gebruiker ziet (‘above the fold’).

Kritische bronnen

Het aantal kritische bronnen wordt geminimaliseerd door bijvoorbeeld in plaats van vijf verschillende CSS-documenten, één grote te maken. Op deze manier hoeft de browser maar één keer naar de server om een CSS-document op te halen.

“Het laden via een kritiek weergavepad kan een grote pagina met veel bronnen even snel inladen als een kleine pagina”

Dit kan redelijk eenvoudig worden gedaan door simpelweg de CSS van het ene document naar het grootste document te kopiëren. Hier hoeft geen plug-in of tool voor te worden gebruikt.

Kritische bytes

Het aantal kritische bytes kan geminimaliseerd worden door niet teveel rich media boven de vouw te plaatsen. Plaats dus geen content die zwaar in te laden is (zoals een video) op het eerste aanzicht van de pagina.

De lengte van het kritieke weergavepad

De lengte van het kritieke weergavepad verkorten is in veel gevallen het belangrijkst. Een pagina die duizend afbeeldingen weergeeft, kan hierdoor even snel worden geladen als een pagina met één afbeelding. Dit kan worden gedaan door ‘lazy loading’. Met lazy loading worden afbeeldingen in het eerste aanzicht als eerste geladen. Daarna worden de andere afbeeldingen van de website geladen. Hierdoor wordt er enorm veel bespaart op de websitesnelheid van een pagina, doordat alleen de benodigde onderdelen van een pagina meetellen in de snelheid.

Om bijvoorbeeld het laden van Javascript- of CSS-documenten uit te stellen, wordt ‘deferring’ gebruikt:

1. De externe Javascriptdocumenten worden niet ingeladen voordat de content van de pagina is geladen
2. De (kritische) content van de pagina wordt ingeladen (krijgt voorrang)
3. De externe Javascript wordt nu ingeladen en beïnvloedt de pagina

Om dit te bewerkstelligen kan er een ‘defer.js script’ boven de </body> tag worden geplaatst:

<script defer src=”script.js”>

Hierdoor wordt er een signaal afgegeven dat de Javascript hieronder pas later wordt ingeladen.

Gebruik bovenstaande punten om je websitesnelheid significant sneller te maken, en dus een betere ervaring en ranking te krijgen.