WordPress Traag? – Maak WordPress 2-3x Sneller

Is je WordPress traag en wil jij je website sneller maken? Dan stel ik voor dat je dit blog helemaal leest van voor naar achter. Want hier leer jij hoe je zonder al te veel technische rompslomp je website minimaal 2x sneller maakt. Want misschien wist je het al, maar Google hecht steeds meer waarde aan snelheid en veiligheid bij het tonen van zoekresultaten.

Jij kan dus de allerbeste website hebben met de allerbeste inhoud die je maar voor mogelijk houd, als je website zo langzaam is als dikke str*nt door een fijne vergiet, zal jij nooit die posities in Google behalen die je voor ogen hebt.

Is je WordPress traag? Hieronder dé manier om elke WordPress website sneller te maken. En, zoals altijd vind je hieronder weer een inhoudsopgave om makkelijk te vinden wat jij zoekt. Let’s go!

Is je WordPress traag?

Hosting is een grote factor, maar geef niet meteen je hosting maatschappij de schuld. De manieren om WordPress sneller te maken zijn sterk afhankelijk van de gebruikte plugins en thema’s op je website. Omdat er letterlijk duizenden plugins en thema’s zijn, is het simpelweg niet mogelijk om één standaard oplossing te bieden. Of misschien toch wel?

Hieronder vind je mijn basis gegevens ter vergelijking. Ik heb geprobeerd om zoveel mogelijk standaard instellingen te gebruiken. Die zijn naar mijn inschatting goed voor 90% van alle wordpress websites. Hiermee moet het een eitje voor je zijn om je website sneller te maken..

Mijn WordPress Gegevens:

Ik gebruik WordPress versie 5.4.1, op het moment van schrijven is dit de allerlaatste versie. Mijn hosting maakt gebruik van de Apache Webserver met PHP versie 7.3.18 met NginX als Reverse Proxy en Caching Server. Dit neem ik af op een VPS van Strato.

De actieve plugins op mijn WordPress website:

• AMP – by AMP Project Contributors
• Arigato Pro Autoresponder – by Kiboko Labs
• Arigato Pro Intelligence Module – by Kiboko Labs
• Autoptimize – by Frank Goossens (futtta)
• GDPR Cookie Toestemming – by WebToffee
• Easy Table of Contents – by Steven A. Zahm
• Fusion Builder – by ThemeFusion
• Fusion Slider – by ThemeFusion
• Kraken Image Optimizer – by Karim Salman
• Limit Login Attempts Reloaded – by WPChef
• PWA – by PWA Plugin Contributors
• Rank Math SEO – by Rank Math
• WeDocs – by Tareq Hasan
• WeForms – by weForms
• WP Reading Progress – by Ruige hond
• Wp Super Cache – by Automattic

Mijn gebruikte WordPress Thema:

Avada – by Themefusion

Hoe ga ik de snelheid meten van mijn website?

Prestaties van je website meten met GTMetrix

We willen allemaal dat onze website lekker snel is en er zijn een heleboel diensten op het internet te vinden die je kunnen helpen testen, evalueren en problemen kunnen oplossen die te maken hebben met de snelheid van je website. In deze blog kijk ik naar een tool die ik zelf het meeste gebruik en hoe ik daarmee mijn website sneller heb gemaakt. Lees maar snel verder!

GTMetrix is een zeer populaire online tool om de prestaties en snelheden van je website te meten. Je kan de dienst gebruiken zonder in te loggen of een account aan te maken, maar om voordeel te hebben van alle opties en mogelijkheden kan je zou je kunnen aanmelden voor een gratis account. Er bestaat ook een
PRO account, maar voor de meesten van ons is de gratis versie ruim voldoende. Je website sneller maken is dus goed te doen door naar de adviezen te kijken die je krijgt.

Wanneer je op de site aankomt kan je meteen aan de slag door je webadres in te vullen en op “Analyze” te klikken.

GTmetrix Performance Report

Wanneer je op de knop hebt geklikt gaat GTmetrix voor je aan het werk. Wanneer de meting is gedaan krijg je een “Performance Report” te zien. Dit geeft je een overzicht van de prestaties van je website, onderverdeeld in diverse onderdelen.

• PageSpeed Score: GTmetrix analyseert je pagina zowel met  Google PageSpeed als met Yahoo! YSlow regelsets. Eerst worden de PageSpeed gegevens getoond.
• YSlow Score: De volgende score is die van YSlow een initiatief van Yahoo. Dit is een set met 23 meetbare regels die een webpagina kunnen beinvloeden. PageSpeed en YSlow scores hebben betrekking op de website zelf, maar ze meten verschillende dingen op verschillende manieren. Vandaar dat de score vrijwel nooit gelijk is aan elkaar.
• Fully Loaded Time: De Fully Loaded Time is de tijd totdat de pagina volledig is geladen en geen antwoord meer teruggeeft.
• Total Page Size: Dit is de totale grootte van de pagina in Megabytes, daarin zit alles waaruit de pagina is opgebouwd, zoals HTML, CSS en JS, maar ook afbeeldingen.
• Requests: Dit is het aantal verzoeken wat door de server moet worden uitgevoerd om de pagina op te bouwen met alle verschillende stukjes.

Recommendation Type

In GTmetrix worden alle aanbevelingen (Recommendations) aangeduid, onderverdeeld in diverse types. Het gaat dan om Images, Server, Content, CSS, JS, Cookies, en Content. Bij elke aanbeveling kan je de uitleg bekijken om meer te weten te komen over hoe je het kan oplossen.

GTmetrix Conclusie

GTmetrix is makkelijk in het gebruik en een zeer waardevolle tool om er achter te komen of je website goed functioneert, waar eventuele problemen zitten en hoe je die kan oplossen. Het is allemaal wel nogal technisch, dus als er zaken zijn die je nu niet zoveel zeggen, zou het ingewikkeld over kunnen komen.

Onthoud dat je website sneller maken (optimaliseren) over het algemeen een technische aangelegenheid is die per website ook nog eens enorm kan verschillen. Daarom probeer ik me bij standaard instellingen te houden als we bezig gaan zijn met je website sneller maken.

En dan nu: Mijn website sneller maken!

Ok, mijn website sneller maken, allemaal leuk en aardig maar waar moet je dan beginnen? Nou, zodra je een meting hebt gedaan met GTmetrix, krijg je natuurlijk in de uitslag te zien wat er eventueel mis kan zijn. In mijn ervaring zijn de meest voorkomende fouten:

• Enable Compression
• Leverage Browser Caching
• Minify CSS en Javascript
• Optimize images
• Defer parsing of javascript

Dus, laten we gewoon bij het begin beginnen, ok?

Wat is GZIP compressie?

We zullen eerst de melding “Enable Compression” gaan beetpakken. Als WordPress traag is en je lost dit eerst op, dan zal je website al veel sneller zijn. Compressie wil zeggen dat de bestanden die heen en weer verstuurd worden tussen jouw webserver en de browser worden gecomprimeerd, net zoals een .zip bestand eigenlijk. Met compressie kunnen deze bestanden tot wel 70% kleiner worden gemaakt. Ik hoef je denk ik niet te vertellen dat dit een enorme impact kan hebben op de snelheid van je website. Alle moderne browsers ondersteunen compressie, dus daar hoef jij je geen zorgen om te maken.

GZIP-compressie inschakelen voor WordPress

Hieronder zie je een afbeelding, waarop staat aangegeven dat GZIP compressie moet worden ingeschakeld om je website sneller te maken.

Hoe kun je controleren of GZIP-compressie staat ingeschakeld?

GZIP wordt tegenwoordig veel gebruikt en staat op veel webservers inmiddels al standaard ingesteld. Zoals aangegeven wordt GZIP door alle moderne browsers ondersteund. Zie hieronder welke browsers dit ondersteunen en vanaf wanneer precies.

• Internet Explorer 5.5 en hoger (juli 2000)
• Opera 5 en hoger (juni 2000)
• Firefox 0.9.5 en hoger (oktober 2001)
• Chrome (spoedig na de lancering in 2008)
• Safari (spoedig na de lancering in 2003)

Als je niet zeker weet of compressie is ingeschakeld, moet je altijd controleren of GZIP actief is op je webserver. Er is een snelle manier om te controleren of GZIP compressie staat ingeschakeld:

De GZIP Compression Tool

De snelste manier om te controleren of GZIP-compressie aan staat, is door naar de gratis GZIP Compression tool te gaan. Voer jouw website in en klik op zoeken. Je krijgt nu de hoeveelheid data te zien dat is bespaard door het gebruiken van GZIP. Of er verschijnt een foutmelding wanneer GZIP niet aan staat. Zoals je kunt zien in mijn test hieronder, hebben ik wel 80.78% bespaard!

Hoe kun je GZIP-compressie inschakelen?

Als GZIP-compressie niet aan staat, zijn er een aantal manieren waarop je het op je webserver kunt inschakelen. Let op, dit zijn meteen de meest “Technisch ogende” dingen die je moet doen, het lijkt moeilijk, maar het komt er op neer dat je simpelweg wat code toevoegt aan bepaalde bestanden op je webserver. Als je dit hebt gehad, wordt het alleen maar makkelijker!

GZIP op Apache inschakelen

De eerste manier om GZIP-compressie in te schakelen, is door je .htaccess-bestand te bewerken. De meeste hostingbedrijven gebruiken de Apache webserver, waarin je makkelijk aan je .htaccess-bestand de code hieronder kunt toevoegen. Je vindt jouw .htaccess-bestand in de root (de hoofdmap) van je website. Je kan dit bestand bewerken via FTP, maar veel hostingbedrijven hebben ook een “File Manager” waarmee je de bestanden kan bewerken.

<IfModule mod_deflate.c>
  # Compress HTML, CSS, JavaScript, Text, XML and fonts
  AddOutputFilterByType DEFLATE application/javascript
  AddOutputFilterByType DEFLATE application/rss+xml
  AddOutputFilterByType DEFLATE application/vnd.ms-fontobject
  AddOutputFilterByType DEFLATE application/x-font
  AddOutputFilterByType DEFLATE application/x-font-opentype
  AddOutputFilterByType DEFLATE application/x-font-otf
  AddOutputFilterByType DEFLATE application/x-font-truetype
  AddOutputFilterByType DEFLATE application/x-font-ttf
  AddOutputFilterByType DEFLATE application/x-javascript
  AddOutputFilterByType DEFLATE application/xhtml+xml
  AddOutputFilterByType DEFLATE application/xml
  AddOutputFilterByType DEFLATE font/opentype
  AddOutputFilterByType DEFLATE font/otf
  AddOutputFilterByType DEFLATE font/ttf
  AddOutputFilterByType DEFLATE image/svg+xml
  AddOutputFilterByType DEFLATE image/x-icon
  AddOutputFilterByType DEFLATE text/css
  AddOutputFilterByType DEFLATE text/html
  AddOutputFilterByType DEFLATE text/javascript
  AddOutputFilterByType DEFLATE text/plain
  AddOutputFilterByType DEFLATE text/xml

  # Remove browser bugs (only needed for really old browsers)
  BrowserMatch ^Mozilla/4 gzip-only-text/html
  BrowserMatch ^Mozilla/4\.0[678] no-gzip
  BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
  Header append Vary User-Agent
</IfModule>

Zorg ervoor dat je deze onder de huidige inhoud van je .htaccess-bestand toevoegt.

Schakel GZIP in op NGINX

Als je website op NGINX draait, of je gebruikt NginX als Reverse Proxy, voeg je gewoon het onderstaande aan je nginx.conf-bestand toe. Dit kan op de zelfde manier als het bewerken van het .htaccess bestand voor Apache.

gzip on;
gzip_disable "MSIE [1-6]\.(?!.*SV1)";
gzip_vary on;
gzip_types text/plain text/css text/javascript image/svg+xml image/x-icon application/javascript application/x-javascript;

Kraken image optimizer installeren en instellen

Nu we toch bezig zijn met compressie, stomen we meteen door naar de tweede manier om je website te optimaliseren. Is alles geoptimaliseerd maar is WordPress traag? Dan ligt het vaak aan de gebruikte afbeeldingen. Die kan je eenvoudig optimaliseren. Dit doen we door te kijken naar ene manier om afbeeldingen te comprimeren. Hierboven heb je kunnen zien dat compressie een enorm verschil maakt. Maar, GZIP compressie zorgt er helaas niet voor dat je afbeeldingen ook meteen kleiner worden. Gelukkig is daar een slimme manier voor.

Je kan namelijk door middel van een plugin zorgen dat alle afbeeldingen die jij upload naar je site, meteen worden gecomprimeerd. Daardoor zal uiteraard de snelheid van je site toenemen, omdat er minder data moet worden verstuurd. De plugin die ik hiervoor gebruik is Kraken.

Kraken is een tool die afbeeldingen optimaliseert, zonder afbreuk te doen aan de beeldkwaliteit. En het is best bijzonder om te zien dat er bijna geen verschil zichtbaar is tussen een gewone en een geoptimaliseerde afbeelding.

Voor en na optimalisatie van Kraken

Hieronder zie je twee afbeeldingen. De linker afbeelding is het origineel, niet gecomprimeerd. Een JPEG bestand van 72ppi, 2509 bij 1673 pixels en 717KB groot. Aan de rechterkant zie je de zelfde afbeelding maar dan gecomprimeerd door Kraken. De resolutie en het formaat zijn het zelfde, maar deze afbeelding is maar 324KB groot. Zie jij het verschil? (houd er rekening mee dat deze afbeeldingen opnieuw zijn opgeslagen en geoptimaliseerd voor weergave op deze pagina. Daarom zijn de genoemde waardes anders geworden. Het principe is natuurlijk onveranderd))

Kraken installeren en instellen

Je kan kraken installeren op de reguliere manier door naar Plugins => Nieuwe plugin te gaan en in het zoekveld “Kraken” in te vullen. Vervolgens kan je de plugin installeren en activeren. Wanneer de instalatie gedaan is, vind je de opties en instellingen onder “Instellingen” => Kraken.io

API KEY/SECRET

Om Kraken te activeren heb je een API Key en API Secret nodig. Die kan je vinden in je Kraken Dashboard. Ga naar Kraken.io en mald je aan voor een gratis account. Dat is voor de meesten voldoende om te gebruiken. In het linker menu kan je kiezen voor API redentials, waar jij de gegevens kan vinden.

Terug in WordPress

Ga naar Instellingen => Kraken.io, in dit venster kan je dan de API key en API secret plakken. Als je dit hebt gedaan ben je klaar en zal elke afbeelding die je naar WordPress zal uploaden meteen worden geoptimaliseerd. Houd er rekening mee dat je met een gratis account ongeveer 100MB aan afbeeldingen kan comprimeren, daarna zou je een abonnement moeten nemen vanaf 5 euro per maand. Voordeel is dan wel dat je niet alleen zorgt voor optimalisatie van je afbeeldingen, je kan ze dan ook meteen van formaat wijzigen. En, als je al heel veel afbeeldingen hebt in je website, kan je met Kraken ook de afbeeldingen die al in je site aanwezig zijn met één simpele muisklik optimaliseren.

Als alternatief zou je kunnen kijken naar WP Smush. Dit is een plugin met ongeveer de zelfde mogelijkheden, maar dan volledig gratis. WP Smush heeft echter niet de mogelijkheid om ook een afbeelding van formaat te wijzigen.

Dit alles dus wat betreft de afbeeldingen. Op naar het volgende item, browser caching. Hiervoor gaan we door met het installeren en instellen van WP Super Cache.

WP Super Cache installeren en instellen

Goed, we gaan dus verder met het volgende onderdeel, browser caching. Wat de WP Super Cache plugin doet, is dat het statische html-bestanden maakt van jouw dynamische WordPress-website. Kijk, normaal gesproken is het zo dat als er iemand op je website komt, dat WordPress allerlei bestanden bij elkaar moet zoeken en informatie uit de database moet halen om de pagina aan de bezoeker te laten zien. Dan neemt natuurlijk tijd in beslag.

WP Super Cache, maakt van elke pagina eigenlijk een kleinere versie. WP Super Cache pakt dus eigenlijk vooraf al die informatie per pagina bij elkaar en maakt daar 1 bestand van. Een klein en geoptimaliseerd bestand, wat wordt opgeslagen op de webserver. Als de bezoeker dan de pagina opvraagt, hoeft WordPress dus niet elke keer al die informatie bij elkaar te zoeken, maar stuurt in plaats daarvan het kleine bastand wat vooraf is klaargezet naar de bezoeker. Dit alles zorgt ervoor dat de laadtijden enorm verbeteren, maar ook dat je webserver minder rekenkracht nodig heeft om alle verzoeken te voldoen.

WP Super Cache Installeren

Net zoals altijd kan je ook WP Super Cache op de normale manier installeren. Gan aar Plugins => Nieuwe plugin. In het zoekvak vul je in “super cache”. Je ziet dan zoals op de afbeelding hieronder de plugin verschijnen. Klik op installeren en activeren en je hebt de plugin geinstalleerd en geactiveerd. Dan moeten we alleen de instellingen nog eventjes nalopen.

Om WP Super Cache in te stellen, ga je naar Instellngen => WP Super Cache, je komt dan uit op onderstaand scherm.

WP Super Cache instellen

Standaard staat caching na installatie nog uitgeschakeld, m de plugin in te schakelen vink je Caching On aan, en klik je op “Update Status”. Dan is de caching functie aangezet, vervolgens klik je op het tabje “Advanced” om de rest van de instellingen te doen. Maak je geen zorgen, dit is niet moeilijk, ondanks dat je in de “Advanced” tab zit. Hieronder zie je de advanced settings pagina.

Je kan de instellingen zoals ik ze heb gedaan precies zo overnemen. Om het makkelijk te maken, je vinkt simpelweg alles aan waar (Recommended) bij staat…. Wanneer je de juiste dingen hebt aangevinkt, klik je ook weer op “Update Status” om de instellingen op te slaan. Scroll nog een klein beetje naar beneden tot je onderstaand op je scherm ziet.

Hier moet je even kijken naar de waarde die is ingevuld bij “Cache Timeout”. Normaal staart hier een waarde van 1800, verander dit naar 3600 en klik op “Change Expiration” om ook deze instelling op te slaan.

Hee!! Je bent klaar! Dat was wel makkelijk toch?

Om meteen te zien wat voor effect dit allemaal heeft gehad, kan jij je site gewoon even bekijken in je browser. Je zal zien dat er al een groot verschil is in snelheid, het “voelt” al veel sneller en beter… Mocht je helemaal nieuwsgierig zijn, kan je op dit punt alvast een meting doen bij GTmetrix, ook dan zal je een enorm verschil zien.

Dan is het nu tijd voor de laatste stap, het installeren en instellen van Autoptimize.

Autoptimize installeren en instellen

Persoonlijk vind ik Autoptimize één van de beste gratis plugins die je kan gebruiken voor het optimaliseren van JS, CSS en HTML bestanden. Nadat de plugin is geinstalleerd moeten we even in de geavanceerde instellingen duiken. En ook hier weer geen zorgen, je kan de instellingen gewoon overnemen zoals ik ze aangeef.

Autoptimize Installeren

Inmiddels begrijp je het denk ik al, je kan Autoptimize ook weer op de reguliere manier installeren. Ga naar Plugins => Nieuwe Plugin, zoek naar “Autoptimize”, installeer en activeer de plugin. Wanneer je dit hebt gedaan, vind je de instellingen onder Instellingen => Autoptimize.

Autoptimize instellen

Laten we beginnen met de Javascript opties, je kan de instellingen overnemen zoals ze hieronder staan aangegeven. Dit is redelijk standaard voor alle websites.

Vervolgens kan je de instellingen overnemen voor de CSS opties:

En natuurlijk van de HTML opties

Als laatste blijft dan over de “Andere Opties”. Bij mij werken de instellingen goed zoals je ze hieronder ziet. Kijk deze opties voor jezelf even na. Je kan in eerste instantie de twee bovenste functies aanvinken zoals op de afbeelding, de derde is een kwestie van proberen. Wanneer je een pagebuilder gebruikt, moet je deze optie uit laten staan.

Conclusie

Zo, dat was me wel even een ritje zeg. We hebben nu de 5 meest voorkomende problemen opgelost, waardoor je site nu minimaal 2x sneller zou moeten zijn. Wanneer je op je site zal gaan surfen, zal je ook echt zien dat de boel veel sneller “aanvoelt”. Maar, ik kan aan de andere kant ook begrijpen dat dit allemaal een beetje te moeilijk voor je is als je nog helemaal niet of heel weinig met WordPress hebt gewerkt.

Wellicht zou je dan ook eens kunnen kijken naar het systeem Marketheme. Ik schreef daar een uitgebreide review over en laat de verschillen zien tussen zelf je WordPress opzetten en onderhouden, of te kiezen voor een oplossing waarbij dit allemaal uit handen wordt genomen voor je.

Hoe dan ook, ik hoop dat je weer iets hebt gehad aan al deze informatie. En kom je ergens niet uit? Laat even een berichtje achter, ik help je graag verder op weg!

Wil je dat er een expert naar je site kijkt om deze te optimaliseren voor snelheid? Geen punt! Voor slechts 25 euro maken wij je site gegarandeerd sneller, op de juiste manier natuurlijk 😉