Web Vitals: hoe je met Google’s nieuwe webvitamines een gezonde website krijgt

Het optimaliseren van je website of webapplicatie gaat verder dan alleen de prestaties van je hostingomgeving. Steeds vaker wordt het belangrijk om een goede gebruikerservaring te leveren. Daarom introduceerde Google het initiatief Web Vitals, een soort handleiding inclusief metrics waarmee je kunt signaleren hoe goed jouw website of webapplicatie scoort op gebruikerservaringen. In dit artikel zoomen we in op de drie Google Core Web Vitals: Large Contentful Paint (LCP), First Input Delay (FID) en Cumulative Layout Shift (CLS).

Google’s missie

Het is geen geheim dat Google een van de grootste internetbedrijven ter wereld is. Hoewel het van oorsprong nog altijd een advertentiebedrijf is, heeft Google ook als missie om alle informatie ter wereld toegankelijk te maken voor iedereen. Hun meest bekende product, de zoekmachine, is daar misschien wel het beste voorbeeld van. Dankzij de zoekmachine van Google is het toegankelijker geworden om andere website (waar informatie op staat) te vinden.

Goed gevonden worden in Google betekent over het algemeen ook dat je beter scoort in de conversie op je website. Search Engine Marketing is de afgelopen decennia een begrip geworden waar veel bedrijven en professionals zich op hebben gestort. Iedereen probeert Google’s geheime algoritme uit te pluizen om daarmee een plek in de top tien te bereiken.

De laatste jaren zet Google steviger in op een paar zaken: toegankelijkheid en de gebruikerservaring. We hebben meer apparaten dan ooit tot onze beschikking en Google vindt dat website-eigenaren daar ook hun best voor moeten doen om informatie op die apparaten toegankelijk te maken. In hun algoritme zitten bijvoorbeeld verschillende factoren die de prestaties van een omgeving beoordelen. Heb je een snelle website? Dan heb je een grotere kans om goed te scoren in de zoekmachine.

Waarom zijn prestaties belangrijk?

Meestal resulteren langere laadtijden in een hoger bouncepercentage. Een bouncepercentage is het percentage unieke bezoekers dat na een eerste landing op de pagina direct vertrekt.

Google heeft diverse onderzoeken gedaan naar de relatie tussen laadtijden en bouncepercentages.

Als de laadtijd van een pagina langer wordt dan 3 seconden, dan vergroot dat bijvoorbeeld het bouncepercentage met 32%. Als die laadtijd zelfs langer is dan 6 seconden, dan wordt het bouncepercentage zelfs verhoogd tot 106%.

Er zijn ook andere onderzoeken die het effect van de prestaties van een webapplicatie in relatie brengen met conversie (= bijv. een aankoop of een offerte-aanvraag). Betere prestaties zijn ook beter voor je conversiepercentage.

Webprestaties optimaliseren met webvitaminen

Het optimaliseren van de prestaties is over het algemeen een technische expertise. Er komt veel bij kijken en er zijn vele metrics om op te sturen. Lees bijvoorbeeld onze blogposts over het optimaliseren van laadsnelheid, dan krijg je een globaal beeld van wat er bij komt kijken.

Google ziet echter ook in dat niet iedereen een ‘performance guru’ is of hoeft te zijn als zij een goede gebruikerservaring willen leveren aan de webbezoekers. Daarom hebben zij Web Vitals in het leven geroepen.

Web Vitals is een initiatief die bestaat uit een aantal metrics die site-eigenaren kunnen monitoren en verbeteren zodat zij een goede gebruikerservaring kunnen leveren. Er zijn drie Core Web Vitals: Large Contentful Paint (LCP), First Input Delay (FID) en Cumulative Layout Shift (CLS).

Core Web Vitals

De Core Web Vitals kun je het beste zien als een subset van alle webvitaminen die nodig zijn om je webpagina’s gezond te houden. De Core Web Vitals zijn geïntegreerd in veel Google tools (zoals Google Webmaster).

Elke Core Web Vital representeert een belangrijk onderdeel van de gebruikerservaring, volgens Google. Hoewel het er nu drie zijn, sluit Google meerdere webvitamines niet uit. Google zegt dat de webvitaminen bijvoorbeeld best kunnen evolueren naarmate ook de wensen en behoeften van gebruikers veranderen.

Voor 2020 en verder ligt de focus van de drie Core Web Vitals op:

  • Laadtijden
  • Interactiviteit
  • Visuele stabiliteit

Large Contentful Paint (LCP)

Deze metric gaat op het meten van laadprestaties van een website. Een goede LCP bestaat volgens Google binnen 2,5 seconden voordat een pagina als eerst is gelkaden.

First Input Delay (FID)

Deze metric meet de interactiviteit. Om een goede gebruikerservaring te presenteren, adviseert Google om een FID v an 100 miliseconden of minder te hebben.

Cumulative Layout Shift (CLS)

Deze metric meet de visuele stabiliteit. Om een goede gebruikerservaring voor te schotelen moeten paginas een CLS van minder dan 0.1 hebben.

Hoe kun je de Core Web Vitals checken?

Metrics voor de Core Web Vitals zitten in veel van de populairste Google tools.

Chrome User Experience report

Deze tool verzameld anonieme gebruikersdata voor elke Core Web Vital. Die data is dan vervolgens te gebruiken voor site-eigenaaren om te checken of hun prestaties in orde zijn. Hier hoeft de site-eigenaar geen handmatige handeling voor te doen.

PageSpeed Insights

De tool PageSpeed Insights analyseert alle content van een ingevoerde website, en laat daarna op basis van de Core Web Vitals zien waar er punten zitten om bijvoorbeeld snelheid te verbeteren.

Websites krijgen een score op basis van data van de afelopen 28 dagen:

  • 0 – 49: er valt nog veel te verbeteren
  • 50 – 89: er valt nog altijd iets te verbeteren
  • 90 – 100: dit ziet Google het liefst

Die score wordt zowel gemaakt voor mobiele apparaten als voor desktops.

Aan de hand van een handige calculator is wat de impact is als je een van de metrics met enkele milliseconden verbetert.

De PageSpeed Insights laat je zien waar kansen liggen in de optimalisering. Het geeft bijvoorbeeld tips om ongebruikte JavaScript en CSS te verwijderen of third-party code te verminderen.

Uiteraard heb je bij deze acties vaak wel een ontwikkelaar nodig, want die weet als het goed is exact welke punten er verbetert moeten worden.

Kleine kanttekening

het kan zijn dat je bijvoorbeeld slechts scoort voor je mobiele prestaties. Hoewel de meeste websites en webapps een mobile-first approach hebben, kan het raadzaam zijn om te dubbelchecken waar jouw verkeer het meest vandaan komt.

Als het aandeel van je mobiele verkeer groot is, dan is dit zeker een aandachtspunt om aan te werken. Voor veel (zakelijke) websites is het aandeel mobiel nog niet groter dan desktop. Neemt niet weg dat mobile altijd een belangrijke aandachtspunt zou moeten hebben in het verbeteren van je gebruikerservaring! Maar je kunt dat natuurlijk ook gefaseerd doen.

Core Web Vitals report

Deze ‘tool’ kun je vinden in Search Console en maakt gebruikt van de ‘field data’ van je website. In het rapport zie je de Core Web Vitals onder het kopje ‘Site-vitaliteit’ (of Site Vitality als je het in het Engels hebt staan).

Via de Search Console kun je ook aanstippen als je een probleem hebt verbetert.

Dat is gelijk ook het grootste verschil ten opzichte van PageSpeed Insights. De data is wat accurater en je kunt monitoring toepassen. Zo kun je checken of je doorgevoerde wijzigingen ook een verbetering zijn.

JavaScript API

Naast de standaardtools is er ook een web API beschikbaar waarmee de metrics inzichtelijk worden voor een manier die bij jouw organisatie past. Je kunt bijvoorebeld te metrics meenemen in je bestaande monitoringsystemen. Google heeft diverse handleidingen geschreven hoe je die API’s integreert in je technologiestack naar keuze.

De toekomst

De komende jaren zal Google waarschijnlijk meer Web Vitals introduceren, omdat gebruiksvriendelijkheid ook regelmatig verandert. We gaan het voor je in de gaten houden!

Wil je een keer sparren over de prestaties van jouw website, webshop of webapplicatie? Neem dan contact met ons op. True is specialist op grote webomgevingen en biedt diverse managed hosting diensten aan. Samen zorgen we ervoor dat je website optimaal presteert. Ga naar Managed Hosting voor meer informatie.

Kilian Drewel
Techblogger

schrijf je in voor de nieuwsbrief

Ontvang de nieuwste blogs van True elke twee weken in je mail

Cloud - 13.08.2020

Wanneer de populariteit van je website, webshop of webapplicatie groeit krijg je te maken met nieuwe technische uitdagingen. Je gehoste applicatie moet om kunnen gaan met meer verkeer (load), het verminderen van downtime en het elimineren van ‘single points of failures’. Met High Availability (HA), een manier om je infrastructuur in te richten, kun je […]

Cloud - 03.08.2020

Het is geen geheim dat de laadsnelheid van je website nog altijd een belangrijke factor is voor het succes van je online business. Snel ladende webpagina’s hebben een betere gebruikerservaring, meer bezoekers en betere conversies. Welke factoren spelen een rol in de snelheid van je webomgeving? En hoe kun je deze in jouw voordeel gebruiken. […]

Cloud - 12.06.2020

De complete gids over (managed) hosting 📖 Leestijd: 15 minuten In dit artikel staan we uitgebreid stil wat hosting is en specifiek wat managed hosting is. Je leest wat hosting is, welke vormen er zijn, wat een hostingprovider doet en wanneer managed hosting voor jouw bedrijf relevant kan zijn. Na het lezen van dit artikel […]

Blijf op de hoogte en schrijf u in voor onze nieuwsbrief
Schrijf u in voor de nieuwsbrief

Vraag offerte aan

Vul onderstaand formulier in. True neemt zo snel mogelijk contact met u op.