Waarom is een snelle (WordPress) website belangrijk?
Maar weinigen onder ons houden van wachten. Jouw website bezoekers en Google al helemaal niet. Wist je dat 40% van de bezoekers een website verlaat als deze langer dan 3 seconden nodig heeft om te laden? Een daling van 1 seconde in laadtijd van je website betekent 7% minder conversie. En wist je dat Google een goede experience van de bezoeker uitermate belangrijk vind en trage websites dus zeker niet kan waarderen? Kortom jouw website sneller maken is goed voor de bezoeker én voor jouw positie in de Google zoekresultaten.
Voordat je begint, test de snelheid van jouw huidige WordPress website
Om te bepalen of alle inspanningen die we later gaan doen enig effect hebben, moeten we eerst de snelheid van de huidige website(pagina) bepalen. Dit is de zogenaamde nulmeting waarmee we straks de resultaten gaan vergelijken. Wij gebruiken zelf de onderstaande tools. Deze meten de snelheid en doen daarnaast ook aanbevelingen waarmee je je site sneller kunt maken.
Hoe werken de tools
Alle tools werken ongeveer op dezelfde manier. Je voert de url in van de pagina waarvan je de snelheid wil testen. Pingdom geeft je daarnaast nog de mogelijkheid om aan te geven vanaf welke locatie de snelheidstest moet worden uitgevoerd. Voer de test altijd een paar keer achterelkaar uit. De resultaten zullen steeds ietsje verschillen door diverse factoren zoals serversnelheid. Door de test dus meerdere keren uit te voeren krijg je een goed beeld en heb je een betrouwbare nulmeting.
Alle testresultaten resulteren in diverse scores. Daarnaast wordt bij bijvoorbeeld Pingdom het een en ander uitgesplitst waarop je zou kunnen focussen terwijl bij GTmetrix bijvoorbeeld de prioriteit van de verbeteringen wordt aangegeven.
Tips om jouw WordPress website sneller te maken
Nadat we een goede nulmeting hebben verricht en we dus een goed beeld hebben van de huidige situatie kunnen we aan de slag met het verbeteren van de snelheid. Hier zijn legio mogelijkheden voor en naast onderstaande activiteiten zijn er zeker nog meer acties die je kunt uitvoeren.
Tip 1: Afbeeldingen optimaliseren
Tip 2: Lazy loading
Tip 3: Een caching plugin installeren
Tip 4: Aanpassen van Expires headers
Tip 5: Speed Booster Pack
Tip 6: Een Content Delivery Network (CDN) als Cloudflare gebruiken
Tip 7: Kies een goede hosting provider
Tip 8: Gebruik zo weinig mogelijk WordPress-plugins
Tip 9: Verklein je HTML, CSS en Javascript bestanden
Tip 1: Afbeeldingen optimaliseren
De meeste websites van tegenwoordig gebruiken veel afbeeldingen. Unieke en kwalitatief goede afbeeldingen zijn een enorm belangrijk element van content creatie in deze tijden van (online) verleiding en beleving. Het web is vaak het eerste “contact” tussen 2 partijen en een zo goed mogelijke visuele indruk is daarom essentieel. Maar kwalitatief goede afbeeldingen zijn vaak grote bestanden van enkele honderden Kbs per stuk die wel allemaal gedownload moeten worden als een webpagina bekeken wordt. Daarom is het zo enorm belangrijk om de afbeeldingen te optimaliseren als je de snelheid van je website wil verhogen.
Upload de juiste afmetingen
Voordat je überhaupt aan optimaliseren begint is het uitermate belangrijk dat je afbeeldingen qua formaat niet groter maakt dan nodig is. Afbeeldingen die over de gehele breedte van jouw website staan hoeven niet groter te zijn dan 1920 px in breedte. De eerste stap is dus om met behulp van tools als Adobe Photoshop de afmetingen van de te gebruiken afbeelding aan te passen. Hoe kleiner de afmeting hoe kleiner de bestandsgrootte en des te minder hoeft er gedownload te worden bij het bekijken van de pagina.
Comprimeren van afbeeldingen
Nadat de afbeeldingen de juiste afmetingen hebben kunnen we ze gaan optimaliseren door ze te comprimeren. Compressie maakt het bestand kleiner doordat “balast” verwijderd wordt terwijl de kwaliteit van de afbeelding niet of nauwelijks verandert. Een aantal goede tools hiervoor zijn:
TinyPNG
TinyPNG maakt gebruik van intelligente compressietechnieken om de bestandsgrootte van (PNG) bestanden te verminderen. Door het aantal kleuren in de afbeelding selectief te verminderen zijn er minder bytes nodig om de gegevens op te slaan. Het effect is bijna onzichtbaar maar het maakt een heel groot verschil in de bestandsgrootte. Je kunt TinyPNG op hun website comprimeren of je kunt de Photoshop, WordPress of Magento plugin downloaden.
Smush Image Compression and Optimization
Voor WordPress is de WP Smush plugin beschikbaar. WP Smush scant zorgvuldig elke afbeelding die geupload of al op jouw website staat, verwijdert alle onnodige gegevens en schaalt de afbeelding voordat deze aan de mediabibliotheek wordt toegevoegd.
Andere tools zijn voorbeeld:
EWWW Image Optimizer
CW Image Optimizer
Tip 2: Lazy loading
Gebruik de Lazy Loading plugin om afbeeldingen pas te laden wanneer ze nodig zijn, dus pas wanneer ze zichtbaar zijn voor de bezoeker. Het is namelijk helemaal niet nodig om alle afbeeldingen in één keer te downloaden wat voor vertraging in het tonen van de pagina kan zorgen. De gebruiker is dan aan het wachten totdat afbeeldingen onderaan de pagina geladen zijn terwijl deze helemaal nog niet getoond hoeven te worden.
Tip 3: Een caching plugin installeren
Via caching worden je websitebestanden tijdelijk opgeslagen om sneller toegang tot deze bestanden mogelijk te maken. 2 hele goede caching plugins voor WordPress zijn:
W3 Total Cache
WP Fastest Cache
Door één van deze plugins te installeren en te spelen met de settings bereik je waarschijnlijk al een grote impact op de laadtijd van je website. Let op: deze plugins zijn best log en kunnen je website ook vertragen. Testen is dus belangrijk!
Tip 4: Aanpassen van Expires headers
Indien je in de testresultaten van bijvoorbeeld Pingdom of GTmetrix te zien krijgt dat je ‘cache static content’, ‘add expires headers’ of ‘leverage browser caching’ moet aanpassen, dan moet je “expires headers” instellen. Je vertelt de browser van de bezoeker hiermee dat een kopie gemaakt moet worden van allerlei elementen van je website zoals xml, javascript, afbeeldingen, fonts etcetera en hoe lang die kopieën geldig zijn. Expires headers vertellen aan de browser of ze een specifiek bestand van de server moeten aanvragen of dat ze het uit de cache van de browser moeten pakken. Terugkerende bezoekers zullen je website dus sneller zien omdat kopieën van de gespecificeerde elementen nog bestaan in de browser van de bezoeker en dus geen http-requests richting server hoeven te gaan.
Expires headers staan in het .htaccess bestand. Dit bestand staat in de root (public_html) van je WordPress website.
Tip 5: Speed Booster Pack
Speed Booster Pack is een lichtgewicht, vaak geupdate, makkelijk te gebruiken en goed ondersteunde plugin waarmee je de laadsnelheid van jouw website kunt verbeteren.
Een paar van de belangrijkste features
- Verplaatst scripts naar de footer om de laadsnelheid van de pagina te verbeteren.
- Laad CSS asynchroon om een pagina sneller te maken en een hogere score bij bijvoorbeeld Pingdom of GTmetrix te krijgen.
- Minimaliseer HTML en JavaScript om de snelheid van je pagina te verhogen.
- Lazy load afbeeldingen om de laadtijden van pagina’s te verbeteren en bandbreedte te besparen.
Bekijk de hele feature lijst op de WordPress plugin pagina.
Tip 6: Een Content Delivery Network (CDN) als Cloudflare gebruiken
Cloudflare is een service die tussen de bezoeker en jouw website op een webserver inzit. Wanneer een bezoeker naar jouw website wil gaan, verwijst een DNS-server de bezoeker naar jouw webserver. Indien je Cloudflare inschakelt, vervang je jouw DNS-server door die van Cloudflare.
Voordat de bezoeker naar jouw website gaat, krijgt de bezoeker eerst de cache van de opgevraagde pagina te zien die bij Cloudflare staat. Deze pagina laadt uiteraard veel sneller dan je eigen website en is daarnaast gecomprimeerd. Naast caching en compressie worden de afbeeldingen van je website op het netwerk van Cloudflare geladen en gecomprimeerd. Deze afbeeldingen worden bij de bezoeker aangeboden via een zogenaamd CDN (content delivery network). Een Content Delivery Network (CDN) is een netwerk dat content aanbiedt en dat verspreid is over de hele wereld. Iemand die in Singapore de website bekijkt, laadt de plaatjes uit Azië en iemand die hier in Nederland zit, laadt ze vanuit Europa.
Let wel op, Cloudflare vereist wel wat kennis en handelingen om het op de juiste manier op te zetten en te blijven gebruiken.
Tip 7: Kies een goede hosting provider
Misschien een beetje een “duh” momentje maar goedkoop is vaak duurkoop. Kies een goede hosting provider en hostingpakket. Bekijk de reviews om te bepalen hoe de websites performen die ze hosten. Snelle servers zijn die paar tientjes aan extra kosten meer dan waard!
Tip 8: Gebruik zo weinig mogelijk WordPress-plugins
Veel optimalisaties kun je doen met plugins in WordPress. Maar dit is niet altijd nodig. Een extra plugin in WordPress levert namelijk ook gelijk weer extra balast op in de vorm van javascript, css etcetera. Probeer daarom alles wat je buiten WordPress kunt optimaliseren ook buiten WordPress om te optimaliseren. Hierdoor blijft jouw WordPress omgeving schoon en lichtvoetig.
Tip 9: Verklein je HTML, CSS en Javascript bestanden
Website ontwikkelaars voegen vaak witruimte in de vorm van witregels, tabs en spaties toe aan HTML, CSS en JavaScript bestanden. De overzichtelijkheid van de code wordt hierdoor verbeterd, maar deze witruimte is niet nodig voor een goed functionerende website. Het verwijderen van al deze witruimte heet ‘minifying’ (minimaliseren) en zorgt ervoor dat de website code compact(er) wordt en dus sneller geladen kan worden.
Autoptimze
Een hele goede plugin om dit te bereiken is Autoptimize. Met behulp van de standaardopties kun je de HTML, CSS en JavaScript code “minify-en”. Test wel altijd of je website pagina’s nog goed werken na het “minify-en”.
Lets start something amazing together
We denken graag mee over jouw ideeën, wensen en dromen. Helpen je met keuzes maken, spuien alvast een paar creatieve ideeën en behoeden je voor digitale valkuilen. Zullen we een afspraak maken?
