Optimalisatie van website-snelheid voor SEO: de splitsing tussen marketing en ontwikkeling

Wanneer we het hebben over het optimaliseren van de snelheid van een website, merken we vaak dat veel bedrijven met deze vraag worstelen. Wat zijn de verantwoordelijkheden van development en marketing? Dat is de reden waarom we dit artikel hebben geschreven.

Het belang van website snelheid (voor SEO)

De snelheid van een website is essentieel, zowel voor bezoekers als voor SEO. Voor de bezoekers is een snelle website cruciaal voor conversie. Voor SEO beïnvloedt het de zichtbaarheid in Google en zorgt het ervoor dat zoekmachines de pagina’s efficiënt kunnen crawlen. Een trage website betekent meer werk voor Google en dat willen we vermijden.

Een plan voor website snelheid

Een grondige analyse van de website snelheid is noodzakelijk om inzicht te krijgen in wat er “onder de motorkap” gebeurt. Hier zijn enkele aandachtspunten:

1. De homepagina is niet de enige die snelheid behoeft. Kijk in Google Analytics welke pagina’s prioriteit hebben (het is verstandig om de meest bezochte pagina’s te versnellen).
2. Analyseer de problemen van deze pagina’s (we raden aan om de API van Lighthouse hiervoor te gebruiken).
3. Zorg voor een continue optimalisatie. Het hoog houden van de website snelheid vereist aanpassingen in interne processen (zoals het uploaden van afbeeldingen).

Checklist voor marketing: website snelheid

Laten we een checklist delen die marketingafdelingen helpt om niet alleen afbeeldingen te optimaliseren, maar ook in de toekomst bij te blijven.

Afbeeldingen

Afbeeldingen vormen een aanzienlijk deel van deze checklist, aangezien dit meestal valt onder marketing en een cruciaal component is voor de totale website snelheid (meer informatie).

1. Wordt de afbeelding in het juiste formaat gepresenteerd (tip: gebruik zoveel mogelijk .webp)?
   • JPEG voor foto’s.
   • PNG voor transparante afbeeldingen.
   • SVG voor vectoren.
2. Is elke afbeelding kleiner dan 150 KB (tenzij het een banner betreft)?
3. Is de afbeelding op de juiste manier gecorrigeerd qua grootte (de juiste width & height)?
4. Heeft de afbeelding een lazyload-attribuut als deze niet “boven de vouw” wordt weergegeven? (meer informatie).
5. Is de afbeelding gecomprimeerd en heeft deze de juiste kwaliteit/gewicht verhouding?
6. Gebruik verschillende varianten van afbeeldingen voor mobiel, desktop en tablet. Wanneer we één afbeelding voor alle schermen gebruiken, is deze vaak te groot voor mobiel en worden onnodige KB’s geladen.

Video

Video is ook een belangrijk aspect van website snelheid, meestal onder de verantwoordelijkheid van marketing.

1. Gebruik ingesloten YouTube-video’s om directe hosting op de website te vermijden.
2. Implementeer lazy loading voor video’s zodat ze alleen laden wanneer ze in het zicht van de gebruiker komen.
   • Zorg ervoor dat video’s responsief zijn en zich aanpassen aan verschillende schermgroottes en apparaten.
3. Optimaliseer alle thumbnails en video-afbeeldingen om de bestandsgrootte te minimaliseren.
4. Stel browser caching in en overweeg een Content Delivery Network (CDN) voor snellere videolevering.
5. Laad JavaScript en CSS asynchroon om render-blocking te vermijden (in overleg met development).
6. Monitor de laadtijden van pagina’s en evalueer de impact van video’s met behulp van analysetools.

Checklist voor development: website snelheid

Nu richten we ons op de technische elementen van website snelheid. Vaak legt development eerst de basis voor de snelheid, waarna marketing aan de slag gaat. Dit moeten we bij de resourceallocatie in gedachten houden.

De server

We onderscheiden wat we op de server kunnen regelen en wat daarbinnen kan gebeuren.

1. Server response time (TTFB): Optimaliseer de tijd die de server nodig heeft om op een verzoek van de browser te reageren. [We gebruiken deze tool om dit te controleren](https://www.bytecheck.com/).
2. Type hostin: Kies een hostingtype dat passend is voor het verkeersvolume van de website (shared, VPS, dedicated of cloud).
3. Geografische locatie van de server: Kies een serverlocatie dichtbij de doelgroep om latentie te verminderen.
   • Gebruik van een CDN: Implementeer een CDN om statische bestanden snel te leveren vanaf een nabijgelegen server (ook voor Nederlandse websites adviseren we een CDN).
4. Caching: Configureer server-side caching om laadtijden voor terugkerende bezoekers te verminderen.
5. Database optimalisatie: Zorg voor een efficiënte database door regelmatige opschoningen en optimalisatie van de queries.
6. Load Balancing: Voer load balancing uit om verkeer over meerdere servers te verdelen en zo downtime of vertraging te voorkomen.
7. Compressie: Zet compressie aan (bijv. Gzip) om de grootte van overgedragen data te verminderen.
8. HTTP/2: HTTP/2 biedt efficiëntere afhandeling van meerdere gelijktijdige verzoeken (dit maakt het mogelijk om meerdere JS-bestanden gelijktijdig te laden).
9. SSL/TLS optimalisatie: Optimaliseer SSL/TLS voor beveiligde en snelle verbindingen.
10. Resource minimalisering: Minimaliseer en combineer CSS en JavaScript bestanden server-side om het aantal HTTP-verzoeken te reduceren (dit is minder van toepassing bij HTTP/2).

Zaken binnen de website

1. Bestandscompressie: Verminder de grootte van CSS, JavaScript en HTML bestanden door overbodige spaties en regelafbrekingen te verwijderen.
2. Afbeeldingsoptimalisatie: Implementeer automatische afbeeldingsoptimalisatie om bestandsgrootte te verminderen zonder kwaliteitsverlies (vaak sitewide door development geregeld).
3. Asynchroon inladen: Implementeer asynchrone of uitgestelde laadtechnieken voor CSS en JavaScript om render-blocking te minimaliseren.
4. Browser caching: Stel browser caching in voor statische bestanden om laadtijden voor terugkerende bezoekers te verminderen.
5. Lazy loading: Implementeer lazy loading voor afbeeldingen en video’s om de initiële laadtijd van de pagina te verminderen (dit kan het beste sitewide worden geïmplementeerd).
6. Gebruik van CSS Sprites: Combineer meerdere kleine afbeeldingen of iconen in één sprite om het aantal HTTP-verzoeken te verminderen. Controleer echter of dit een positief effect heeft bij HTTP/2.
7. Content optimalisatie: Zorg ervoor dat content, vooral boven de vouw, geoptimaliseerd is voor snel laden en directe gebruikersinteractie.
8. Beperk HTTP-verzoeken: Verminder het aantal HTTP-verzoeken door bestanden te combineren en externe scripts en fonts te minimaliseren.
9. Minimaliseer redirects: Vermijd zoveel mogelijk redirectgebruik om de laadtijden van de pagina te verlagen (meer informatie).
10. Implementeer security headers: Voeg HTTP security headers toe om de website te beschermen tegen aanvallen en kwetsbaarheden.

Conclusie

Gebruik deze checklists niet alleen om een solide basis voor de snelheid van de website neer te zetten, maar ook om deze in de toekomst schaalbaar te houden. Veel succes!

Het meest uitgebreide boekwerk over website snelheid

We hebben veel geschreven over het versnellen van websites en alles wat daarbij komt kijken. Dit hebben we opgedeeld in verschillende secties: algemeen, tools, verbeterpunten voor snelheid en tips. Bekijk gerust de onderstaande links voor meer informatie en tips over het versnellen van uw website.

Algemeen

• Wat is 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

• Autoptimize.
• Pagespeed Compare.
• W3 Total Cache.
• Tools Pingdom.
• Google Pagespeed Insights.
• GTMetrix.

Verbeterpunten voor 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.
• Verwijder ongebruikte CSS.
• 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-bundels.
• Vermijd meerdere pagina-omleidingen.
• Codeer afbeeldingen op een efficiënte manier.
• Gebruik lazy loading.
• Laad belangrijke verzoeken vooraf.

Algemene tips

• Tips om snel een video in te laden.
• Het gebruiken van Edge SEO voor een snellere website.
• Een Content Delivery Network installeren voor SEO.
• Afbeeldingen optimaliseren voor SEO.
• De invloed van hosting op SEO.

Bronnen

1. https://developers.google.com/search/docs/appearance/page-experience
2. https://developers.google.com/search/docs/appearance/google-images
3. https://developers.google.com/search/docs/crawling-indexing/javascript/lazy-loading
4. https://developers.google.com/search/docs/crawling-indexing/301-redirects