Onder deze Core Web Vitals vallen de Largest Contentful Paint (LCP), First Input Delay (FID) en Cumulative Layout Shift (CLS). Ik zal per metric in een blog uitleggen wat deze Web Vital inhoudt en hoe je deze kunt optimaliseren. Dit is de tweede blog en deze gaat over de FID.

Wat is FID?

De First Input Delay is een van de drie metrics die Google zal gebruiken om de gebruiksvriendelijkheid van je website te bepalen. De FID doet dit door te meten hoe lang het duurt voordat de webpagina reageert op de eerste interactie van de gebruiker. Denk hierbij aan een bezoeker die als allereerste actie op een link klikt. Vervolgens wordt de laadtijd die de webpagina nodig heeft om te reageren op dit verzoek benoemd als de FID. Google geeft aan dat een goede FID score een reactietijd van 100 ms of korter is.

Het meten van de FID

Het meten van de FID gaat iets anders dan bij het meten van de LCP en CLS. Voor het inzien hoe jouw website scoort op de FID zal er field data nodig zijn. Oftewel, data die is verzameld van gebruikers op jouw website. Er moet namelijk eerst data beschikbaar zijn van gebruikers die daadwerkelijk interactie hebben gehad met jouw website. Je kunt deze field data inzien met de volgende tools:

Om een idee te krijgen hoe jouw website scoort op de FID zou je allereerst even een kijkje kunnen nemen in het site-vitaliteit rapport van de Google Search Console.

Mochten er hier groepen URL’s uitkomen waarbij de FID beter kan, dan is het goed om op dieper onderzoek uit te gaan met PageSpeed Insights (PSI). Door verschillende van deze URL’s door PSI heen te halen, krijg je een beter beeld van wat deze lage FID score veroorzaakt. Je kunt dit zien onder het kopje: ‘Lange taken in de primaire thread vermijden’. 

Onder dit kopje vind je de langste taken die het primaire thread (proces) als het ware vertragen. Deze taken dragen bij aan een andere metric, genaamd: Total Blocking Time (TBT). Dit is een Lab metric die als het ware meet hoeveel tijd er zich tussen de First Contentful Paint (FCP) en de Time to Interactive (TTI) bevindt. Dit is de tijd dat de primaire thread de gebruiker blokkeert om een interactie met de website te doen. Het is dan ook zo dat de TBT geoptimaliseerd moet worden om een betere FID score te krijgen.

Het optimaliseren van jouw website voor een betere FID

De grootste oorzaak van een slechte FID score is het uitvoeren van zware JavaScript. Het uitvoeren van JavaScript op het primaire thread zorgt er namelijk voor dat de browser niet kan reageren op de interactie van de gebruiker. Daarom zal ik in deze blog bespreken hoe je de JavaScript op jouw website kunt optimaliseren voor het verbeteren van de FID score.

Lange taken opbreken door het opsplitsen van JS

Lange taken zijn JavaScript uitvoering waardoor de primaire thread geblokkeerd wordt voor 50 milliseconden of langer. Deze zogenoemde lange taken zorgen er dus voor dat de website niet of langzaam reageert op de acties van de gebruiker. Je kunt door middel van Chrome DevTools inzien wat deze lange taken daadwerkelijk zijn. Een tip hierbij is om dit te doen in Incognito modus van de browser (zo voorkom je dat extensies en plugins invloed uitoefenen op het resultaat). Verder is de tool Webpagetest ideaal voor het vinden van lange taken in de zogenoemde Waterfall. 

Wanneer er op jouw website veel lange taken uitgevoerd worden bij het laden van een pagina, is het verstandig om te kijken naar het splitsen van JavaScript. Met het splitsen van JavaScript wordt eigenlijk bedoeld dat je bepaalde essentiële JavaScript-code eerst laadt en de minder belangrijke code later laadt door het gebruik van o.a. lazy loading. Je kunt dit doen door een module bundler te gebruiken die dynamisch importeren ondersteunt. Voorbeelden hiervan zijn Rollup, webpack en Parcel. 

Heb je dit gedaan? Controleer dan even met Lighthouse of PageSpeed Insights of de TBT minder is geworden. Is dit het geval? Dan is de kans groot dat jouw website beter gaat scoren op de FID.

JavaScript gedeeltelijk laden

Je kunt naast het splitsen van JavaScript code ook gebruik maken van het asynchroon laden van de code of het uitstellen ervan. Het uitstellen van de de scripts doe je door <defer> als attribuut te gebruiken. Dit zorgt ervoor dat het script in de achtergrond geladen wordt en pas geëxecuteerd wordt wanneer de pagina volledig wordt vertoond. 

Als je ervoor kiest om de code asynchroon te laden, doe je dit door <async> te gebruiken. Deze manier lijkt veel op het uitstellen van het JavaScript, maar werkt toch op een iets andere manier. Wanneer je scripts laadt met <async> zal het onafhankelijk en in de achtergrond laden en een kortere onderbreking veroorzaken bij de executie ervan. In dit geval wordt er niet gewacht tot de volledige pagina is geladen. Deze manier van laden is erg handig voor JavaScript dat niet in een bepaalde volgorde geladen moet worden. Denk aan bepaalde third party scripts, zoals de trackingcode van Google Analytics. Het zorgt ervoor dat deze stukjes code de primaire thread minder lang blokkeren.

Het juiste gebruik van <async> en <defer> zal ervoor zorgen dat bepaalde JS code de primaire thread niet of minder blokkeert. Uiteindelijk zal dit een positieve invloed hebben op je FID score.

Gebruik een web worker

Een web worker is simpel gezegd een stukje code dat ervoor zorgt dat JavaScript in de achtergrond geladen kan worden. Op deze manier zorg je er dus voor dat bepaalde JS code de primaire thread niet onderbreekt en de tijd tot interactie zal verkorten. Je kunt dus de web worker inzetten om het blokkerende JavaScript parallel van de primaire thread te laden. Let er hierbij wel op dat het JS dat je naar de web worker stuurt geen onderdeel is van je user interface. De web worker heeft namelijk geen toegang tot het DOM. 

Wanneer je een web worker inzet zorg je er dus eigenlijk voor dat de primaire thread vrij spel heeft en dat de Total Blocking Time zal verminderen. Ook dit werkt voor een betere FID score van jouw website.

Maak gebruik van modern code

Vaak wordt er bij het schrijven van JavaScript zogenoemde polyfills toegevoegd. Deze polyfills zorgen ervoor dat ook oudere browsers de code kunnen lezen. Dit is echter niet altijd relevant. Kijk daarom goed met welke browsers en versies de gebruikers voornamelijk je website bezoeken. Dan kun je daarna met een compiler zoals Babel alleen specifieke polyfills invoegen voor de browsers die jij wilt aanspreken. Dit scheelt weer tijd voor verwerken van het JavaScript en zal dus positieve invloed hebben op je FID.

Meer weten?

Wanneer je jouw website volledig hebt geoptimaliseerd met de bovengenoemde punten, kun je opnieuw een check doen met bijvoorbeeld PageSpeed Insights of Lighthouse om te zien of de TBT score verbeterd is. Vervolgens kun je met Google Search Console of het Chrome UX Report monitoren of de FID-score groen wordt.

Wil jij meer weten over de FID en de andere Core Web Vitals? Neem dan contact met ons op en een van onze specialisten helpt je graag verder!