Dit artikel is gepubliceerd op 19 juni 2017. In juli 2020 is dit artikel bijgewerkt naar een nieuwe versie.
———–

Zoals je misschien weet zijn wij dagelijks wel te vinden op de digitale snelweg. Bij Lamper Design houden we ons naast het bouwen van websites & webshops, en website onderhoud, ook veel bezig met het optimaliseren van WordPress websites. In ieder geval doen wij graag de technische optimalisatie en steeds vaker nemen we daar ook de conversieoptimalisatie van een website of webshop in mee omdat het een het ander meestal niet uitsluit. En we hebben de nare gewoonte om websites die we tegenkomen onder de loep te nemen.

GTMetrix Lamper Design

GTMetrix Lamper Design

We kunnen ons 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. Dit scharen wij onder beroepsdeformatie. En als je kritisch bent, zoals wij zijn, dan zie je altijd verbeterpunten. Niet alleen in het werk van anderen maar juist ook in dat van je eigen bedrijf.

Nu hebben wij een voordeel ten opzichte van eerder genoemde beroepsgroepen. Of eigenlijk twee voordelen. Wij hoeven de deur niet uit om het werk van onze collega-webdesignbureau’s te bekijken en daarnaast hoeven we ook niet heel hard te zoeken, aangezien het vaak of door de collega’s of door de klanten zelf gepromoot wordt op social media.

“Wij hebben een nieuwe website”

Hoe vaak zie jij het? “Wij hebben een nieuwe website!” En dan nu naar onze nare gewoonte. Wij doen dan eigenlijk altijd maar 1 ding: wij kopiëren de URL en plakken deze in ieder geval in GTMetrix en meestal ook in Google Pagespeed Insights. Hieruit halen wij in principe binnen enkele seconden wat de website waard is en hoeveel zorg er besteed is aan de technische optimalisatie. Als je nog meer insights wilt zien dan kun je zeker deze vier tools gebruiken om een website te testen.

Design is niet alles

Te vaak zien wij helaas allemaal lovende reacties over een prachtig design. Begrijp ons niet verkeerd, het design van een website is zeker belangrijk. Maar in onze beleving is dit gelijk aan, of misschien zelfs ondergeschikt aan de functionaliteit en snelheid die een WordPress website te bieden heeft. Kijk bijvoorbeeld eens naar de webshops van Amazon. Vind je die het toppunt van design?

Tot zover het meest negatieve stuk van deze blog. We gaan vanaf nu in een positieve streep recht omhoog. Hoe? We gaan je in deze blog uitleggen hoe je de scores van GTMetrix moet interpreteren en verbeteren. Nog te vaak zie ik 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 breng jij jouw WordPress website naar een next level qua snelheid. Als je weet wat je moet doen om de scores te verbeteren, 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 in GTMetrix

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 die lager zijn dan B? Dan moet je hard aan de slag om in ieder geval die scores van je WordPress website of WooCommerce webshop te gaan verbeteren.

Facebook likebox vertraagt je website

Een Facebook likebox vertraagt je website

Is een A-score onhaalbaar dan? Zeker niet, 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.

Er is een behoorlijk aantal zaken dat je laadtijd kan vertragen. Een Facebook Likebox bijvoorbeeld, is een vertrager. Maak je gebruik van JetPack? Test je website eens met en zonder JetPack actief. Als laatste voorbeeld: iedere blogger of webshop eigenaar wil natuurlijk een koppeling met Pinterest. Hiervoor moet een tag geladen worden. Test je website eens met en zonder deze tag.

Verder in deze blog leggen we je uit hoe je GTMetrix kunt lezen en dan weet je dus ook wat je moet aanpassen om de scores te verbeteren.

2. Page details in GTMetrix

In dit onderdeel vind je 3 onderdelen. Los van elkaar zijn ze alle 3 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 laadtijd voor een website of webshop, zonder de realiteit uit het oog te verliezen? Wij zetten in op tussen de 1 en 2 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 om jezelf als doel te stellen.

Dan de volgende vraag: wat is de ideale paginagrootte? Ik kan je alleen vertellen dat wij altijd proberen 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. Je kunt een supersnelle geoptimaliseerde homepage in je WooCommerce webshop hebben en een categoriepagina van 12MB. De tip die we je willen meegeven is: staar je niet blind op de homepage.

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 de plugins nodig die geïnstalleerd zijn of kan ik ook zonder?
  2. Heb ik de functionaliteit nodig, heb ik dan ook een plugin hiervoor nodig of zijn er andere oplossingen zoals bijvoorbeeld een stukje code?

3. PageSpeed tabblad in GTMetrix

We gaan door in het overzicht van de test. Links onder ‘performance scores’ vind je 6 tabbladen; Pagespeed, Yslow, Waterfall, Timings, Video en History. Ik zal hieronder puntsgewijs de veel getoonde fouten uitleggen met een mogelijke oplossing om de betreffende scores te verbeteren.

Pagespeed tabblad GTMetrix.com

Pagespeed tabblad GTMetrix.com

3.1 Serve scaled images

Deze melding loont in ieder geval de moeite om te bekijken. Vaak zijn afbeeldingen bijvoorbeeld op 800 x 600 geüpload, 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? Helaas niet.

Er zijn WordPress thema’s die afbeeldingen responsive inladen en dus verschillende formaten nodig hebben. Dit is niet eenvoudig op te lossen. Het hier door ons beschreven Enfold thema of het Avada thema bijvoorbeeld, doen dit op sommige posities.

3.2 Optimize images

Als hier veel opties staan dan worden wij stiekem een beetje blij. Dit betekent namelijk dat er veel te verbeteren is met relatief weinig inspanning. Ondanks dat je de foto’s voor het web vanuit Photoshop opslaat met een stevige compressie van bijvoorbeeld 70%, krijg je alsnog deze melding.

Hoe los je het op? Dat is relatief simpel. Er staat namelijk een geoptimaliseerde link achter het ‘verkeerde’ bestand. Klik op de link, 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. Met deze beschreven methode is deze melding in het geheel weg te werken.

Wil je jouw afbeeldingen nog verder optimaliseren? Maak dan gebruik van webP afbeeldingen. Dit is een modern bestandsformaat dat door de meeste browsers ondersteund wordt. De Litespeed Cache plugin kan bijvoorbeeld automatisch webP images maken. Maar het kan bijvoorbeeld ook met de Shortpixel plugin.

3.3 Leverage browser caching

Wat wil dit zeggen? De bestanden die hier getoond worden hebben geen verlooptijd meegekregen. Een gecachet onderdeel van je website krijgt een bepaalde tijd mee dat het getoond moet worden. 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? Wij gebruiken praktisch altijd de cache plugin LS Cache voor Litespeed caching, je leest hier meer over caching.

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.

Wil je weten of Gzip op jouw server aan staat? Test het hier online.

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 afhankelijk van diverse factoren op de website. En 100% wegkrijgen is bij deze melding vaak niet mogelijk.

Houd er rekening mee dat zeker het samenvoegen van JavaScript bestanden tot vreemde problemen op je website kan leiden. Testen, testen, testen zal uiteindelijk het ideale resultaat opleveren.

4. YSlow tabblad in GTMetrix

We gaan door met het tabblad YSlow in het overzicht van de test van GTMetrix. Hieronder leggen we weer de veel getoonde fouten uit met kort de oplossing erbij.

Yslow tabblad GTMetrix.com

YSlow tabblad GTMetrix

4.1 Add expires headers

Bij punt 3.3 hadden we het hier al over. Als je deze melding ziet betekent dit 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.

Een tip die we hierin nog kunnen geven is maak gebruik van CAOS Host Google Analytics Locally. Het probleem van het Google Analytics script is dat dit altijd extern opgehaald moet worden. Met deze plugin plaats je het lokaal op jouw server zodat het gecachet kan worden.

https://nl.wordpress.org/plugins/host-analyticsjs-local/

4.2 Compress components with Gzip

Het word best een saaie blog op deze manier. De oplossing voor deze melding over Gzip? Check of je server Gzip ondersteunt op https://www.giftofspeed.com/gzip-test/ 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 testen wij websites en zien we 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 schreven wij 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. Check.

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. Voor een deel hangt dit samen met je hosting. Vooral bijvoorbeeld de TTFB (Time To First Byte) is te beïnvloeden door een goede hosting te nemen voor jouw website.

7. Video

Zelf gebruiken wij 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

Ons beste volledig 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 optimaliseren en daarmee bezig te blijven.

Ook bij ons gebeurt het helaas regelmatig dat er een niet helemaal geoptimaliseerde afbeelding wordt geüpload en wij hier later pas achter komen.

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

Hoe mooi alle online testen voor je website ook zijn, staar je niet blind op de scores die je ziet. Ook wij hebben regelmatig websites die simpelweg met de huidige hosting en het aantal en soort plugins niet supersnel zullen worden. Daarnaast is het zo dat iedere website die wij bekijken en test verbeterpunten heeft.

In deze blog werd een aantal keren caching genoemd door ons. Een belangrijk onderdeel van een snelle website. Let wel op dat je bijvoorbeeld in een WooCommerce webshop altijd de winkelmand en afrekenpagina uitsluit van caching.

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 bij GTMetrix aanmaakt, heb je de mogelijkheid om als locatie voor Londen te kiezen. Doe dit altijd 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 wij regelmatig tegenkomen 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 vooral als je er ook daadwerkelijk gebruik van maakt. Hetzelfde geldt voor tools als Hotjar, Leadinfo en andere tools die extern data opslaan of ophalen.

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