Conversie optimalisatie: Tijd is conversie, PageSpeed is goud!

"Meer conversies door minder laadtijd."

Veel grote bedrijven als Google en Amazon onderzoeken het effect van het verkorten van de laadtijd op zowel conversie en SERP rankings en komen daarbij bijna altijd tot de conclusie dat een hogere paginasnelheid zorgt voor betere resultaten op beide vlakken.

Paginasnelheid blijkt invloed te hebben op de user experience en ROI-waarde van een webpagina en is daarmee direct een interessante factor op het gebied van optimalisatie.


Paginasnelheid: De basics

Zodra een URL wordt aangeklikt of ingetypt maakt de browser, via het internet, contact met de server van de website waarna alle JavaScripts, CSS, HTML en images gedownload worden. Paginasnelheid is een term die wordt gebruikt om weer te geven hoeveel tijd een browser nodig heeft om de bestanden van een bepaalde pagina te verwerken. In feite is dit te verdelen in 2 belangrijke momenten.

  1. Het eerste moment is het moment van de ’perceived performance’, ofwel de tijd die de browser nodig heeft om de eerste, belangrijke content boven de fold weer te geven.
  2. Het andere moment gaat om de volledige laadtijd van de pagina, waarin alle bytes zijn gedownload door de browser.

Zoals eerder vermeld is het, voor een goede user experience, wenselijk om een bezoeker van de website slechts kort te confronteren met een leeg scherm. De above-the-fold content moet dus zo snel mogelijk ingeladen moet worden, iets dat gedaan kan worden door progressive rendering. De browser laadt in dit geval eerst de belangrijke elementen, waarna de rest van de pagina wordt aangevuld.


Wil je werken aan jouw paginasnelheid? dan zijn dit aspecten om in de gaten te houden:

1. Server response time:

Dit is de tijd die de browser nodig heeft om contact te krijgen met de server waarop de website staat opgeslagen. Weinig websitehouders staan er bij stil dat hosting dus wel degelijk meer is dan een verplichting en dat een goede keuze hen soms meer dan een seconde aan winst laadtijd kan schelen.

2. Enable Compression:

Wanneer een website gebruik maakt van compression, worden de files verzonden als gzip-bestanden. Hierdoor hoeft de browser minder requests te versturen aan de server en worden de bestanden sneller ingeladen. Meer hierover lees je op bijvoorbeeld deze blog van varvy.

3. Image Optimalisation:

Vrijwel iedere webpagina bevat meerdere afbeeldingen. Deze afbeeldingen nemen vaak veel geheugen in beslag, maar door ook voor afbeeldingen compressie te gebruiken kan je de grootte van deze files vaak ver terug brengen. In sommige gevallen kan er op iedere foto voor ongeveer 95% aan bestandsgrootte worden gewonnen.

4. Browser Caching:

Na het downloaden van de files geeft de website de opdracht aan de browser om een aantal van de belangrijke bestanden voor een bepaalde termijn op te slaan in het cache geheugen. Op deze manier hoeven deze specifieke files bij het volgende bezoek niet opnieuw gedownload te worden, wat zorgt voor een aanzienlijke vermindering van de laadtijd van de pagina bij het volgende bezoek.

5. Render & Minify:

Eigenlijk zo goed als alle pagina’s op het huidige internet maken gebruik van Javascript, CSS en HTML en voor dit allemaal weergegeven kan worden moet de browser al dit codewerk koppelen en uitlezen. Hoe korter de code is, des te sneller heeft de browser deze activiteit uitgevoerd. Vandaar dat het juist coderen van een pagina een enorme invloed heeft op de paginasnelheid.

Als het aan komt op het coderen van een snelle webpagina geldt dan ook het principe ‘less is more’. Hoe minder code nodig is voor het goed laten functioneren van de pagina, des te hoger de paginasnelheid zal zijn.

Gezien ook gekoppelde bestanden hier in mee tellen, is het in sommige gevallen goed voor de progressive rendering om bepaalde CSS regels inline op te stellen of de CSS regels te verdelen in verschillende files die worden aangeroepen door gebruik te maken van verschillende media types. Dit zorgt er voor dat niet alle CSS files en regels direct door de browser uitgelezen hoeven worden om de content boven de fold op te bouwen.

Maak bijvoorbeeld een aparte CSS file aan met alle opmaakregels die te maken hebben met de fonts en geef bij de koppeling de mediatag “print” mee, zodat de browser weet daar regels gevonden kunnen worden voor de printed content. Daarmee verlaag je de prioriteit voor het uitlezen van deze file, waarbij de belangrijkere content dus sneller wordt weergegeven.

<link href=”fonts.css” rel=”stylesheet” media=”print”>

Hetzelfde principe geldt ook voor JavaScript. De informatie, social shares en sales die online tools/partners als Facebook, Google, Disqus, AddThis en Optimizely voortbrengen zijn voor veel bedrijven erg waardevol. Maar de hoeveelheid scripts die gepaard gaan met de implementatie zorgen helaas wel voor een verlies in de PageSpeed score.

Het is daarom niet alleen goed om regelmatig te evalueren of bepaalde scripts verwijderd kunnen worden, ook is het belangrijk de JavaScripts zo veel als mogelijk pas aan het einde van de code te plaatsen, zodat deze niet in de weg staan bij het renderen van de pagina.

Al met al zijn er behoorlijk wat manieren om de paginasnelheid te beïnvloeden en bestaan er ook goede tools om de vorderingen van de pagina mee te tracken. Een prima manier om te beginnen met het verbeteren van de paginasnelheid is Google PageSpeed Insights. Deze online tool voorziet niet alleen in de score die Google aan de huidige paginasnelheid geeft, maar geeft ook tips om deze te verbeteren. Vervolgens helpen sites als WebPageTest om de exacte resultaten van je werk te meten in tijd en kilobyte!


Stel uw vraag hier: