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 belangrijk?

WordPress is een geweldig systeem om je website te beheren. Het is zeer gebruiksvriendelijk en ook erg flexibel om uit te breiden. Het systeem staat echter niet gekend om zijn snelheid, terwijl de laadtijd van een website wel essentieel is voor bezoekers.

Pagina laadtijd versus verlatingspercentage (cijfers zijn een gemiddelde van enkele recente studies gecombineerd).

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.

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”.

Je krijgt twee scores te zien, een “PageSpeed” score en een “YSlow” score. De scores gaan van A (erg goed, meer dan 90/100) tot F (erg slecht, minder dan 50/100). Deze scores zijn gebaseerd op een lijst van eigenschappen waar je website al dan niet aan voldoet. Onderstaande afbeelding is een voorbeeld van een vrij slecht presterende website.

Aan deze scores hechten we voorlopig nog weinig belang. Hoewel ze een indicatie geven van goed of slecht, zeggen ze niet altijd iets over de effectieve snelheid. Het kan gebeuren dat je website bijvoorbeeld telkens een “C” scoort omwille van de gecontroleerde punten, maar toch erg snel laadt omdat hij licht en compact is.

Daarom kijken we vooral naar de “Page Details”. Hier zie je drie belangrijke zaken:

1. Fully loaded time: de tijd die nodig is om de website volledig te laden
2. Total Page Size: de totale grootte van alle geladen bestanden samen
3. Requests: het aantal bestanden dat geladen moet worden

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. Een laadtijd van ongeveer 2 seconden beschouw ik als “aanvaardbaar”. Alles wat daaronder ligt is goed.

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? 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 is 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.

Misschien heb je al gehoord van managed wordpress hosting? Als de prijs geen issue 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 €10 en €50 per maand is dit wel beduidend duurder dan gewone hosting natuurlijk. Voor een normale snelle hosting mag je rond de €5 rekenen per maand.

2.     Gebruik een lichtgewicht thema

Het thema waar je mee werkt geeft vorm aan je website. Er zijn drie mogelijkheden:

1. Je gebruikt een gratis thema uit de thema bibliotheek van WordPress
2. Je koopt een premium thema bij een van de verschillende aanbieders
3. 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?

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 zeker onder de 10 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 is momenteel maar liefst 8 MB groot. Als je weet dat een lege WordPress installatie slechts 25 MB is, dan zie je dat dit een erg zware uitbreiding is op je installatie. Geheel onnodig, want er zijn geweldige alternatieven die wel compact en snel zijn met hetzelfde eindresultaat.

Een goed vuistregel: alles wat je buiten WordPress kunt doen, doe je ook best buiten WordPress. Om afbeeldingen te schalen bijvoorbeeld heb je geen plugin nodig, kan perfect vanop je PC. Google Analytics toevoegen voor de statistieken van de website? Kun je rechtstreeks in de code toevoegen, geen plugin voor nodig.

Kleine stappen (quick wins)

4.     Afbeeldingen schalen en comprimeren

Het vaakst voorkomende 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 voor op een webpagina. 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 in Paint doen via Start -> Formaat wijzigen. Maar ook via de Office Picture viewer, Live Photo Gallery, Photoshop, Gimp… 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 full-screen achtergrond afbeelding gebruiken? Dan mag die gerust 1280 pixels breed zijn. Echter om gewoon in een afbeeldingen 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 op mobiele toestellen want die zijn vaak slechts 360 pixels breed. Voor een PC scherm zal dit dan weer wél 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.

Comprimeren kan terug op verschillende manieren maar persoonlijk gebruik ik de online tool van kraken.io aan. 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. Als je je even gratis registreert kun je bovendien tegelijk ook je afbeeldingen schalen, een extra voordeel.

Om afbeeldingen te comprimeren bestaan er ook WordPress plugins, waaronder ook eentje van Kraken.io. Zoals hierboven beschreven raad ik aan om het comprimeren buiten WordPress te doen, maar indien je soms vergeetachtig bent of weinig tijd hebt kun je altijd de plugin gebruiken. Die heeft als voordeel dat je afbeeldingen automatisch gecomprimeerd worden bij het uploaden. De plugin heeft bovendien weinig impact op je systeem aangezien het comprimeren op de servers van Kraken.io gebeurt, en niet op jouw server zoals bij andere vergelijkbare plugins.

In de gratis versie kun je maandelijks 100 MB aan afbeeldingen comprimeren in WordPress. Andere plugins vind ik minder goed vanwege de kwaliteit of door de opgelegde beperkingen.

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.

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 7.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 samengestelde HTML pagina opgeslagen in de cache en meteen getoond aan de volgende bezoeker, dat scheelt een pak tijd.

Hoe?

Voor wie enkel gebruik wil maken van dit type caching zonder al te veel andere toeters en bellen, raad ik de WP Fastest Cache plugin aan. En de naam liegt er niet om. Gewoon activeren en de standaard opties aan laten staan.

Verder is de plugin WP Super Cache ook goed, met een aantal extra opties. De W3 Total Cache plugin bespreek ik hier niet wegens te zwaar, te geavanceerd voor beginners en te weinig ondersteuning van de ontwikkelaar.

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 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 éé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.

Er is echter een grote kans 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.

Hoe?

Het verkleinen en combineren van deze verschillende bestanden kun je vragen aan je webdesigner. Dit is eigenlijk een standaard praktijk geworden bij de bouw van een website maar in werkelijkheid zie ik nog heel wat website bouwers die het niet standaard doen.

Doe je het liever zelf? Dan kun je in WordPress opnieuw een van de beschikbare plugins gebruiken. Voor deze taak raad ik de Fast Velocity Minify plugin aan. Deze doet een prima 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.

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.

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. Laat gerust een reactie na voor meer info over de motivatie waarom ik ze wel – of juist niet – aanraad.