De nieuwe Core Web Vital van Google: Interaction to Next Paint (INP)

‍

In 2020 introduceerde Google het Core Web Vitals-rapport om de gebruikerservaring van een website te meten. De Core Web Vitals bestonden destijds uit drie onderdelen: Largest Contentful Paint, First Input Delay en Cumulative Layout Shift. Op 12 maart 2024 is de First Input Delay (FID) vervangen door de Interaction to Next Paint (INP). De FID heeft een aantal beperkingen en daarom heeft Google INP geïntroduceerd. In dit blog lees je wat de Interaction to Next Paint is, waarom het vervangen is en hoe je hierop als bedrijf kunt anticiperen. 

Welke Core Web Vitals zijn er?

De Core Web Vitals zijn in 2020 bedacht door Google LLC om de gebruiksvriendelijkheid van je website te beoordelen. Er zijn drie elementen die worden meegenomen in deze beoordeling. Hoe hoger je website scoort op elk onderdeel, hoe beter de gebruikerservaring is. 

• Largest Contentful Paint (LCP) geeft aan hoelang het duurt totdat het grootste element op je pagina is geladen. Dit kan een afbeelding, video of tekstblok zijn. Voor een goede gebruikerservaring wil je een LCP hebben van maximaal 2,5 seconden.;
• First Input Delay (FID) meet hoelang het duurt totdat de pagina reageert op een interactie van een gebruiker. Een interactie is bijvoorbeeld het aanklikken van een knop of link. De FID heeft een goede score als het minder dan 100 milliseconden duurt;
• Cumulative Layout Shift (CLS) verschuift elementen zoals afbeeldingen en tekstblokken wanneer een pagina nog laadt. De CLS meet hoelang deze verschuivingen duren. In een ideale situatie wil je een CLS-score hebben van maximaal 0.1. 

‍

Wat is Interaction to Next Paint?

De Interaction to Next Paint meet de tijd vanaf het moment dat er een gebruikersinteractie plaatsvindt, zoals het klikken op een link of knop, tot het moment dat de interactie heeft plaatsgevonden. Als je bijvoorbeeld de letter ‘a’ in een zoekbalk typt, hoelang duurt het dan tot je die letter ook echt ziet? Duurt dit erg lang, dan zal een gebruiker dit als irritant ervaren en de website verlaten. 

Een interactie hoeft overigens niet alleen het klikken van een link of het intypen van een toets te zijn. Ook gebeurtenissen die door JavaScript of CSS worden ingeladen, zijn interacties. JavaScript is een computertaal die wordt gebruikt om webpagina’s interactief te maken. CSS wordt vooral gebruikt voor het opmaken van pagina’s. Wanneer behaal je dan een goede score met INP? Een goede en snelle reactietijd is minder dan 200 milliseconden. Met een score tussen de 200 en 500 milliseconden is er verbetering nodig en met meer dan 500 milliseconden heeft jouw website een erg slechte reactietijd.

‍

‍

Waarom is de First Input Delay vervangen door de Interaction to Next Paint?

Om te begrijpen waarom de First Input Delay is vervangen door de Interaction to Next Paint is het belangrijk om de verschillen te weten. Ten eerste meet de FID alleen hoelang het duurt tot de pagina reageert op een interactie. Het woord ‘reageert’ is hierbij belangrijk, want dit betekent niet dat er visueel ook al iets zichtbaar is. De INP meet daarentegen hoelang het duurt totdat er visueel ook daadwerkelijk iets zichtbaar is. Daarnaast meet de FID alleen de eerste interactie en meet de INP alle gebruikersinteracties op een pagina. 

Bij de FID gaat het dus alleen om het reageren op de eerste interactie en wordt de gebruiker eigenlijk buiten beschouwing gelaten. Als de reactie snel is, maar het duurt alsnog lang om de gehele interactie te laden, haakt de gebruiker al af. De gebruiker ziet op dat moment namelijk niet visueel dat de interactie heeft plaatsgevonden. De Interaction to Next Paint is daarom een betere statistiek om de gebruikerservaring te meten en zal ook waardevollere informatie geven. Ondanks dat de INP de gebruikerservaring beter kan meten dan de FID, heeft ook deze statistiek zijn beperkingen. Als de gehele pagina snel laadt, maar er is één interactie een stuk trager, geeft de INP nog steeds een slechte score weer. 

‍

Hoe kun je de Interaction to Next Paint verbeteren?

Voordat je de Interaction to Next Paint kunt verbeteren, moet je eerst weten wat er goed of fout gaat op de pagina. Je hebt verschillende tools en mogelijkheden om de INP te meten. Dit kan onder andere via tools zoals GTMetrix, Lighthouse, Pagespeed Insights of de Google Web Vitals Extensie. Deze tools geven de INP-score weer en geven je aanbevelingen voor het verbeteren van deze statistiek. Verder heeft Google ook een rapport toegevoegd in Google Search Console, zodat je precies kunt zien welke pagina’s goed of juist slecht scoren. Als laatste heb je de mogelijkheid om een Real User Monitoring (RUM) provider te gebruiken. Hierin worden alle gebruikersgegevens verzameld, dus ook alle interacties op een website. Hierdoor heb je een duidelijk overzicht welke interacties voor een slechte INP-score zorgen.

Nu je inzicht hebt in de INP-scores is de volgende stap om dit te gaan optimaliseren. Er zijn verschillende manieren om dit te doen:

• Beperk en optimaliseer (niet-)gebruikte JavaScript en CSS: bekijk welke JavaScript- en CSS-codes op je website essentieel zijn en welke bestanden je kunt minimaliseren, verwijderen of samenvoegen;
• Comprimeer grote afbeeldingen: maak het bestand kleiner, zodat afbeeldingen sneller laden;
• Pas lazy loading toe: zorg ervoor dat afbeeldingen of andere media pas laden, als de gebruiker naar het deel van de afbeelding gaat waar dit element te zien is;
• Houd de reactietijd van de server kort: implementeer caching of gebruik een Content Delivery Network (CDN);
• Reactietijd van belangrijkste elementen kort houden: zorg dat de belangrijkste elementen op je pagina (boven de vouw) zo snel mogelijk laden, zodat gebruikers deze direct zien;
• Testen, testen en testen: blijf constant je website testen in verschillende tools om in te zien welke interacties zorgen voor een lage INP-score.  

‍

‍

Waar moet je als bedrijf op letten?

De Core Web Vitals zijn belangrijk voor alle aspecten van online marketing. De gebruiksvriendelijkheid van je website wordt steeds belangrijker voor Google en daarom wil je dit als bedrijf constant blijven verbeteren. Je wilt de score van je Core Web Vitals hoog houden, omdat het invloed heeft op je Google Rankings. Als de kwaliteit van je pagina goed is, heb je een grotere kans om bovenaan in de zoekresultaten te verschijnen. Gebruikers zullen daarnaast op een snelle website minder vaak afhaken en sneller converteren. De kwaliteitsscore van je pagina is ook weer belangrijk voor je advertentiekosten. Hoe beter de gebruiksvriendelijkheid, hoe hoger de kwaliteitsscore en hoe lager de advertentiekosten. Andersom moet je dus meer betalen om te worden vertoond als je kwaliteitsscore laag is. 

‍

Hoe kunnen wij helpen om de gebruikerservaring op je website te optimaliseren?

Ben jij er klaar voor om de gebruikerservaring op je website te verbeteren, maar wil je graag dat er iemand meekijkt? Bij Semwerkt helpen we je graag verder om niet alleen beter te scoren op de Core Web Vitals, maar ook op andere onderdelen van gebruiksvriendelijkheid. Neem contact op met onze specialisten via ons vaste nummer +31 (0)229 763 561 of via info@semwerkt.nl.

‍