Les 1: Laadsnelheid – is jouw website snel genoeg?

Google heeft maar 1 doel voor ogen en dat is om hun gebruikers zo snel mogelijk het meest relevante resultaat te leveren voor de zoekopdracht die zij intypten. Om deze reden hecht Google dus niet alleen veel waarde aan de content op je website (deze moet zo waardevol en relevant mogelijk zijn voor de zoeker), maar Google vindt het vooral ook belangrijk dat de hele ‘user experience’ van de zoeker zo snel en postief mogelijk is. Laadsnelheid, mobielvriendelijkheid, veiligheid, gebruikersgemak etc. waren dus altijd al belangrijk, maar over de jaren heen werd de ‘page experience’ (hoe makkelijk en snel is de gebruikerservaring met een bepaalde website) steeeds sterker van invloed op de Google resultaten. Pagina’s met de beste en snelste user experience scoren hoger in Google dan websites die niet zo gebruiksvriendelijk zijn.

 

Kort samengevat betekent een optimale Google Page Experience het volgende:

•Core Web Vitals: elementen op je pagina’s moeten snel laden/ code achter design moet goed in elkaar zitten (liefst moet jouw site natuurlijk sneller zijn dan die van je concurrenten).  Want wanneer mensen op een link in de zoekresultaten klikken willen ze dat die site snel laadt: het liefst willen ze binnen 1-2 seconden de content zien verschijnen. Het voordeel van een snelle website is ook dat mensen er langer op blijven hangen (vindt Google ook belangrijk) en dat ze meer pagina’s bekijken.
•Mobile usability: je website moet mobielvriendelijk zijn.
•Security issues en HTTPS: je website mag geen veiligheidsissues hebben en moet een HTTPS verbinding hebben.
•Ad Experience: grote pop-ups of andere promotietechnieken op een website moeten de gebruiker niet teveel afleiden of storen in het website gebruik (niet te groot, niet het hele scherm blokkeren en makkelijk weg te klikken bijvoorbeeld.

 

Stap 1: laadsnelheid

Uiteindelijk is het nog steeds het allerbelangrijkst dat je website relevante content voor je lezers bevat, maar wanneer Google moet kiezen tussen websites met vergelijkbare teksten, zoekwoorden, video’s en afbeeldingen, dan zal een website die snel laadt boven de tragere websites eindigen in de zoekresultaten.

In deze module gaan we daarom jouw website checken om te kijken of we qua user experience en laadsnelheid nog dingen kunnen verbeteren.

Te beginnen met les 1 over laadsnelheid: hierin gaan we met behulp van de GTmetrix tool bekijken of jouw website snel genoeg laadt.

Belangrijkste redenen voor trage website:

Zoals je in de vorige module kon lezen is het grootste probleem bij een trage website vaak dat de afbeeldingen in een te groot formaat en te zware kwaliteit zijn ge-upload naar de website. De server moet de afbeeldingen dan eerst helemaal downloaden (grote variant), voordat hij ze verkleint om ze uiteindelijk op het juiste formaat te tonen. Vooral dat eerste, het downloaden in grote variant, kost tijd en maakt je website dus traag.

Andere issues dan te zware afbeeldingen?

Naast te zware afbeeldingen zijn er nog een paar ‘problemen’ die veel voorkomen wanneer een website te traag laadt:

  • Te lange en rommelige code (standaard WordPress thema’s zijn vaak geïntegreerd met WP Bakery, Elementor, Divi etc.: teveel opties, uitgebreide code die niet nodig is, waardoor site traag laadt). 
  • Minify html/css/js (spaties etc. weg uit code)
  • Je hosting server kan te traag zijn om een grote hoeveelheid data te verwerken (shared servers/ shared hosting bijvoorbeeld).
  • ‘Caching’ issues: een site waar geen ‘caching’ op is ingesteld, laadt telkens wanneer een pagina wordt bezocht helemaal opnieuw alle foto’s en alle code van die pagina (zoals html/ css/ js) en dat kost veel tijd. Door wél caching op je site te activeren, zorg je dat je website na 1 bezoek aan een pagina als het ware de foto’s en code ‘paraat’ houdt, zodat de volgende keer dat een pagina bezocht wordt deze gegevens nog beschikbaar zijn en niet helemaal opnieuw geladen hoeven te worden.
  • Wanneer er teveel plugins geactiveerd zijn kan je site daar traag van worden.
  • Optimaliseren/ combine css/js (volgorde van laden js en css bestanden – deze zijn nodig voor kleuren/design van je site en interactieve elementen, maar vaak kan hier in laadsnelheid/ volgorde van laden winst behaald worden.)
  • Delay css/js (later inladen van niet essentiële bestanden voor header)
  • Lazyload afbeeldingen/video’s (niet laden als nog niet in beeld)
  • Database optimize (oude restjes data opruimen)
  • Cdn (gebruik wereldwijd netwerk van servers zodat je site data altijd ‘dichtbij’ opgeslagen staat en sneller geladen kan worden)
  • Afbeeldingen juiste formaat en comprimeren (.jpg of nog beter .webp)

Te veel of te zware foto’s daar kun je natuurlijk zelf nog wel mee aan de slag (zie de vorige module), maar bij caching- en plugin issues etc. wordt het al snel te technisch en kun je het beste advies vragen van een ervaren websitebouwer.

Test de laadsnelheid van jouw eigen website met GTmetrix

Om vast te stellen of jouw website problemen heeft met de laadsnelheid ga je naar de GTmetrix website , maak een gratis testaccount aan en vul daar de URL (het www-adres) van je eigen website in. Wacht even totdat de tool je hele website heeft getest. Er verschijnen meerdere tabs met resultaten, waarvan de belangrijkste ‘PageSpeed’, ‘YSlow’ en ‘Waterfall’ zijn. Onder elke tab kun je verschillende scores bekijken die je inzicht kunnen geven in waar de problemen met de laadsnelheid op je website zitten (zie screenshot hieronder).

!! Let op: GTmetrix was altijd gratis, maar is tegenwoordig maar voor een beperkt aantal tests gratis te gebruiken. Sla je resultaten dus altijd direct even op. Mocht je toch op een gegeven moment alleen betaald de test kunnen draaien, stuur me dan even een berichtje via wendy@buildyourtravelbizz.com dan gebruik ik het betaalde account van reisbureauwebsite.nl om je site te testen.

 

Hieronder volgt een korte uitleg over de onderdelen in de resultaten waar je als ‘beginner’ het meeste aan hebt. En wanneer je je zelf meer wilt verdiepen in de techniek achter de laadsnelheid van je website, dan vind je hier alle documentatie van GTmetrix verzameld op de ‘Optimization Explained’ pagina. Dit is wel allemaal informatie die is geschreven voor echte webdevelopers, dus wanneer je zelf geen ambities hebt om webbouwer te worden, dan zou ik hier niet zelf aan beginnen en gewoon de resultaten van de GTmetrix test voorleggen aan je eigen websitebouwer (of mij even een mailtje sturen op wendy@buildyourtravelbizz.com, zodat ik mijn businesspartner Michel Schönhage – de designer en webdeveloper achter reisbureauwebsite.nl –  kan vragen je wat diepgaander technisch advies te geven).

  • Leverage Browser Caching
    Browser cache zorgt ervoor dat dat bepaalde bestanden in de browser van de bezoeker op worden geslagen, zodat die de volgende keer niet van de server ingeladen hoeven te worden. Dit verbetert de laadsnelheid van de website.
  • Minify Javascript/ CSS
    Dit verkleint de CSS en Javacsript bestanden (het haalt kort gezegd de enters, spaties, etc weg), zodat het bestand korter en dus kleiner wordt.
  • Enable Compression + Compress components
    Dit verkleint allerlei bestanden (CSS, Javascript, XML, etc) zodat ze minder lang duren om te laden.
  • Add Expires Headers
    Hiermee kun je aangeven dat bepaalde bestanden voor een vooraf ingestelde termijn uit de cache moeten komen. Na die periode zullen ze opnieuw ingeladen worden, niet vanuit de cache.
  • Use Content Delivery Network + Use cookie-free-domains
    Hiermee stel je in dat statische bestanden (bestanden die niet dynamisch gegenereerd worden (afbeeldingen, etc) vanaf een andere server ingeladen worden, zodat jouw server minder belast wordt en je website dus sneller laadt.
  • Waterfall
    Goed om specifieke scripts/ processen te achterhalen die voor een langere laadtijd zorgen.

Tijd voor actie

Test de laadsnelheid van jouw eigen website met GTmetrix

Ga naar de GTmetrix tool om te controleren of jouw website snel genoeg is. De tool geeft zowel voor desktop als voor mobiel weer hoe snel je website laadt en je ontvangt ook concrete tips om je site verbeteren als de score niet optimaal is.

Komen er meer problemen aan het licht dan alleen het verkleinen en comprimeren van afbeeldingen? Stuur dan de resultaten naar je eigen websitebouwer om te vragen wat de mogelijkheden zijn om e.e.a. te laten verbeteren of stuur mij een mailtje op wendy@buildyourtravelbizz.com, zodat ik mijn businesspartner bij reisbureauwebsite.nl (Michel Schönhage, designer en web developer) kan vragen met je mee te kijken en advies te geven.