Berichten

Ik heb een nare gewoonte. En die ga ik met jou delen. Zoals je misschien weet ben ik dagelijks wel te vinden op de sociale snelweg. Net als in het echte leven ben ik daar ook nieuwsgierig. En zoals je misschien ook weet, houd ik mij veelvuldig bezig met het optimaliseren van met name WordPress websites. Het gaat dan in ieder geval altijd over de technische optimalisatie en steeds vaker neem ik daar ook de conversieoptimalisatie in mee omdat het een het ander meestal niet uitsluit.

GTMetrix resultaten Lamper Design

GTMetrix resultaten Lamper Design

Terug naar mijn nare gewoonte. Ik kan mij voorstellen als je aannemer bent en je rijdt door de wijde wereld, dat je oog hebt voor alle bouwsels die je onderweg tegenkomt. Hetzelfde geldt voor een hovenier die naar nieuw aangelegde tuinen kijkt. Ik schaar dit onder beroepsdeformatie. En als je kritisch bent, zoals ik meestal ben, dan zie je altijd verbeterpunten. Niet alleen in het werk van anderen maar ook in dat van jezelf.

Nu heb ik een voordeel ten opzichte van eerder genoemde beroepsgroepen. Of eigenlijk twee voordelen. Ik hoef de deur niet uit om het werk van mijn collega’s te bekijken en daarnaast hoef ik ook niet te zoeken, aangezien het vaak of door de collega’s of door de klanten zelf gepromoot wordt op social media. Hoe vaak zie jij het? “Wij hebben een nieuwe website!” En dan nu echt door naar mijn nare gewoonte. Ik doe eigenlijk altijd maar 1 ding: ik kopieer de url en plak deze in ieder geval in GTMetrix en meestal ook in Google Pagespeed Insights. Hieruit haal ik binnen enkele seconden wat de website waard is en hoeveel zorg er besteed is aan de afronding.

Te vaak zie ik allemaal lovende reacties over een prachtig design. Begrijp mij niet verkeerd, design van een website is zeker belangrijk. Maar in mijn beleving is dit gelijk aan, of misschien zelfs minder belangrijk dan de functionaliteit en snelheid die een WordPress website te bieden heeft.

Maar tot zover het negatieve stuk van deze blog. We gaan vanaf nu in een positieve streep bergopwaarts. Hoe? Ik ga je in deze blog uitleggen hoe je de scores van GTMetrix moet lezen, te vaak zie ik nog vragen over deze scores in bijvoorbeeld onze eigen Facebookgroep WordPress Support NL-BE.

In combinatie met het eerder geschreven blog over het optimaliseren van de snelheid van je website brengt dit jouw website naar een next level qua snelheid. Als je weet wat je moet doen, kun je namelijk direct zelf aan de slag.

Spring snel naar het gewenste onderdeel:

Performance scores
Page Details
Pagespeed tabblad
Serve Scaled Images
Optimize Images
Leverage browser caching
Enable GZIP compression
Minify CSS (en JavaScript)n
Yslow tabblad
Add expires headers
Compress components with gzip
Configure entity tags (ETags)
Avoid URL Redirects
Waterfall
404 errors op je website?
Grootte van je afbeeldingen
Timings
Video
Historie
Conclusie

1. Performance scores

Als je de URL van je website ingevoerd hebt, krijg je onder performance de testresultaten te zien uitgedrukt in twee letters. Hier kan ik vrij kort over zijn. Zie je hier 1 of 2 letters meer dan B? Dan moet je hard aan de slag om in ieder geval die te gaan verbeteren.

Facebook likebox vertraagt je website

Een Facebook likebox vertraagt je website

Kun je niet naar A komen dan? Zeker wel, maar dit is erg afhankelijk van de complexiteit van je website. Het is onder andere afhankelijk van het aantal plugins en welke socialmediakanalen je gekoppeld hebt. Een Facebook Likebox bijvoorbeeld, is een enorme vertrager. Verder in deze blog ga ik je vertellen hoe je GTMetrix kunt lezen en dan weet je dus ook wat je moet aanpassen om de scores te verbeteren.

2. Page details

In dit onderdeel vind je drie onderdelen. Los van elkaar zijn ze alledrie een goede indicatie waar de problemen op jouw website te vinden zijn. Of eigenlijk waar de oorzaak van de problemen te vinden is.

Fully loaded time: Hoe lang duurt het voor jouw volledige website geladen is?
Total page size: Hoeveel megabyte moet een bezoeker binnenhalen om jouw website volledig te kunnen bekijken?
Request: Hoeveel verzoeken moeten er door de browser van jouw bezoeker verstuurd worden naar de server voordat alles geladen is?

Wat is de ideale loadtime, zonder de realiteit uit het oog te verliezen? Ik zet meestal in op 3 a 4 seconden. Mocht je dit halen, dan ben je niet de snelste, maar zeker niet de langzaamste. Het kan altijd beter, maar dit is alvast een goed streven.

Dan de volgende vraag, wat is de ideale paginagrootte? Ik kan je alleen vertellen dat ik altijd probeer onder of rond de 1MB uit te komen. Dit is zeker haalbaar, ook met veel foto’s op de pagina. Een kanttekening bij de total page size is dat dit de grootte van de geteste pagina betreft.

Voor het aantal requests is geen ideaal getal te benoemen. Houd dit zo laag mogelijk. Hoe doe je dat? Kijk kritisch naar je plugins en stel jezelf twee vragen:

  1. Heb ik alle plugins nodig die geïnstalleerd zijn?
  2. Heb ik de functionaliteit nodig, heb ik dan ook een plugin hiervoor nodig of zijn er andere oplossingen?

3. Pagespeed tabblad

We gaan door in het overzicht van de test. Links onder performance scores vind je zes tabbladen, te weten Pagespeed, Yslow, Waterfall, Timings, Video en History. Ik zal hieronder puntsgewijs de veel getoonde fouten uitleggen en kort de oplossing erbij.

Pagespeed tabblad GTMetrix.com

Pagespeed tabblad GTMetrix.com

3.1 Serve scaled images

Deze melding loont in ieder geval de moeite van het bekijken. Vaak zijn afbeeldingen bijvoorbeeld op 800 x 600 geupload maar worden ze getoond op 200 x 150 pixels. Hier is dus een enorme winst te behalen door de foto’s te uploaden op het juiste formaat. Werkt dit altijd zo? Nee helaas. Er zijn themas die afbeeldingen responsive inladen en dus verschillende formaten nodig hebben. Dit is niet eenvoudig op te lossen. Het hier door mij beschreven Enfold thema bijvoorbeeld, doet dit op sommige posities.

3.2 Optimize images

Hier word ik eigenlijk altijd blij van als ik dit zie. Ondanks dat je de foto’s  jeoor het web vanuit Photoshopopslaat met een stevige compressie, krijg je alsnog deze melding. Hoe los je het op? Dat is simpel. Er staat namelijk een geoptimaliseerde link achter het ‘verkeerde’ bestand. Klik hierop, sla het bestand op (vergeet niet de extra toegevoegde tekst na de _ te verwijderen) en upload het bestand weer naar de aangegeven folder via FTP. Deze melding is in het geheel weg te werken met beschreven methode.

3.3 Leverage browser caching

Wat wil dit zeggen? De bestanden die hier getoond worden hebben geen verlooptijd meegekregen. Een gecached onderdeel van je website krijgt een bepaalde tijd mee dat het getoond moet worden en na die tijd moet het opnieuw opgehaald worden. Zie je hier bijvoorbeeld .jpg bestanden staan dan betekent dit simpelweg dat je caching niet goed ingesteld staat. Wil je echt een goede caching instellen? Ik gebruik bijna altijd de combinatie van JCH Optimize met WP Supercache, je leest hier meer over JCH.

3.4 Enable GZIP compression

Krijg je een melding over GZIP? Controleer eerst bij je host of dit überhaupt actief is op de server. Veel low-budget providers hebben dit niet standaard aan staan of bieden hier helemaal geen mogelijkheid voor. Ook hiervoor geldt weer dat als het op de server actief is, je dit door middel van in het vorige punt genoemde caching plugins kunt inregelen.

3.5 Minify CSS (en JavaScript)

Hoe beter je alle bestanden van je website geminified hebt hoe sneller deze zal laden. Ga dus actief aan de slag met het testen van verschillende caching plugins. Hier is echt geen pasklaar antwoord op te geven, het is van diverse factoren op de website afhankelijk. En 100% wegkrijgen is bij deze melding vaak niet mogelijk.

4. Yslow tabblad

We gaan door met het tabblad Yslow in het overzicht van de test. Ik zal hieronder weer de veel getoonde fouten uitleggen en kort de oplossing erbij.

Yslow tabblad GTMetrix.com

Yslow tabblad GTMetrix

4.1 Add expires headers

Bij punt 3.3 had ik het hier al over. Het betekent dat je caching niet goed ingesteld staat. Dat is een makkelijk antwoord. Ook deze melding zul je niet altijd volledig op kunnen lossen, vaak zijn er plugins die niet te cachen zijn omdat ze dan niet meer werken.

4.2 Compress components with gzip

Het word best een saai blog op deze manier. De oplossing voor deze melding? Check of je server gzip ondersteunt op https://checkgzipcompression.com/ en activeer/configureer de juiste caching.

4.3 Configure entity tags (ETags)

Mocht je cache plugin dit niet op kunnen lossen, dan is het eenvoudiger om een stukje code aan de .htaccess op je server toe te voegen:

<FilesMatch "\.(ico|pdf|flv|jpg|jpeg|png|gif|js|css|swf)(\.gz)?$">
Header unset ETag
FileETag None
</FilesMatch>

4.4 Avoid URL Redirects

Regelmatig test ik websites en zie ik dat deze melding naar voren komt. Vaak zijn dit websites waar de automatische doorstuur van www naar non-www of van http naar https niet goed ingeregeld is. Wil je zeker weten dat je de juiste code in je .htaccess bestand hebt staan? Genereer deze zelf op http://www.aleydasolis.com/htaccess-redirects-generator/. Nog beter is om de redirects via de server te laten verlopen, dit zal een beter en sneller resultaat hebben dan via .htaccess.

5. Waterfall

Wat vind je in de waterfall van GTMetrix? Daar vind je in watervalvorm alles wat op de voor- en achtergrond geladen wordt op je website. Er zijn twee functies waar dit erg handig voor is.

Waterfall GTMetrix Lamper Design

Waterfall GTMetrix

5.1 404 errors op je website?

Een heel simpele regel is: elke 404 error vertraagt je website. Of dit nu zichtbaar is voor je bezoekers of niet. Dus los deze op. Kijk naar de rode regels in de waterfall en kijk welk bestand er mist. Pas dit aan. Heel soms is het beter een fake 1kb bestand te laten laden in plaats van een 404 error.

5.2 Grootte van je afbeeldingen

Eerder schreef ik al een blog over het optimaliseren van je afbeeldingen. Hiervoor is de waterfall erg handig, hier zie je exact welke bestandsgrootte er geladen wordt en pik je de grootste afbeeldingen er dus uit. Downloaden, optimaliseren en weer uploaden. Weer een melding weggewerkt.

6. Timings

Op dit tabblad zie je de fases van het laden van je website. Wanneer is alle content geladen, hoe lang duurt het voor alle CSS geladen is, enzovoort.

7. Video

Zelf gebruik ik deze optie niet heel vaak omdat meestal de eerdere tabbladen al voldoende informatie geven over de bottlenecks. Maar het is zeker een goed hulpmiddel. Je neemt een video op van het laden van je website en soms kom je dan tot verrassende inzichten. Een foto die net iets langer duurt dan de rest, een stuk tekst dat traag verschijnt, dat soort zaken kun je opsporen middels de gemaakte video.

8. History

Mijn advies aan jou is: wees nooit tevreden met de snelheid van je website. Plan tijd in om regelmatig deze scans te draaien en actief aan de slag te gaan met het optimalisere en daarmee bezig te blijven. Ook bij mij gebeurt het regelmatig dat ik een niet helemaal geoptimaliseerde afbeelding upload en hier later pas achter kom. En daarom is het handig dat je ook de historie kunt bekijken als je een account maakt bij GTMetrix. Hier kun je vaak veel uit afleiden en een logische verklaring vinden voor een bepaalde vertraging die er eerder niet was.

9. Conclusie

Staar je niet blind op de scores die je ziet. Ook ik heb regelmatig websites die simpelweg met de huidige hosting en het aantal en soort plugins niet sneller zullen worden. Daarnaast is het zo dat iedere website die ik bekijk en test verbeterpunten heeft.

Houd er ook rekening mee dat de testen niet vanuit Nederland uitgevoerd worden. Hopelijk heb je wel een provider gekozen die een server in Nederland heeft staan. Als je een gratis account aanmaakt, heb je de mogelijkheid om als locatie voor Londen te kiezen. Doe dit in ieder geval voor het best vergelijkbare beeld van jouw website. Houd er dus wel rekening dat dit wel milliseconden extra vertraging oplevert. Geen ernstig feit maar wel iets om rekening mee te houden.

Naast GTMetrix zijn er nog meer testen die allemaal verschillende onderdelen van je website beoordelen. Ook hier: streef naar het hoogst haalbare maar verwacht geen onmogelijke dingen. Als voorbeeld, de eigen test van Google Pagespeed Insights geeft meestal aan dat Google Analytics de website vertraagt. Dat is op zich heel bijzonder aangezien het beide tools van Google zijn.

Een andere vertrager die ik regelmatig tegenkom is de Facebook Pixel. Deze kun je ook niet optimaliseren, aangezien dit soort zaken niet gecached kan worden. Gebruik deze dus alleen als je weet wat je ermee moet en ook daadwerkelijk gebruikt.

Heb jij met behulp van de bovenstaande blog jouw website geoptimaliseerd? Laat de resultaten weten in een reactie onder deze blog.

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.

GTMetrix verbeteren in WordPress

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.

Geoptimaliseerde afbeelding GTMetrix 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.

Network Tab GTMetrix

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:

  1. Page Cache
  2. Browser Cache
  3. 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.

Download JCH Optimize

Download JCH (affiliate link)

In deze blog over het cachen en optimaliseren van je website schreef ik al over de plugin JCH Optimize (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. Dit antwoord kun je vinden op https://www.managedwphosting.nl/2015/09/heb-ik-een-content-delivery-network-cdn-nodig/. Hier heb ik niets aan toe te voegen. 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.