Als je bezig bent met het optimaliseren van je WordPress website wil je ook op GTMetrix.com de hoogst mogelijke scores behalen. Ik schreef al eerder een artikel over het optimaliseren van je snelheid.
Een prima hulpmiddel is hierbij GTMetrix.com. Houd er wel rekening mee dat dat je test vanuit het buitenland, de dichtstbijzijnde testlocatie is Londen. Het is dus een iets negatief beeld wanneer meer dan 90% van je bezoek uit Nederland komt. Met dit in je achterhoofd is het zeker een goede start om hiermee te beginnen.
De mogelijkheden van GTMetrix zijn enorm, daarom zal ik mij beperken tot de functies die ik het meest tegenkom tijdens optimalisaties.
Waar begin je dan met optimaliseren? Mocht je ooit je eigen huis of kantoor schoonmaken dan begin je ook vaak in het deel waar het het minst schoon is. Waarom? Daar zie je snel resultaat en mocht je niet alles af kunnen ronden dan is het ergste alvast gebeurd. Dat zeg ik tenminste altijd tegen mijzelf, jij ook?
1. Afbeeldingen optimaliseren vanuit GTMetrix
Begin dus bij de scores die een hoge letter uit het alfabet aangeven, bijvoorbeeld een F. Vaak zullen dit de afbeeldingen zijn, die of heel groot zijn, of niet correct gecomprimeerd. Ik schreef al eerder over het optimaliseren van je afbeeldingen om je snelheid te verbeteren. GTMetrix helpt je ook. De test geeft aan welke afbeeldingen geoptimaliseerd moeten worden en biedt daarnaast de mogelijkheid deze geoptimaliseerde afbeeldingen direct te downloaden.
Sla ze lokaal op, pas de naam aan (er wordt een aardige lap code toegevoegd aan de bestandsnaam) en upload de geoptimaliseerde afbeeldingen via FTP in de juiste map.
Dit was al de eerste stap naar een geoptimaliseerde snelle website. Vaak een grote stap, zeker gezien het feit dat een behoorlijk deel van de websitebouwers hier geen rekening mee houdt of hun klanten hier niet in adviseert.
2. Aantal requests verminderen
Hoe meer requests, hoe langer het duurt voor een pagina geladen is. Hoe ontstaan requests? Iedere plug-in die je actief hebt staan haalt zaken van de server op. Deze worden opgevraagd door de bezoeker van je website op de server waar je WordPress website gehost wordt.
Logisch dus dat hoe hoger het aantal requests, hoe trager je website zal laden. Zaak om deze zo laag mogelijk te krijgen dus.
Ga naar het overzicht van de geïnstalleerde plugins en neem deze lijst eens kritisch door. Als ik dit samen met mijn klanten doe, komen we verrassend genoeg altijd tot de conclusie dat er minimaal 1 plugin actief is die niet gebruikt wordt.
Is dit echt niet het geval, kijk dan in GTMetrix (op het tabblad Waterfall) naar alles dat geladen wordt. Mogelijk maak je gebruik van een plugin die heel veel verkeer veroorzaakt, terwijl je dit ook kunt oplossen met een eenvoudige regel die je toevoegt aan je functions.php.
Een voorbeeld hiervan zal ik verderop in deze blog hiervan toelichten.
3. Leverage browser caching
Iedere website-optimalisatie draait grotendeels om de juiste caching. Voor het optimaliseren maak ik altijd gebruik van W3 Total Cache. Wat stel ik hier in:
- Page Cache
- Browser Cache
- Object Cache
Heb je niet de mogelijkheid om te kiezen bij de instellingen van deze caches voor memcached? Dan zou ik zeker eens navragen bij je provider of dit een mogelijkheid is. En anders is een verhuizing het overwegen waard voor een optimale snelheid.
Stel nooit de minify en database Cache van W3 Total Cache in. Mijn ervaring is dat dit vaak probleemveroorzakers zijn en ze vertragen eerder dan dat ze snelheidswinst opleveren.
4. Enable gzip compression
Ook dit is een onderdeel dat ik regelmatig tegenkom bij met name goedkope hostingproviders. GZip is een manier van compressie op serverniveau. Deze wordt geactiveerd vanaf de server als het beschikbaar is. Mocht je om wat voor reden dan ook GZip niet kunnen activeren, dan kun je proberen deze code toe te voegen aan je htaccess-bestand.
mod_gzip_on Yes
mod_gzip_dechunk Yes
mod_gzip_item_include file .(html?|txt|css|js|php|pl)$
mod_gzip_item_include handler ^cgi-script$
mod_gzip_item_include mime ^text/.*
mod_gzip_item_include mime ^application/x-javascript.*
mod_gzip_item_exclude mime ^image/.*
mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.*
Als je wilt testen of GZip-compressie juist geactiveerd is op jouw server kun je dit testen op deze website.
5. Remove query strings
Bronnen op je website met een “?” in de url worden niet door alle servers gecached. Zonde, hierdoor verlies je dus kostbare snelheid omdat het item constant volledig van de server opgehaald moet worden. Hoe los je dat op?
Je hebt meerdere opties, de eerste optie is het makkelijkst. Voeg de plugin ‘remove query strings from static resources’ toe aan je WordPress installatie. Plugin activeren en melding verdwenen. Maar waarom een plugin gebruiken als het ook met een eenvoudig stukje code in je .htaccess-bestand kan? Dat heeft absoluut de voorkeur. Gebruik deze code in je .htaccess-bestand:
/*** Remove Query String from Static Resources ***/ function remove_cssjs_ver( $src ) { if( strpos( $src, ‘?ver=’ ) ) $src = remove_query_arg( ‘ver’, $src ); return $src; } add_filter( ‘style_loader_src’, ‘remove_cssjs_ver’, 10, 2 ); add_filter( ‘script_loader_src’, ‘remove_cssjs_ver’, 10, 2 );
Mocht het probleem niet opgelost worden kijk dan even in W3 Total Cache naar je Browser Cache tabblad en zorg dat de optie “Prevent caching of objects after settings change” uitgevinkt is.
[et_bloom_inline optin_id=”optin_6″]
6. Add Expires Headers
Expires headers laat browsers wanneer ze een gecachete versie van je website moeten laten zien en hoe lang ze dit vast moeten houden.
Deze kun je instellen via (alweer…?) W3 Total Cache. Onder browser cache kun je deze optie aanvinken.
Mocht je geen gebruik maken van W3 Total Cache, dan kun je handmatig deze code toevoegen aan je .htaccess-bestand.
<filesmatch ".(ico|jpg|jpeg|png|gif|js|css|swf)$"="">ExpiresActive On ExpiresDefault A600 ExpiresByType image/x-icon A2592000 ExpiresByType application/x-javascript A604800 ExpiresByType text/css A604800 ExpiresByType image/gif A2592000 ExpiresByType image/png A2592000 ExpiresByType image/jpeg A2592000 ExpiresByType text/plain A86400 ExpiresByType application/x-shockwave-flash A2592000 ExpiresByType video/x-flv A2592000 ExpiresByType application/pdf A2592000 ExpiresByType text/html A600
Je moet er rekening mee houden dat je deze melding niet altijd helemaal op kunt lossen. Vooral als je gebruikmaakt van externe tools als bijvoorbeeld Facebook, Hotjar, chatapplicatie als Tawk.to,
7. Minify JavaScript en CSS
Belangrijke vertragers van je website zijn vaak onnodig veel javascripts en stylesheets (CSS) die geladen worden. Je hebt bij de eerdere stappen al gekeken naar het aantal overbodige plugins die je uiteindelijk toch niet nodig hebt, dat is al een eerste stap in het optimaliseren van deze zaken. Maar er is meer mogelijk.
In deze blog over het cachen en optimaliseren van je website schreef ik al over verschillende plugins waaronder LiteSpeed Caching (hier te downloaden via affiliate link van Lamper Design). Deze installeer ik standaard bij iedere optimalisatie in combinatie met W3 Total Cache. Deze verzorgt het samenvoegen van scripts en de stylesheets. Hierdoor zal het aantal requests wat deze veroorzaken drastisch verminderen. Vaak haal je met de juiste instellingen van deze plugin al een winst van minimaal 30%.
De plugin is vrij simpel. Je hebt de keuze uit verschillende gradaties van samenvoegen, test hiermee. Niet alle thema’s zullen de hoogste optimale optie kunnen verwerken, dus test na elke wijziging dus of je site nog naar behoren functioneert. Vergeet ook niet dat JCH een eigen cache heeft en leeg deze dus na het maken van wijzigingen.
Je kunt de plugin eerst testen, de gratis versie biedt drie optimalisatieniveau’s, wil je alle mogelijkheden benutten dan zul je de pro-versie aan moeten schaffen.
8. Conclusie
Misschien vraag jij je af waarom ik kies voor GTMetrix als basis voor een optimalisatie. Er zijn zoveel verschillende testen beschikbaar, waarom specifiek deze? De reden hiervoor is simpel. Alle testen kijken globaal naar dezelfde punten. GTMetrix geeft in mijn beleving het duidelijkst aan waar de pijnpunten van een website liggen. Daarnaast; als je deze score verbetert, zul je direct ook het resultaat zien in alle andere testen.
Regelmatig krijg ik de vraag hoe lang het duurt om een website te optimaliseren. Dit is lastig in te schatten. Het is van zoveel verschillende ex- en interne factoren afhankelijk, een vaste tijd is hier niet voor te geven. Gemiddeld reken ik vier uur per website, meestal is dit ook wel de minimale tijd die nodig is voor het beste resultaat.
Ook wordt mij vaak gevraagd waarom ik geen gebruik maak van een CDN. De simpele conclusie is: als meer dan 90% van je verkeer uit Nederland komt, heeft het geen enkel nut, het zal dan zelfs eerder vertragend werken op je website.
Als laatste een korte uitleg waarom ik gebruik maak van W3 Total Cache terwijl er diverse andere plugins beschikbaar zijn als WP Supercache, Fastest Cache, WP Rocket en nog een aantal bekende namen. De reden hiervoor is simpel. Ik behaal nog steeds het beste resultaat met de combinatie van deze plugins. Heb recent nog getest met WP Rocket, maar ook deze betaalde tool haalt niet het resultaat wat de genoemde gratis plugins halen.
Heb jij ervaring met andere plugins en ben je benieuwd of deze misschien beter zijn? Laat het weten in een reactie, het is zeker de moeite van het testen waard.
Wil jij ook een snelle website en meer omzet maar heb je geen idee hoe het werkt? Ik help je graag, vul de onderstaande aanvraag in en wie weet heb jij deze week ook het hoogst haalbare resultaat uit je website.
