Wat zijn Google Web Vitals, en hoe raken ze je SEO?

De afgelopen paar maanden heeft Google de Page Experience Update uitgebracht. Deze "Core Web Vitals" update focust zich op de laadsnelheid van sites, de reactiesnelheid van de website, en de stabiliteit van pagina's. Al deze signalen beïnvloeden de gebruikerservaring. Je vraagt je misschien af hoe deze signalen de SEO beïnvloeden? In dit artikel bespreken we welke signalen precies van invloed zijn op waar je pagina rankt op Google, en waarom ze belangrijk zijn. Als leidend PR bedrijf weten we hoe belangrijk een SEO-vriendelijke website is voor effectieve communicatie en marketing. Daarom zetten we in dit artikel alle belangrijke info voor je op een rijtje, zodat jij je website optimaal kan laten functioneren. Onze experts geven in dit artikel ook advies over hoe je eventuele problemen kan identificeren, en op kan lossen.

augustus 31, 2021

Wat beïnvloedt de gebruikservaring - en Google ranking?

De gebruikerservaring van een pagina bestaat uit een reeks factoren, die gezamenlijk vaststellen hoe gebruikers zich voelen als ze acties ondernemen op een webpagina. Het meet niet zozeer de informatieve waarde van een pagina, maar de waarde die de gebruiker van een pagina afhaalt.

Oude signalen voor gebruikerservaring

Voordat we het gaan hebben over de Core Web Vitals, is het nuttig om een stap naar achter te doen, en te kijken naar de oude criteria die Google overwoog om de gebruikerservaring vast te stellen. Onthou dat de oude signalen niet nutteloos worden met een nieuwe update - ze blijven van toepassing.

Google is en blijft een zoekmachine, en heeft de taak de zoekintentie van de gebruiker met de beste resultaten te koppelen. In het verleden werd de ranking van resultaten op bijna letterlijk gemaakt op basis van de zoekintenties van de gebruiker.

Banner of Google Search Signals for Page Experience

1. Mobielvriendelijkheid

Het gebruik van de mobiele telefoon neemt elke dag toe, en met smartphones kunnen mensen vanuit hun handpalm toegang krijgen tot het internet. Omdat het steeds populairder wordt om vanuit je mobiel te zoeken, gebruikt Google de mobielvriendelijkheid van je website als een rank signaal.

Dit heeft invloed op alle talen, over de hele wereld. De meeste Google gebruikers vinden de zoekmachine makkelijker te gebruiken als ze relevante zoekresultaten van hoge kwaliteit krijgen aangeboden, die ook nog eens geoptimaliseerd zijn voor mobiele gebruikers. Simpel gezegd, een mobielvriendelijke website houdt in dat je een bestaande desktop site transformeert en opnieuw indeed zodat het op het scherm van een mobiel past.

Rectief webdesign: De pagina gebruikt dezelfde URL en dezelfde code, ongeacht of de gebruiker een desktop of een mobiel gebruikt. Alleen de lay-out past zich wat aan, afhankelijk van de grootte van het scherm van de gebruiker. Een van de voordelen hiervan is dat je maar ‘een versie van de site hoeft te hebben, in plaats van twee.

Specifieke secties en stukken content moeten waarschijnlijk van plaats veranderen en opnieuw georganiseerd worden om design-technisch goed zichtbaar te worden op een kleiner scherm. De site rankt hoger als de mobiele versie snel op het scherm werkt, en snel reageert. Onthou dat Google graag dezelfde content op zowel mobiel als desktop vindt. Dit betekent ook dat desktop content niet dramatisch moet veranderen wanneer het geformatteerd wordt. Voorkom verborgen content als je je website omzet van de desktop versie naar de mobiele versie. Probeer je mobiele content zo dichtbij de desktop versie mogelijk te houden. Optimaliseer het alleen voor het kleine scherm.

Je zult je content moeten formatteren zodat het toegankelijk is op de mobiel, maar dat betekent niet dat je de content volledig moet veranderen. Een goede manier om dat te doen is via goed reagerend webdesign, om ervoor te zorgen dat je content zich aanpast voor het kleinere scherm, zonder dat je inlevert op de kwaliteit van je site op desktop of mobiel.

2. Safe browsing

In 2007 introducerende Google “Safe Browsing” (Veilig Surfen) . Google wilde gebruikers beschermen tegen frauduleuze activiteiten. Safe Browsing controleert op basis van Google’s vaak geupdate lijsten of een domein al dan niet veilig is. Voorbeelden van onveilige domeinen zijn “social engineering sites,” (zoals phishing of andere misleidende sites) en sites die malware of andere ongewenste software hosten. Wanneer Google merkt dat je site gehackt is, of via de evaluatie merkt dat er mogelijk schadelijke content voor een bezoeker of hun apparatuur op je site staat, laat het rapport Beveiligingsproblemen dat zien. Safe Browsing beïnvloedt de ranking, omdat de veiligheid van gebruikers en de betrouwbaarheid van websites bij Google hoog in het vaandel staan.

Veilig Browsen werd geïntroduceerd om gebruikers te beschermen tegen frauduleuze activiteiten. Het is een van de manieren om zowel de betrouwbaarheid van websites, als de veiligheid van de gebruikers te garanderen.

3. HTTPS

Hypertext Transfer Protocol Secure (HTTPS) is de beveiligde versie van HTTP. Dit is het standaard protocol dat gebruikt wordt om data te versturen tussen een internetbrowser en een website. Door middel van HTTPS wordt de code versleuteld, zodat data met extra bescherming verstuurd kan worden.

afbeelding van https voorbeeld van opslaan browsenafbeelding van https voorbeeld van opslaan browsen

Veiligheid staat voorop bij Google. Dat is waarom websites die beveiligd zijn met HTTPS een voordeel hebben ten opzichte van websites die gebruik maken van HTTP. Zelfs als er geen vertrouwelijke informatie in het spel is, bieden HTTPS links meer zekerheid dat er niet met data geknoeid kan worden. Veilige websites worden gekenmerkt door een klein slotje in de URL balk.

Als een website niet veilig is, geeft Google dat aan in de URL balk met de tekst “niet beveiligd.” Beveiligde sites hebben voordeel in de Google ranking, terwijl niet beveiligde sites een markering krijgen. Dit doet Google om de eigenaren van websites aan te moedigen HTTPS te gaan gebruiken, omdat dit zowel veiliger is voor bezoekers, als hun eigen privacy beter beschermt.

HTTPS = Vertrouwelijke informatie wordt veilig gehouden, bijvoorbeeld bankinformatie en maildiensten. Beveiligde websites ranken hoger, en niet beveiligde sites krijgen de markering 'niet beveiligd'.

4. Opdringerige pop-ups

Opdringerige pop-ups zijn grote hoeveelheden onbelangrijke content die de meerderheid van de pagina bedekken, en daarbij de activiteit van de bezoeker in de weg zit. Als de activiteit van een gebruiker significant verstoord wordt, leidt dit tot een slechte ervaring bij de gebruiker.

Op de mobiele versie zijn pop-ups nog problematischer dan op de desktop, omdat het scherm kleiner is. Meestal reageert de advertentie tussen de webpagina’s niet of nauwelijks. Dat betekent dat het moeilijk, of zelfs onmogelijk is om de advertentie op mobiel weg te klikken, waardoor de pagina nutteloos wordt voor mobiele gebruikers.

Opdringerige pop-ups voorkomen dat bezoekers websites kunnen browsen zonder onderbrekingen. Ze bedekken het hele scherm, en de gebruiker kan geen andere informatie zien tot de pop-up weg is.

Nieuwe signaln voor gebruikerservaring

Google’s Core Web Vitals werden geïntroduceerd als een nieuwe reeds ranking signalen. De oude criteria spelen nog steeds een rol, maar Core Web Vitals zijn specifiek gefocust op de ervaring van de gebruiker. Gelukkig is Google erg transparant over de factoren die de ranking beïnvloeden, waardoor jij effectief je strategie kan optimaliseren voor een SEO vriendelijke website.

In voorgaande jaren focuste Google met name op veiligheid, en de integratie met verschillende types apparaten. Nu is de gebruikerservaring een net zo belangrijk ranking signaal geworden. Google is immers een bedrijf dat erop gericht is de beste zoekresultaten aan gebruikers te geven.

Het is geen verrassing dat een goede gebruikerservaring meegenomen wordt in de ranking. Met een specifieke reeks metingen die het algoritme gaan beïnvloeden, wil Google zijn gebruikers de beste online ervaring aanbieden. Daarom hebben ze Core Web Vitals uitgebracht.

Samen met de oude ranking signalen, zijn de Core Web Vitals erop gericht om de gebruikerservaring te verbeteren. Veiligheid en de toegankelijkheid voor verschillende apparaten (met name mobiel) zijn nog altijd belangrijk, maar de interacties en de ervaring van de gebruiker spelen ook een erg grote rol.

Wat zijn Google Core Web Vitals?

De Core Web Vitals zijn een reeks maatstaven die gericht zijn op de ervaring van de gebruiker. Ze zijn ontworpen om de gezondheid van de pagina wat betreft de ononderbroken gebruikerservaring op te meten. Er zijn drie elementen die van invloed zijn op de nieuwe maatstaf, namelijk laadsnelheid, interactiviteit, en visuele stabiliteit.

Afbeelding van de drie belangrijkste webvitaliteiten van Google (LCP, FID en CLS)

Voorheen reviewde en rankte Google pagina’s op basis van hun mobielvriendelijkheid, veiligheid, en simpele indicaties voor de gebruiksvriendelijkheid. Nu leggen ze de lat hoger! Bij Core Web Vitals geldt: Als een website er niet in slaagt aan de hoogste eisen te voldoen, scoren ze lager, en ranken ze lager.

Er zijn meer dan 200 ranking factoren, maar er zijn maar 7 echte ranking signalen. Deze signalen zijn dan ook veel belangrijker.

Van de meer dan 200 factoren, zijn de belangrijkste om op te focussen:

  • Verwijzende domeinen
  • Organische klikfrequentie
  • Domein Autoriteit
  • Mobiele Gebruiksvriendelijkheid
  • Verblijftijd
  • Hoeveelheid externe links
  • De kwaliteit van de content
  • On-page SEO

De Core Web Vitals bestaan uit LCP, FID, en CLS. Deze elementen zijn gericht op de gebruikerservaring. Samen met mobielvriendelijkheid, Safe Browsing, en simpele gebruiksvriendelijkheid indicaties zijn ze verantwoordelijk voor de ranking van de pagina.

Waarom zijn ze belangrijk?

De Page Experience Update is ontzettend belangrijk om voor te optimaliseren, omdat de huidige indicaties voor gebruikersvriendelijkheid (UX) samen worden gevoegd met de Core Web Vitals om een meeromvattend rank signaal te maken voor de “Page Experience.” UX en SEO zijn partners wat betreft het maken van een betere gebruikerservaring. Een positieve online ervaring zorgt ervoor dat bezoekers langer op jouw pagina blijven, ze er meer interacties op doen, en voorkomt dat ze gelijk weer weggaan naar een andere site. Samen met andere UX factoren gaat dit gevolgen hebben voor je page experience score, wat vervolgens van invloed is voor je ranking in Google. De kwaliteit van hoe je pagina ervaren wordt zal je website ofwel laten stijgen, of doen dalen als je UX van lage kwaliteit is. Onthou dat élk element, en élke actie op je website het doel moet hebben om je online zichtbaarheid te vergroten, je website beter vindbaar te maken, en de interactiviteit ten goede moet komen.

De pagina ervaring (page experience) gaat je ranking ofwel verbeteren, of verslechteren afhankelijk van de kwaliteit van je UX.

Wat is de Google Page Experience Update?

Je vraagt je misschien af wat de Page Experience Update dan precies inhoudt. We weten inmiddels allemaal dat gebruiksvriendelijkheid en klanttevredenheid ontzettend belangrijk zijn voor elk mer, elk bedrijf, en iedere website die wil slagen. Het is dus alleen maar logisch dat Google besloot dat het tijd werd voor de Page Experience Update.

Het doel van deze update is om de totale browse-ervaring op zowel desktop als mobiel te verbeteren. Het is te vergelijken met hoe Google hun bureau eens flink reinigt en netjes maakt. Een nette en georganiseerde werkplaats voelt goed, toch? Hetzelfde geldt voor webbrowsers. Een schone, en goed functionerende websites zorgt ervoor dat de bezoekers een betere ervaring krijgen als ze de website bezoeken.

Google is een volledig geautomatiseerde zoekmachine. Ze gebruiken zogeheten “web crawlers” om het World Wide Web regelmatig te verkennen, en nieuwe websites te indexeren. Het doel hiervan is om de zoektermen van gebruikers te koppelen aan de beste resultaten. De Page Experience Update helpt Google om dit doel te bereiken.

Omdat er nu veel waarde wordt gehecht aan gebruikersvriendelijke websites, gaat de Page Experience Update dit nu laten meewegen bij de ranking van zoekresultaten. Dat betekent dat gebruikersvriendelijke pagina’s omhoog gaan in Google’s ranking.

Google is en blijft een dienstverlener, die zijn gebruikers de beste resultaten wil geven voor hun zoekopdrachten. Dit is deel van hun browse-ervaring, en hoe gebruikers jouw website ervaren draagt hier ook aan bij.

LCP: Wat het is, en hoe je het kan verbeteren

De Largest Contentful Paint (LCP) verwijst naar hoe lang het duurt om het grootst zichtbare stuk content in te laten vanaf het moment dat de bezoeker op de URL heeft geklikt. Dit is meestal een afbeelding, een video, of een tekstblok.

LCP is één van de maatstaven waarmee Google de pagina ervaring opmeet. Aangezien download- en internetsnelheid een rol spelen bij hoe snel je gebruikers een interactie kunnen doen op de voornaamste contentpagina van je website, speelt het direct een rol bij de gebruikerservaring.

Het werd opgenomen als maatstaf, omdat LCP snel en accuraat kan vaststellen hoe snel een webpagina gebruikt kan worden. Daarnaast kan het makkelijk worden opgemeten, en geoptimaliseerd.

Waarschijnlijk haal je niet in een keer een goede LCP, omdat het een van de lastigste dingen is om goed te doen wanneer je je website optimaliseert. Het kost tijd, moeite, en een hoop geduld. Maar, als je de basisregels van LCP volgt, zal je je score steeds verder verbeteren.

LCP = hoe lang het duurt voordat het grootste zichtbare content element ingeladen is sinds het moment dat de bezoeker op de URL klikte. Het is een betrouwbare meting om vast te stellen hoe snel gebruikers interacties kunnen aangaan op je website.

Voornaamste lage performance problemen

Als je een LCP-probleem tegenkomt op desktop of mobiel, betekent dat dat de content er meer dan 4 seconden over doet om het het grootste zichtbare element in te laden.

De meest voorkomende oorzaken van een slechte LCP zijn:

  • Lanzame server responstijd
  • JavaScript en CSS blokkeert het inladen
  • Lange laadtijd van specifieke onderdelen

Hoe kan je LCP verbeteren?

Voor een optimale performance van je website, kan je het best beginnen met het schoonmaken ervan. Je hebt geen grote hoeveelheden plugins en accessoires nodig om een website te bouwen. In de meeste gevallen zorgen een hoop plugins voor bugs, en heb je waarschijnlijk last van vertraging door de probleemoplossing.

De best functionerende websites maken minimaal gebruik van plugins en gebruiken alleen code die cruciaal is voor de functionaliteit van je website. Zorg er altijd voor dat de website alleen maar de nodige code laadt, en dat die code laadt wanneer het moet laden.

1. Upgrade je webhost

Controleer je host provider en zorg ervoor dat je de meest recente PHP versie gebruikt, niet een oudere. Door dit up-to-date te houden verklein je de laadtijd, en wordt de website sneller. Controleer naast je webhost versie ook of je http/2, of een recentere versie gebruikt.

Het belangrijkst is dat je ervoor zorgt dat je webhost geupdate is naar de recentste versie. Dit is wat technisch, maar je support team kan waarschijnlijk helpen.

Houd uw webhost up-to-date, dit komt de reactie- en laadtijden ten goede.

2. Optimaliseer afbeeldingen

Dit kan je vrij makkelijk doen. Afbeeldingen kunnen bijvoorbeeld gecomprimeerd, geconverteerd, of kleiner gemaakt worden. Door de juiste afbeeldingen te kiezen en formats te gebruiken die sneller laden. Door de juiste afmetingen te kiezen, en formats te gebruiken die sneller laden (zoals een video in plaats van een GIF), kan je je LCP score verhogen.

Next-gen type afbeeldingen hebben een verbeterde laadtijd, compressie, en kwaliteit. WebP is bijvoorbeeld een ideale vervanger voor JPEG en PNG, soms zelfs voor GIFs. Het format ondersteunt ook geanimeerde afbeeldingen, zonder afbreuk aan de kwaliteit van de afbeelding.

Je kan ook lazy-loading afbeeldingen “below the fold” plaatsen om je LCP te verlagen.* Dit zijn afbeeldingen die pas laden zodra alle content “above the fold” is geladen, of wanneer ze op het scherm van de gebruiker te zien zijn.

*De termen “above” en “below the fold” verwijzen naar de content die de gebruiker op zijn of haar scherm ziet voordat ze scrollen. Alles boven “the fold” is direct zichtbaar, alles eronder niet..

Gebruik next-gen, lazy-loading afbeeldingen, iframes, etc. om de afbeeldingen te optimaliseren en de laadtijd te verkleinen.

3. Controleer je JavaScript

JavaScript is een programmeertaal op basis van tekst. Het wordt gebruikt aan zowel client-side als server-side om je website interactief te maken, en verandert je website van een statische pagina naar een interactieve. Het probleem waar je tegenaan zou kunnen lopen als je je LCP wil verbeteren, is dat je JavaScript verouderd is.

Als je JavaScript al een tijd niet meer geupdate is, kan je pagina vertraagd worden. De makkelijkste manier om dit op te schonen is door ongebruikte code te verwijderen, en ervoor te zorgen dat het geïntegreerd is met de recentste versies van veelgebruikte browsers.

JavaScripts kunnen lastig zijn. Hou ze geupdate, en haal ongebruikte of onnodige code weg.

4. Minimaliseer Cascading Style Sheets (CSS)

CSS is een stijltaal, geschreven in een opmaaktaal zoals HTML. Het wordt gebruikt om de lay-out en structuur van een document te beschrijven. Als CSS-bestanden niet goed geoptimaliseerd zijn, kunnen ze problemen opleveren bij het laden. Dat betekent dat ze de server bezig houden voordat de rest van de pagina kan laden.

Kritieke CSS (Critical CSS) wordt gebruikt om de CSS van “above-the-fold” content zo snel mogelijk te laden. Dit zorgt ervoor dat de direct zichtbare content eerst laadt, en de rest pas erna. Het is totaal niet nodig alle content tegelijkertijd te laden, de rest van de CSS kan asynchroon geladen worden.

De beste manier om CSS te optimaliseren is door onnodige code weg te halen, niet te veel CSS bestanden toevoegen, en de CSS bestanden die de server te lang bezig houden te verwijderen.

FID: Wat het is, en hoe je het kan verbeteren

De First Input Delay (FID) verwijst simpelweg naar hoe lang het duurt voordat de browser kan reageren op de eerste actie van een bezoeker. De vraag is, kunnen bezoekers op je pagina een actie op je pagina ondernemen? Hoe lang duurt het voordat er iets gebeurt?

Voorbeelden van acties:

  • Een optie in het menu kiezen
  • Op een link in de navigatie van de website klikken
  • Zoekbalken of formulieren invullen
  • Dropdown-menu’s openen op mobiel

FID  let op hoe de meeste menselijke gebruikers met je website omgaan, wat kritiek is als het gaat om pagina ervaring. Omdat de meeste gebruikers niet jaren willen wachten voordat de content laadt, besloot Google de snelheid van pagina’s mee te nemen bij het berekenen van de ranking.

Google ging daarna verder, door ook te kijken naar hoe lang een gebruiker moet wachten om een interactie aan te kunnen gaan met de content. Voor pagina’s waar de bezoeker alleen maar scrollt, bijvoorbeeld bij blogs en andere artikelen, speelt de FID geen grote rol.

Aan de andere kant, als de gebruiker een actie moet uitvoeren, zoals abonneren of inloggen, speelt de FID een enorme rol. Hou in je achterhoofd dat de FID niet verwijst naar hoe lang het duurt tot je content laadt, maar naar hoe lang het duurt tot de gebruiker kan beginnen met typen.

FID: Hoe lang de browser erover doet om te reageren op de eerste actie die de gebruiker uitvoert. Het focust op hoe menselijke gebruikers omgaan met je website.

Voornaamste Lage Performance problen

Als je last hebt van input-vertraging, is de browser waarschijnlijk bezig iets anders te laden. Dat betekent dat het nog niet op de gebruiker kan reageren. Meestal komt dit doordat de browser grote hoeveelheden JavaScript of code probeert te verwerken, dat allemaal tegelijkertijd wil laden.

Veel voorkomende problemen van een lage FID zijn:

  • Chaotische code
  • JavaScripts
  • Third-Party Scripts

Hoe verbeter je FID

Plat gezegd, je wil niet dat er een enorme berg aan code is die de server moet proberen te verwerken. Door gebruik te maken van een cache en een optimisatie-plugin zorg je ervoor dat je website sneller bij de relevante code is, en je FID versnelt.

1. Opschooncode

De makkelijkste manier om FID te optimaliseren is om orde aan te brengen in de code. ALs je je website opschoont, verzeker je je ervan de de server minder tijd hoeft te besteden aan het ophalen van data uit meerdere bronnen, voordat het zich focust op de actie die de gebruiker op dat moment wil uitvoeren.

Optimalisatietools, zoals WP Rocket*, laten je zien welke code je website vertraagt, en wat de vertraging precies veroorzaakt. Een optimalisatietool versnelt het opschonen en helpt je daarnaast je SEO ranking te verbeteren, en je conversies te verhogen.

*WP Rocket is een oplossing voor WordPress websites

Je wilt voorkomen dat er een berg code is die de laadtijd van belangrijke acties vertraagt. Je kan een optimalisatietool gebruiken om verbeterpunten te identificeren.

2. Verwijder onnodige third-party scripts

Een third-party script is een JavaScript dienst die in een webpagina geladen is. Het belangrijkste doel ervan is om een extra functie aan de webpagina te geven. Als een third-party script in de achtergrond laadt, of als de server de code probeert te op te halen, kan het een Single Point of Failure (SPOF) veroorzaken.

Je wil altijd voorkomen dat er ongebruikte of onnodige code geladen wordt. Het vertraagt je website, en kan er zelfs voor zorgen dat je site crasht wanneer de server een berg aan informatie vanuit meerdere bronnen in één keer probeert te verwerken.

Leg je eerst toe op de belangrijkste functie van je webpagina, en besluit daarna of je een écht third-party code nodig hebt.

3. Gebruik een browser cache

Een browser cache, of web cache, is een systeem dat het World Wide Web optimaliseert. Wanneer je een browser als Google Chrome gebruikt, slaat de cache de data van websites op. Het opschonen van de cache kan de laadsnelheid van een website versnellen, en problemen met het formatteren op een website oplossen.

Als je een browser cache gebruikt, heb je het voordeel dat alle informatie is opgeslagen in een databank, en de browser het niet van ver weg op hoeft te halen. In plaats dat een browser de hele website opnieuw moet downloaden, kan het simpelweg de gegevens uit de cache halen.

Caches slaan data op en helpen de browser informatie sneller op te halen, waardoor de laadtijd van websites minder lang wordt.

4. Balanceer content

Voor zowel de laadtijd als de input-vertraging is het verstandig ervoor te zorgen dat de content op je pagina gebalanceerd is. Denk goed na over wat je laat zien op welke pagina, zeker wat betreft third party code en plugins. Zorg dat de code die geladen wordt altijd een specifiek doel dient.

Je hoeft bijvoorbeeld niet op elke pagina een “abonneer nu” pop-up te zetten. Dat is extra code die weer moet laden. Wees verstandig over waar je de content plaatst, en denk na over wat een specifieke pagina nodig heeft. Op die manier ga je slim om met de code die geladen wordt, bij bepaalde acties op bepaalde pagina’s.

Denk na waar je content plaatst, en wat je op een pagina laat zien. Als een pagina geen “abonneer je nu” knop nodig heeft, kan je het beter verplaatsen naar een pagina waar het wel relevant is.

CLS: Wat het is, en hoe je het kan verbeteren

Cumulative Layout Shift (CLS) heeft te maken met de stabiliteit van de lay-out. Het bekijkt de kans waarop stukken content of tekst op de pagina plotseling verplaatsen wanneer de bezoeker er een interactie mee aangaat. De hoeveelheid waarop je lay-out verschuift wordt berekent op basis van de impact fraction en de distance fraction. Beide maatstaven worden gebruikt om te berekenen hoe instabiele elementen op een pagina verschuiven.

Plotselinge verschuivingen, of content dat over een pagina springt, kunnen een gebruikerservaring behoorlijk verstoren. Dit soort verstoringen komen veel voor op het web, met name op nieuwssites, of wanneer gebruikers op specifieke actieknoppen proberen te klikken.

CLS: Stabiliteit van de pagina. Je wil voorkomen dat elementen plotseling verschuiven of over je pagina heen verplaatsen.

Voornaamste performance problemen

Je wil nogmaals voorkomen dat er een grote hoeveelheid content op je pagina staat die de lay-out kan verstoren. Je moet je website en alle pagina’s daarop een specifieke set criteria laten volgen. Het moet de afmetingen weten, wanneer het welke content moet laden, wanneer het welke code moet pakken, etc.

De meest voorkomende oorzaken van slechte CLS zijn:

  • Afbeeldingen zonder afmetingen
  • Advertenties, ingesloten content (embeds) en iframes zonder afmetingen
  • Content die in de pagina wordt gevoegd door vertraagd JavaScript
  • Acties die wachten op een antwoord van het netwerk
  • Dynamische content

Hoe kan je het verbeteren

De makkelijkste manier om CLS te verbeteren is om altijd de de afmetingen van je afbeeldingen en video’s vast te zetten. Een goede manier om een gezonde CLS score te behalen is door afmetingen te bepalen en te specificeren door middel van ingesloten content (embeds). Je kan ook gebruik maken van een plaatshouder of fallback.

1. Plaats afmetingen

De makkelijkste manier om je CLS te verbeteren is om de afmetingen van je afbeeldingen en video's vast te zetten. Een goede manier om een gezonde CLS score te behalen is door ingesloten content (embeds) te gebruiken, en afmetingen vast te leggen. Je kan ook gebruik maken van een plaatshouder, of van fallback, om te voorkomen dat specifieke elementen gaan rondbewegen.

Specificeer altijd afmetingen voor afbeeldingen en andere visuele content op je pagina.

2. Maak ruimte vrij voor advertenties

Geef advertenties hun eigen blok, en zorg ervoor dat ze precies weten waar ze heen moeten. Anders kunnen advertenties zomaar op je website verschijnen zonder een specifieke plek, en content wegduwen.

Geef ruimte aan advertenties, zodat ze weten waar ze heen moeten en in wat voor frame ze moeten passen.

3. Besloten content en iFrames

Je kan widgets instellen om content op je website in te sluiten. Denk hierbij bijvoorbeeld aan YouTube videos, Google Maps, posts op sociale media, enz. Om ervoor te zorgen dat deze content niet gaan schuiven, kan je vooraf genoeg ruimte beschikbaar maken voor ingesloten content om in te laden, met een plaatshouder of fallback.

Dit kan je bijvoorbeeld doen om met de ontwikkelaarstools van de browser de uiteindelijke ingesloten content te inspecteren, en de hoogte op te meten. Wanneer de ingesloten content laadt, zorgt de iFrame ervoor dat de content qua grootte wordt aangepast zodat het goed past.

Frames werken als plaatshouders voor content, en zorgen ervoor dat elementen op hun plaats blijven en geen ongewilde verschuivingen maken.

4. Dynamische content

Probeer niet om nieuwe content boven bestaande content te zetten, tenzij het in een reactie is op een interactie van een gebruiker. Je moet dit vooraf plannen, zodat onverwachte lay-out shifts niet voorkomen als er nieuwe content opkomt. Wees ook hier duidelijk bij het coderen. Zorg ervoor dat je site weet waar een stuk content moet komen zodra de content geladen is.

Dynamische content moet ook specifieke instructies krijgen, over wanneer het moet laden en welke afmetingen het moet volgen.

Hoe evalueer je jouw Core Web Vitals

Nu je meer weet over de Core Web Vitals, kunnen we kijken hoe je je score kan beoordelen. Gelukkig zijn er online tools beschikbaar om je te helpen. Wij raden Google Search Console of Pagespeed Insights hiervoor aan. Het is belangrijk om te beseffen dat er verschillende datasets worden opgenomen bij de beoordeling. Velddata wordt door Google gebruikt om je website te ranken, terwijl lab data door Google gebruikt wordt om je website te testen voor optimalisatiemogelijkheden.

1

Velddata

Velddata is een overzichtsrapport dat laat zien hoe een specifieke URL heeft gepresteerd over een specifieke tijdsperiode. Het is een verzameling anonieme performance data van een diverse groep gebruikers, apparaten, en internet omstandigheden. Velddata wordt beïnvloed door de externe omstandigheden, en kan in tegenstelling tot lab data niet bestuurd worden. Het kan wel gefilterd worden om te focussen op een specifieke gebruiker en hun ervaring.

Velddata bestaat uit de snelheidsstatistieken van menselijke gebruikers die Google verzamelt. Data kan alleen verzamelt worden van gebruikers die ermee hebben ingestemd om een anonieme performance indicatie van hun eigen ervaring te delen met Google. De verzamelde data wordt vervolgens gebruikt om de snelheid van de pagina op te meten.

In Pagespeed Insights (PSI) kan je de presentatie rapporten van je pagina's zien, op basis van zowel mobiele als desktop data. Om data te verzamelen heeft PSI een URL nodig om op te zoeken in de Chrome User Experience Report (CrUX) dataset.

Als er data aanwezig is over die specifieke URL, stelt PSI een rapport op voor LCP, FID, CSL, en de First Contentful Paint (FCP). De data die Google gebruikt om de ranking vast te stellen komt voort uit velddata, omdat de resultaten van menselijke gebruikers en omstandigheden afkomen.

Wanneer je aan het optimaliseren van je website voor de Core Web Vitals begint, kan je de Google Search Console gebruiken om webpagina’s te identificeren die aandacht nodig hebben. ZOdra je de probleem pagina's hebt gevonden, kan je de gebruik maken van de PSI om de lab- en veldproblemen op specifieke pagina’s op te lossen.

2

Lab Data

Labdata komt voort uit een gesimuleerde hoeveelheid pagina’s, op één enkel apparaat en onder een specifieke internetkwaliteit. Labdata is een kunstmatige momentopname, en gereguleerd door vooraf vastgestelde apparaten, locaties, en internetverbindingen.

Google Lighthouse is een middel dat inschat wat de snelheidsscore van een pagina kan zijn. Dit is een simulatie die uitgevoerd wordt in een kunstmatige en bestuurde setting. Het produceert dan ook alleen maar schattingen. Je kan ook lab data krijgen van PageSpeed Insights.

Verschillende tools om de belangrijkste webwaarden van google te meten

Hoe verbeter je Core Web Vitals

Het SEO landschap is dynamisch en verandert altijd, dus we moeten onszelf constant aanpassen en meeveranderen. Maar hoe omarmen we die verandering en verbeteren we onze websites ook daadwerkelijk?

In het artikel “Hoe optimaliseer je Core WEb Vitals voor WordPress” gaan we in detail in op hoe je voor Core Web Vitals kan optimaliseren. We focussen ons specifiek op hoe je een hogere ranking voor websites kan halen die gebouwd zijn in WordPress. Hier is een kort overzicht:

WordPress is een populair Content Management System (CMS). Via Wordpress kan je makkelijk controle houden over je website. Het is daarentegen moeilijker om je site aan te passen en bij te werken voor een optimale SEO performance.

Daarom hebben we een aantal stappen opgesteld die je kan zetten om te effectief te optimaliseren.

  • Test op basis van je pagespeed inzichten
  • Check je hosting en PHP versie
  • Schoon je website op
  • Balanceer content
  • Gebruik een cache en optimalisatie plugin

Daarnaast stellen we je voor aan een paar handige tools die je kunnen helpen bij het optimaliseren van je WordPress website, en leggen we uit hoe je de optimalisatie plugins kan gebruiken om je workflow proces op te schonen. Dit alles versterkt de stabiliteit van je website, en versnelt de laadtijd.

Voor je begint met de verbeteringen, is het handig om te weten dat je goede SEO kan realiseren door te begrijpen hoe zoekmachines pagina’s ranken op basis van bepaalde zoektermen. Een zoekmachine is een bibliotheek die internetpagina's opslaat - je wilt op de plank staan die op oogniveau staat (de eerste pagina), waar mensen je gelijk kunne zien. Je kan dit resultaat bereiken door slim gebruik te maken van SEO.

Je voldoet makkelijker aan de Core Web Vitals als je het juiste website thema en de juiste website bouwer gebruikt. Voor WordPress websites helpen de tools op de site je tijd te besparen je site bij te werken voor nieuwe updates.

Bekijk de webinar

We weten dat dit allemaal heel technisch klinkt, maar als je een gebruikersvriendelijke mindset hebt, ben je al goed op weg. Met deze mindset als startpunt kan je beginnen je SEO te verbeteren.

Als je meer wil weten over Core Web Vitals en hoe je je content kan ontwikkelen, bekijk dan onze webinar. We leggen je alles wat je moet weten over Core Web Vitals uit, en geven je advies hoe je je website kan optimaliseren.

Bob Hardus en Marco Genaro Palma, experts in SEO en webontwikkeling, spraken op onze webinar om hun ervaringskennis en optimalisatie tips te delen. Met behulp van onze experts leiden we je stapsgewijs door het proces om je website te optimaliseren.

Conclusie

Hopelijk heeft dit artikel je geholpen beter te begrijpen waar Google's Core Web Vitals update over gaat, en heb je beter vat op de Page Experience Update.

Het is belangrijk om te onthouden dat wanneer je je website optimaliseert, je de focus op de gebruiker houdt.

Als je gebruikerservaring een prioriteit maakt, is dat al een stap in de juiste richting. Nu ben je klaar om te beginnen met je website opschonen, en kan je een aantal tests opzetten om te zien waar de problemen zitten. Schoon je website op om je van onnodige code en plugins die je laadsnelheid vertragen te ontdoen. Het helpt om regelmatig je website's snelheid, interactiviteit en stabiliteit te testen om te zien of er eventuele performance issues zijn.

Vergeet niet om gebruik te maken van de velddata analyse om te zien hoe je website het in de praktijk doet. Als je de basislijnen volgt, gaat je ranking na verloop van tijd geheid omhoog.

augustus 31, 2021
Terug naar top
Genaro Palma |  SEO Consultant at PRLab
SEO-adviseur bij PRLab

PR onder de knie krijgen: inzichten

Laat je communicatievaardigheden de vrije loop. Verken onze blog voor deskundige inzichten over PR, media, interne communicatie en digitale marketing
Lees meer
Amsterdam
Herengracht 252, 1016 BV, Amsterdam, Netherlands
+31 202 443 748
Austin
10900 Research Blvd Ste 160C, Austin, TX 78759, USA
+1 (831) 603-5485
Stockholm
Birger Jarlsgatan 57 C, 113 56 Stockholm, Sweden
+46 768 81 64 37
Munich
Schellingstraße 109a, 80798, Munich, Germany
+49 89 21530184
Logo van PRLab, tech PR-bureau in Amsterdam.
Ma t/m vrij: 09:00 - 17:00
Contacteer
PRLab | PR Agency - PR Firm
linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram