Website snelheid testen én verbeteren met 5 tips!

Wil jij je website snelheid verbeteren? Om je je website sneller te maken kunnen we de website snelheid testen, analyseren en aan de hand van 5 tips verbeteren. In onderstaande video leg ik uit waarom je website traag wordt, hoe je je website snelheid kunt testen én geeft ik je 5 tips hoe je je website sneller kunt maken. Ook heb ik onder de video uitgebreid (geüpdatet) uitgeschreven hoe jij je website snelheid test en verbetert.

Transcriptie video

Laatste update: September 2021

De snelheid van je website is belangrijk voor de gebruikservaring op je website en wordt ook steeds belangrijker voor zoekmachines als Google. Niet voor niets dat LCP (laden van het grootste element van een pagina) onderdeel geworden is van één van de laatste Google updates. In dit blog vertel ik je waarom websites traag worden, hoe je je website kunt analyseren en hoe je je website sneller kunt maken.

Waarom wordt een website traag?

Voordat we beginnen met het optimaliseren van de snelheid, is het belangrijk om te weten waarom websites traag worden. Er zijn verschillende typen content op je website. Zo zijn er HTML code, afbeeldingen, CSS en JavaScript-bestanden.

Zie HTML als de botten van je lichaam. Door middel van deze code krijgt een pagina structuur. CSS zorgt voor de opmaak, vergelijkbaar met je huid. JavaScript zorgt ervoor dat elementen op een site beweegbaar worden, vergelijk dat met spieren in een lichaam.

Al deze verschillende content types zorgen ervoor dat de code op jouw pagina’s steeds maar meer wordt. Hoe meer afbeeldingen, hoe meer CSS, hoe meer JavaScript en hoe meer HTML, des te groter je website wordt. De browser op je computer of telefoon gebruikt vervolgens de internetsnelheid om al deze code te downloaden en vervolgens wordt de rekenkracht van het apparaat gebruikt om de code om te zetten naar een visuele pagina: het renderen.

Om je website snel te maken, zullen we ervoor moeten zorgen dat alle typen content op je website geoptimaliseerd zijn, zodat de computer of telefoon van gebruikers op je site zo snel mogelijk een pagina kan laden wanneer iemand een pagina wil bezoeken.

Website snelheid testen

Er zijn veel verschillende tools beschikbaar om de snelheid van jouw website te analyseren. In dit artikel behandel ik drie tools: De Pagespeed Insights van Google, WebPageTest en Google Chrome DevTools. Er zijn naast deze drie dus nog vele andere tools, maar door het gebruik van deze drie heb je genoeg informatie over hoe snel jouw website is en vanuit daar kun je voldoende conclusies trekken m.b.t. optimalisaties die jij moet doorvoeren om jouw website te verbeteren.

Tip! Gebruik voor het testen niet alleen de homepagina van je site, maar ook belangrijke landingspagina’s of categoriepagina’s waar veel gebruikers komen.

Lab Data vs. Field Data

Een superbelangrijk inzicht wat ik wil delen – voordat we sites gaan testen – is het verschil tussen lab data en field data.

Lab data is niets anders dan de data die gegenereerd wordt door testen, field data is de data van echte gebruikers op jouw site.

Testen als Google Pagespeed Insights worden gedaan door een Moto G4 met 1,5 mbps download, 0,75 mbps upload en een latency van 300 ms. Een vooraf gedefinieerde locatie, toestel en netwerk dus. Vergelijk je dat met bijvoorbeeld mijn eigen telefoon, een iPhone X met 4G verbinding, krijg je een groot verschil.

Belangrijk is dat je je niet blind moet staren op de testresultaten (lab data), maar vooral ook de field data in de gaten moet houden. In Google Search Console kun je bijvoorbeeld in het ‘paginafunctionaliteit’ rapport zien wat de LCP was van gebruikers op jouw site. Deze data kun je ook in Google Analytics 4 laten inschieten.

Tool 1: Google Pagespeed Insights

Google Pagespeed Insights is een tool van Google waarin je gemakkelijk je website kunt testen. Door een URL in te voeren krijg je supersnel resultaten, zonder ingewikkelde instellingen. Google hangt vervolgens een score aan jouw pagina.

Het voordeel van Google Pagespeed Insights is dat Google direct al aanbevelingen geeft om de snelheid van je site te verbeteren. Deze hebben impact op je snelheid. Daarnaast geeft Google in de diagnostische gegevens ook aanbevelingen die niet directe impact hebben op de snelheid van je site.

Door Google Pagespeed Insights kun je al vrij snel zien waar je aan moet werken om je website sneller te maken.

Tool 2: WebPageTest.org

WebPageTest gaan we gebruiken om meer gedetailleerde data te krijgen van een pagina. Hier kunnen we ook de test zelf instellen door een locatie, apparaat en netwerk te kiezen.

Ik raad zelf aan hier twee testen te doen:

1. Locatie Amsterdam, toestel Moto G4 en netwerk ‘3G Fast’. Dit zijn dezelfde instellingen als Google gebruikt.
2. Locatie Amsterdam, toestel iPhone 6/7/8 en netwerk ‘LTE’. In Nederland zijn deze standaarden redelijk normaal en hierdoor krijg je een veel beter inzicht in wat gebruikers ervaren.

Bij beiden zou ik 5 testen instellen, de optie ‘first and repeat view’ en de optie ‘capture video’ aantikken.

Na de testen zie je een samenvatting van de resultaten. Dit zijn de mediaan resultaten van alle vijf de testen die er zijn gedaan voor de eerste keer laden en voor de herhalende laden. Best een verschil tussen test 1 en test 2 hè?

Je kunt precies zien hoeveel seconden het heeft geduurd voordat de first byte er was, voordat de render is gestart. Ook de LCP van de Core Web Vitals is hier te vinden; hoe lang het heeft geduurd totdat het document compleet en volledig geladen was.

Het mooie aan WebPageTest is dat zodra je naar de details gaat, je een hele waterval te zien krijgt over hoe jouw webpagina ingeladen wordt. Dit begint met een connectie maken met de DNS, het connectie maken met de server en ophalen van de SSL. Vervolgens gaat de browser de HTML inladen, daarna wat CSS en JavaScript-bestanden en vervolgens komen hier eigenlijk allemaal afbeeldingen die ingeladen worden. Helemaal onderaan wordt bijvoorbeeld Google Analytics, Facebook en allerlei andere scripts nog ingeladen, die het meetbaar maken van de website natuurlijk mogelijk maakt.

Als je naar beneden scrolt, zie je nog precies wanneer de connectie wordt gemaakt met verschillende externe servers, ideaal om te kijken welke externe domeinen een preconnect moeten hebben (meer hierover bij de extra tip! ;)).

Wil je dus een diepere analyse van de snelheid van jouw website, dan kun je met WebPageTest in de waterval gaan kijken wat er precies voor zorgt wat jouw website langzaam maakt.

Tool 3: Google Chrome DevTools

Voor de laatste tool gaan we in de Google Chrome browser naar de pagina die we willen optimaliseren, klikken we op ‘inspecteren’ waar we vervolgens in de Chrome DevTools komen.

Onder het tabje ‘performance’ en ‘coverage’ in de DevTools kunnen we nog meer data verzamelen over welke onderdelen van jouw webpagina ervoor zorgen dat de webpagina traag wordt.

Onder het tabje ‘performance’ kun je linksboven op het ‘reload’ knopje drukken en wordt precies weergegeven hoe de pagina laadt, in principe hetzelfde als WebPageTest. We kijken hier voornamelijk naar de tabjes ‘network’, ‘long tasks’ en ‘main’.

Het tabje ‘network’ laat zien op welk moment welke bestanden worden ingeladen, ‘long tasks’ geeft taken langer dan 50ms aan en het tabje ‘main’ laat de main thread zien. Hierin wordt precies beschreven waar de browser mee bezig is.

Ook het coverage rapport geeft waardevolle data weer. Door middel van een refresh van de pagina wordt gekeken welke code van CSS en JavaScript-bestanden niet worden gebruikt. Als alle CSS van een website in één CSS-bestand wordt gezet, staat daar een heleboel code in die ergens een keer op de website gebruikt wordt en die bij elke pagina ingeladen moet worden. Die ongebruikte CSS en JavaScript code wordt in het coverage rapport getoond.

Google Chrome DevTools is ideaal om nog meer informatie te verzamelen over hoe jouw pagina ingeladen wordt.

Website snelheid verbeteren

Hoe kun je nu uiteindelijk je website optimaliseren en sneller maken? In 5 tips wil ik je wat handvatten geven om zelf aan de slag te gaan met het sneller maken van je website.

Goed om vooraf aan te geven is dat je duidelijk voor ogen moet hebben wat haalbaar is en wat niet. Hoeveel tijd en geld moet je in een bepaalde aanbeveling stoppen en welke tijdwinst staat daar tegenover? Die afweging is ontzettend belangrijk; een mega snelle website die binnen een halve seconde laadt is gewoon niet altijd mogelijk.

Tip 1: De basis

In tegenstelling tot de vorige versie van dit blog wil ik niet 5 tips behandelen over bijvoorbeeld een goede hosting, altijd de laatste updates installeren, een snel thema, cache installeren of GZIP-compressie inschakelen. Deze optimalisaties zijn namelijk absoluut de basis voor een snelle website. In dit blog wil ik iets dieper gaan. Kort de basis optimalisaties samengevat:

1. Een goede hosting. Een snelle server en hosting is ontzettend belangrijk. Zelf kan ik uit eigen ervaring bijvoorbeeld SiteGround aanraden.
2. De laatste updates. Door je site up-to-date te houden, verbeter je de snelheid. Denk aan HTTP/2 i.p.v. HTTP/1, de laatste PHP-versie en de laatste versies van thema’s en plugins.
3. Een snel thema. Gebruik je een CMS waar je een thema kunt installeren, dan is het belangrijk een thema te kiezen waar de developers met schone geoptimaliseerde code werken. Kies daarom voor een snel thema.
4. Cache installeren. Voor de meeste CMS-systemen zijn hier veel plugins voor. Denk bijvoorbeeld aan W3 Total Cache voor WordPress. Door caching worden bestanden tijdelijk lokaal opgeslagen en hoeven deze de volgende keer bij het laden van een pagina niet meer gedownload te worden.
5. GZIP-compressie en Minify. Door witregels uit CSS en JavaScript-bestanden te halen, wordt de code minified. Door GZIP-compressie in te schakelen worden alle typen bestanden gecomprimeerd tot een kleiner bestand, waardoor browsers een kleiner bestand hoeven te downloaden.

Door de basis goed te hebben staan, kunnen we andere optimalisaties door gaan voeren.

Tip 2: Minder plugins

Het installeren van plugins op je website is zeer eenvoudig en je kunt al snel losgaan in het aantal plugins wat je site heeft.

Bij elke plugin die jij installeert op je website komt er extra code op je website, komt er misschien code op de website die helemaal niet ingeladen hoeft te worden of die niet efficiënt ingeladen kan worden, waardoor jouw website alleen maar trager wordt. Super zonde als er plugins in staan die vrijwel niks doen, vervangen kunnen worden of helemaal niet geïnstalleerd hoeven te worden.

Ga eens door je lijst met plugins heen en kijk welke plugins eventueel niet meer nodig zijn of dat er misschien een plugin beschikbaar is die meerdere plugins combineert. Misschien is het zelfs wel niet eens nodig dat een plugin überhaupt nog draait. Een voorbeeld is de code van Google Analytics. Vaak wordt hier een extra plugin voor geïnstalleerd, wat helemaal niet nodig is. Wist je dat je gemakkelijk een ‘eigen plugin’ in WordPress kunt creëren waar je met een klein stukje code de Google Analytics code kunt toevoegen op je site?

Tip 3: Afbeeldingen optimaliseren

De tweede tip is voor afbeeldingen. Mijn collega Ewoud heeft eerder al eens een keer een video gemaakt over het comprimeren van je afbeeldingen, dit is een absolute must. Een hele handige is de WebsiteSpeedTest. Dit is onderdeel van WebPageTest.org waar je de afbeeldingen van een webpagina kunt analyseren.

In de test staat precies het aantal afbeeldingen die geanalyseerd zijn en hoe groot de afbeeldingen in totaal zijn. Vervolgens kun je per afbeelding zien hoe groot deze op dit moment is en in hoeverre die gecomprimeerd kan worden. Vervolgens kun je dan ook gelijk de afbeelding downloaden, ideaal als je het mij vraagt.

Ook belangrijk hierin is welke grootte de afbeelding opneemt. In dit geval is de originele afbeelding 190 x 261 pixels en wordt er op de webpagina een kleinere afbeelding ingeladen, namelijk 85 x 117. De afbeelding is dus eigenlijk te groot voor de ruimte waar het ingeladen wordt. Door gelijk een afbeelding aan te leveren in het gebruikte formaat, wordt de afbeelding kleiner en daarmee ook de bestandsgrootte. In dit geval kan het het 5kb schelen, maar als je grote afbeeldingen gebruikt kan het best zijn dat je 1 of meerdere mb’s kunt besparen.

Gebruik daarnaast een moderne bestandsindeling als bijvoorbeeld WebP. Door WebP te gebruiken, inmiddels ondersteund door bijna alle browsers, kunnen afbeeldingen verder gecomprimeerd worden zonder kwaliteitsverlies. Wel belangrijk om altijd nog een .png of .jpg als back-up te hebben voor als een browser WebP (nog) niet ondersteund.

Tip 4: Optimaliseer CSS bestanden

CSS is een essentieel onderdeel van een webpagina. Zie CSS als de huid van je lichaam, het zorgt voor de vormgeving van een pagina.

CSS wordt ingeladen aan de hand van een CSS-bestand. Deze bestanden worden vaak in de <head> van de pagina gezet. Zodra een browser een webpagina laadt, begint deze bovenaan met de code ophalen en zodra er een CSS-bestand in de code staat, stopt de browser met het ophalen van de HTML code, wordt eerst de CSS-code opgehaald en daarna pas weer verder gegaan met de rest van de code van de pagina. Dit noemen we ook wel ‘render-blocking’, het ophalen van het CSS (en ook JavaScript) zorgt ervoor dat de browser niet verder kan met het renderen van een pagina.

In het coverage rapport van de Chrome DevTools is per CSS-bestand te zien wat nodig is om de pagina in te laden. Ook is er een verschil tussen kritieke CSS en niet kritieke CSS. Kritieke CSS is CSS die nodig is voor de zichtbare elementen van een webpagina. Niet kritieke CSS is nodig voor elementen van een webpagina die niet direct zichtbaar zijn.

Het belangrijkste bij CSS is: wees specifiek. Het is aan te raden om per type pagina een basis CSS-bestand te maken en niet kritieke CSS later in te laden met behulp van een defer tag. Kritieke CSS kan ook inline geplaatst worden en hetzelfde geldt voor CSS wat nodig is voor één pagina. Het is niet nodig dit te verwerken in een CSS-bestand. Die code moet dan vervolgens op elke andere pagina ook ingeladen worden. Elke onnodige code wat in een CSS-bestand staat, dient eigenlijk verwijderd te worden.

Tip 5: Optimaliseer JavaScript bestanden

Wat voor CSS-bestanden geldt, geldt ook voor JavaScript-bestanden. Javascript is door de jaren heen een steeds belangrijker onderdeel geworden van een webpagina en ook dit wordt ingeladen aan de hand van een JavaScript-bestand.

JavaScript-bestanden kunnen groot zijn en daarom een probleem opleveren wanneer deze niet passend ingeladen worden. Ook hier is er weer kritieke JavaScript en niet kritieke JavaScript. Het belangrijkste wat je moet weten voordat je gaat optimaliseren, is wat elk JavaScript-bestand op jouw website doet.

JavaScript-bestanden kunnen worden voorzien van een async en defer tag. Async zorgt ervoor dat deze bestanden asynchroon geladen worden, de browser kan meerdere JavaScript-bestanden tegelijk downloaden en verwerkt deze 1-voor-1. Defer zorgt ervoor dat het JavaScript-bestand wordt gedownload, maar helemaal aan het einde pas verwerkt wordt, wanneer de rest van de pagina al ingeladen is.

Wanneer je dus weet wat je JavaScript-bestand doet, kun je dit gaan optimaliseren en elk bestand voorzien van een async of defer tag.

Extra Tip!

In WebPageTest kun je onder de waterval zien met welke externe domeinen een connectie wordt gemaakt, bijvoorbeeld voor externe scripts.

Voordat een bestand van een extern domein gedownload kan worden, moet de browser eerst weten waar de server van dit externe domein staat en moet er een connectie gemaakt worden met de server. Dit doet de browser pas zodra het externe domein in de code staat.

Door een <preconnect> toe te voegen in de <head> van de pagina met belangrijke externe domeinen zoekt de browser alvast op waar de server staat en wordt er een connectie gemaakt, zodat dit niet meer gedaan hoeft te worden wanneer een extern bestand ingeladen moet worden.

Het is dus goed om belangrijke externe domeinen te voorzien van een preconnect, maar let wel op: alles preconnecten is niets preconnecten. Domeinen die vaak worden gebruikt zijn fonts.gstatic.com en google-analytics.com / googletagmanger.com:

<link rel=”preconnect” href=”https://www.google-analytics.com” />

<link rel=”preconnect” href=”https://www.googletagmanager.com” />

<link rel=”preconnect” href=”https://fonts.gstatic.com” />

Hopelijk kun je nu aan de slag met het sneller maken van je website. Mocht je na dit blog nog hulp nodig hebben met het optimaliseren van de snelheid van jouw website, aarzel dan niet om contact met ons op te nemen. Wij helpen je graag!