Website optimalisatie met GTMetrix

Website optimalisatie met GTMetrix.com

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.

0 antwoorden

Plaats een Reactie

Meepraten?
Draag gerust bij!

Geef een reactie

Het e-mailadres wordt niet gepubliceerd. Verplichte velden zijn gemarkeerd met *