Nieuws, tips en achtergronden
rondom webhosting

Menu

Gepubliceerd op: 17 januari 2019

Verbeter de laadtijd van je WordPress-website met de tips in het derde deel in onze serie

Verbeter de laadtijd, deel 3: performance testen en nutteloze tips herkennen

Met de basistips voor het versnellen van content en het optimaliseren van afbeeldingen heb je de laadtijd van je blog waarschijnlijk al flink verkort. En er is nog veel meer mogelijk! Zo zijn er online diensten die je website analyseren en je tips voor snelheidsoptimalisatie geven. Maar soms geven die diensten problematische of zelfs onuitvoerbare tips.

Het begint al in de testfase. De tools verwarren je heel snel met de vele rode en oranje waarschuwingsknoppen. Ze suggereren dat je op alle gebieden ‘groen’ of ‘100%’ moet bereiken, terwijl dit helemaal niet waar is. Want overal goede scores halen is óf nagenoeg onmogelijk óf vereist onevenredig veel inspanning. Sommige maatregelen kunnen zelfs tot ernstige problemen op je blog leiden.

Rode symbolen in de testtools zijn niet altijd een probleem

Laat je niet misleiden: rode symbolen in de testtools zijn niet altijd een probleem (hier: webpagetest.org).

Net als bij de beveiliging moet je bij het optimaliseren van de prestaties de voordelen afwegen tegen de inspanningen en risico’s.

Laadsnelheid testen

Een zeer aan te bevelen testtool is GTmetrix. Deze tool heeft een gratis basisversie die voor de meeste gebruikers volstaat.

Snelheidsmeting en tips voor verbetering inéén: GTmetrix.

Snelheidsmeting en tips voor verbetering inéén: GTmetrix.

Ook Google heeft twee testtools voor je: PageSpeed Insights en Test My Site, speciaal voor het testen van de laadsnelheid op smartphones. Beide tools bieden echter minder duidelijke en minder gedetailleerde informatie dan GTmetrix.

PageSpeed Insights is vooral interessant voor blogs met veel traffic, omdat Google de gegevens uit een anonieme analyse van de Google Chrome-browser gebruikt. Dit betekent natuurlijk dat er regelmatig voldoende Chrome-gebruikers op je blog moeten komen, anders heeft Google niet genoeg gegevens voor een zinvolle evaluatie.

Test My Site van Google – je kunt een gedetailleerd rapport per e-mail ontvangen.

Test My Site van Google – je kunt een gedetailleerd rapport per e-mail ontvangen.

Webbrowsers als Firefox en Chrome hebben ook geïntegreerde analysetools voor de laadsnelheid. Die vind je in de ontwikkelaarstools: in Firefox onder Web Developer – Performance and Network, in Chrome onder Other Tools – Developer Tools in het tabblad Audits. Net als GTmetrix geven ze elk element van een website met de bijbehorende laadtijden weer. Ze overdonderen je daarom gemakkelijk met een veelvoud aan getoonde parameters.

Optimalisatie van individuele parameters

Alle analysetools geven aanbevelingen op welke plaatsen je blog sneller kan werken. Ze geven bovendien tips over hoe je dit precies kunt doen. Het gaat te ver om hier alle mogelijkheden in detail uit te leggen. De juiste tutorials en exacte instructies vind je eenvoudig via Google.

Optimalisatietips van GTmetrix met de YSlow-module.

Optimalisatietips van GTmetrix met de YSlow-module.

Het is vooral belangrijk om eerst vast te stellen hoe relevant de aanbevelingen voor je zijn en hoeveel tijd het je kost om de tips uit te voeren.

De analyses wijzen je er bijvoorbeeld op dat je jouw afbeeldingen met een paar procent kunt verkleinen. Maar het zet weinig zoden aan de dijk om al je foto’s een paar kilobytes kleiner te maken, gezien de moeite en tijd die je in die verkleining moet steken.

Een zogenaamde watervalanalyse levert veel meer op. Hier kun je precies zien welke onderdelen op je blog het laden sterk vertragen, zoals plug-ins in Javascript of specifieke afbeeldingen.

De watervalanalyse toont de elementen die je blog het meest vertragen.

De watervalanalyse toont de elementen die je blog het meest vertragen.

Aan sommige problemen kun je niets doen

De aanbevelingen tonen ook aspecten waar je helemaal niets aan kunt doen. Als je bijvoorbeeld Google AdSense-advertenties gebruikt, dan herinnert de analyse je er regelmatig aan om de afbeeldingen en JavaScripts in die advertenties te optimaliseren. Dit kun je echter helemaal niet zelf doen. Je kunt de tip dus alleen maar negeren of volledig zonder Google AdSense werken. Het is overigens een raadsel waarom Google zulke slecht geoptimaliseerde data levert.

Voorbeeld van een onoplosbaar probleem: de bekritiseerde forwards vinden niet plaats op je eigen server, maar bij het laden van externe advertenties van Google AdSense.

Voorbeeld van een onoplosbaar probleem: de bekritiseerde forwards vinden niet plaats op je eigen server, maar bij het laden van externe advertenties van Google AdSense.

Een lastig onderwerp is het samenvoegen en comprimeren van JavaScript en CSS-bestanden. Telkens weer lees je aanbevelingen om dit te doen. Er zijn verschillende WordPress-plug-ins waarvan beweerd wordt dat ze dit automatisch voor je oplossen, maar in de praktijk ontstaan vaak problemen en werkt je blog na de optimalisatie niet goed meer.

Het enige dat helpt: probeer het uit, experimenteer met de instellingen van de plug-in en test ook andere plug-ins. Of er problemen ontstaan door het optimaliseren van JavaScript of CSS-bestanden hangt sterk af van het desbetreffende thema en de combinatie van alle actieve plug-ins.

De ervaring leert dat JavaScript en CSS het beste kunnen worden geoptimaliseerd via cache-plug-ins zoals WP Rocket (betaalde software). De interactie tussen optimalisatie en cache kan namelijk lastig zijn. Een geïntegreerde oplossing werkt meestal beter.

Content delivery networks

Ook het (vaak aanbevolen) gebruik van een CDN (content delivery network) moet je kritisch benaderen. Het idee achter zo’n CDN is dat je afbeeldingen uitbesteedt aan een zeer snel, extern servernetwerk. Dit kan de afbeeldingen sneller leveren, mede doordat ze altijd van een server komen die zo dicht mogelijk bij de locatie van de gebruiker staat. Maar als je jouw blog bij STRATO host en de meeste lezers uit Nederland of West-Europa komen, dan is een andere serverlocatie nauwelijks relevant.

Daarnaast vergt de juiste instelling van een CDN technische kennis. Het is gemakkelijk om fouten te maken die ertoe leiden dat zoekmachines je afbeeldingen verkeerd indexeren. Daardoor zou je zelfs traffic kunnen verliezen.

In Jetpack activeer je het gebruik van een CDN met één klik. Maar helemaal probleemloos werkt het niet.

In Jetpack activeer je het gebruik van een CDN met één klik. Maar helemaal probleemloos werkt het niet.

Een gebruiksvriendelijk, gemakkelijk CDN vind je in het populaire plug-inpakket Jetpack – in de sectie Write onder Performance & Speed. Dit CDN (voorheen ‘Photon’ genoemd) heeft een paar nadelen waarvan je op de hoogte moet zijn. Afbeeldingen worden daar bijvoorbeeld permanent opgeslagen, ook in de cache. Zodra je een foto hebt geüpload, kun je het bestand niet meer wijzigen en wordt het nooit meer verwijderd. Om deze en om andere redenen heeft dit CDN privacyproblemen. Die moet je in elk geval in je privacyverklaring vermelden.

Plug-ins selectief laden

Als je meer dan een handvol plug-ins gebruikt, kun je kiezen voor selectief laden. Het zit zo: gewoonlijk staat de code van de meeste plug-ins op elke pagina van je blog, ongeacht of de plug-in ook daadwerkelijk op een pagina wordt gebruikt. De plug-in voor een contactformulier heb je bijvoorbeeld alleen nodig op je contactpagina, maar toch wordt de code bij elke pagina geladen.

Selectief laden van plug-ins is een oplossing die diep ingrijpt in de functionaliteit van WordPress. We raden je daarom aan om eerst een back-up te maken voordat je wijzigingen aanbrengt. Ook is het verstandig om de instellingen uitvoerig te testen.

Met de plug-in ‘Plugin Organizer’ bepaal je uiterst nauwkeurig welke plug-ins onder welke omstandigheden op welke pagina’s worden geladen. Je kunt zelfs verschillende laadscenario’s voor desktop- en smartphonegebruikers hanteren. Het vergt wel tijd om de plug-in goed te configureren, omdat deze veel en uitgebreide instellingen biedt.

Heb jij ervaring met het optimaliseren van de laadsnelheid van je blog? Dan lezen we graag je resultaten en tips!

Plugin Organizer: hier zie je de gedetailleerde opties waarmee je plug-ins selectief in WordPress kunt laden.

Plugin Organizer: hier zie je de gedetailleerde opties waarmee je plug-ins selectief in WordPress kunt laden.

Samenvatting: richt je op de essentie

Er zijn eindeloos veel manieren om je blog een paar tienden van seconden sneller te maken. Daarbij verlies je al snel het overzicht, loop je vast of voer je wijzigingen door die meer problemen veroorzaken dan oplossen.

Concentreer je daarom op het wezenlijke. Kies alleen oplossingen die je gemakkelijk kunt doorvoeren. Houd vooral in de gaten of de benodigde inspanning in verhouding staat tot de bespaarde laadtijd. Snelheid is niet alles. Als je dezelfde tijd bijvoorbeeld investeert in goede content levert dit vaak meer op voor je lezers én voor je SEO-ranking.

De Auteur:

Auteur: Daniël de Swart

Hallo, ik ben Daniël en werk als project manager voor STRATO Nederland. Daarnaast schrijf ik geregeld voor het blog.

Plaats een reactie

Let er op dat je reactie betrekking heeft op het blogartikel. Mocht je een vraag hebben over je STRATO pakket, richt je dan alsjeblieft aan onze klantenservice via Facebook, Twitter, of onze pagina Hulp & contact.
We vinden het leuk als je je naam noemt, dan kunnen we je in ons antwoord persoonlijk aanspreken.
Als je bovendien je e-mailadres invult, word je per mail op de hoogte gebracht van ons antwoord. Ter bescherming van je gegevens tonen we je mailadres niet. Beide gegevens zijn vrijwillig.

Hier bloggen

Tobias Mayer
Schrijft over het laatste nieuws uit het bedrijf

Oliver Meiners
Schrijft over onderwerpen die voor jou als STRATO klant belangrijk zijn

Daniël de Swart
Project manager voor STRATO Nederland en gastblogger

Sjef Huijbregts
Marketing manager voor STRATO Nederland en gastblogger

Lisa Kopelmann
Online redacteur voor blog, Facebook en meer

Michael Poguntke
Schrijft over de cloud storage HiDrive, Sitebuilder, webshops en servers