Voor een goede gebruikerservaring is het belangrijk naar de snelheid van je website te kijken. Wanneer een website snel laadt en prettig werkt, klikt de gebruiker namelijk minder snel weg. Zo heb je meer kans dat bezoekers je website bekijken en een conversie doen.

De pagespeed heeft ook directe invloed op de duurzaamheid van jouw website. Hoe sneller een website is, hoe minder stroom en water de server gebruikt. Ook gebruikers gebruiken minder stroom.

Er zijn vele redenen om aan de slag te gaan met de snelheid van je website, maar er komt ook veel bij kijken. Laten we dus maar beginnen!

Google PageSpeed

We hebben eerder al eens een artikel geschreven over Google PageSpeed. We halen Google PageSpeed omdat dit de makkelijkste manier is om te zien hoe het ervoor staat met de snelheid van jouw website. Heb je dat artikel nog niet gelezen? Hieronder vind je een korte uitleg over PageSpeed:

PageSpeed refereert naar de gemiddelde score die de pagina krijgt op basis van de Web Vitals van Google. Dit is een verzameling van statistieken die je inzicht geeft in de prestaties van jouw website. Denk hierbij bijvoorbeeld aan hoe lang het duurt voor je iets op je scherm ziet verschijnen en hoeveel er verschuift tijdens het laden. Maar ook aan hoelang het duurt voordat er iets gebeurt op de website nadat de gebruiker ergens op klikt.

PageSpeed geeft niet het volledige beeld van de snelheid van een website, maar zorgt wel voor een goede basis. Ook geeft de PageSpeed Insights tool van Google je een goed overzicht van de aandachtspunten.

Een goede basis is het halve werk

Veel problemen kunnen worden voorkomen door tijdens het bouwen van een website de juiste keuzes te maken. Denk hierbij aan het kiezen van het juiste CMS, een licht thema of framework, en zelfs wat voor elementen je op je website wil gebruiken.

Bij het bepalen van het CMS is het goed om te kijken naar systemen die veel opties bieden op het gebied van performance. WordPress heeft bijvoorbeeld eindeloos veel plug-ins die helpen met het optimaliseren van je website. Denk hierbij aan een alles-in-één tool zoals WP Rocket, of een afbeelding optimalisatie tool zoals WebP Express. Wij raden beide tools ten zeerste aan. Omdat WordPress het grootste marktaandeel heeft, geven we in dit artikel vaak specifieke suggesties voor dit CMS.

Door een licht thema of framework te kiezen zorg je ervoor dat de basis van je website direct goed staat. Zo voorkom je dat je tegen problemen aan loopt die niet op te lossen zijn zonder deze basis volledig te vervangen. Denk bijvoorbeeld aan een thema dat veel JavaScript gebruikt om de lay-out van je website goed te zetten. Dat is vaak onnodig werk voor het apparaat van de gebruiker en had ook direct goed kunnen staan tijdens het opbouwen van de broncode van het thema. Het geven van een aanrader is lastig, omdat de juiste keuze erg afhangt van het doel van je website.

Ook is het belangrijk om te kijken naar welke elementen je wilt gebruiken op je website. Wil je gebruik maken van sliders? Weet dan dat veel standaard plug-ins of frameworks vrij ‘zwaar’ kunnen zijn. Zo kan het zo zijn dat het even duurt tot de slider ingeladen is, waardoor er veel verspringt. Dit komt doordat er in veel gevallen erg grote JavaScript-bestanden ingeladen worden die ervoor zorgen dat de slider optimaal werkt. Maak daarom goede afwegingen tussen snelheid en vormgeving. Moet het bijvoorbeeld een carrousel zijn, of kan het ook gewoon onder elkaar?

Een bestaande website optimaliseren

Heb je al een website en wil je die optimaliseren? Wees niet bang, ook in dat geval kun je nog genoeg wijzigingen doorvoeren die een positief effect hebben op de snelheid van de website. Het optimaliseren van een reeds bestaande website vraagt alleen om wat meer aandacht.

1: Hosting

De snelheid en locatie van je server hebben vaak veel impact op de laadtijd van je website. Dit geldt niet alleen voor het inladen van de pagina zelf, maar ook voor het inladen van de content op de pagina (denk aan afbeeldingen, styling, scripts, etc.). Je kan problemen met het inladen van content oplossen door de juiste caching te gebruiken en content zo klein mogelijk te houden, hier komen we later op terug.

De juiste hosting voorkomt al veel problemen. Met een hosting locatie dichtbij je gebruikers zorg je ervoor dat het verbinden niet langer duurt dan nodig, en met het juiste pakket zorg je ervoor dat de server niet overbelast raakt door de zwaarte van je website of hoeveelheid gebruikers.

Komt het overgrote deel van de gebruikers uit Nederland? Kies dan voor hosting bij een partij die hosting in Nederlandse datacenters levert. Voor internationale websites kun je kijken naar partijen die cloudhosting leveren via Amazon Web Services (AWS) of Google Cloud Platform (GCP). Deze partijen leveren vaak dynamisch de hosting via het dichtstbijzijnde datacenter bij de gebruiker.

Zelf maken wij gebruik van SiteGround. Wij hebben gekozen voor deze partij omdat deze constant bezig is met het verbeteren van de snelheid van de infrastructuur. Zo weten we zeker dat onze hosting in goede handen is.

2: Caching

Caching van je website is erg belangrijk omdat caching onnodige wachttijden voorkomt. Caching houdt in dat de pagina direct naar de gebruiker kan worden gestuurd wanneer de gebruiker de pagina opvraagt. Wanneer een pagina niet gecachet is, moet de website de pagina eerst nog ‘op worden gebouwd’. Dit kost tijd. Als de pagina wel gecachet is staat de pagina al klaar om opgestuurd te worden naar de gebruiker, waardoor de wachttijden significant lager zijn.

Je kan op verschillende manieren caching instellen voor je website. Bij WordPress heb je de keuze uit vele verschillende plug-ins zoals WP Rocket, die we eerder al noemden. Deze plug-ins regelen de caching via WordPress zelf, waardoor het niet nodig is om wijzigingen door te voeren op de server. Sommige andere CMS systemen beschikken over ingebouwde caching systemen, zoals Magento of OpenCart. Sommige hostingproviders bieden ook server side caching aan, zoals Varnish, Redis, of soms eigen tools zoals SiteGround’s Supercacher.

Deze oplossingen kunnen soms ook samen worden gebruikt. Zo heeft WP Rocket bijvoorbeeld ingebouwde integraties voor Cloudflare, SiteGround en PHP’s OPCache. Het is dus zaak om de beste opties met elkaar te vergelijken. Wij raden aan om de verschillende opties te testen en goed te kijken of de systemen juist met elkaar samenwerken.

3: Afbeeldingen

Zorg ervoor dat afbeeldingen niet groter zijn dan nodig. Dit kan je doen door te kijken naar het formaat van de afbeelding, maar ook naar het bestandstype. Lever geen afbeeldingen aan die veel hoger of breder zijn dan het element waar ze in staan, gebruikers hebben namelijk niets aan deze extra grootte die wel extra tijd en data kost. Bekijk ook of je bestandstypes als WebP of AVIF kan aanleveren, aangezien deze types gebruik maken van betere compressie dan oude bestandstypes zoals JPEG of PNG.

Het inladen van het juiste formaat is op verschillende manieren mogelijk. Zo kan je bij elementen kijken naar het gebruik van het srcset HTML attribuut. Dit is een attribuut waarmee je verschillende groottes meegeeft, waardoor de browser automatisch de grootte pakket die het meest overeenkomt met de grootte van het scherm van de gebruiker. WordPress maakt automatisch al meerdere formaten aan voor afbeeldingen die geüpload worden, deze worden dan ook direct gebruikt door verschillende WordPress functies. Je moet er alleen voor zorgen dat je thema en/of builder hier ook gebruik van maken.

Worden afbeeldingen via CSS ingeladen? In dat geval kun je natuurlijk gebruik maken van media queries, hiermee kun je aangeven welke grootte van een afbeelding moet worden ingeladen voor specifieke schermgroottes.

Het converteren van afbeeldingen naar WebP of AVIF kan ook vrij gemakkelijk bij WordPress websites. Hiervoor kun je bijvoorbeeld gebruik maken van plug-ins zoals de eerder genoemde WebP Express, of AVIF Express. Deze twee plug-ins zorgen ervoor dat afbeeldingen automatisch omgezet worden naar hun respectieve bestandstypes wanneer ze opgevraagd worden. Ook kijken ze of de browser van de gebruiker deze bestandstypes ondersteunt. Wanneer dit niet het geval is versturen ze gewoon de afbeelding in het originele bestandstype.

Ook kun je ervoor zorgen dat de afbeeldingen pas ingeladen worden wanneer ze ook zichtbaar moeten zijn. Dit kun je gemakkelijk doen door het attribuut loading=”lazy” toe te voegen aan afbeelding elementen. Er bestaan verschillende plug-ins die dit voor je kunnen doen, vaak onder de noemer “Lazyloading”.

4: JavaScript

JavaScript kan veel impact hebben op de gebruikerservaring van je website, omdat deze codes lokaal gedraaid worden op het apparaat van de gebruiker. Vaak wordt er veel meer ingeladen dan er gebruikt wordt en moet het apparaat van de gebruiker alsnog door al deze code gaan om relevante dingen te vinden. Dit kan ervoor zorgen dat de website traag aanvoelt, maar kan er ook voor zorgen dat de gebruiker veel meer in moet laden dan nodig is.

Kijk daarom welke JavaScript wel en niet nodig is op de website. Haal de onnodige code er zo veel mogelijk af en laad alle code die wel nodig is op de meest efficiënte manier in. Dit kun je vaak doen via functies die ingebouwd zijn in optimalisatie plug-ins zoals WP Rocket.”

Veel voorkomende optimalisaties zijn defer en async loading, hiermee zorg je ervoor dat scripts tegelijk met de pagina worden gedownload en pas draaien wanneer de rest van de pagina klaar is met laden.

Een andere optie is delay execution, hiermee zorg je ervoor dat JavaScript pas wordt gedownload en gedraaid wanneer de gebruiker iets op de website doet. Dit laatste is een minder voorkomende optie, er zijn nog niet veel algemene oplossingen voor.

5: CSS

Vaak wordt er bij websites veel meer CSS ingeladen dan daadwerkelijk gebruikt wordt. Dit komt meestal doordat CSS ingeladen wordt die voor andere pagina’s bedoeld is, maar ook doordat er frameworks zijn die volledig ingeladen worden. Het kan ook zo zijn dat er plug-ins zijn die alles maar inladen voor het geval dat een gedeelte ervan gebruikt wordt. Dit kan ervoor zorgen CSS laat ingeladen wordt, waardoor elementen verspringen. Het zorgt er ook voor dat gebruikers meer data kwijt zijn door het inladen van onnodige styling.

De twee meest voorkomende oplossingen hiervoor zijn Critical Path CSS (CPCSS) en Unused CSS (UCSS). Met CPCSS zorg je ervoor dat je direct alle CSS inlaadt die nodig is om alles wat je boven de vouw ziet juist weer te geven, daarna wordt de overige CSS pas ingeladen. Met UCSS zorg je er dus voor dat je alle ongebruikte CSS niet inlaadt.

Unused CSS is de beste oplossing voor de snelheid, maar kan nog wel eens voor problemen zorgen omdat automatische tools niet overal rekening mee kunnen houden (bijvoorbeeld met pop-ups of mobiele menu’s). Zodoende kan het soms zijn dat je wat CSS mist. Wanneer je kiest voor Unused CSS laad je dus wel alle CSS in, maar geef je prioriteit aan de belangrijkste styling.

Lang verhaal kort

Uiteindelijk kun je dit alles vrij simpel samenvatten; zorg ervoor dat de website alles zo snel mogelijk inlaadt, en zo min mogelijk onnodige zaken meestuurt. Experimenteer ook zoveel mogelijk, want lang niet alle optimalisaties zijn daadwerkelijk nodig voor elke website, en lang niet alles werkt goed met ieder systeem.

Houd de snelheid van je website in gedachten tijdens het bouwen van je website, maar ook tijdens het plaatsen van nieuwe content of veranderen van bestaande content. Je gebruikers en je server zullen je dankbaar zijn, en hopelijk belonen met meer interactie en conversie op je website.

De PageSpeed score is daarbij niet heilig. Deze score wordt niet direct gebruikt door Google voor de ranking van je website. Wel geeft de score een indicatie van de gebruikerservaring van jouw website, waardoor het indirect wel weer invloed heeft. Want wanneer een gebruiker weinig met je website doet, is Google ook minder geneigd om je website als kwalitatief te zien. In de Insights tool of in Google Search Console kun je vaak zien wat de echte gebruikers scores zijn, zo zie je ook of de Pagespeed score overeenkomt met de werkelijkheid.

Kom je er zelf niet uit?

Daag ons dan eens uit om naar je website te kijken. Als onderdeel van onze SEO diensten voeren we vaak snelheidsoptimalisaties voor de WordPress websites van onze klanten, en hebben we jarenlange ervaring met veel verschillende thema’s, pagebuilders, en plugins.

Geschreven door

Benieuwd wat online marketing voor jou kan betekenen?
Neem dan gerust contact op

Onwise beeldmerk
Onwise - We are On it Onwise - We are On it