Betere Prestaties voor Betere Rankings: 10 Tips voor het Verbeteren van Core Web Vitals

Je bouwt een prachtige website met boeiende inhoud en begint klanten ernaartoe te sturen.

Je bevindt je in een spannende situatie, vooral als je net online begint.

Maar na een week online te zijn, merk je dat je site langzamer laadt dan een luiaard op een luie zondag, en bezoekers vertrekken sneller dan een kangoeroe op cafeïne.

Klinkt bekend? Dan moet je gaan nadenken over wat Google de Core Web Vitals (CWV) noemt.

Volgens de nieuwste Chrome-rapporten hebben al meer dan 50,1% van de websites goede Core Web Vitals-scores. En dit aantal blijft maand na maand groeien, wat betekent dat steeds meer slimme site-eigenaren deze prestatieverbeterende geheim ontdekken.

Hier is de clou: als je nog geen deel uitmaakt van die 50%, riskeer je jouw Google-posities, frustreer je jouw bezoekers en laat je mogelijk geld liggen.

Laten we dat veranderen, zullen we?

Wat Zijn Core Web Vitals Eigenlijk?

Denk aan Core Web Vitals als het rapport van je website.

Terwijl je verkeer naar je website leidt, gebruikt Google deze statistieken om te beoordelen hoe gebruiksvriendelijk jouw site is. In wezen meet het de snelheid, responsiviteit en visuele stabiliteit van je website.

Er zijn drie Kern Web Vitals-metrieken:

1. Grootste Inhoudelijke Verf (LCP)
2. Cumulatieve Indelingsverschuiving (CLS)
3. Interactie tot Volgende Verf (INP)

Deze zijn misschien nu nog onduidelijk — Laten we proberen elk van hen apart te begrijpen.

Grootste Inhoudelijke Verf (LCP)

Stel je voor dat je in een restaurant bent, en de ober brengt je voorgerecht bijna onmiddellijk.

Dat is wat een goede LCP voor je website doet.

Het meet hoe snel het grootste contentelement — de heldenafbeelding, een grote video of een groot stuk tekst — op je pagina laadt.

Volgens hetzelfde Chrome Core Web Vitals-rapport hebben 64,8% van de websites al hun LCP-scores behaald. En elke maand leveren meer nieuwe sites hun hoofdcontent sneller.

Als je deel wilt uitmaken van de LCP hall of fame, moet je streven naar een laadtijd van 2,5 seconden of minder om je conversieratio van je website te verhogen.

Alles boven de vier seconden en je verliest klanten.

Cumulatieve Layoutverschuiving (CLS)

Denk aan momenten waarop je op een knop op een mobiele site hebt geklikt — en een ander element op zijn plaats werd geladen, waardoor de knop verdween — en je in plaats daarvan op dat element klikte.

Het is niet leuk. De CLS-score streeft ernaar dit te elimineren.

Het meet hoeveel de elementen van je pagina bewegen tijdens het laden van de pagina. Een lage CLS-score betekent dat je lay-out vrij stabiel blijft gedurende het hele laadproces.

Je kunt je website mobiel geoptimaliseerd beschouwen als de lay-out niet verschuift tijdens het laden.

Vanaf september 2024 hebben 78,2% van de websites goede CLS-scores behaald, met een consistente stijging van de aantallen maand na maand. Dit toont aan dat meer ontwikkelaars prioriteit geven aan een soepele, verschuivingsvrije gebruikerservaring.

Dus, als je een stabiele gebruikerservaring wilt, streef naar een CLS-score van 0,1 of minder. Alles boven de 0,25 en je gebruikers zullen het gevoel hebben dat de hele pagina beweegt.

Interactie Tot Volgende Verfbeurt (INP)

INP is op 12 maart 2024 toegevoegd aan het Core Web Vitals-framework, ter vervanging van de oudere Eerste Input Vertraging (FID) metric. Terwijl FID alleen de eerste gebruikersinteractie meet, kijkt INP naar alle interacties gedurende een paginabezoek.

Gegevens uit Chrome-rapporten tonen aan dat 85% van de websites al goede INP-scores behaalt. Het is waarschijnlijk dat als je je site al optimaliseert voor de vorige twee scores, INP ook op zijn plaats zal vallen.

Om je gebruikers tevreden en betrokken te houden, streef naar een INP van 200 milliseconden of minder. Als je tussen de 200 en 500 milliseconden zweeft, heb je nog wat werk te doen.

Alles boven de 500 milliseconden, en je geeft je bezoekers de inbelervaring.

Hoe Meet Je Core Web Vitals

Voordat je begint met het verbeteren van je Core Web Vitals scores, is het verstandig om een idee te krijgen van de huidige staat van je site. Op deze manier kun je je vooruitgang meten. Het regelmatig beoordelen van je scores kan een waardevol onderdeel zijn van je websiteonderhoud.

Laten we eens kijken naar een paar verschillende manieren om de prestaties van je website te meten.

PageSpeed Inzichten

Er zijn een aantal online tools die je kunt gebruiken om Core Web Vitals te meten, waaronder Pingdom en GTmetrix. We raden echter aan om Google PageSpeed Insights te gebruiken.

Om te beginnen, voer de URL van je website in en klik dan op de Analyseer-knop.

Wanneer de analyse van je site is voltooid, wordt er een samenvatting gegeven van enkele belangrijke gegevens en de Core Web Vitals-gegevens van de site. Zoals je in de afbeelding hierboven kunt zien, heeft de standaard Google-website:

• LCP: 0,7 seconden
• INP: 63 milliseconden 
• CLS: 0

PageSpeed Insights test tegelijkertijd zowel mobiele als desktopscores, en je kunt tussen deze scores wisselen direct onder waar je de website hebt ingevoerd.

Als je verder scrollt, vind je ook enkele diagnostieken en suggesties voor verbeteringen. Op basis van de score van je site biedt PageSpeed Insights een aantal aanbevelingen die je kunt gebruiken om je score te verhogen en de prestaties van je site te verbeteren.

Chrome Gebruikerservaring Rapport

Je kunt ook toegang krijgen tot je Core Web Vitals via je Chrome User Experience Report. Dit kan met name handig zijn voor ontwikkelaars en webmasters.

Dit rapport is beschikbaar via Google Search Console en biedt echte gegevens en inzichten van je bezoekers. Het helpt je te begrijpen hoe jouw gebruikers het web gebruiken en interactie hebben met je site.

Om het te bekijken, moet je naar het dashboard van je Google Search Console gaan. Navigeer vervolgens naar Core Web Vitals, dat zich onder het gedeelte “Experience” bevindt.

Kern Web Vitals Chrome-extensie

Als je een Chrome-gebruiker bent, kun je de Web Vitals Chrome-extensie gebruiken om je Core Web Vitals te beoordelen voor elke website waar je op bent.

Voeg gewoon de extensie toe aan Chrome, en je bent klaar om te beginnen!

De volgende keer dat je op een website bent, klik je gewoon op het extensie-icoon bovenaan je pagina, en je zult de Core Web Vitals-score voor die website zien.

Hier is hoe de output van de extensie eruitziet:

Je ziet de LCP-, CLS- en INP-scores in één oogopslag zonder elke keer de PageSpeed Insights-pagina te bezoeken.

Hoe Verbeter Je Core Web Vitals Voor Betere Google Scores?

Nu we de basis onder de knie hebben, laten we eens kijken naar enkele beste praktijken om de Core Web Vitals scores van je pagina te verbeteren. Onthoud, dit gaat niet alleen om Google te imponeren — het gaat erom een website te creëren waar je bezoekers graag gebruik van maken.

1. Gebruik Moderne Afbeeldingsformaten

We zijn visuele wezens, maar die prachtige, hoogwaardige afbeeldingen kunnen de prestaties van een website schaden als ze niet goed gecomprimeerd zijn.

Je moet afbeeldingen optimaliseren en vervolgens de geoptimaliseerde afbeeldingen uploaden naar je website in plaats van server-side oplossingen te gebruiken.

Om dit probleem op te lossen en het web sneller te maken, lanceerde Google het WebP-formaat. Het behoudt veel van de afbeeldingsdetails terwijl het de grootte van afbeeldingen aanzienlijk verkleint.

WebP kan het standaardformaat zijn voor foto’s en complexe afbeeldingen. Het biedt betere compressie dan JPEG of PNG, wat betekent dat je kleinere bestandsgroottes kunt hebben zonder kwaliteit op te offeren. WebP-afbeeldingen zijn ongeveer 30% kleiner dan hun JPEG-tegenhangers. Dus, je bespaart veel bandbreedte en de tijd die nodig is om de pagina te laden.

Bij DreamHost gebruiken we graag Squoosh om afbeeldingen naar WebP te converteren of ze gewoon te comprimeren om ruimte te besparen.

Hier zijn enkele aanvullende afbeeldingsoptimalisatie-plugins om te overwegen:

• ShortPixel Image Optimizer
• EWWW Image Optimizer
• Imagify
• Smush

Samen met WebP raden we aan om SVG te gebruiken voor iconen, logo’s en illustraties.

SVG’s (Scalable Vector Graphics) zijn op zichzelf geen afbeeldingen. In vergelijking met reguliere afbeeldingsformaten zoals JPEG, PNG, WebP, enz., zijn SVG’s een XML-gebaseerde opmaaktaal die de afbeelding op een tweedimensionaal geometrisch vlak beschrijft.

Deze beschrijvingstekst wordt vervolgens naar de gebruiker gestuurd, en de browser van de gebruiker zet het om in een “afbeelding” nadat de volledige SVG-markup is ontvangen.

Al dit maakt SVG’s extreem lichtgewicht — aangezien ze in wezen gewoon kleine blokken tekst zijn.

Ook, omdat ze op wiskunde zijn gebaseerd, kunnen SVG-afbeeldingen oneindig schalen zonder kwaliteitsverlies, en ze zien er scherp uit op elk apparaat, van een kleine smartphone tot een enorme 4K-monitor.

SVG’s worden vectorformaten genoemd terwijl WebP een rasterformaat is, en je kunt zien hoe beide reageren op inzoomen.

Het lettertype is een uitstekend voorbeeld van een vector in dagelijks gebruik. Je kunt zoveel inzoomen op lettertypen als je wilt, maar ze zullen niet pixeleren. Nu we het toch over lettertypen hebben, een andere manier waarop je jouw website kunt optimaliseren voor Core Web Vitals is door minder lettertypen te gebruiken.

2. Lettertypen Optimaliseren Voor CWV Prestaties

Lettertypen kunnen het ontwerp van je website maken of breken. Maar als het gaat om het optimaliseren van lettertypen voor prestaties, zijn minder lettertypen vaak beter.

Hier zijn een paar tips om lettertypen voor je website te optimaliseren:

• Beperk Het Aantal Lettertypen: Gebruik slechts twee hoofdlettertypen op je website—één voor koppen en één voor de hoofdtekst. Dit vermindert het aantal HTTP-verzoeken en vereenvoudigt je ontwerp. Wees ook selectief met de lettergewichten; neem alleen de nodige op.
• Gebruik Waar Mogelijk Systeemlettertypen: De meeste apparaten hebben al systeemlettertypen zoals Arial, Helvetica of Georgia geïnstalleerd. Ze laden onmiddellijk en voorkomen de noodzaak voor extra lettertype downloads.
• Preload Kritische Lettertypen: Het toevoegen van een preload-link in je HTML kan de browser instrueren om je belangrijkste lettertypen vroeg in het laadproces op te halen. Dit kan de tekstweergavetijden aanzienlijk verbeteren. 
• Optimaliseer Aangepaste Lettertypen Om CLS Te Voorkomen: De browser kent de exacte afmetingen van aangepaste lettertypen niet tot ze zijn gedownload, wat leidt tot lay-outverschuivingen. Sommige open-source tools, zoals Font Pie, helpen CSS te genereren die de CLS elimineert of op zijn minst reduceert.
• Subset Je Lettertypen: Verwijder ongebruikte tekens uit je lettertypebestanden—zoals niet-Latijnse karakters als je site deze niet gebruikt. Dit vermindert bestandsgroottes en versnelt laadtijden.

We zullen in de toekomst enkele geavanceerde strategieën voor lettertypeoptimalisatie behandelen, maar voor nu zou het gebruik van deze snelle lijst je moeten helpen de websitelettertypen klaar te maken voor betere scores.

3. Denk Tweemaal Na Voordat Je Google Tag Manager Gebruikt

We weten wat je denkt: “Maar Google Tag Manager maakt mijn leven zo makkelijk!”

En je hebt niet ongelijk.

Het is een fantastische tool voor het beheren van meerdere tags zonder in de code te duiken. Het kan echter zowel voordelen als nadelen hebben als het gaat om Core Web Vitals.

Hoewel Google Tag Manager uitstekend is voor het organiseren van je tags, kan het je site mogelijk vertragen als het niet zorgvuldig wordt gebruikt. Elke tag voegt een beetje laadtijd toe, en die milliseconden kunnen sneller optellen dan je koffierekening op een ontwikkelaarsconferentie.

Vraag jezelf af: heb je echt al die tags nodig die bij elke pagina-load activeren? Kunnen sommige daarvan handmatig geïmplementeerd worden voor betere controle over wanneer ze laden?

Als vuistregel, gebruik Google Tag Manager alleen voor essentiële, site-brede tags en implementeer minder kritieke of pagina-specifieke tags handmatig.

4. Implementeer Een Caching Oplossing

Denk aan caching als het kortetermijngeheugen van je website. In plaats van elke pagina vanaf het begin te genereren voor elke bezoeker, slaat caching een kopie van de pagina op en levert deze bliksemsnel.

Het implementeren van caching kan je LCP-scores aanzienlijk verbeteren, vooral voor dynamische websites. Er zijn verschillende niveaus van caching die je kunt overwegen:

• Browsercaching: Zegt browsers om bepaalde bestanden lokaal op te slaan.
• Serverzijde caching: Slaat gegenereerde pagina’s of databasequery’s op.
• Objectcaching: Caches individuele elementen zoals widgets of menu’s.

Afhankelijk van je webhost, kun je mogelijk caching op serverniveau benutten.

Standaard bevatten DreamPress-plannen ingebouwde caching om de belasting van ongecachete bezoeken te verminderen zonder dat je zelf caching-plugins aan je site hoeft toe te voegen.

Ook, stel dat je WordPress gebruikt als het contentmanagementsysteem (CMS) van je website. In dat geval kunnen plugins zoals W3 Total Cache of WP Super Cache je helpen bij het implementeren van extra cachinglagen, waaronder browser- en objectcaches, wat de snelheid van de website verder verbetert.

5. Render-Blokkerende Bronnen Elimineren

Render-blokkerende elementen verwijzen naar de statische HTML, CSS en JavaScript bestanden die nodig zijn om een pagina op je site te renderen. Elk van deze bestanden bevat scripts die kunnen voorkomen dat je gebruikers inhoud kunnen bekijken.

Ze worden doorgaans gecreëerd door plugins van derden en tools zoals Google Analytics.

Echter, een manier om te voorkomen dat deze scripts jouw UX schaden (en daarmee de Core Web Vitals verbeteren) is door het elimineren van render-blokkerende bronnen en door het minimaliseren en verwijderen van ongebruikte CSS of scripts.

Er zijn meerdere technieken die je kunt gebruiken om dit te doen.

Een manier is door je JavaScript en CSS te minimaliseren door alle witruimtes of onnodige opmerkingen te verwijderen.

Je kunt een tool zoals CSS Minifier gebruiken om dit makkelijker te maken:

Je voert je CSS in en selecteert de Minify knop. Daarna kun je de uitvoer kopiëren en plakken om je code te downloaden en te vervangen.

Een andere methode is het condenseren van je JavaScript en CSS door de bestanden te combineren. Dit is een andere taak waar de bestandsoptimalisatiefunctie in WP Rocket mee kan helpen.

6. Uitstellen van het Laden van JavaScript

Als je jouw FID-scores wilt verbeteren, kun je de techniek gebruiken die bekend staat als het uitstellen van het laden van JavaScript. Dit is een andere manier om elementen die het renderen blokkeren te elimineren.

Dit proces zorgt ervoor dat je webpagina’s sneller laden omdat het het laden van JavaScript uitstelt. Met andere woorden, het laadt andere inhoud op de pagina zodra een bezoeker arriveert, in plaats van te wachten tot alle JavaScript-bestanden zijn geladen.

Je bestanden zullen gedwongen zijn te wachten met laden totdat alles op je webpagina klaar is.

Daarnaast kun je de instellingen van je site configureren zodat de kritieke CSS “boven de vouw inhoud” sneller laadt. “Boven de vouw” verwijst naar de elementen op de webpagina die als eerste verschijnen.

Je kunt dit doen door de inhoud uit het hoofd CSS-bestand te halen en deze in je code in te voegen. Dit zal helpen om het sneller te laden, waardoor de UX verbetert. Sommige caching-plugins zoals WP Rocket bieden een Optimize CSS Delivery functie die hierbij nuttig kan zijn.

7. Gebruik Een Content Delivery Network

Stel je voor dat jouw website een kloon van zichzelf had in elke grote stad over de hele wereld. Dat is in wezen wat een Content Delivery Network (CDN) doet.

Het verdeelt kopieën van je statische bestanden (zoals afbeeldingen, CSS en JavaScript-bestanden) over servers wereldwijd, zodat je bezoekers ze kunnen downloaden vanaf de dichtstbijzijnde locatie.

Het resultaat? Snellere laadtijden, verbeterde LCP-scores en een betere gebruikerservaring voor je wereldwijde publiek. Het kan ook helpen om de Time to First Byte (TTFB) te minimaliseren.

Er zijn verschillende externe tools die je kunt gebruiken voor je WordPress-site. Een van de meest populaire opties is Cloudflare.

Net als bij caching bieden sommige hostingproviders een ingebouwde CDN of tenminste integratie met CDNs. Bijvoorbeeld bij DreamHost, hebben we DreamSpeed, een krachtige CDN die gebruikmaakt van onze bestaande infrastructuur en je razendsnelle websites biedt met minimale inspanning.

8. Afbeeldingen Op De Juiste Maat Maken

Hoe groter de afbeeldingen, hoe groter het bestandsformaat.

Daarom is het slim om ervoor te zorgen dat je niet overal te grote afbeeldingen gebruikt. Bijvoorbeeld, er is geen reden om HD-afbeeldingen voor je thumbnails te gebruiken. Je kunt hier met veel kleinere, lagere-resolutie afbeeldingen werken.

Om je afbeeldingen verder te optimaliseren, kun je de srcset attribuut in je HTML-code gebruiken. Met deze tag kun je de locaties van afbeeldingen van verschillende groottes specificeren, en moderne browsers kunnen automatisch afbeeldingen van de juiste grootte serveren op basis van de resolutie van het apparaat, waardoor de LCP-scores verbeteren.

Daarnaast kun je altijd de breedte- en hoogteattributen voor je afbeeldingstags specificeren of de benodigde ruimte reserveren met de CSS-beeldverhouding om ervoor te zorgen dat de gebruiker automatisch kleinere afbeeldingen ziet.

Toch zouden we altijd aanraden om een tool zoals Sqoosh te gebruiken om afbeeldingen te verkleinen voordat je ze uploadt.

9. Implementeer Lazy Loading

We raden je ook aan om lazy loading te implementeren. Dit zorgt ervoor dat je afbeeldingen precies laden wanneer gebruikers bij dat deel van de webpagina komen, in plaats van tegelijk met alles op de pagina te laden.

Lazy-loading van afbeeldingen kan helpen om je LCP en laadsnelheid te verbeteren. Het beste is dat het vrij eenvoudig te implementeren is.

Moderne browsers ondersteunen native lazy loading met het loading=”lazy” attribuut op <img> tags.

Het is zo eenvoudig als het toevoegen van een enkel attribuut, en je pagina is klaar om lazy te laden.

Voor WordPress-gebruikers heb je gewoon een plugin zoals Jetpack of Smush nodig om lazy loading in te schakelen.

10. Upgrade Je Hosting

Soms kun je alles goed doen en toch lage scores voor Core Web Vitals hebben. Op dit moment is het logisch om te overwegen je hostingproviderplannen te upgraden.

Bijvoorbeeld, als je onlangs veel bezoekers begonnen te ontvangen hebt of veel nieuwe producten met veel afbeeldingen hebt toegevoegd, kan het zijn dat je de bovengrenzen van je webhost bereikt.

In dergelijke gevallen, als je op een shared hosting plan zit, kun je overstappen naar een virtual private server (VPS) hosting of managed dedicated hosting.

Voor WordPress-gebruikers kan beheerde WordPress-hosting een goede impuls geven aan de prestaties van je site zonder te duur te zijn. Bijvoorbeeld, bij DreamHost bieden we DreamPress-abonnementen gericht op eigenaren van WordPress-sites die op zoek zijn naar een hoogwaardige site zonder de bank te breken.

Ongeacht welk type hosting je kiest, of al gebruikt, is de consensus dat het upgraden van je hostingprovider of plan de snelste manier is om je website sneller te maken.

We raden aan om een beheerde host te kiezen met servers die specifiek voor WordPress zijn geoptimaliseerd en die de verschillende technische aspecten van de siteprestaties kunnen afhandelen.

Verbeter de Gebruikerservaring en Pluk de Voordelen

Je beschikt nu over de kennis die nodig is om je aan te sluiten bij de 50,1% van de websites die al voldoen aan de Core Web Vitals scores en een geweldige ervaring bieden aan hun bezoekers.

Het is waar dat sommige wijzigingen die nodig zijn om de scores te verbeteren complex kunnen zijn — misschien zelfs technisch, waarbij ondersteuning van een ontwikkelaar nodig is om je website volledig te optimaliseren.

Als je de optimalisatie wilt uitbesteden, probeer dan de webontwikkelingsdiensten van DreamHost.

Onze ontwikkelaars werken met je samen om bestaande websites te optimaliseren en kunnen zelfs een website vanaf nul bouwen om een uitstekende gebruikerservaring te bieden en de scores van Core Web Vitals te verbeteren.

Met DreamHost investeer je in een langetermijnprestatie strategie. Onze experts zullen:

• Audit de Core Web Vitals van je site.
• Gebruik de nieuwste optimalisatietechnieken.
• Bouw je site op een solide, schaalbare basis.
• Bied doorlopende ondersteuning om je site soepel te laten draaien.

Je kunt je focussen op het runnen van je bedrijf en het creëren van geweldige inhoud terwijl wij je site optimaliseren. Dus als je wilt dat DreamHost je website bouwt of optimaliseert, boek een consultatie of chat vandaag nog met ons!