5 must do’s: eenvoudig snelheid WordPress website verbeteren

Een blog over eenvoudig de snelheid van een WordPress website verbeteren mag niet ontbreken op mijn website. Want weet je dat jouw ranking in Google, niet alleen afhankelijk is van het juist gebruiken van zoektermen waarop je wilt worden gevonden? En ook niet van het aantal inkomende en uitgaande links? Nee, Google kijkt ook naar de snelheid van websites. En daarbij is de laadsnelheid op mobiele telefoons ook nog eens belangrijker dan de laadsnelheid op desktop computers.

Er zijn veel zaken die invloed hebben op de snelheid van websites. Een aantal zaken zijn heel technisch. Maar er zijn 5 must do’s die niet technisch zijn en die je dus zelf kan gebruiken om de snelheid van jouw WordPress website te verbeteren.

Waarom snelheid website verbeteren?

Er zijn meerdere redenen waarom je een snelle website wilt hebben. Je wilt voorkomen dat bezoekers voortijdig afhaken. Maar je wilt ook een betere score, ofwel betere ranking, dan vergelijkbare langzamere websites in de zoekresultaten van Google. Een kwart seconde kan het verschil al maken.

Voorkomen dat bezoekers voortijdig afhaken

Er is veel onderzoek gedaan naar het vroegtijdig afhaken van bezoekers wanneer een website niet snel genoeg verschijnt. SEO goeroe Neil Patel schrijft in zijn blog How Loading Time Affects Your Bottom Line onder andere:

  • 47% van de bezoekers verwacht dat een website in 2 seconde of sneller laadt
  • 40% van de bezoekers verlaat een website die meer dan 3 seconde nodig heeft om te laden
  • een vertraging van 1 seconde kan leiden tot een vermindering van 7% in conversies

Er is ook het feit dat mensen bij een langzaam ladende website liever op zoek gaan naar een andere website, dan dat ze even wachten tot de oorspronkelijke website is geladen. Dit is te vergelijken met het Houston Airport Incident.

Toen passagiers maar 1 minuut naar de bagageband hoefden te lopen om hun bagage af te halen en daar vervolgens 7 minuten moesten wachten op die bagage regende het klachten. De oplossing: de passagiers omleiden, zodat ze 6 minuten moesten lopen en nog ‘maar’ 2 minuten hoefden te wachten op hun bagage. Er kwamen gaan klachten meer!

Hoe snelheid WordPress website testen?

Er bestaan verschillende tools om de snelheid van een WordPress website te testen. De 3 bekendste tools zijn:

Snelheid WordPress website testen met GTmetrix

De gratis GTmetrix versie test alleen voor desktop. Deze tool geeft heel duidelijk de verbeterpunten aan, waarbij je via de Learn how to improve this link kan lezen hoe je jouw WordPress website sneller kan maken. Let er op dat je een testlocatie kiest in de buurt van waar je klanten zich bevinden.

Snelheid WordPress website testen met GTmetrix

Snelheid WordPress website testen met Google PageSpeed Insights

Met Google PageSpeed Insights test je de snelheid van websites voor mobiel en voor desktop. De nadruk licht hierbij op mobiel. Ook deze tool geeft ook verbeterpunten aan.

Snelheid WordPress website testen met Google PageSpeed Insights

Pingdom

Ook in Pingdom zul je een locatie dicht bij klanten moeten kiezen. Pingdom maakt geen onderscheid tussen mobiel en desktop. Persoonlijk vind ik de feedback iets lastiger te interpreteren.

Wat je moet weten wanneer je de snelheid van jouw website wilt testen?

Kies de juiste testlocatie. Wanneer jouw klanten voornamelijk in Nederland zitten, heeft het weinig zin om de snelheid te testen op een server in de Verenigde Staten. Kies altijd de dichtstbijzijnde server. Voor GTmetrix is dat bijvoorbeeld de server in London.

Altijd meerdere keren snelheid WordPress website testen

Test altijd meerdere keren. Dit is helemaal belangrijk wanneer je een cache plugin gebruikt. Dan zal de website namelijk ook in de cache van de testserver moeten gaan zitten. Daarom zul je meerdere keren moeten testen. Als het goed is zie je na een aantal testen, de resultaten verbeteren. Kies tevens voor 1 of maximaal 2 tools, want alle tools hebben hun eigen methode. De perfecte score is lastig te behalen, ga daarom voor verbeteringen. Zelf gebruik ik altijd GTmetrix en Google PageSpeed Insights.

Wat is cache?
Cache is het in het geheugen opslaan van de website, zodat een webpagina niet bij ieder nieuw bezoek opnieuw opgebouwd moet worden, maar als het ware uit het geheugen gevist wordt en op die manier een stuk sneller verschijnt. Een WordPress website sneller maken begint vaak met het installeren van een goede cache plugin. Maar daarover later meer.

Welke informatie haal je uit de testen en wat kun je ermee?

De informatie die verschijnt nadat je een test hebt gedaan, kan overweldigend zijn. Laat je hier niet door afschrikken. Bij GTmetrix kun je bijvoorbeeld klikken op Learn how to improve this. Je krijgt dan duidelijke informatie, over wat je kunt doen om de snelheid van jouw website te verbeteren. Veel voorkomende verbeterpunten zijn Reduce initial server response time en Avoid enormous network payloads.

Reduce initial server response time

Dit is de tijd die de browser nodig heeft om de eerste byte te ontvangen in antwoord op het verzoek van de browser. De server is druk bezig met het verwerken van verzoeken, het doorzoeken van databases, het verwerken van back-end code en het opbouwen van de pagina. Tot die tijd ziet de bezoeker vaak een wit scherm.

Verbetering hiervan doe je door optimalisatie van Javascript, HTML en CSS bestanden en het instellen van caching. Dit doe je door het installeren van een of meer plugins. Er zijn plugins die beide functionaliteiten combineren. Je zult deze plugins overigens goed moeten configureren. Tevens zul je altijd meerdere plugins willen testen, om te weten welke plugin het beste met jouw website werkt. Je zou vooraf via Google kunnen kijken, welke plugin het beste werkt met het door jou gebruikte WordPress thema. Mocht je net zoals ik met de page builder Divi van Elegant Themes werken, ik gebruik de gratis Swift Performance plugin voor optimalisatie en caching van de Divi websites die ik maak.

Avoid enormous network payloads

Deze melding geeft aan dat er voor het laten zien van de pagina, er heel veel MB’s gedownload moeten worden. Telkens wanneer een pagina wordt geladen, vraagt de browser de server om paginabronnen. De totale grootte van al deze bronnen bepaalt de network payload.

Ook hier helpt een optimalisatie en cache plugin. Maar vaak wordt deze melding ook veroorzaakt door het niet hebben van voor een website geoptimaliseerde afbeeldingen. Zorg er altijd voor dat je de afbeeldingen upload op het formaat dat je de afbeelding op je website wilt laten zien. En voordat je afbeeldingen toevoegt aan je website, optimaliseer je de bestandgrootte op de TinyPNG website.

Snelheid WordPress website verbeteren door afbeeldingen te optimaliseren met TinyPNG

Veel websites hebben bovenaan hun pagina een slider met mooie foto’s. Zo’n slider staat leuk, maar de bezoeker heeft er eigenlijk heel weinig aan. Die wil gelijk de informatie zien waar hij naar op zoek is en begint te scrollen voordat de 2e afbeelding geladen is. En dit terwijl een slider juist de website traag maakt. En al helemaal in combinatie met niet geoptimaliseerde afbeeldingen. Weet dat zelfs piepkleine afbeeldingen die niet klikbaar zijn, zijn groter dan klikbare geoptimaliseerde kunnen zijn.

5 must do’s: eenvoudig snelheid WordPress website verbeteren

1 – Hosting

Een goede hosting provider is onmisbaar. De laadtijd kan bij minder goede hosting providers langzamer zijn dan bij een goede hosting provider. Je wilt je hosting provider kiezen, die zich bevindt waar de meeste van jouw klanten zich bevinden.

Verder lezen? Mijn blog Hoe kies je de beste webhosting?

2 – Te veel plugins en / of widgets

Teveel (onnodige) plugins en / of widgets zorgen ook voor een trage website. Denk hierbij bijvoorbeeld ook aan verwijzingen naar Facebook en Instagram feeds. Met bijvoorbeeld een eenvoudige Like knop van Facebook worden al maar liefst 40 webverzoeken meegestuurd! Dat staat voor zo’n 700 kB.

Onnodig bij plugins staat tussen aanhalingstekens. Sommige plugins heb je gewoon nodig en sommige zullen zelfs voor een snellere website zorgen. Maar heel veel zaken zijn zonder plugin toe te voegen. Denk bijvoorbeeld aan Laposta aanmeldformulieren. Daar is echt geen plugin voor nodig. Houd in het oog dat de kwaliteit en de functionaliteit van de geïnstalleerde plugins is belangrijker dan de hoeveelheid plugins.

3- De juiste en goed ingestelde cache en optimalisatie plugin(s)

WordPress is een zogenaamd dynamische CMS (content management system). Wanneer een bezoeker een WordPress website bezoekt, zal WordPress informatie uit een database moeten ophalen. Vervolgens voert WordPress een aantal stappen uit en pas dan kan de website in de internet browser van de bezoeker getoond worden. En dat voor iedere pagina die de bezoeker op jouw website bekijkt. En dit kost tijd, zeker wanneer veel mensen tegelijkertijd jouw website willen bezoeken.

Dit kan gelukkig eenvoudig voorkomen worden door het installeren van een caching plugin. Zo’n plugin zal je website sneller maken.

Caching plugin

Een caching plugin maakt zodra een pagina voor de eerste keer wordt geladen, een kopie van die pagina. Wanneer vervolgens iemand anders die pagina bezoekt hoeft deze niet meer geheel opnieuw te worden opgebouwd. De opgeslagen kopie (cache) wordt getoond en dit kan een flinke tijdswinst opleveren.

Website sneller maken met een optimalisatie plugin

Het combineren van een caching plugin met een optimalisatie plugin zal je website sneller maken. Een optimalisatie plugin kan scripts en stijlen samenvoegen, verkleinen en cachen, injecteert CSS standaard in de paginakop, verplaatst en vervangt scripts naar de voettekst en verkleint HTML. Een heel technisch verhaal maar ook hier zijn eenvoudig in te stellen plugins voor beschikbaar, zoals Autoptimize.

Beste Divi cache plugin

Voor Divi websites behaal ik overigens de beste resultaten met de WP Fastest Cache plugin.

4 – Afbeeldingen

Juiste afmeting

Voor klikbare foto’s geldt maximaal 1920 pixels breed of 1200 pixels hoog. Maar niet-klikbare foto’s wil je zo groot plaatsen als dat het thema van je website ze weergeeft. Zo werk ik zelf met het Divi thema van Elegant themes en zij hebben op hun website een goed blog staan over welke formaten je nodig hebt voor welke kolombreedte, waarbij ook rekening wordt gehouden met het feit dat de weergave op tablets. Want daar wordt een 4 koloms lay-out geen 4 x 1 kolom zoals op een mobiel – wat dezelfde maat is als de 4 losse kolommen – maar een 2 x 2 koloms die breder moeten zijn dan de 4 x 1 koloms.

Ik zelf gebruik het gratis programma Irfanview om afmetingen van afbeeldingen aan te passen en om uitsnedes te maken.

Optimaliseren

Vervolgens optimaliseer ik ze via de TinyPNG website, waardoor de bestandgrootte enorm afneemt. De Resmush.it plugin op mijn website worden de afbeeldingen nog een beetje extra geoptimaliseerd.

Dat schrijvende, deze website gebruikt een nieuw afbeeldingstype: webp. Wanneer je een jpg bestand converteert naar dit type, neemt de bestandsgrootte enorm af. 95% van bezoekers kunnen webp afbeeldingen zien, alleen bezoekers die Safari op oudere macOS versies zien de afbeeldingen niet. Dit heb ik ondervangen door de Webp Express plugin te installeren. Browsers die webp-afbeeldingen niet accepteren, zullen de oorspronkelijke jpg of png afbeelding laten zien.

Meer informatie over afbeeldingen op website lees je in mijn blog Over afbeeldingen op WordPress websites.

5 – Een placeholder plugin voor video’s

Een website wordt trager wanneer je video’s toevoegt aan jouw website door YouTube of Vimeo video’s te embedden. Dit omdat – ook wanneer een bezoeker de video niet bekijkt – er een script op de pagina geladen wordt om de video te kunnen bekijken.

Je kunt dit eenvoudig voorkomen door met een zogenaamde placeholder plugin te werken. Met zo’n plugin wordt het script pas geladen op het moment dat de bezoeker daadwerkelijk op de video klikt om deze te bekijken.

Ik werk zelf met de gratis Load Video On Click plugin. Het toevoegen van video’s – door middel van een shortcode – is met deze plugin erg eenvoudig.

Tot slot

Met dit blog heb ik een tipje van de sluier opgelicht voor het verbeteren van de snelheid van websites. Een website 100% optimaal krijgen op snelheid is ontzettend lastig. Maar met mijn tips kun je al enorme stappen zetten. Ga eens de jouw WordPress website snelheid testen en kijk naar de feedback die je krijgt. Mocht je je vervolgens onzeker voelen over wat te doen, dan kun je me altijd contacteren. Een andere goede oplossing, is om een website analyse te laten doen.

Website analyse, meer dan snelheid WordPress website testen

Wanneer je een website analyse laat doen, zal ik niet alleen de snelheid testen, maar kijk ik ook naar:

  • SEO – Zoekmachine-vriendelijkheid – techniek en structuur
  • Gebruiksvriendelijkheid – indeling, navigatie, call-to-actions
  • Vormgeving – past deze bij de doelgroep
  • Toegankelijkheid – schermlezers, alt-tekst en contrast
  • Veiligheid – up-to-date met updates, anti-spam en ssl
  • Responsive – goede weergave en werking op tablets en mobiele telefoons
  • Inhoud – up-to-date en geen niet werkende links

Na de analyse krijg je een duidelijk document met verbeterpunten en tips. We bespreken het document en kijken samen naar wie wat gaat doen.

Vraag nu gelijk een website analyse aan.

Met regelmaat plaats ik blogs en korte Tips & tricks. Wil je mijn tips en blogs niet missen? Schrijf je dan in voor mijn nieuwsbrief.

Dit bericht bevat een affiliate link naar de website van Elegant Themes van het Divi WordPress thema. Mocht je via deze link het Divi aanschaffen, dan ontvang ik hiervoor een vergoeding. Vanzelfsprekend verwijs ik alleen naar producten die ik zelf tot volle tevredenheid gebruik. Waarom ik fan ben van Divi kun je lezen in mijn blog 10 redenen om het Divi WordPress thema te gebruiken.

2 Reacties

  1. Kitty de Bruin

    bedankt, je bent een duizendpoot ! ik ga volgende wek verder aan de slag!

    Antwoord
    • Margriet

      Dank, Kitty. En succes!

      Antwoord

Een reactie versturen

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

Verder lezen

Ontvang waardevolle Tips & tricks over webdesign

Wij bouwen niet alleen goede websites, maar regelmatig publiceert Margriet nuttige Tips & tricks en waardevolle blogs over webdesign.

Wil je deze niet missen? Schrijf je dan snel in.