Web Vitals is een belangrijke aankondiging van Google hoe ze uw WordPress website meten en met welke indicatoren.

Wat zijn Google Core Web Vitals?

Web Vitals is een aankondiging van Google om een kijkje te nemen in hun topgeheime rankingalgoritme om te zien hoe ze je WordPress website meten voor een van hun belangrijkste website kwaliteitsindicatoren:

• Gebruikerservaring
• Snelheid en laadtijd van webpagina’s

Met Web Vitals specificeert Google een set van 3 prestatiemaatstaven om hun Core Web Vitals te vormen, die ze gebruiken om een oordeel te vellen of uw website een goede gebruikerservaring heeft of niet.

Google Core Web Vitals is het nieuwe meetsysteem van Google om je website te analyseren. Je score hierin is van doorslaggevend belang voor je positie in Google. Zorg dat je dit goed geregeld hebt.

Google specificeert ook een paar leidende indicatoren in de Web Vitals specificatie die niet zijn geclassificeerd als “core”. Google promoot het belang van website snelheid sinds hun oprichting, dus geen verrassing hier. Echter, dit is de eerste keer dat ze de gebruikerservaring meten

Dit is een enorme verbetering, want tot voor kort, je moest zwoegen door de vele (soms tegenstrijdige) informatie over het onderwerp. Hoewel het snel maken van een commerciële website nog steeds een uitdaging kan zijn, heb je nu in ieder geval wat richtlijnen over waar je moet beginnen.

---

Wat moet je weten over Web Vitals?

De kern van Web Vitals richt zich op drie eenvoudige UX-kenmerken van een pagina:

• Laadtijd
• Interactiviteit (d.w.z. paginareactievermogen)
• Stabiliteit van de visuele pagina

De wiskunde achter de statistieken kan lastig zijn, maar als je begrijpt wat ze proberen te bereiken, kan dat de zaken vereenvoudigen.

De kerncijfers van Web Vitals zijn als volgt:

• Grootste Contentful Paint (LCP)
• Eerste invoervertraging (FID) / Totale blokkeringstijd (TBT)
• Cumulatieve Layout Verschuiving (CLS)

Deze kernwebvitalen zijn uitkomstmaten en een combinatie van andere kengetallen kan worden gebruikt als voorlopende indicatoren om de gebruikerservaring bij een verandering te voorspellen.

Core Web Vitals meten

Je kan de Core Web Vitals meten. Hieronder zie je een voorbeeld van een website die we onlangs geoptimaliseerd hebben. Zoals je op de meetresultaten ziet is de snelheid verdubbeld en is de score van de core web vitals groen en binnen de gestelde waarden. Bekijk de resultaten voor en na optimalisatie:

Lees meer over optimalisatie voor snelheid:

---

Wat is Largest Contentful Paint (LCP)?

Largest Contentful Paint (LCP) meet de laadtijd van pagina’s zoals die door gebruikers wordt ervaren. De Largest Contentful Paint (LCP) metric rapporteert de rendertijd van het grootste inhoudselement dat zichtbaar is binnen de viewport.

Het doel van LCP is om te meten hoe lang het duurt voordat de belangrijkste inhoud van de pagina wordt weergegeven in de browser van de gebruiker, met de nadruk op de waargenomen ervaring van de gebruiker in plaats van een lange lijst van metrieken die verschillende stappen van het laadproces meten.

Wat is First Input Delay (FID)?

First Input Delay (FID) meet de reactie van de pagina op invoer door de gebruiker. FID meet de tijd tussen het moment waarop een gebruiker voor het eerst interactie heeft met een pagina (d.w.z. wanneer hij op een koppeling klikt, op een knop tikt of een aangepast, door JavaScript aangestuurd besturingselement gebruikt) en het moment waarop de browser daadwerkelijk op die interactie kan reageren.

Dit is belangrijk omdat zelfs zeer kleine vertragingen zeer frustrerend kunnen zijn voor gebruikers. Let op, voor testdoeleinden wrdt de Total Blocking Time (TBT) gebruikt als een alternatief voor het meten van FID.
Total Blocking Time (TBT) en het meten van FID.

Wat is Cumulatieve Layout Verschuiving (CLS)?

Cumulative Layout Shift (CLS) meet de stabiliteit van de pagina. CLS is gebaseerd op een formule die bij elkaar optelt hoe vaak de onderdelen op de pagina bewegen of “verschuiven” terwijl de pagina wordt geladen. Minder verschuivingen zijn beter.

We hebben allemaal wel eens frustrerende ervaringen gehad met WordPress websites die rondsprongen terwijl de pagina aan het laden was. De pagina mag dan wel klaar zijn voor interactie, maar als elementen rondspringen, is dat slecht voor de gebruikerservaring.

---

Hoe verbeter ik mijn web vitals?

Hoewel de technieken om de webvitaliteit van uw WordPress website te verbeteren technisch complex kunnen zijn, is het proces relatief eenvoudig. Hier volgen enkele richtlijnen hoe u actie kunt ondernemen om een impact te hebben op de Core Web Vitals-metingen van uw WordPress website.

Laat uw gebruikers uw acties leiden

Kijk naar uw analyses om uw belangrijkste pagina’s te identificeren en begin daar. De eerste landingspagina’s en kerngebruikersstromen zijn vaak de plek om te beginnen.

Optimaliseer voor visuele stabiliteit en interactiviteit

Wacht met het uitvoeren van niet-essentiële JavaScript-onderdelen tot de pagina stabiel is voor de gebruiker. Een marketingtag hier, een aangepast lettertype daar zijn vaak goede ideeën in het luchtledige, maar ongeacht wat de tagleveranciers u beloven, elke tag voegt een beetje overhead toe aan uw WordPress website. De browser moet elk bestand één voor één downloaden, verwerken en renderen. Mensen zijn vaak verbaasd over hoeveel tijd het kost om al hun extra JavaScript-bestanden te verwerken. Besteed wat tijd aan het onderzoeken van je waterval om meer te weten te komen.

Serveer kleinere inhoud met CDN

Gebruik een CDN, bij voorkeur een met functies voor afbeeldingenbeheer die geoptimaliseerde inhoud voor elk apparaat serveert. Controleer vervolgens voortdurend of het CDN op de juiste manier wordt gebruikt en geconfigureerd.

Test en bewaak

In de loop der tijd hebben ontwikkelhacks en hard gecodeerde afbeeldingen de neiging om het CDN te omzeilen en de gebruikerservaring te schaden. Marketingteams vinden altijd de volgende JavaScript-tag om op de WordPress website te zetten. De eenvoudigste manier om een prestatieprobleem op te lossen, is om te voorkomen dat het zich voordoet door testen in test en pre-productieomgevingen.

Tools die Core Web Vitals ondersteunen

De ondersteuning voor tools is nog steeds zeer beperkt omdat Web Vitals zo nieuw zijn, maar Google heeft Core Web Vitals-ondersteuning toegevoegd aan een aantal van hun tools zodat u deze metriek kunt bekijken voor testen. De Webpagetest gemeenschap heeft ook metrische ondersteuning toegevoegd in hun tests. Commerciële platforms zoals Splunk Synthetic Monitoring zorgen voor meer controle en de mogelijkheid om UX best practices in een organisatie te stimuleren.

Beperkingen van Web Vitals

Hoewel het een fantastische indicator voor gebruikerservaring is, moet u niet vergeten dat Google Web Vitals in de eerste plaats heeft gemaakt voor landingspagina’s van Google. Er bestaan veel scenario’s waar het meten van digitale ervaring een andere aanpak vereist.
Enkele voorbeelden:

Gedragstromen in meerdere stappen

Gedragsstromen of gebruikersstromen zijn vaak cruciaal voor het succes van een webapp (bijv. checkoutstromen, aanmeldingen, webapp-transacties, enz). Als u dergelijke kernstromen hebt, zult u waarschijnlijk wat gebruikersstroommonitoring moeten doen om het volledige beeld van de gebruikerservaring te testen.
Meer over gedragsstromen

Single Page Apps

Core Web Vitals-metriek is inherent gericht op het laden van afzonderlijke pagina’s. Als u SPA-frameworks gebruikt, hebben uw gebruikers interactie met één pagina in plaats van dat er nieuwe pagina’s worden geladen. U moet dus uw eigen timings maken of iets als Business Transactions gebruiken om de gebruikerservaring van deze apps te begrijpen.

Web Service API’s

Web services renderen meestal niet in pagina’s, dus benchmarking zal meer gericht zijn op functionele beschikbaarheid, TTFB, en asset downloadtijden. Meer informatie hierover is te vinden in deze gids voor het monitoren van API’s op prestaties.

Mobiele apps en andere thick clients

Deze vereisen heel andere instrumentatie om de prestaties te meten. Er zijn natuurlijk beperkingen aan de metriek die u kiest, dus beschouw Web Vitals als een belangrijk onderdeel van een meer holistische monitoringstrategie.

Alle meeteenmethodes naast Web Vitals

Naast de kerncijfers van Web Vitals zijn er aanvullende statistieken die dienen als “leidende indicatoren” die zeer nuttig kunnen zijn.

Tijd tot eerste byte (TTFB)

Meet de reactiesnelheid van webservers. Driver van LCP.

First Contentful Paint (FCP)

Helpt vaststellen of er renderblokkerende bronnen zijn die het laden van de pagina vertragen. Stuurprogramma van LCP.

Tijd tot Interactief (TTI)

Meet de tijd vanaf het moment dat de pagina begint te laden tot het moment dat de pagina in staat is snel en betrouwbaar te reageren op invoer van de gebruiker. Key driver van FID.

Uitgebreide handleidingen over Web Vitals

Conclusie Google Web Vitals

Over het geheel genomen is de aankondiging van Google van Web Vitals best opwindend en de aanpak van Google doet goed werk bij het vereenvoudigen van het genuanceerde onderwerp dat gebruikerservaring is. Web Vitals zal echter veranderen en zich aanpassen. Google is momenteel bezig met hun 6e versie van hun Lighthouse Score. Deze is nu gedreven door Web Vitals en Google stelt openlijk dat Web Vitals zal veranderen in de toekomst.
Handleiding Lighthouse Score

Meer handleidingen over snelheid WordPress website

• GTMetrix analyse snelheidstest handleiding WordPress
• Webruimte opslagruimte dataverkeer traffic hosting server
• Tips WordPress onderhoud website snelheid beveiliging
• Gemiddelde paginagrootte gewicht webpagina kb mb
• Website sneller maken met 7 Beste WordPress plugins
• PHP laatste versie WordPress voor veiligheid & snelheid

Vraag om professionele hulp

Prestatie-optimalisering kan een ontmoedigende taak zijn. Als u op zoek bent naar meer hulp, neem dan contact op of volg een WordPress SEO cursus of training. CursusWP helpt al sinds 2010 WordPress websites sneller te maken en is u graag van dienst.

---

Nog een voorbeeld van optimalisatie snelheid

Nog een voorbeeld van optimalisatie snelheid van een WordPress website voor een opdrachtgever. Bekijk de testresultaten voor en na optimalisatie: