"Meer conversies door minder laadtijd."

Veel grote bedrijven met enorme hoeveelheden websitebezoekers doen onderzoek naar paginasnelheid. Zo onderzoeken zij het effect van het verkorten van de laadtijd voor conversieratio's en SERP rankings.

Drie belangrijke conclusies uit deze onderzoeken zijn:

1. Paginasnelheid heeft invloed op de user experience.
2. User experience heeft invloed op de conversieratio.
3. Conversieratio heeft invloed op de ROI-waarde van een webpagina. Bereken je conversie en ROI-waarde.

Kort samengevat: het optimaliseren is van belang voor de ROI-waarde van je website.

Wat is de paginasnelheid (PageSpeed)?

De paginasnelheid van een webpagina geeft aan hoeveel tijd een browser nodig heeft om de bestanden te verwerken.

Wanneer een pagina op het web geladen moet worden maakt de browser contact met een server. Hierna worden alle resources gedownload (Javascript, CSS, HTML en afbeeldingen).

In feite is de pagina laadtijd te verdelen in 2 belangrijke momenten:

1. Perceived performance: de tijd die de browser nodig heeft om de eerste versie van een pagina weer te geven. Vandaar ook de term "perceived performance", hoe snel heeft een gebruiker de perceptie dat de pagina geladen is.
2. Volledige laadtijd: Het tweede moment wordt getimed zodra alle resources van de pagina in zijn geheel geladen zijn.

Zoals je wellicht begrijpt is het voor de user experience belangrijk om de bezoeker van je website kort te confronteren met een leeg scherm. Progressive rendering helpt je hierbij. De browser laadt in dit geval eerst de belangrijke elementen, waarna de rest van de pagina wordt aangevuld.

Wil je een betere paginasnelheid?

Dan hebben we hier 5 belangrijke factoren voor je op een rij gezet:

1. Verklein de server respons time

Verklein de tijd die browsers nodig heeft om contact te leggen met je server. Weinig websitehouders staan er bij stil dat goede hosting dus wel degelijk belangrijk is voor hun online succes. Een goede keuze kan de laadtijd zomaar met een seconde verkleinen!

2. Verstuur minder resources naar de browser

Verminder het aantal bestanden dat je naar de browser stuurt om de pagina mee te maken. Iedere resource die je kan elimineren kan je letterlijk euro's schelen! Is dat extra script dus wel echt nodig? Wat is de toegevoegde waarde van die extra afbeelding?

3. Comprimeer je resources

Maak gebruik van gecomprimeerde bestanden. Je bestanden worden dan verzonden als gzip-bestanden, waardoor de browser minder verzoeken aan de server hoeft te versturen. Vergeet naast de HTML, CSS en Javascript bestanden ook niet om afbeeldingen te comprimeren. Afbeeldingen zijn voor de laadtijd van veel webpagina's kortweg "killing". Veel ondernemers kiezen ervoor om grote afbeeldingen te plaatsen zonder deze te comprimeren. Het gevolg is dat het downloaden van sommige afbeeldingen meer dan 1MB aan data kost voor de bezoeker. Dit terwijl het mogelijk is om pagina's te produceren die in zijn geheel niet meer dan 1MB aan data kosten. In sommige gevallen kan er op iedere foto ongeveer 95% aan bestandsgrootte gewonnen worden!

4. Gebruik Browser Caching:

Zorg dat je browser caching gedeclareerd hebt in je websitecode. Deze declaratie zorgt ervoor dat de browser enkele files van de pagina opslaat in het geheugen. Deze files hoeven dan bij een later paginabezoek op de website niet opnieuw gedownload te worden. Dit kan een aanzienlijke winst in laadtijd tot gevolg hebben.

5. Render & Minify codes:

Vrijwel iedere pagina op het internet maakt gebruik van talen als Javascript, CSS en HTML. Gezien de browser deze coderegels moet koppelen en uitlezen geldt hierbij: hoe korter de code, des te sneller is de pagina geladen. Het juist coderen van de website kan dus een enorme invloed hebben op de paginasnelheid.

Ook gekoppelde bestanden tellen mee in dit principe. Dus is het soms goed voor de progressieve rendering om CSS regels inline op te stellen of te verdelen over verschillende files, die enkel opgeroepen worden indien nodig.

Maak bijvoorbeeld een aparte CSS file aan met alle opmaakregels voor de gebruikte fonts en geef bij de koppeling de mediatag "print" mee. De browser weet nu dat hier 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 erg waardevol. De hoeveelheid scripts die gepaard gaan met de implementatie zorgen echter helaas wel voor een verlies in de PageSpeed score. Bekijk daarom regelmatig of je deze scripts nog wel gebruikt en zorg dat de Javascript regels zoveel mogelijk aan het eind van de code worden aangeroepen. Hiermee voorkom je dat deze scripts in de weg staan bij het renderen van de pagina.

Een andere tool die je zal helpen bij het verschonen van je code is Google Tag Manager. Het Tag manager systeem injecteert codefragmenten in je code, zonder dat deze fragmenten daadwerkelijk in je broncode staan. Zo kan je jouw Analytics evenementen, Facebook pixel tracking en andere scripts implementeren zonder dat dit ten koste gaat van de laadtijd!

Zelf testen hoe je paginasnelheid ervoor staat?

Er behoorlijk wat manieren om de paginasnelheid te beïnvloeden. Ook zijn er voldoende goede tools om de vorderingen mee te checken. 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!