010 303 67 40
Upward Online Blog Header Blauw
Mark Spermon

Is jouw website snel genoeg? Zo slinkt de laadtijd van je site

Geplaatst op |

Stel je voor: Jij komt het product wat je al jaren wilde hebben tegen in een webshop. Het kost minder dan je verwacht had. Het is zelfs afgeprijsd. Een koopje. Bestellen maar. Je voegt het product toe aan je winkelmandje. En dan begint het. Je wilt naar de volgende stap in het bestelproces maar de pagina laadt maar niet. Na 5 seconden ben je eindelijk in de volgende stap. Snel je gegevens invullen en naar betalen. Ook nu wil de website maar niet laden. Er is geen doorkomen aan. Je geeft het op. De webshop loopt een verkoop mis omdat de website erg traag is.

Wist jij dat uit onderzoek blijkt dat 1 seconde vertraging in de laadtijd van een website je 7% conversies, 11 % minder paginaweergaven en 16% afname in klanttevredenheid kan veroorzaken? In echte getallen: Een website die per dag €100.000,- omzet op jaarbasis 2.5 miljoen euro aan omzet misloopt.

pageload

Als een webshop 2.5 miljoen misloopt is laadtijd echt belangrijk. In deze blog leg ik je precies uit wat laadtijd is. Waarom het belangrijk is voor zoekmachine optimalisatie en de gebruikerservaring van de bezoekers op jouw website. Ook geef ik een aantal tips hoe je de laadsnelheid van je website kunt verbeteren en bespreek ik WordPress plugins die je daarbij kunnen helpen.
[contentupgrade]Gratis PDF Checklist: Download de checklist met tips om te zorgen dat jij de laadtijd van je website kunt verbeteren.[/contentupgrade]

Wat is laadtijd?

Simpel gezegd is laadtijd de tijd die het duurt voordat alle elementen (plaatjes, tekst, html enz.) op een webpagina geladen zijn. Sommige webbouwers gebruiken de termen ‘websitelaadtijd’ en ‘paginalaadtijd’ door elkaar. Maar het is niet hetzelfde. Paginalaadtijd is de laadtijd van een specifieke pagina op je website. Bijvoorbeeld je homepage, een blogpost of je contactpagina. De laadtijd van een website is het gemiddelde van de laadtijd van alle pagina’s. Dit gemiddelde zegt niks over individuele pagina’s. Hier kan een groot verschil tussen zitten.

Hoe snel moeten pagina’s op mijn website laden? Wat getallen:

  • Uit onderzoek blijkt dat ongeveer 50% van de mensen verwacht dat een webpagina sneller laadt dan 2 seconden.
  • 40% van de mensen verlaat een webpagina die langer dan 3 seconden nodig heeft om volledig te laden.

Bron: blog.kissmetrics.com

Hoe sneller je pagina laadt, hoe beter natuurlijk. Maar je wilt getallen horen. Zelf houd ik een laadtijd tussen 0,5 en 1,5 seconden aan. Is de laadtijd langzamer dan 1,5 seconden dan haken mensen af. Wil je dat je pagina sneller laadt dan 0,5 seconden, dan moet je vaak grote technische wijzigingen doorvoeren op je website die niet opwegen tegen de tijdwinst die je behaalt.

Laadtijd website verbeteren

Waarom laadtijd van je website zo belangrijk is?

Mensen vinden websites en pagina’s die snel laden erg belangrijk. Dit geldt ook voor Google.

Voor zoekmachineoptimalisatie

Nu is je vraag natuurlijk of je website beter vindbaar is in Google wanneer deze sneller laadt? Niet een-op-een. Laadtijd is een van de ongeveer 200 factoren die Google gebruikt om een webpagina te ranken in de zoekresultaten. Een verbeterde ranking van je website is een combinatie van meerdere factoren. Google heeft aangegeven dat de snelheid van websites en webpagina’s wel een van de belangrijkere elementen is die Google meeneemt bij het berekenen van de ranking. Dus ja, de laadsnelheid van je website en webpagina’s is zeker van belang voor je zoekmachineoptimalisatie.

Voor user experience

Iedereen wil de ideale user experience voor zijn website. Zeker als je ziet dat 40% van de bezoekers een webpagina verlaat als deze langer laadt dan 3 seconden. Je website kan geweldige blogs hebben, producten verkopen of coole video’s bevatten. Dit is allemaal niet belangrijk als je webpagina’s langzaam laden. Je website zal nooit een succes worden als je bezoekers gefrustreerd afhaken omdat je website niet snel genoeg is. Hier kun je gelukkig iets aan doen.

Hoe test je de snelheid van je website?

De eerste stap om de snelheid van je website te verbeteren is het testen van de pagina’s van je website. Je moet achterhalen hoe het komt dat pagina’s op je website traag zijn.

Wat ga je testen?

De eerste vraag is: wat moet ik testen? Een fout die vaak gemaakt wordt is dat alleen de homepage van een website getest wordt. Elke pagina van je website kan ranken in Google en via elke pagina kunnen bezoekers naar je website komen. Test daarom altijd meerdere pagina’s. In ieder geval de belangrijkste pagina’s van je website:

  • Homepage
  • Over ons
  • Blogoverzicht
  • Contactpagina

Ook kun je in Google Analytics kijken welke webpagina’s een hoge ‘bounce rate’ hebben. Een van de oorzaken hiervan kan zijn dat de pagina langzaam laadt en bezoekers direct afhaken.

Voer verschillende tests uit

Voer altijd meerdere tests op verschillende momenten uit. Een enkele test is nooit representatief. Om goed te onderzoeken kun je bijvoorbeeld een week lang elke dag op een verschillend tijdstip je webpagina’s testen.

Tools om de snelheid van je website te testen

Gelukkig hoef je de laadtijd van je webpagina’s niet met een stopwatch in je hand te timen. Hier zijn verschillende tools voor op internet. Hieronder bespreek ik 3 populaire tools. Elke tool heeft eigen specifieke kenmerken. Test je webpagina’s in alle drie de tools. Zo krijg je de beste informatie over mogelijke issues.

GTmetrix

Met GTmetrix kun je meer testen dan alleen de snelheid van je webpagina’s. De tool analyseert op 30 manieren hoe je de snelheid en performance kunt verbeteren. Bijvoorbeeld YSlow scores, laadtijd, het aantal aanvragen en de totale grootte van je webpagina’s.

gtmetrix

Google PageSpeed

De PageSpeed Insights tool van Google is een uitgebreide (en gratis) tool om mee te starten. Het werkt heel simpel. Je kopieert de pagina-URL die je wilt testen en klikt op ‘analyseren’. De Insights tool geeft niet de exacte laadtijd van je pagina, maar laat wel mogelijke oorzaken zien waarom je webpagina’s langzaam laden. Ook geeft de Insights tool twee scores: een voor desktop en een voor mobiel.

google-page-speed-insights

Pingdom Website Speed Test

Pingdom vertelt je niet alleen hoe snel je website is, maar ook hoe hij presteert in vergelijking met andere websites. Je kunt ook gemakkelijk van verschillende fysieke locaties testen zoals Amerika, Australië of Zweden. Dit is vooral belangrijk wanneer je een website hebt die veel internationale bezoekers heeft.

tools.pingdom

Tips om de snelheid van je website te verbeteren

Je weet nu hoe je webpagina’s op snelheid kunt testen en hoe je kunt achterhalen wat de issues zijn. Hieronder staan vier tips die je helpen om je website sneller te maken.

Hosting

Goede hosting maakt een groot verschil bij het laden van je website. Vaak is de reactietijd van de webserver van je hostingprovider een van de problemen. De tijd die tussen de vraag van je browser en het antwoord van de server zit (het versturen van afbeeldingen, html-bestanden en stylesheets), noemen we de reactietijd. Hoe sneller de webserver reageert, hoe lager de reactietijd en dus hoe sneller je webpagina geladen is. Op internet zie je soms advertenties voor hosting voor een paar euro per maand. Je deelt dan vaak de server met heel veel andere websites. Als een website heel veel serverkracht nodig heeft dan kan jouw website hier last van hebben en traag laden.

Comprimeer/optimaliseer afbeeldingen

Het slim laden van afbeeldingen op je website kan veel verschil maken in de laadtijd. Zorg dat afbeeldingen niet te groot zijn. Zorg er ook voor dat afbeeldingen de afmetingen hebben waarop ze getoond worden op je pagina. Je browser hoeft je afbeeldingen dan niet te schalen en zo laad je geen onnodig grote foto’s in. Let ook op dat foto’s op je website het juiste bestandsformaat hebben. Hieronder zie je in welke situatie je verschillende bestandsformaten het best kunt gebruiken.

  • .jpg voor foto’s en afbeeldingen met veel verschillende kleuren, schaduwen, licht en donker
  • .gif voor animaties
  • .gif voor logo’s met weinig kleur en lijntekeningen
  • .png voor afbeeldingen waar transparantie in zit

.svg is een relatief nieuw bestandsformaat en wordt nog niet ondersteund door alle browsers.

Afbeeldingen opslaan zodat ze geschikt zijn voor je website kun je doen met Adobe Photoshop. Heb je dit niet, dan zijn er online verschillende alternatieven zoals Pickmonkey of Pixlr.Heb je veel afbeeldingen die je in een keer wilt comprimeren dan is TinyPNG een goede website waar je .png en .jpg kun verkleinen tot 70% van de originele bestandsgrootte.

Comprimeer/optimaliseer javascript, stylesheets en html-bestanden

Iets technischer maar zeker de moeite waard is het comprimeren van javascript, stylesheets en html-bestanden die je website gebruikt. Dit betekent in de praktijk dat onnodige spaties, commentaarregels, tabs en witregels verwijderd worden uit de code. Zo wordt je bestand kleiner en laadt het sneller in. Je stylesheet-bestanden ontdoen van onnodige tekens kun je op cssminifier.com. Javascript-bestanden kun je verkleinen op javascript-minifier.com.

Browser caching

Browsers en servers wisselen veel informatie uit wanneer een bezoeker een website bezoekt. Als je niks regelt kan het voorkomen dat een webserver en een webbrowser dezelfde bestanden uitwisselen als een bezoeker vaker op je website komt. Dit kun je voorkomen met browser caching. Met browser caching geven de browser en server aan elkaar door welke bestanden niet zijn gewijzigd sinds het vorige bezoek (de bestanden staan namelijk nog ergens op je pc). De webserver hoeft niet alle bestanden opnieuw te versturen waardoor je website sneller laadt. Veel websites hebben een .htaccess-bestand. Hierin kun je veel dingen regelen. Bijvoorbeeld hoe lang bestanden van je website lokaal bewaard moeten worden. Dat kun je doen door onderstaande code aan je .htaccess-bestand toe te voegen.

## EXPIRES CACHING ##

ExpiresActive On
ExpiresByType image/jpg “access 1 year”
ExpiresByType image/jpeg “access 1 year”
ExpiresByType image/gif “access 1 year”
ExpiresByType image/png “access 1 year”
ExpiresByType text/css “access 1 month”
ExpiresByType application/pdf “access 1 month”
ExpiresByType application/javascript “access 1 month”
ExpiresByType application/x-javascript “access 1 month”
ExpiresByType application/x-shockwave-flash “access 1 month”
ExpiresByType image/x-icon “access 1 year”
ExpiresDefault “access 2 days”

## EXPIRES CACHING ##

Meer over caching kun je lezen in dit artikel op karelgeenen.nl.

Plugins om je WordPress website sneller te maken

Voor goede resultaten bij het optimaliseren van de laadtijd van je website is het handig als je technisch bent aangelegd of hier niet voor terugdeinst. Heb jij een website met WordPress als CMS dan zijn er een flink aantal plugins die je het technische werk uit handen nemen. Dat scheelt toch weer.

Hosting

Geen WordPress plugin maar wel belangrijk: hosting specifiek voor WordPress websites. Twee goede Nederlandse hostingpartijen zijn Savvii en Xelmedia. Zij zijn allebei technisch goed en nemen standaard een aantal taken voor je uit handen, zoals het back-uppen van je website en het scannen op malware en caching van je website. Het maandbedrag van hun pakketten is daar wel naar. Voor het goedkoopste hostingpakket betaal je bij Xelmedia € 9,90 en bij Savvii € 11,- per maand (mei 2016). Een goedkoper buitenlands alternatief is Siteground. Zij bieden geen Nederlandstalige support. Voor hun goedkoopste hostingpakket betaal je 3,95 per maand (mei 2016).

Caching

Een van de beste caching plugins voor WordPress is W3 Total Cache. Er zijn veel opties en mogelijkheden in te stellen. Dit kan ook overweldigend zijn. Een goed betaald alternatief is WP Rocket. Deze plugin heeft een aantal extra functionaliteiten ten opzichte van W3 Total Cache en heeft bovendien een zeer prettige user interface. De goedkoopste variant van WP Rocket kost eenmalig 39 dollar.

Afbeeldingen optimaliseren

Twee goede plugins om je afbeeldingen te optimaliseren en comprimeren zijn: Wp smushit en Compress JPEG & PNG image. Compress JPEG & PNG image is van de maker van de website tinypng.com.

Lazyload

Voor websites met veel afbeeldingen op pagina’s kan Lazyload handig zijn. Afbeeldingen worden pas geladen op het moment dat ze nodig zijn. Bijvoorbeeld als de gebruiker naar beneden scrolt en bij de afbeelding komt. Zo kan de pagina sneller laden. Goede plugins zijn Lazy Load of Rocket LazyLoad.

Database optimaliseren

Standaard slaat WordPress van elke blogpost en pagina meerdere versies op. Dit kun je voorkomen door je database te optimaliseren. Het lijkt misschien alsof dit niet veel oplevert maar met het optimaliseren van je database kan je grote verbeteringen in snelheidswinst opleveren. Met WP-Optimize kun je de database van je website optimaliseren. Met de plugin Revision control kun je het aantal versies van blogposts en pagina’s dat WordPress mag opslaan instellen.

Conclusie

Met het verbeteren van de laadtijd van je website sla je twee vliegen in een klap. Het helpt de zoekmachineoptimalisatie van je website en komt de gebruikerservaring ten goede. Heb jij al getest hoe snel jouw website laadt? Ik hoop dat je met de tips uit deze blog aan de slag kunt om je website nog sneller te maken. Mocht je vragen hebben over de laadtijd van je website en hoe je dit kunt verbeteren, stel je vragen dan op het online marketingspreekuur.

[contentupgrade]Gratis PDF Checklist: Download de checklist met tips om te zorgen dat jij de laadtijd van je website kunt verbeteren.[/contentupgrade]