Wat is First Input Delay (FID), en hoe verbeter je het?

We hebben het over First Input Delay (FID) #

First Input Delay is een Google Core Web Vitals metric die zoekmachines gebruiken om webpagina's te rangschikken. Zoekmachines willen gebruikers precies geven wat ze zoeken. Hoe beter een pagina aansluit op de zoekopdracht én een prettige gebruikerservaring biedt, hoe hoger de pagina wordt geplaatst in de SERP. Die eerste indruk is bepalend. Laden afbeeldingen te traag? Reageren knoppen traag? Zijn er vervelende pop-ups die precies de tekst blokkeren die je wilt lezen? Als dat het geval is, verlaat de bezoeker de pagina direct en gaat terug naar de zoekresultaten. En hoe meer mensen bounchen, hoe lager een zoekmachine de pagina zal rangschikken.

Snelheid en interactiviteit, samengevat als Core Web Vitals, worden steeds belangrijker als maatstaf voor gebruikersvriendelijkheid. FID is een van die maatstaven. Anders dan hoe een gebruiker het design van een pagina waardeert, is FID goed te meten. Het gaat om de milliseconden die de browser nodig heeft om te reageren op een interactie van een gebruiker. Scrollen of zoomen tellen niet als interactie; klikken op een knop wel. En ter verduidelijking: met 'delay' bedoelen we echt alleen de vertraging. FID meet dus niet de tijd die de browser nodig heeft om de interactie te verwerken of de interface daarna te laden, want die stappen zijn altijd nodig, vertraging of niet.

Wat veroorzaakt First Input Delay? #

Waar zit die vertraging dan, als die niet in het verwerken van de interactie of het laden van de interface zit?

Het helpt om te begrijpen hoe een browser een pagina laadt en verwerkt. Stel: je zoekt biologische hondensnacks voor je viervoeter. Je hebt via Google een interessante pagina gevonden en klikt op de link. De pagina vraagt verschillende resources op: een headerafbeelding met een blije hond, een aantrekkelijke titel, een tekstblok, een menu met knoppen en een pop-up die je uitnodigt je e-mailadres achter te laten voor gratis hondentraining-tips. Zodra die resources zijn gedownload, verwerkt de main thread ze allemaal — totdat de hele pagina geladen is, met uitzondering van korte momenten waarop de main thread even niets te doen heeft. In de afbeelding hieronder zie je dit proces.

Stel dat je op een menuknop klikt die je naar de verkooppagina leidt. FID meet de tijd vanaf het klikken op de knop tot het moment waarop de browser begint te reageren — dus wanneer de browser begint te navigeren naar die pagina. Het is vergelijkbaar met het meten van de tijd tussen het aanbellen en het opendoen van de deur. Wacht je tot de main thread klaar is met al zijn werk, dan is de reactietijd minimaal. Hetzelfde geldt als je klikt tijdens een korte pauze van de main thread. Maar klik je op een knop terwijl de main thread midden in een taak zit, dan wordt je aanvraag in de wacht gezet. De FID stijgt, en je moet wachten. Geduld is een schone zaak, maar waarom geduldig zijn als je het proces ook gewoon kunt versnellen?

Waarom de eerste interactie meten, en niet de tweede of derde? #

Ten eerste is de responsiviteit van de browser op de eerste actie van een gebruiker bepalend voor de eerste indruk, en daarmee onvermijdelijk ook voor het beeld van de hele website of het merk.

Bovendien doen de grootste vertragingen zich voor tijdens het laden van de pagina, wanneer de main thread volop bezig is met taken en het laden van elementen. Dat is ook het moment waarop de eerste interactiviteit plaatsvindt. De aanbevelingen om deze vertraging te verhelpen zijn anders dan de oplossingen voor trage responsiviteit wanneer de pagina al geladen is. Om problemen gericht aan te pakken, bekijk je deze metrics apart.

Meten in het veld versus meten in het lab #

Er zijn twee manieren om websiteprestaties te meten: in het veld en in het lab. Met 'het veld' bedoelen we echte gebruikers die interacties hebben met je site. In het lab kun je alleen bestaande data en instellingen bestuderen. Core Web Vitals, inclusief FID, meet je alleen in het veld, want ze zijn volledig afhankelijk van echte gebruikersinteractie.

Voor labmetingen gebruikt Google momenteel zes metrics in hun Lighthouse Performance scoring. Omdat er geen echte gebruikersinput beschikbaar is, vervangt Google FID door Total Blocking Time (TBT), want beide metrics correleren sterk met elkaar. In plaats van de vertraging te meten, kijkt het lab naar de tijd dat de main thread geblokkeerd was — dat is iets wat gesimuleerd kan worden. We gaan hier niet dieper in op TBT, maar het is goed om te weten: heb je te weinig bezoekers om FID in het veld te meten maar zie je wel TBT-problemen, dan is het zinvol om die metric te verbeteren. Daarmee verbeter je hoogstwaarschijnlijk ook je FID.

Wat is een goede FID score? #

Voor een gebruikerservaring die zowel de bezoeker als de zoekmachine tevreden stelt, streef je naar een First Input Delay van 100 milliseconden of minder. Om te controleren of je deze drempel voor het grootste deel van je gebruikers haalt, hanteert Google het 75e percentiel van paginabezoeken, uitgesplitst naar mobiel en desktop.

• Goed: <= 100ms
• Verbetering nodig: > 100ms en <= 300ms
• Slecht: > 300ms

Tools om First Input Delay te meten #

Google en digitale experts bieden tools om website-eigenaren meer inzicht te geven in FID.

De eerste twee leveren velddata op basis van echte gebruikersinteracties:

• PageSpeed Insights
• Search Console (Core Web Vitals rapport)
• CrUX dashboard op Data Studio

De volgende twee bieden scores op basis van labdata:

• Chrome DevTools
• Lighthouse

Hoe verbeter ik FID? #

• Bij het optimaliseren van FID kun je je richten op de volgende aandachtsgebieden:
• Verbeter je CSS en code door deze te minificeren en te comprimeren.
• Optimaliseer je JavaScript (JS) code door:
• Overweeg de "idle until urgent" coderingstrategie.

Conclusie #

Een eerste indruk maak je maar één keer. Voor websites zijn snelle interacties cruciaal bij die eerste ontmoeting. Houd je First Input Delay onder de 100ms.

Na het lezen van dit artikel weet je meer over de voorkeuren van zoekmachines, main threads en biologische hondensnacks. Je weet hoe een browser je pagina laadt en welke tools je kunt gebruiken om je FID te verbeteren. Weet je niet zeker hoe je deze metric inzet om je ranking te verbeteren? Neem gerust contact met ons op voor begeleiding of advies.