zoeken
+31(0) 40 304 0070bel ons
Contactmail ons
menu

Een snelle website in 5 stappen

Terug naar alle blogberichten
Daag ons uit!
  1. Home
  2. Blog
  3. Een snelle website in 5 stappen

De snelheid van een pagina of website is een officiële SEO rankingfactor en ontzettend belangrijk om mee te nemen in de bouw of dagelijkse optimalisaties van een website. Bij de snelheid van een website wordt gekeken naar verschillende elementen. Uit de optelsom van deze elementen wordt een score teruggegeven die we de pagespeed score noemen. Deze score is niet alleen op snelheid gebaseerd, maar ook op UX (gebruiksvriendelijkheid). Met de volgende 5 stappen kan jij jouw website sneller maken en de UX verbeteren.

1.      Verbeter de laadtijd van de LCP (Largest Contentful Paint)

De LCP is het contentelement boven de vouw dat volgens de pixelbreedte het grootste is. Enkel de elementen boven de vouw worden hierin meegenomen, dus ook delen van afbeeldingen die zowel boven als onder de vouw te vinden zijn. Het deel boven de vouw wordt dan meegenomen. Door de verschillende apparaten kan de LCP per apparaat afwijken.

De belangrijkste optimalisaties om de LCP te verbeteren zijn:

  • Gebruik een script voor spiders/bots om de cookiewall te verbergen
  • Gebruik een blurred image als placeholder boven de bouw

2.      Maak je pagina interactiever met een verbeterde FID

First Input Delay (FID) gaat over de eerste mogelijkheid om elementen interactief te gebruiken. Zijn deze elementen, meestal JavaScript, klaar voor gebruikers en herkent de bot dit ook? Lighthouse meet dit door een klik te simuleren.

3.      Optimaliseer de manier waarop CSS geladen wordt met CLS-verbeteringen

Naast HTML en JavaScript-elementen worden websites ook gebouwd met CSS-elementen. Deze zijn essentieel voor de opmaak van de website, maar kunnen pas op een later moment ingeladen worden om de snelheid van de pagina te verbeteren (lazy loading). Het kan echter zo zijn dat de visuele elementen op de pagina dus nog gaan verschuiven als de gebruiker de pagina al voor zich heeft. Om dit te voorkomen kan er gebruikgemaakt worden van een parent <div> met een relatieve of absolute positie. Met afgebakende pixels van deze elementen met absolute afmetingen kan deze verschuiving voorkomen worden en zal de gebruiker geen gekke visuele verschuivingen te zien krijgen.

4.      Laat standaard content direct zien voor een verbeterde FMP

First Meaningful Paint (FMP) zijn contentelementen die direct getoond kunnen worden en zelden veranderen. Denk hierbij aan logo’s, headers, USP’s of de H1-titel van een pagina. Deze elementen zijn ontzettend belangrijk voor de UX. Toon liever direct deze elementen in plaats van een blanco pagina voordat andere CSS-elementen geladen worden.

5.      Verbeter de reactietijden van je server (TTFB)

De Time To First Byte meet de reactietijd vanaf het eerste HTTP-verzoek tot aan de eerste byte die ontvangen wordt door de server. Deze optimalisaties hebben geen directe invloed op de UX, maar zijn puur gericht op de snelheid van de website. Bij WordPress-websites kunnen plugins ervoor zorgen dat de TTFB steeds langer wordt. Beperk het gebruik van het aantal plugins voor een verbeterde TTFB.

Extra tips

  • Maak gebruik van server-side caching
  • Verwijder ongebruikte CSS- en JavaScript-bronnen
  • Test je website of pagina met meerdere tools voor een zekerder beeld

Tools die je kunt gebruiken

  • Google Pagespeed Insights (Lighthouse)
  • GTmetrix
  • Pingdom Tools

Hulp nodig bij het verlagen van je websitesnelheid?

Verzenden

Blog

Relevant blog posts

4 SEO-tips voor de optimalisatie van je video’s

11 juni 2019

Daag jij ons uit voor je volgende project?

Daag ons nu uit!

Op de hoogte blijven van het laatste online nieuws?

Schrijf je in voor de nieuwsbrief

Druk op ENTER om te zoeken of ESC om de zoek overlay te sluiten.