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. Lees je liever? Onder de video is een transcriptie van de video te vinden.

Website snelheid testen én verbeteren met 5 tips! – Een Pure Handleiding

Timestamps:
00:42 Website traag?
01:40 Website snelheid testen
02:02 Google Pagespeed Insights
04:04 WebPageTest.org
07:38 Website snelheid verbeteren
07:45 Tip 1: Minder plugins
08:37 Tip 2: Afbeeldingen optimaliseren
10:16 Tip 3: Browser caching
10:44 Tip 4: GZIP compressie
11:00 Tip 5: Async & Defer tag

Transcriptie video

De snelheid van je website is belangrijk voor de gebruikservaring van gebruikers op je website en wordt ook steeds belangrijker voor zoekmachines als Google. In deze video vertel ik je waarom websites traag worden, hoe je je website kunt analyseren en vooral belangrijk hoe je je snelheid kunt beteren en je website sneller kunt maken.

Hoi! Mijn naam is Thijs van Hal en welkom bij deze gloednieuwe video op dit kanaal. Vandaag ga ik je meer vertellen over de snelheid van jouw website. Waarom wordt een website traag, hoe kun je je website analyseren en hoe kunnen we hem sneller gaan maken?

Voordat we beginnen, vergeet zeker niet even op het blauw duimpje omhoog te drukken en hier beneden te abonneren op ons kanaal.

Website traag?

Goed je hebt een website maar hij voelt een beetje traag aan, hoe kan het nou dat een website traag wordt? Er zijn verschillende typen content op je website. Zo is er html, afbeeldingen, css en javascript. Al deze verschillende content types zorg ervoor dat de code op jouw pagina’s steeds maar meer wordt en hoe meer afbeeldingen, hoe meer css, hoe meer javascript en meer html des te zwaarder je website wordt. Des te zwaarder jouw website wordt des te langer het duurt voor browsers om jouw website te lezen, te analyseren, de code te downloaden en uiteindelijk de renderen tot hoe jouw website is.

Je kan het een beetje vergelijken met bijvoorbeeld als je een automatische deur hebt voor een winkelpand die heel erg zwaar is. Het kost daardoor heel veel kracht om dat ding automatisch te laten draaien of om open te laten gaan waardoor winkeliers die jouw winkel in willen komen heel lang moeten wachten in zo’n draaideur voordat ze daadwerkelijk binnen zijn. Dat is gewoon niet fijn voor de winkelier en hetzelfde gebeurt met jouw website.

Website snelheid testen

Er zijn veel verschillende tools om de snelheid van jouw website te analyseren, vandaag wil ik er 2 behandelen: De Pagespeed Insights van Google en WebPageTest. Er zijn naast deze twee dus nog vele andere tools maar deze twee geven je in de basis een goed idee over hoe snel jouw website is en vanuit daar kun je voldoende conclusies trekken welk optimalisaties jij moet doorvoeren om jouw website te verbeteren.

Tool 1: Google Pagespeed Insights

We beginnen even met Pagespeed Insights, dit is een tool van Google waarin je gemakkelijk je website in kunt doen bovenin hier en op analyseren kan drukken. Google hangt een score aan jouw website voor desktop en mobiel. Tot 50 is slecht, tussen de 50 en 90 is voldoende en 90 en 100 nou dan ben je goed bezig.

Houd er rekening mee dat dit soort testen lab gegevens zijn. Dat wil zeggen dat deze test gedaan wordt met een bepaalde internet snelheid die de tool gebruikt. Het kan dus zo zijn dat wanneer gebruikers bijvoorbeeld een langzamer internetverbinding hebben zij niet deze snelheid kunnen ervaren van jouw website en dus een nog tragere website hebben dan geeft deze score en deze snelheid eigenlijk een vertekend beeld. Nu komt dat in Nederland eigenlijk niet voor aangezien bijna iedereen wel redelijk snel internet heeft en als het mobiele data is 4g heeft, maar in het buitenland kan het nog wel eens voor problemen zorgen.

Naast de score die Google al geeft, bijvoorbeeld in ons geval 90 krijg je meteen hieronder ook al verschillende andere scores te zien. Dit zijn de Core Web Vitals en belangrijk hier is de Largest Contentful Paint, de lcp. Die geeft eigenlijk aan hoe lang het duurt voordat het grootste element op een pagina geladen is.

Je ziet hier ook al de lab gegevens, je kan hier precies zien hoeveel seconden het duurt voordat bepaalde dingen ingeladen zijn. Scroll je naar onder zie je precies hoe de pagina ingeladen wordt en staan er ook al verschillende aanbevelingen. Deze zijn eigenlijk ideaal want Google geeft hier meteen aan van ‘hey hier kun jij aan werken om jouw score nog beter te maken’.

Vervolgens zijn er nog de diagnostische gegevens, deze geven meer informatie over de prestaties maar zoals hier al staat deze cijfers hebben geen directe invloed op de prestatiescore en dus ook de snelheid van je website. Onderin zijn nog de geslaagde controles, dus deze zijn allemaal goed en helemaal onderaan kun je nog weer zien dat deze lab gegevens geanalyseerd en door Lighthouse en wanneer dit is gedaan, via welke browser en in dit geval Chrome.

Tool 2: WebPageTest.org

Dan gaan we naar de tweede tool om je website te analyseren, dat is met WebPageTest.org. Als je hierop komt dan kun je je website invullen, de testlocatie en zet deze op Amsterdam en de browser nou deze staat standaard op Chrome. Klik je vervolgens op geavanceerde settings dan kun je nog de connection aangeven, deze zat standaard op cable 5/ 1 mb maar in Nederland kun je hem best wel op 4g zetten omdat dat eigenlijk wel de standaard snelheid is die eigenlijk iedereen wel heeft.

Je kan nog de desktop browser dimensions kun je nog aanpassen ik heb deze gewoon op default gelaten, je kan het aantal testen nog aangegeven deze staat standaard op 3 maar ik heb hem op 5 gezet. Als laatst kan je nog kiezen of je alleen de eerste keer geladen moet worden of ook wanneer er een keer een herhaling plaatsvindt. Druk je vervolgens op start test gaat hij hem testen en dan krijg je het resultaat.

Zie je vervolgens de resultaten dan zie je nog het aantal testen die er zijn gerund en de resultaten. Dit is de mediaan resultaten van alle vijf de testen die er zijn gedaan voor de eerste keer laden en voor de herhalende laden en je kunt precies zien hoeveel seconden het heeft geduurd voordat de first byte er was, voordat de render is gestart, ook de lcp dus van de core web vitals is hier te vinden en hoe lang het heeft geduurd tot het document compleet was en helemaal volledig geladen is.

Vervolgens zie je ook het aantal requests wat gedaan wordt en hoe groot een webpagina is geworden dus 1,8 mb is onze homepagina en die moeten dus allemaal ingeladen worden, gedownload worden en uiteindelijk gerenderd worden. Is dit getal heel erg groot dan kan bijvoorbeeld zijn dat er bepaalde afbeeldingen staan die heel veel mb’s zijn waardoor het heel lang duurt voordat een webpagina geladen wordt.

Ook het mooie aan WebPageTest is dat zodra je naar 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 hij de html inladen en daarna wat css en javascript files en vervolgens komen hier eigenlijk allemaal vanaf hier allemaal afbeeldingen die ingeladen worden en bijvoorbeeld helemaal onderaan wordt bijvoorbeeld Google Analytics, Facebook, worden er allemaal scripts nog ingeladen die het meetbaar maken van de website natuurlijk mogelijk maakt.

Als je door scrolt naar onder zie je nog precies wanneer de connectie wordt gemaakt met verschillende externe servers. Scroll je nog weer verder naar onder zie je per onderdeel van de website wat voor content type het is, wanneer die een request heeft gedaan om te gaan renderen en hoeveel bytes uiteindelijk er gedownload is, kun je precies per onderdeel zien.

Ook WebPageTest geeft je verschillende scores, nu niet van 0 tot 100 maar van F tot en met A. Deze zie je helemaal bovenin de pagina. Ga je vervolgens naar het tabje performance kun je precies zien welke testen er zijn gedaan en als je helemaal naar onderen scrollt dan krijg je de details te zien en dan staat er precies per test wat er wel gelukt is en wat er niet gelukt is. In dit geval kan bijvoorbeeld de first byte wat naar beneden, zijn en wat plaatjes die niet helemaal goed gecomprimeerd zijn en zo zijn er nog precies allemaal andere testen die gedaan worden en kun je precies zien welke gefaald zijn en welke goed gegaan zijn.

Aan de hand van Google Pagespeed Insights krijg je vaak al genoeg aanbevelingen om aan de slag te gaan, wil je dus een diepere analyse dan kun je met WebPageTest nog eens in de waterval gaan kijken wat er precies voor zorgt dat jouw website langzaam maakt en traag.

Website snelheid verbeteren

Hoe kun je uiteindelijk je website optimaliseren en de sneller maken? Ik wil je een paar tips gegeven hoe je je website sneller kunt gaan maken.

Tip 1: Minder plugins

De eerste tip is eigenlijk voor degenen die een WordPress of andere cms systemen gebruiken waar je makkelijk plug-ins kunt installeren voor je website. Bijvoorbeeld voor WordPress, een van de meest gebruikte cms systemen, kun je ontelbaar veel plugins aan je website toevoegen die allemaal iets anders doen.

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 moeten worden of die niet efficiënt ingeladen kan worden waardoor jouw website alleen maar trager wordt. Ga eens door je lijst met plug-ins en kijk welke plug-ins eventueel niet meer nodig zijn of is er misschien een plugin die meerdere plugins bij elkaar kan pakken of is het überhaupt wel nodig om deze plugin nog te draaien en zorg vooral dat er zo weinig mogelijk plugins op je website staan zodat jouw website zo snel mogelijk kan worden.

Tip 2: Afbeeldingen optimaliseren

De tweede tip is voor afbeeldingen. Mijn collega Ewoud heeft hier al een keer eerder een video gemaakt over het comprimeren van je afbeeldingen en deze kun je hier rechts bovenin vinden. Ook is er een test, WebsiteSpeedTest, dit is onderdeel van WebPageTest.org waarin je je afbeeldingen kunt analyseren van je website.

In dit geval heb ik hem er even doorheen gehaald, hierin zat precies het aantal afbeeldingen die geanalyseerd zijn en hoe groot in totaal de afbeeldingen zijn. Ik liet net al in WebPageTest zien dat onze homepagina 1,8 mb is, daarvan is 1mb dus al aan afbeeldingen dus dat is een heel groot gedeelte dus afbeeldingen zijn hierin echt belangrijk. Vervolgens kun je per afbeelding zien hoeveel kb op dit moment heeft en in hoeverre die gecomprimeerd kan worden en je kan hem dan ook gelijk met de rechtermuisknop kun je de afbeelding downloaden of hier rechts bovenin.

Ook belangrijk hierin is welke grootte die opneemt, in dit geval is de originele afbeelding 2016 x 623 pixels en wordt er daadwerkelijk op de webpagina deze ook gebruikt. Het kan ook zijn dat een afbeelding te groot is voor een webpagina, dat zie bijvoorbeeld hier bij deze afbeelding. De originele afbeelding is 400 x 400 pixels en eigenlijk wordt er maar 300 bij 300 gebruikt wat ook weer een optimalisatie is want hoe kleiner de afbeelding des te kleiner het bestand.

Het belangrijkste is dus hier kijken welke afbeeldingen te groot zijn en comprimeer je bestanden tot een kleinere afbeeldingen en upload die vervolgens weer naar je website.

Tip 3: Browser caching

Daarnaast kun je ook heel gemakkelijk browser caching en gzip compressie inschakelen. De browser caching zorgt ervoor dat bepaalde bestanden van jouw website al opgeslagen worden in de browser van de gebruiker.

Dit zorgt ervoor dat wanneer een gebruiker weer opnieuw op je website komt die niet alle bestanden weer opnieuw ingeladen moeten worden maar ze een soort van al klaar staan van ‘hey deze hebben we de vorige keer nog gedownload dus deze hoeven we niet opnieuw te downloaden’ wat dan weer heel erg veel scheelt in de laadtijd van de bezoeker. Daarnaast heb je gzip compressie, we hadden het net bijvoorbeeld over het comprimeren van afbeeldingsbestanden.

Tip 4: GZIP compressie

Gzip zorgt ervoor dat alle andere content type, bijvoorbeeld css en html gecomprimeerd worden tot een kleiner bestand waardoor je uiteindelijk ook een snellere website krijgt.

Tip 5: Async & Defer tag

De laatste tip is voor Javascript en css inladen. Het kan bijvoorbeeld zijn, en in dit geval bij ons ook, dat je in Google Pagespeed krijgt ‘verwijder bronnen die de weergave blokkeren’. Deze aanbeveling komt best vaak voor en dat komt omdat browsers verschillende bestanden synchroon inladen.

Dus je hebt html, bijvoorbeeld verschillende css-bestanden en javascript bestanden. Wat er gebeurt is dat die bovenaan het rijtje begint, heeft die html gedownload en zodra die het eerste css file tegenkomt dan stopt die met verder renderen, dan gaat die eerst dat bestand downloaden en gaat hij vervolgens door. Staan er in die css of javascript codes of bepaalde elementen die niet gebruikt worden dan worden die dus eigen gedownload voor niets en zorgen die ervoor dat de pagina niet verder gerenderd kan worden.

Hiervoor 2 opties, je kan de async of de defer tag gebruiken om er voor te zorgen dat bijvoorbeeld met de async de bestanden asynchroon geladen worden, dat wil zeggen dat browsers meerdere css of javascript bestanden tegelijk kunnen downloaden en dus het renderen niet vertraagd wordt en de defer tag zorgt ervoor dat de javascript of css bestanden pas aan het einde ingeladen worden. Dit kun je handmatig per bestand bepalen maar er zijn bijvoorbeeld voor bekende cms systemen als bijvoorbeeld WordPress ook gewoon plugins die dit voor je kunnen doen.

We weten inmiddels waarom het belangrijk is om je website te analyseren en om te verbeteren qua snelheid. Ook weten we hoe we hem kunnen analyseren aan de hand van twee tools, Google Pagespeed en WebPageTest.org. Hier komen vaak aanbevelingen uit en ik heb je 5 tips gegeven hoe je je website kunt optimaliseren aan de hand van bepaalde tips.

Ik wil je bedanken voor het kijken naar deze video, heb je nog vragen hierover laat het vooral weten in de comments, like deze video en abonneer op ons kanaal en dan zie ik je weer bij de volgende video, tot ziens!