Last van een trage website? WordPress sneller laten laden? In 9 stappen kom je te weten hoe je je WordPress website sneller kan maken. Hieronder beschrijf ik enkele kleine stappen die je meteen kunt uitvoeren (“quick wins”) maar ook drie belangrijke grote stappen waar je best wat meer tijd voor uitrekt.
Inhoud:
- Waarom is snelheid zo belangrijk?
- Meet eerst je huidige snelheid
- 3 grote stappen die je eerst moet zetten
- 6 kleine stappen (quick wins) voor een snellere website
- Conclusie
Dit artikel richt zich voornamelijk op niet-technische lezers.
Waarom is snelheid zo belangrijk?
WordPress is een geweldig systeem om je website op te draaien. Het is zeer gebruiksvriendelijk en ook erg flexibel om uit te breiden. Het systeem staat (standaard) echter niet gekend om zijn snelheid, terwijl de laadtijd van een website wel essentieel is voor bezoekers.
Pagina laadtijd versus verhoogde kans op verlating
Een standaard installatie met een basis website kan al snel drie seconden of meer nodig hebben om te laden. Dit is te lang. Mensen hebben almaar minder geduld op dit vlak en van zodra een website wat meer tijd nodig heeft om te laden wordt hij weggeklikt. En terecht.
Stap 0: Meet eerst je huidige snelheid
Eerst en vooral moet je weten hoe snel of hoe traag je website op dit moment laadt. Hoeveel seconden duurt het vooraleer je website volledig geladen is? Hoe zwaar is je website? Hoeveel bestanden moeten er geladen worden? Eens je de antwoorden op deze vragen kent, kun je aan de slag gaan.
Gelukkig bestaan er enkele handige online tools om dit te achterhalen. Aan de hand van zo’n tool kun je ook perfect zien waar de knelpunten zitten en of er eventueel andere problemen zijn waardoor je website traag is.
Er bestaan verschillende goede tools maar in dit artikel maak ik gebruik van de GTmetrix tool via de website gtmetrix.com.
Open GTmetrix en typ je website adres in het URL veld. Klik vervolgens op de knop “Analyze”.
Tip: maak even een account aan zodat je de testserver op Londen kunt zetten i.p.v. Vancouver Canada. Dit zal een meer accuraat beeld geven, aangezien de afstand vanuit Londen naar België/Nederland veel korter is dan vanuit Canada.
Je krijgt twee scores te zien, een “Performance” score en een “Structure” score (vroeger waren dit de “PageSpeed” en “YSlow” scores). De scores gaan van A (erg goed, meer dan 90%) tot F (erg slecht, minder dan 50%). Deze scores zijn gebaseerd op een lijst van eigenschappen waar je website al dan niet aan voldoet. Onderstaande afbeelding is een voorbeeld van een slecht presterende website.
Deze scores geven alvast een indicatie van hoe uw website scoort. Het kan echter gebeuren dat je website bijvoorbeeld een “C” scoort omwille van een specifiek probleem, maar toch erg snel laadt omdat hij licht en compact is. Daarom is het belangrijk om wat meer in detail te gaan kijken.
We kijken vooral naar de 3 “Web Vitals” omdat dit ook de zaken zijn waar Google veel belang aan hecht in hun ranking algoritme van de zoekresultaten.
- LCP (Largest Contentful Paint): de tijd die nodig is tot het grootste zichtbare element geladen is;
- TBT (Total Blocking Time): de totale tijd dat gewacht moet worden op scripts die laden, vooraleer de pagina verder kan laden;
- CLS (Content Layout Shift): een indicatie van hoeveel de layout van de pagina visueel verschuift tijdens het laden.
Noteer deze drie waarden. Het doel is om deze waarden op het einde van dit artikel zo laag mogelijk te krijgen. Hoe lager hoe beter. We mikken op een LCP van minder dan 1,2s, een TBT van 150ms en een CLS van 0.
Wanneer we nog wat verder naar onder scrollen zien we de verschillende punten die gecontroleerd werden, terug telkens met een score ernaast.
Begrijp je wat er aangepast moet worden? Top! Hou je dan vooral niet in en werk de puntjes af van boven naar onder. De scores (en daarmee ook de snelheid) zullen zienderogen verbeteren bij elke aanpassing.
Is het allemaal Chinees voor jou? Geen nood, volg dan onderstaande stappen om je WordPress installatie sneller te maken. We beginnen met de grote stappen.
Grote stappen
1. Kies een snelle hosting
Alles begint bij een goede webhosting. De “hosting” is een zeer ruim begrip maar samengevat is dit de server waar je website op draait.
Bovenstaande snelheidstesten geven vooral een beeld van de voorkant van je website. Dit zijn de zaken die je zelf in de hand hebt zoals de grootte van de afbeeldingen, het aantal scripts dat geladen moet worden enzovoort. Het zegt echter weinig over de achterkant namelijk de hosting.
Let op volgende zaken bij het kiezen van snelle hosting voor je website.
- De locatie: hoe dichter je woont bij de server waar je website op draait, hoe sneller hij voor jou geladen zal worden. Woont je doelpubliek vooral in de Benelux bijvoorbeeld? Kies dan geen Amerikaanse webshosting die bv. enkel datacenters in de VS heeft.
- Deel je de server met anderen (shared hosting) of krijg je een apart stukje enkel voor jezelf (dedicated hosting)? Wanneer je een server deelt met andere websites dan kan jouw website soms vertraging oplopen wanneer er een zware belasting is op een van de andere websites.
- Gebruikt men NVMe SSD (de snelste harde schijven) of de tragere SATA SSD, of SAS SSD schrijven?
- Is er server-side caching voorzien? Ga op zoek naar woorden zoals Varnish, Redis, Memcached…
- Is GZIP compressie beschikbaar?
- Is minimum PHP versie 8.0 beschikbaar?
- Is er HTTP/2 ondersteuning?
Misschien heb je al gehoord van managed WordPress hosting? Als de prijs geen probleem is voor jou dan is dit zeker ook een optie om te overwegen. Bij dit soort hosting hoef je je niets aan te trekken van bovenstaande technische zaken en wordt alles voor jou geregeld om de website zo snel mogelijk te laten laden (langs de serverkant). Maar met prijzen tussen de €15 en €50 per maand is dit wel duurder dan gewone hosting natuurlijk.
2. Gebruik een lichtgewicht thema
Het WordPress thema waar je mee werkt geeft vorm aan je website. Er zijn drie mogelijkheden:
- Je gebruikt een gratis thema uit de thema bibliotheek van WordPress
- Je koopt een premium thema bij een van de verschillende aanbieders
- Je laat een thema op maat maken door een webdesigner
Heb je gekozen voor optie 1 of 2? Dan is het belangrijk dat je over de kwaliteit en de snelheid van het thema waakt. Liet je het thema door een webdesigner maken? Ga dan verder naar stap 3. In dat geval ga ik er namelijk van uit dat het thema sowieso al snel is (of dat zou toch zo moeten zijn).
Hoe kies je nu een snel, lichtgewicht thema?
- Thema’s hebben altijd wel een demo pagina om te tonen wat ze in huis hebben. Drop dit webadres even in GTmetrix zoals we in Stap 0 deden, en bekijk de snelheid.
- Kies een thema dat zo weinig en zo klein mogelijke bestanden gebruikt die eindigen op .css (stijlblad) en .js (JavaScript). Hoe meer van die stijl- en scriptbestanden er geladen moeten worden, hoe trager alles zal verlopen. Tenzij je deze gaat optimaliseren natuurlijk, zie stap 9!
3. Beperk het aantal plugins
WordPress is erg makkelijk uit te breiden via plugins. Voor elke extra functie die je wilt toevoegen bestaat er wel een plugin. Maar hoe meer plugins je toevoegt, hoe trager de website kan worden. Verwijder plugins die je niet meer nodig hebt en probeer zo het aantal zo klein mogelijk te houden.
Niet alleen het aantal maar ook de kwaliteit en de grootte van elke plugin is belangrijk. De meest populaire plugin voor SEO (zoekmachineoptimalisatie) bijvoorbeeld bevat momenteel maar liefst 1455 bestanden. Dit zegt nog niet veel over de laadtijden natuurlijk, maar het toont wel dat dit een serieuze uitbreiding is op je installatie. Geheel onnodig, want er zijn geweldige alternatieven die wel compact en snel zijn, vaak met hetzelfde eindresultaat.
Als snelheid een topprioriteit is, ga dan niet altijd voor de populairste plugin maar wel voor de snelste.
Een goede vuistregel: alles wat je buiten WordPress kunt doen, doe je ook best buiten WordPress. Om de afbeeldingen op je website te schalen bijvoorbeeld heb je geen plugin nodig, dit kan perfect vanop je PC vóór dat je ze gaat uploaden naar je website. Google Analytics tracking code toevoegen voor de statistieken van de website? Dit kun je rechtstreeks in de code toevoegen, geen plugin voor nodig.
Kleine stappen (quick wins)
4. Afbeeldingen schalen en comprimeren
Een vaak voorkomend probleem waardoor een WordPress website traag is heeft te maken met de gebruikte afbeeldingen. Wanneer je een foto neemt met je smartphone of digitale camera bijvoorbeeld en je wilt die op je website plaatsen, dan gaan veel mensen die foto gewoon integraal uploaden naar de WordPress mediabibliotheek.
Het probleem is dat zo’n foto veel te groot en te zwaar is om op een webpagina weer te geven. De afbeeldingen moeten dus een pak kleiner door ze te schalen, en ook compacter door ze te comprimeren.
Schalen
Om afbeeldingen te schalen bestaan er verschillende programma’s. Werk je met Windows dan kun je dit gewoon met een reeds geïnstalleerde app doen zoals de Foto’s app, via het menu -> “Formaat van afbeelding wijzigen”. Daarnaast zijn er talloze externe programma’s waar je mee kunt werken zoals Photoshop, Gimp, XnConvert… Op een Mac toestel kun je bijvoorbeeld de Preview app gebruiken die normaal standaard geïnstalleerd staat.
Hoe groot moet mijn afbeelding dan zijn? Dat is afhankelijk van waar je hem wilt gebruiken. Wil je hem als een full-screen achtergrond afbeelding gebruiken? Dan mag die gerust minimum 1280 pixels of zelfs 1920 pixels breed zijn, zodat hij ook voldoende scherp is op grotere schermen. Echter om een afbeelding gewoon in een galerij te tonen, zal 600 pixels al voldoende zijn om scherp over te komen. En om als miniatuur weer te geven mag je dit nogmaals halveren.
Supertip: wees hier ook slim in. Laat geen achtergrondafbeeldingen laden van 1000+ pixels breed op mobiele toestellen want die zijn gemiddeld slechts 360 pixels breed. Dat is onnodig groot. Voor een PC scherm zal dit dan wél weer nodig zijn. Dit zijn zaken die je webdesigner kan voorzien in het thema.
Comprimeren
Naast het schalen moeten afbeeldingen ook gecomprimeerd worden voor het web. Dit zorgt ervoor dat afbeeldingen zo licht mogelijk gemaakt worden zonder zichtbare kwaliteit te verliezen.
De beste manier tegenwoordig is om geen gebruik te maken van bv. JPG of PNG. De kans is groot dat je er nog nooit van gehoord hebt, maar er bestaat een afbeeldingenformaat speciaal voor het web namelijk WebP. Sinds 2021 is er in alle moderne browsers ondersteuning voor dit formaat, dus er is geen reden meer om het niet te gebruiken. WebP is van nature zo klein als mogelijk, met ingebouwde compressie. Met programma’s zoals Photoshop, Gimp, XnConvert… kun je je bestaande afbeeldingen opslaan als WebP afbeeldingen.
Toch liever JPG of PNG afbeeldingen op je website? Dan kun je er voor kiezen om ook deze afbeeldingen te gaan comprimeren. Comprimeren kan terug op verschillende manieren namelijk met offline tools zoals XnConvert en Photoshop, ofwel met online tools. Wanneer je online zoekt naar “image compressor” kun je verschillende online tools terugvinden. Hieronder toon ik bij wijze van voorbeeld de compressor van kraken.io. Gewoon je afbeeldingen selecteren en comprimeren maar, super eenvoudig. Daarna download je de afbeeldingen terug naar je PC en upload je de gecomprimeerde afbeeldingen naar WordPress.
Opgelet: bij de meeste online tools zijn er altijd wel ergens beperkingen. Voor niets gaat de zon op natuurlijk! Bij deze zit je met een maximum upload grootte van 1MB. Bij een andere zoals bv TinyPNG is dit dan weer 5MB, maar dan met een beperking van max. 20 afbeeldingen per keer.
Om afbeeldingen te comprimeren bestaan er ook WordPress plugins, maar zoals hierboven beschreven raad ik aan om het comprimeren buiten WordPress te doen. De plugins hebben als voordeel dat je afbeeldingen automatisch gecomprimeerd worden bij het uploaden, maar als nadeel dat er terug beperkingen opgelegd worden zolang je geen betalende versie neemt. Én je installeert zo ook weer een extra plugin, die weegt op je installatie.
5. Comprimeer al de rest met GZIP
Niet alleen afbeeldingen kunnen compressie gebruiken, alle andere website bestanden ook! GZIP is een manier om je bestanden compacter te maken op de server, vooraleer ze naar de bezoeker van je website gestuurd worden. Dit is een optie die je hosting provider moet ondersteunen en die soms standaard al geactiveerd staat. Beschik je over cPanel toegang? Controleer deze optie dan even via Software -> Optimize Website -> Compress Content.
Geen cPanel toegang? Dan kun je GZIP ook inschakelen via je .htaccess bestand indien je hosting dit ondersteunt. Dit is een zeer krachtig bestand waar dergelijke zaken ingesteld kunnen worden, maar enkel wanneer je er verstand van hebt. Vraag dit na bij je webdesigner of bij je hostingprovider vooraleer aanpassingen te maken.
6. Gebruik een recente PHP versie
Terwijl je nu toch in cPanel zit, controleer ook even de PHP versie die gebruikt wordt op je server. WordPress bestaat namelijk uit een aaneenschakeling van PHP bestanden. Recente versies van PHP zijn geoptimaliseerd voor snelheid en efficiëntie. Selecteer versie 8.0 of hoger en je zult meteen een boost in snelheid waarnemen.
Opgelet! Controleer daarna zeker of alles nog naar behoren werkt! Indien je gebruik maakt van gedateerde thema’s of plugins dan kunnen die mogelijks nog niet klaar zijn voor de meest recente PHP versie. Dit zal je snel merken; wanneer er foutmeldingen verschijnen kun je altijd nog terugkeren naar de oorspronkelijke versie.
Bovenstaande schermen kunnen er anders uitzien in verschillende omgevingen maar meestal is de mogelijkheid er wel om de versie te selecteren. Zoek even rond of vraag het na bij je hostingprovider.
7. Maak gebruik van caching
Wat?
Een ‘cache’ is een soort tijdelijke ruimte / tijdelijk geheugen waar bestanden in opgeslagen kunnen worden. De bedoeling van een cache is altijd om van daaruit bestanden sneller te kunnen laden dan vanuit de oorspronkelijke locatie.
Er zijn heel wat verschillende soorten caches waar ik lang en uitgebreid over kan vertellen, maar dat ga ik niet doen. In plaats daarvan stel ik voor om gebruik te maken van één type caching namelijk page caching. Deze is het makkelijkst te implementeren in WordPress en levert meteen een merkbaar verschil op.
WordPress haalt standaard een reeks van PHP bestanden op om uiteindelijk één HTML pagina samen te stellen. Dit proces vergt tijd. Wanneer je page caching inschakelt dan wordt die HTML pagina op voorhand samengesteld, en opgeslagen in de cache. Vervolgens kan die pagina meteen getoond worden aan de volgende bezoeker, en dat scheelt een pak tijd.
Hoe?
Voor wie enkel gebruik wil maken van dit type caching zonder al te veel andere toeters en bellen, kan ik de WP Fastest Cache plugin aanraden. En de naam liegt er niet om. Gewoon activeren en de standaard opties aan laten staan.
Voor wie het wat meer mag zijn, is er de Litespeed Cache plugin. Deze bespreek ik wat uitgebreider in stap 9. Verder is WP Super Cache ook een goed alternatief voor page caching.
8. Maak zo weinig mogelijk redirects
Wat?
Een redirect is een doorverwijzing. Bijvoorbeeld: je surft naar “facebook.be” en je ziet het adres automatisch wijzigen in “www.facebook.be”. Dit gebeurt aan de hand van een redirect.
Of er momenteel op jouw website (te veel) redirects gebeuren kun je nagaan via GTmetrix zoals hierboven beschreven. Open op het tabblad “PageSpeed” het item “Minimize Redirects” ofwel “Avoid Landing Page Redirects”.
Bovenstaande afbeelding toont een typisch voorbeeld van zo’n “redirect ketting”. Eerst wordt de bezoeker van de “http” versie naar de “https” versie doorverwezen. Daarna wordt er “www” voor de website gezet en ten slotte wordt er op het einde nog een slash aan toegevoegd.
Dit zijn drie stappen, drie redirects en elke redirect neemt tijd in beslag. Deze drie stappen kunnen perfect gecombineerd worden in één enkele redirect. Google geeft de aanbeveling om op elke link maximaal maar één redirect te maken.
Hoe?
Wanneer je over cPanel toegang beschikt kun je redirects instellen via Domains -> Redirects.
Bovenstaand voorbeeld zal alle verkeer doorsturen naar de https versie mét www én een slash op het einde.
Het is mogelijk dat je webmaster redirects op een andere manier heeft ingesteld, namelijk rechtstreeks in het .htaccess bestand waar ik daarnet al over sprak. Heb je te maken met zo’n redirect ketting? Vraag je webdesigner dan om dit bestand na te kijken en aan te passen waar nodig.
9. Verklein en combineer HTML, CSS en JS bestanden (minify)
Wat?
Dit zijn drie soorten bestanden die door zowat elke normale website gebruikt worden.
- HTML: bestand met de tekst, afbeeldingen en andere elementen van de website
- CSS: bestand(en) met alle stijlinformatie zoals o.a. de kleuren en de lay-out
- JS: bestand(en) die scripts laden voor o.a. bewegende onderdelen zoals een foto-slider
Deze bestanden worden door de webdesigner in code geschreven op een leesbare manier. Dit wil zeggen: met spaties, enters, toegevoegde commentaar, gesplitst in verschillende bestanden… Dat is handig om de code te kunnen lezen als mens maar niet zozeer als computer. Computers hebben al die extra info niet nodig en kunnen veel sneller werken wanneer alle code op 1 lijn achter elkaar zou staan. Dit heeft verkleinen/minify. Daarnaast is het ook niet nodig om 10 verschillende CSS bestanden te laten laden bijvoorbeeld. Indien je alles achter elkaar zou zetten in 1 bestand, levert dit opnieuw een tijdswinst op. Dit heet combineren van CSS/JS bestanden.
Hoe?
Het verkleinen en combineren van deze verschillende bestanden kun je vragen aan je webdesigner.
Doe je het liever zelf? Dan kun je in WordPress opnieuw een van de beschikbare plugins gebruiken. Voor deze taak kan ik de Litespeed Cache plugin aanraden.
Hier heb ik zeer goede ervaringen mee. Er zijn enorm veel opties voor technische gebruikers, maar ook voor beginners zonder enige kennis is de plugin interessant. Er zijn namelijk enkele voorinstellingen die je met één klik kunt aanzetten, afhankelijk van hoe agressief je wenst te optimaliseren.
Verder is de Fast Velocity Minify plugin ook een goed alternatief. Deze doet een prima basis job met de standaard instellingen, maar wees je ervan bewust dat er mogelijks nog enkele opties aangepast moeten worden na het activeren van de plugin.
Testen, testen, testen!
Soms zijn bestanden namelijk afhankelijk van elkaar of van een bepaalde volgorde. Wanneer ze dan allemaal samen in één bestand worden geladen kunnen soms problemen optreden. Daarom is het belangrijk om de werking van de website goed te testen na het doorvoeren van optimalisaties.
Conclusie
Deze 9 stappen zijn zeker niet het einde. Om de snelheid te optimaliseren kun je zo ver gaan als je zelf wilt. Er zijn nog verschillende andere zaken die de snelheid ten goede komen zoals gebruikmaken van een CDN, browser caching, opschonen van de database…
Met dit artikel probeerde ik echter de belangrijkste zaken aan te halen en een mogelijke oplossing voor te stellen, zonder al te technisch te worden.
De plugins of tools die ik aanraad zijn op basis van eigen ervaringen, maar daarom niet de beste voor jouw specifieke situatie.
Contacteer me gerust bij vragen!
Geraak je er niet aan uit?
