Core Web Vitals

Wat zijn Core Web Vitals?

Core Web Vitals zijn metrics gemaakt door Google om de gebruikerservaring op websites te verbeteren. De grote verscheidenheid aan tools die beschikbaar zijn om laadsnelheid te analyseren is een van de factoren die Google in overweging heeft genomen bij het verenigen van al deze metrics, om de complexiteit die met het optimaliseren van laadtijden gemoeid gaat een beetje te vereenvoudigen. Dit initiatief heeft tot doel ons te laten focussen op deze "kwaliteitssignalen" die zo belangrijk zijn voor het bereiken van een optimale gebruikerservaring.

Google vat in een paar woorden samen waarop de Core Web Vitals zich richten:

• ›

  Laadervaring

• ›

  Interactiviteit

• ›

  Visuele stabiliteit van paginacontent

Largest Contentful Paint of LCP

De LCP of Largest Contentful Paint is een metric die ons de laadtijd vertelt voor het "grootste" stuk content dat zichtbaar is voor de gebruiker om beschikbaar en bruikbaar te zijn. Met andere woorden, Google zegt dat de elementen die in wat we kennen als "Above the Fold" zijn geplaatst snel moeten laden en leesbaar moeten zijn, en dus beschikbaar moeten zijn voor de gebruiker zodat hij ermee kan interageren.

Het moet duidelijk zijn dat de elementen die verschijnen wanneer de gebruiker op het scherm klikt of scrolt, de LCP niet beïnvloeden. De grootste content kan een tekstblok, een video, een afbeelding, etc. zijn.

LCP-statusclassificatie volgens tijden. Afbeelding © web.dev

Welke tijd beschouwt Google als optimaal?

Zoals we in de grafiek kunnen zien, beschouwt Google dat de maximale tijd om de LCP te laden en een goede gebruikerservaring te bieden onder de 2,5 seconden is. Het is belangrijk op te merken dat tijdens het laden het LCP-element kan veranderen.

Hoe kom ik achter de LCP van een URL?

In de Chrome-browser zelf, via het uitvoeren van een Lighthouse-audit, hebben we de optie om te ontdekken wat Google beschouwt als de grootste content om te laden. Hier is hoe:

Welke factoren kunnen de LCP-laadtijd beïnvloeden?

Verschillende acties beïnvloeden of de LCP-laadtijd hoger is dan verwacht. Deze elementen of acties zijn:

• ›

  Serverrespons

• ›

  Database queries

• ›

  API responses die tijd kosten om op te lossen

• ›

  CSS of JS die rendering blokkeert

• ›

  Traagheid in het laden van andere resources

• ›

  Niet-geoptimaliseerde afbeeldingen

• ›

  Etc.

First Input Delay of FID

De FID of First Input Delay is een metric die aangeeft hoe lang de pagina erover doet om te reageren wanneer de gebruiker met een van de elementen interageert.

Metrics genomen uit Pagespeed

In de Pagespeed-tool, die Google enige tijd geleden voor iedereen beschikbaar heeft gemaakt, kunnen we de verwijzing naar deze metric zien. Waarden die als goed worden beschouwd, moeten onder de 100 ms zijn.

First Input Delay (FID) statusclassificatie volgens tijden. Afbeelding © web.dev

De belangrijkste oorzaken van problemen met deze metric (FID) komen voort uit de uitvoering van JavaScript, dus we zouden moeten identificeren welk deel van de code ervoor zorgt dat de pagina tijd nodig heeft om te reageren op interactie. Ik heb dit probleem persoonlijk ervaren met advertentie-JS-loads.

Cumulative Layout Shift of CLS

De Cumulative Layout Shift is een metric die limieten stelt aan het laden van elementen die de weergave wijzigen terwijl ze laden. We hebben het over het bieden van stabiliteit aan de elementen op het scherm zodat de weergave niet verschuift terwijl andere resources laden.

Google vindt (nou ja, Google en elke gebruiker) dat het heel vervelend is dat, wanneer we zijn begonnen met het interageren met een pagina (of het nu lezen, scrollen, etc. is), een element dat later laadt de positie van de gebruiker ten opzichte van de content verschuift, waardoor hij gedwongen wordt te corrigeren door te scrollen.

Dit voorbeeld helpt ons beter uit te leggen hoe deze metric werkt. Eerst zien we de geladen content aan de linkerkant. Wanneer Google over stabiliteit spreekt, verwijst het naar het feit dat het laden van een derde element de eerder geladen elementen niet verschuift. Zoals we in de afbeelding aan de rechterkant zien, heeft het laden van de YouTube-video de twee blokken die in eerste instantie waren geladen, verschoven.

Waarom zijn Core Web Vitals belangrijk?

Sinds we coexisteren met zoekmachines, en meer specifiek met Google, heeft Google verplichtingen ingebouwd voor iedereen die een website heeft en wil dat deze een van de opties is in zoekresultaten.

Het verbeteren van toegankelijkheid vanaf alle apparaten, het bevorderen van veilig surfen onder een beveiligingsprotocol, of het bestraffen van websites die invasieve advertenties (interstitials) gebruikten, zijn enkele van de strijden van de techgigant geweest.

Deze metrics zijn indicatoren die Google ons geeft om aan te geven welke delen van de website een probleem kunnen zijn voor de gebruiker, maar... Betekent dat dat ze belangrijk zijn?

Of we websites nu vanuit een "robots"-oogpunt of vanuit een "gebruikers"-oogpunt begrijpen, deze metrics zijn indicatoren dat onze websites niet zo goed werken als ze zouden moeten. We hebben in verschillende studies al gezien hoe invloedrijk laadtijd is op conversie en op het geduld van gebruikers. Ze beïnvloeden momenteel geen rankings, maar gaan we deze metrics negeren?

Voor ons deel zullen we zeker rekening met ze houden.

Beïnvloeden Core Web Vitals rankings?

Tot op heden weten we alleen dat metrics voor het verbeteren van de gebruikerservaring steeds belangrijker worden, en sommige worden al meegenomen in zoekresultaten. In het artikel van 28 mei op de Google blog werd aangekondigd dat in 2021 wordt verwacht een nieuwe Update uit te rollen om verschillende metrics gerelateerd aan gebruikerservaring op te nemen.

We hoeven alleen maar te onthouden hoe het de Mobile First Index en de eerdere meldingen heeft afgehandeld. In dit geval, opnieuw verwijzend naar het artikel van mei, waarschuwt het dat er een voorafgaande melding van minstens 6 maanden zal zijn, dus... Komt er een update tegen het einde van volgend jaar?

Tools om Core Web Vitals te optimaliseren

Nu we hebben gesproken over wat Core Web Vitals zijn en het belang dat ze de komende maanden zullen hebben, is het tijd om aan de slag te gaan met het optimaliseren van deze metrics. Via verschillende tools kunnen we de problemen aanpakken die worden gedetecteerd en een prestatieverbetering bereiken.

Lighthouse

Lighthouse is een krachtige open-source tool die we vinden in Chrome. Via Lighthouse kunnen we onze website auditen, verschillende tests uitvoeren om resultaten te krijgen over de tekortkomingen of delen van de pagina die geoptimaliseerd moeten worden. Onder deze delen vallen de Core Web Vitals metrics.

Afbeelding genomen uit de resultaten van een Lighthouse-audit

Page Speed Insights

Page Speed Insights is een andere optie die Google ons biedt om de prestatiegegevens van onze website te verkrijgen. Deze tool toont ons zelfs grafieken van de belangrijkste metrics en hun status. Page Speed Insights is gebaseerd op een rapport over gebruikerservaring waarvan het doel is om data te verkrijgen in vergelijking met andere websites.

Metrics aangeboden door Page Speed Insights

Chrome UX

Chrome User Experience Report is een set data die Google biedt over het gedrag van gebruikers wereldwijd via Chrome. Om toegang tot deze data te krijgen, moet je Big Query gebruiken en een Google Cloud-account hebben.

Via Google Data Studio hebben ze de toegang vergemakkelijkt en alles half-klaar voor ons in dit Dashboard

Chrome Dev Tools

We kunnen Core Web Vitals metrics niet alleen analyseren met Lighthouse; als we duiken in de developer tools van Chrome, kunnen we tot dezelfde conclusies komen. Bijvoorbeeld, in het tabblad "Performance", als we een opname maken of een nieuwe load, kunnen we waardevolle informatie krijgen over hoe onze URL zich gedraagt.

Screenshot genomen in de Performance-optie van Chrome Dev Tools

Web.Dev

Er is altijd een eenvoudigere manier om dingen te doen, tenminste als het gaat om het kennen van onze Core Web Vitals. Op de officiële website hebben we een pagina die elke metric in detail beschrijft en ons een uitleg geeft van wat het is en praktijken om het te verbeteren.

Daarnaast hebben we in de Chrome Store een extensie die ons deze informatie geeft bij het binnengaan van elke URL:

Met een rode of groene aanduiding kunnen we de status van onze URL met betrekking tot deze metrics zien:

Screenshot van de resultaten van de Web Vitals extensie

Search Console

Search Console is een onmisbare tool voor elke webmaster. Er is een functie toegevoegd die ons helpt te zien welke URL's problemen hebben met deze 3 metrics (LCP, FID en CLS). In het linkermenu hebben we de optie "Core Web Vitals". Wanneer we deze optie kiezen, verschijnen er twee grafieken die de resultaten van URL's per apparaat tonen. Als we het apparaat kiezen (desktop of mobiel), zien we in detail welke URL's problemen hebben.

Schrik niet als je een groot aantal URL's aan de rechterkant ziet; dit is relatief normaal, aangezien problemen meestal optreden per paginatype (bijvoorbeeld blogposts) en aan een ervan werken zal ons de verbetering over allemaal opleveren.

Conclusies

Deze rondreis door Core Web Vitals heeft tot doel ons kennis te laten maken met metrics die steeds prominenter zullen worden, en wij, of we nu SEO's of webmasters zijn, gaan ermee leven. Vanuit SEOcrawl willen we je aanbevelen om gebruik te maken van al deze tools die we je hebben gegeven, die je ongetwijfeld zullen helpen de WPO-prestaties van je website te verbeteren.

*Accepteer je de uitdaging om de snelheid van je site te verbeteren? Voer een test uit met een van de tools die we hebben genoemd en stuur ons een bericht met een screenshot. We geven je een tip om het volledig gratis te verbeteren! *