Website snelheid testen en verbeteren

Website snelheid testen

Niets is vervelender dan een langzame website. Al vanaf het moment dat mijn site online kwam, vond ik hem niet snel genoeg. Ik heb eerder al wat pogingen gedaan om mijn website snelheid te verbeteren, maar niets leek te werken. En misschien nog wel vervelender vond ik dat bij iedere website snelheid test een andere uitslag kwam. Vorige week was ik het echt zat en heb ik mijn website onder constructie gezet om hem te versnellen. Ik vertel graag wat ik heb gedaan om de snelheid te verbeteren.

Waarom is een snelle website belangrijk?

Allereerst is de mens niet meer zo geduldig als vroeger. Het liefste moet alles zo snel mogelijk want wij leven in een tijd is geld maatschappij. Wanneer het laden van je website te lang duurt, klikken mensen weg en daarmee kost het je samenwerkingen en lezers. En niet alleen voor lezers is het belangrijk om een snelle website te hebben. Google scoort jouw website, namelijk ook op snelheid. Het kan je dus ook nog is goede seo-scores kosten. Genoeg redenen voor mij in ieder geval om ermee aan de slag te gaan. 

De website snelheid testen

Er zijn een aantal manieren om website snelheid te kunnen testen. De een net wat uitgebreider en begrijpelijker dan de ander, maar allemaal uniek in hun uitslag. Waarbij ik bij de een heel goed scoorde, scoorde ik bij de ander alsnog middelmatig. Verwarrend en irritant op zijn minst, maar laat mij wel zien dat er meerdere punten zijn waar ik iets aan kan doen. Met de volgende systemen kun jij website snelheid testen: 

  • GMetrix, deze handige website laat niet alleen de score die Google aan je website geeft zien, maar ook de score die Yahoo geeft. Per verbeterpunt geeft GMetrix een uitgebreide uitleg over waarom je dit zou moeten aanpassen, maar ook hoe je dit kan doen. Het handige is dat zij ook een WordPress plugin ontwikkeld hebben, zo kun je ten alle tijden zien wat aanpassingen voor je website snelheid doen.  
  • Pagespeed Insights, uiteraard heb je de snelheidstest van Google zelf. Ook Google geeft een uitgebreide uitleg over hoe je bepaalde punten aan kunt pakken, alhoewel ik hun uitleg niet altijd even duidelijk vind. 
  • Pingdom Tool, het handige aan deze test is, dat je kan aangeven vanuit welke regio jij de website snelheid wilt testen. Op die manier wordt de afstand naar de server zoveel mogelijk beperkt. Ik vind de uitleg die deze test geeft, vrij beperkt. Het was voor mij noodzakelijk om meer uitleg op te zoeken. 
  • Uptrends, ondanks de uitslag van de Pagespeed Insights test ook Nederlands is, vind ik de uitleg van Uptrends veel duidelijker omschreven. Hierdoor is het gemakkelijker te begrijpen wat je kunt doen en hoe je het op kunt lossen. 

Waar kijkt Google naar bij website snelheid?

Hoe je het ook went of keert, zo’n beetje alle testen gaan uit van de technieken van Google. Ondanks de uitslagen kunnen verschillen, komt het principe op hetzelfde neer. Er zijn namelijk een aantal vaste punten waar alle website snelheid testen naar kijken, hierbij kun je denken aan de volgende punten:

  • optimalisatie van afbeeldingen
  • de grootte van CSS
  • het aantal pagina omleidingen
  • de grootte van javascript
  • worden belangrijke verzoeken vooraf geladen?
  • is er ongebruikte CSS aanwezig?

Wat heb ik aangepast om mijn website snelheid te verhogen?

Website snelheid testen uitslagAllereerst is het handig om mede te delen dat mijn website echt heel traag was. Bij zo’n beetje alle testen kwam de laadtijd uit tussen de 9 en 12 seconden en dat is traag. Ik heb een week uitgetrokken om alle aanpassingen door te voren, omdat ik van plan was om het in een keer goed aan te pakken. Althans dat hoopte ik. De volgende aanpassingen heb ik door gevoerd om de snelheid van deze website te beteren. Overigens zie je hier ook een uitslag van de test na de aanpassingen. 

Het verwijderen van mijn thema

Als eerste heb ik het thema van mijn website eraf gehaald. De CSS en HTML die in het thema zat dat ik gebruikte was zo verschrikkelijk groot, dat het een groot deel van de laadtijd in nam. Ik maakte gebruik van een thema van Pipdig, maar na wat onderzoek blijkt daar ook expres een stukje code in te zitten die je website vertraagd. Ze hopen dat je op die manier overstapt naar de hosting die zij aanbieden. Ik heb uiteindelijk een heel neutraal thema gekozen, die heel weinig laadtijd kost. 

Ik heb uiteindelijk gekozen voor het hello thema van Elementor. Hiermee bleef grotendeels van mijn lay-out intact. Het thema bevat 475,1 KB en wordt in 503 ms geladen. Daarnaast is hij ook SEO vriendelijk. Ideaal voor mijn website. 

Afbeeldingen verder optimaliseren

Op mijn website gebruik ik veel afbeeldingen. En dat zijn vaak de punten die heel veel tijd in beslag nemen. Het is dus belangrijk om ervoor te zorgen dat die goed geoptimaliseerd zijn. Je moet rekening houden met de volgende punten bij het optimaliseren van afbeeldingen. Allereerst is de grootte van de afbeeldingen van belang. Door afbeeldingen te resizen, kun je behoorlijk wat ruimte besparen, maar tegelijkertijd moet de kwaliteit goed blijven. De reden dat hij nu slechts 58% is, komt door de Instagram plugin die ik gebruik. Daar ga ik dus een andere voor zoeken. 

Ik heb mijn afbeeldingen geoptimaliseerd door de plugin Imagify te downloaden. Hiermee kon ik mijn afbeeldingen nog verder optimaliseren. Het nadeel aan deze plugin is dat je per maand slechts een aantal afbeeldingen kunt gebruiken. Wanneer je er meer wilt gebruiken, moet je hiervoor betalen. Een deel van de afbeeldingen moet ik dus nog verder optimaliseren. 

Het verwijderen van een aantal plugins

Bij de uitslag van een aantal testen kun je in de waterfall zien, wat je site heel veel laadtijd kost. Dit bleek bij mij de plugin te zijn die ik gebruikte voor de cookiemelding. Ik maakte gebruik van de plugin AVG cookie toestemming. Die blokkeerde de weergave van mijn inhoud. Ik gebruikte een plugin om mijn verlopen links te testen, maar ook die heb ik verwijderd omdat hij mijn website aanzienlijk vertraagde. 

AVG cookie toestemming heb ik uiteindelijk vervangen door Complianz. Een vrij eenvoudige plugin die je volledig kunt aanpassen naar jouw wensen. Bovendien zit er ook een startwizard op waarmee je slechts de gegevens hoeft in te vullen en de plugin hem volledig voor je aanmaakt.  Ik heb de broken link checker nog niet vervangen, daar moet ik nog een vervanger voor zoeken. 

Preloading toevoegen

Door preloading toe te voegen aan je website, worden belangrijke verzoeken vooraf geladen. Dit zijn bijvoorbeeld de gegevens die veel tijd innemen. Bij het openen van iedere site wordt er een beroep gedaan op je server. Die gaat dan eerst de CSS, HTML en Javascript laden, in de volgorde zoals het in je website is opgenomen. Wanneer er gegevens zijn die veel tijd in beslag nemen, maar pas later worden geladen, wordt je website trager. Door dat laadproces eerder te starten, is preloading een handige tool. Je kunt er hier meer over vinden. 

Het is belangrijk om enkel hetgeen te preloaden dat kritieke verzoeken . Veel server hebben al ingebouwde manieren om gegevens snel te laden en niet alle gegevens zijn nodig om te preloaden. Om iets te preloaden moet je een tag toeveogen aan het HTML bestand van je pagina’s. Hoe de tag er exact uit te komt te zien hangt af van hetgeen dat je wilt preloaden. In ieder geval begin je tag met het volgende: 

<link rel="preload"

In de situatie dat je javascript wilt preloaden gebruik je de volgende code: 

<link rel="preload" as="script" href="critical.js">

Cache verbeteren

Ik maakte al gebruik van een cache plugin, maar dat was nog niet voldoende volgens een aantal website snelheid testen. Dit heb ik onder andere gedaan door deze caching parameters in mijn rootmap toe te voegen. In middels scoort mijn site dus ook daarop veel beter en is mijn website snelheid verbeterd. 

Ben ik dan nu tevreden over de website snelheid?

Dankzij deze aanpassingen, scoort mijn website nu tussen de 2 en de 5 seconde. Dit is vrij breed genomen, omdat hij dus nog steeds vrij onstabiel is. Een flinke verbetering, waar ik erg blij mee ben, maar nog steeds niet volledig tevreden. Ik wil hem namelijk graag stabieler hebben in de uitslagen van website snelheid testen. Mijn eerste volgende aanpassing zal daarom ook zijn om over te stappen van hosting. Ik heb momenteel een hostingpartij met de server in Duitsland en dat vraagt onnodig extra tijd. Ik wil dus een hosting met de server in Nederland. Verder wil ik de volgende aanpassingen nog doen: 

  • Een andere plugin vinden om mijn Instagram mee te tonen, degene die ik nu gebruik vertraagt mijn website aanzienlijk
  • Preloading van andere elementen toevoegen, dit kan helpen bij het versnellen van je website omdat daarmee de grootste elementen eerder worden geladen

Test jij wel is jouw website snelheid?

website snelheid

SHARE:

Share on facebook
Share on twitter
Share on pinterest
Share on email

Misschien vind je dit ook interessant?