Website snelheid voor SEO optimaliseren: de onderverdeling tussen marketing en development

De website snelheid optimaliseren (voor de bezoeker en SEO)? Ik merk dat veel van mijn opdrachtgevers met dit vraagstuk zitten. Maar, wat moet development doen en wat kan marketing doen? Om deze reden heb ik dit artikel geschreven.
Het belang van website snelheid (voor SEO)
De snelheid van een website is van cruciaal belang voor zowel de bezoeker als SEO. Voor de bezoeker omwille van de conversie. Voor SEO omwille van de positie in Google en het efficiënt kunnen crawlen van een website door Google (een trage website betekent ook meer werk voor Google om de pagina’s te downloaden).

Een website snelheid plan opstellen
Een grondige analyse van de website snelheid is belangrijk om een idee te krijgen van wat er zich “onder de motorkap” afspeelt. Belangrijk om hierbij rekening te houden:
- De homepagina is niet de enige pagina die moet worden versneld. Bepaal vanuit Google Analytics welke pagina’s moeten worden versneld (ik prioriteer pagina’s die vaker worden bezocht).
- Analyseer de issues van al deze pagina’s (ik gebruik altijd de API van Lighthouse hiervoor).
- Zorg niet voor een eenmalige optimalisatie. De website snelheid hoog houden betekent bepaalde interne processen veranderen (zoals het uploaden van afbeeldingen op de website).
Mijn website snelheid checklist voor marketing
Ik deel graag mijn checklist voor de marketingafdeling om niet alleen nu de afbeeldingen te optimaliseren, maar deze ook in de toekomst te blijven optimaliseren.
Afbeeldingen
De afbeeldingen zijn een groot deel van deze checklist, gezien dit vaak bij marketing ligt en een groot component vormt van heel het website snelheid verhaal (2).
- Wordt de afbeelding geserveerd in de juiste indeling (tip: als je niet te moeilijk wilt doen, gebruik dan gewoon altijd .webp):
- JPEG voor foto’s.
- PNG voor transparante afbeeldingen.
- SVG voor vector.
- Is de afbeelding kleiner dan 150 KB (tenzij het een banner is) (150 KB is al best groot)?
- Is de afbeelding zo groot als hij eigenlijk op de website zou moeten zijn (de juiste width & height)?
- Bevat de afbeelding een lazyload-attribuut wanneer deze
niet “boven de vouw” wordt weergegeven? (3) - Is de afbeelding gecomprimeerd? En bevat deze nu deze juiste kwaliteit / lichtgewicht ratio?
- Gebruik meerdere varianten van de afbeeldingen voor mobiel, desktop en tablet. Wanneer je één afbeelding gebruikt, dan is deze vaak te groot voor mobiel en worden er daarmee onnodige KB’s ingeladen.

Video
Een ander groot component binnen een geoptimaliseerde website snelheid is video. Dit ligt ook meestal op het bordje van marketing.
- Gebruik ingesloten YouTube-video’s om directe hosting op de website te vermijden.
- Implementeer lazy loading voor video’s zodat ze alleen laden wanneer ze in het zichtveld van de gebruiker komen.
- Zorg ervoor dat video’s responsive zijn en zich aanpassen aan verschillende schermgroottes en apparaten.
- Optimaliseer alle afbeeldingen en thumbnails om de bestandsgrootte te minimaliseren.
- Stel browser caching in en overweeg een Content Delivery Network (CDN) voor snellere videolevering.
- Laad JavaScript en CSS-bestanden asynchroon om render-blocking te vermijden (in overleg met development).
- Monitor pagina-laadtijden en analyseer de impact van video’s met analytics tools.
Mijn website snelheid checklist voor development
En nu dan development. Dit zijn de technische zaken voor de website snelheid. Wat er vaak gebeurt is dat development eerst een goede basis legt voor de website snelheid en dat marketing er hierna mee aan de slag gaat. Bij de allocatie van deze resources kun je hiermee rekening houden.
De server
Ik maak hierin onderscheid tussen wat er op de server kan worden geregeld en wat er binnen de website zelf kan worden geregeld.
- Server response time (TTFB): optimaliseer de tijd die de server nodig heeft om te reageren op een verzoek van de browser. Ik gebruik deze tool om dit te checken.
- Hosting type: kies een hostingtype (shared, VPS, dedicated, of cloud) dat past bij het verkeersvolume van de website.
- Geografische locatie van de server: kies een serverlocatie die dicht bij je doelgroep ligt om de latentie te verminderen.
- Gebruik van een Content Delivery Network (CDN): implementeer een CDN om statische bestanden snel te leveren vanaf een server dicht bij de gebruiker (ik zou ook met Nederlandse websites een CDN adviseren).
- Caching: configureer server-side caching om de laadtijden te verminderen voor terugkerende bezoekers.
- Database optimalisatie: zorg voor een efficiënte database door regelmatige opschoning en optimalisatie van de queries.
- Load Balancing: implementeer load balancing om verkeer efficiënt te verdelen over meerdere servers en zo downtime en vertragingen te voorkomen.
- Compressie: zet compressie aan (bijv. Gzip) om de grootte van overgedragen data te verminderen.
- HTTP/2: HTTP/2 zorgt voor een efficiëntere afhandeling van meerdere gelijktijdige verzoeken (zo kun je default verschillende JS bestanden tegelijkertijd inladen).
- SSL/TLS optimalisatie: optimaliseer SSL/TLS voor beveiligde, maar toch snelle verbindingen.
- Resource minimizing: minimaliseer en combineer CSS en JavaScript bestanden server-side om het aantal HTTP-verzoeken te verminderen (dit helpt niet als je HTTP/2 hebt).
En de zaken binnen de website?
- Comprimering van bestanden: verminder de grootte van CSS, JavaScript en HTML bestanden door bijvoorbeeld overbodige spaties en regelafbrekingen te verwijderen.
- Afbeeldingsoptimalisatie: implementeer automatische afbeeldingsoptimalisatie om de bestandsgrootte zonder kwaliteitsverlies te verminderen (dit kan ook schelen in het werk voor marketing). Meestal wordt dit sitewide geregeld door development.
- Asynchroon inladen van bestanden: implementeer asynchrone of uitgestelde laadtechnieken voor CSS en JavaScript om render-blocking te voorkomen.
- Browser caching: stel browser caching in voor statische bestanden om laadtijden voor terugkerende bezoekers te verminderen.
- Lazy loading: implementeer lazy loading voor afbeeldingen en video’s om de initiële laadtijd van de pagina te verminderen. Dit kun je het beste eenmalige sitewide oppakken (en vanuit daar wordt het bij nieuwe afbeeldingen automatisch toegevoegd).
- Gebruik van CSS Sprites: combineer meerdere kleine afbeeldingen of iconen in één sprite om het aantal HTTP-verzoeken te verminderen. Check wel even of dit met HTTP/2 daadwerkelijk een positieve invloed heeft.
- Content optimalisatie: zorg dat content, vooral boven de vouw, geoptimaliseerd is voor snel laden en directe gebruikersinteractie (dit heeft voornamelijk impact op de LCP).
- Verminder HTTP-verzoeken: beperk het aantal HTTP-verzoeken door het combineren van bestanden en het verminderen van externe scripts en fonts.
- Vermijd redirects: minimaliseer het gebruik van redirects om de laadtijd van de pagina te verminderen (4).
- Implementeer security headers: Voeg HTTP security headers toe om de website te beschermen tegen diverse aanvallen en kwetsbaarheden.

Conclusie
Gebruik deze checklists om niet eenmalig een goede basis neer te zetten voor de snelheid van de website, maar deze ook toekomstbestendig te maken. Succes!
Het meest complete boekwerk over de website snelheid
Ik heb zoveel geschreven over het versnellen van websites en alles wat hierbij komt kijken, dat ik het graag onderverdeel in verschillende secties; algemeen, tools, verbeterpunten voor de snelheid en tips. Zie en raadpleeg gerust alle onderstaande links voor meer informatie over tools en tips voor het versnellen van jouw website.
Algemeen
- Wat is de website snelheid
- De invloed van SEO op UX
- De invloed van webdesign op SEO
- SPA’s en SEO
- Wat zijn de Google Core Web Vitals?
Tools
Verbterpunten voor de snelheid
- First Contentful Paint (FCP)
- Time To First Byte (TTFB)
- Time To Interactive (TTI)
- Afbeelding voor Grootste weergave met content (LCP) vooraf laden
- Schakel tekstcompressie in
- Verklein de CSS
- Total Blocking Time (TBT)
- Speed Index
- Verklein JavaScript
- Largest Contentful Paint
- Vermijd een te grote DOM
- Ongebruikte CSS verwijderen
- Verwijder ongebruikte JavaScript
- Lever afbeeldingen in moderne indelingen
- Maak vooraf verbinding met vereiste herkomsten
- Voorkomen dat verouderde JavaScript wordt geleverd aan moderne browsers
- Gebruik een efficiënt cache-beleid voor statische items
- Dubbele modules verwijderen uit JavaScript
- Vermijd meerdere redirects
- Codeer afbeeldingen op een efficiënte manier
- Gebruik lazy loading
- Laad belangrijke verzoeken vooraf