First Input Delay is een essentiële metriek om uw webpagina te volgen en te verbeteren.
Het bieden van een snelle gebruikerservaring aan uw websitebezoekers is cruciaal voor het succes van uw site. Maar hoe weet u of uw site de juiste snelheden haalt?
Daar komt First Input Delay (FID) om de hoek kijken.
In dit bericht leggen we uit wat FID is, hoe je het meet en wat een goede FID-score is. We onthullen ook enkele manieren om je FID te optimaliseren voor betere resultaten.
Laten we beginnen.
Wat is First Input Delay (FID)?
First Input Delay (FID) is een statistiek voor webprestaties en gebruikerservaring die de tijd meet vanaf het moment dat een bezoeker voor het eerst een webpagina bezoekt tot het moment dat de browser de interactie begint te verwerken. Dit wordt soms ook wel Input Latency genoemd.
De eerste invoervertraging meet de tijd in milliseconden (ms).
Simpel gezegd is FID de vertraging tussen de gebruikersinteractie (wanneer u bijvoorbeeld op een link of een knop klikt of tikt) en het moment waarop de browser op uw actie reageert en deze begint te verwerken.
U kunt het vergelijken met het meten van de tijd vanaf het moment dat u bij iemand aanbelt tot het moment dat die persoon de deur opendoet.
Het belangrijkste om te weten over FID is dat Google het gebruikt als rankingfactor. Het is een van de Core Web Vitals , de statistieken die Google gebruikt om de kwaliteit van de gebruikerservaring op je site te bepalen en daarmee de pagerank.
Sterker nog, verbeteringen in de siteprestaties en gebruikerservaring leiden doorgaans tot meer conversies, verkopen en advertentie-inkomsten . Door uw FID aan te pakken, kunt u de frustratie die gebruikers kunnen ervaren tijdens het laden van uw pagina, overwinnen.
Dat is wat First Input Delay tot een van de meest opwindende webprestatie-indicatoren maakt - het is een van de puurste Echte gebruikersstatistieken, geen laboratoriumstatistieken. Deze kunnen niet worden gesimuleerd in een laboratoriumtest – er is echte gebruikersinvoer nodig om ze te kunnen meten. FID meet de daadwerkelijke ervaring van echte gebruikers die uw pagina bezoeken.
Er zijn een paar dingen die van belang zijn bij het meten van First Input Delays.
FID meet alleen eindige interacties
De gebeurtenissen die als gebruikersinteracties tellen, moeten discreet of eindig zijn. Dat betekent dat het alleen iets mag zijn met een duidelijk begin- en eindpunt, zoals het tikken op een knop, het klikken op een link of het aanvinken van een selectievakje.
Doorlopende gebruikersinteractie, zoals scrollen op uw webpagina of zoomen, kunnen niet goed worden gemeten met deze metriek, omdat er geen respons van de site zelf wordt verwacht. Het doel van First Input Delay is om te meten hoe responsief een site is tijdens het laden.
Samenvattend: gebruikersinvoer bestaat uit klikken, niet uit scrollen.
FID meet alleen de eerste gebruikersinteractie
De eerste keer dat een gebruiker op uw pagina terechtkomt, is zijn of haar eerste indruk, en die eerste indruk is allesbepalend. Deze bepaalt hoe ze uw website ervaren en waarnemen (en dus of ze blijven of weggaan).
Het blokkeren van de hoofdthread van de browser gebeurt vooral in de eerste momenten van de levenscyclus van een pagina, omdat dan de kritieke bronnen worden geladen.
Door de First Input Delay te meten, kunt u ervoor zorgen dat de belangrijkste bronnen snel laden en dat uw website er niet log, traag of niet-reagerend uitziet.
De eerste invoervertraging is anders dan de tijd tot interactief
Time to Interactive (TTI) is een andere nuttige webprestatie-indicator, maar kan worden verward met First Input Delay.
TTI meet de tijd die nodig is om een pagina volledig interactief te maken, dat wil zeggen wanneer er al nuttige inhoud op de pagina wordt weergegeven, de gebruikersinteractie binnen 50 ms wordt verwerkt en gebeurtenis-handlers voor de meeste pagina-elementen zijn geregistreerd.
First Input Delay is niet hetzelfde. FID wordt gebruikt om de gebruikersinvoer te volgen die plaatsvindt voordat de pagina volledig interactief is. Een gebruiker kan bijvoorbeeld op een link klikken die verschijnt voordat event handlers voor de meeste pagina-elementen zijn geregistreerd. Met First Input Delay kunt u die vroege interacties vastleggen.
De oorzaak van de eerste invoervertraging
Er zijn een aantal verschillende factoren die de First Input Delay-metriek kunnen beïnvloeden:
Zware upfront JavaScript-payloads
Zware JavaScript-bundels zijn de belangrijkste oorzaak van lange vertragingen bij de eerste invoer, zowel bij de eerste payload als bij de doorlopende uitvoering.
Het kan lang duren voordat de browser deze bundels heeft verwerkt en geëvalueerd. De invoer is vertraagd omdat er moet worden gewacht tot de pagina alle gerefereerde JavaScript heeft geladen. Met andere woorden, als u veel afbeeldingen of scripts hebt die in een willekeurige volgorde laden, kan dit het hele proces vertragen en de reactie van de gebruiker vertragen.
Grote bundels worden meestal veroorzaakt door overmatige afhankelijkheden van derden of wanneer code wordt toegevoegd die niet nodig is voor de huidige pagina.
Het goede nieuws is dat u de grootte en complexiteit van de webpagina's kunt bepalen. U kunt met name bepalen hoeveel JavaScript uw website gebruikt.
Langlopende JavaScript
Er treden ook lange vertragingen op bij de eerste invoer, zelfs nadat alle JavaScript is geladen.
Waarom? Omdat elke langlopende taak in JavaScript op de hoofdthread wordt uitgevoerd en gebruikersinvoer wordt geblokkeerd totdat de taak is voltooid en de hoofdthread de invoer kan verwerken.
Dit probleem wordt veroorzaakt door slecht geoptimaliseerde code.
Snelheid en verwerkingskracht van het apparaat van de gebruiker
Dit kan gevolgen hebben voor uw FID, maar daar hebt u geen controle over.
Wat is een goede FID-score?
Onthoud dat FID wordt gemeten in milliseconden (ms), dus hoe lager je scoort, hoe beter. Je wilt geen lange invoervertragingen.
Volgens de FID-drempels in PageSpeed Insights:
- Een FID van 100 ms of minder is goed
- FID van tussen 100-300 ms moet worden verbeterd
- Een FID boven 300 ms is slecht.
Volgens onderzoek van NN Group is 0,1 seconde ongeveer de limiet voor de gebruiker om te voelen dat het systeem onmiddellijk reageert. Probeer je FID dus onder de 100 ms te houden.
In sommige gevallen kan uw FID onder de 100 ms liggen en als "goed" worden beoordeeld, maar kan de pagina nog steeds niet responsief aanvoelen. Dit komt doordat de browser nog steeds de taak moet uitvoeren die aan de gebruikersinvoer is gekoppeld, en dat wordt niet gemeten met FID.
Hoe meet u de First Input Delay op uw pagina?
Probeer deze hulpmiddelen om uw eerste invoervertraging te meten:
Ze meten allemaal FID, samen met tal van andere belangrijke statistieken. Welke u kiest, hangt dus af van de andere prestatiestatistieken die u wilt bijhouden en uw voorkeursmethode.
Laten we eens kijken hoe u de hulpmiddelen kunt gebruiken om FID te meten.
Chrome-gebruikerservaringsrapport
Als u vertrouwd bent met het gebruik van JavaScript, kunt u ook experimenteren met het Chrome User Experience Report (CrUX).
Het Chrome User Experience Report bevat gebruikerservaringsstatistieken over hoe gebruikers in de echte wereld uw website ervaren.
Het Public Google BigQuery-project verzamelt gebruikerservaringsgegevens per bron, indien bekend bij de webcrawlers van Google, en verdeelt deze over meerdere dimensies. Om toegang te krijgen tot BigQuery heb je een Google-account en een Google Cloud Project nodig. Google heeft een stapsgewijze handleiding en een handige rondleiding waarin je leert hoe je het project kunt raadplegen .
Als alternatief kunnen webontwikkelaars ook het CrUX Dashboard in Data Studio instellen om trends in de gebruikerservaring van een bron bij te houden.
Om te beginnen gaat u naar g.co/chromeuxdash. Hier kunt u de oorsprong opgeven waarvoor het dashboard wordt gegenereerd.
Op het dashboard kun je de maandelijkse prestaties van Core Web Vitals van de bron instellen. Core Web Vitals-statistieken zijn de belangrijkste UX-statistieken waarop Google je aanbeveelt, waaronder First Input Delay.
PageSpeed Insights
Een van de eenvoudigste hulpmiddelen om een invoervertragingstest uit te voeren, is PageSpeed Insights van Google.
Dit is een gratis tool waarmee u de prestaties van uw site op allerlei manieren kunt testen en kunt zien hoe uw site scoort op basis van een aantal belangrijke statistieken, waaronder First Input Delay.
Vergeet niet dat First Input Delay een echte invoergebeurtenis vereist. Maar zolang uw site recentelijk gebruikersinteractie heeft gehad, zou u uw score moeten kunnen vinden in PageSpeed Insights. Google beschouwt deze score als veldgegevens omdat deze gebaseerd is op daadwerkelijke gebruikersinteractie, niet op laboratoriumtests.
Voer eenvoudig de URL van uw site in het tekstveld in en klik op Analyseren .
Zodra de tool je pagina heeft geanalyseerd, krijg je de resultaten te zien. Je site krijgt een algemene score, maar het is de sectie Veldgegevens waar je je op wilt richten.
Hier ziet u hoe echte gebruikers uw site ervaren. Hier vindt u ook de First Input Delay (FID) -statistiek.
Ga vervolgens naar Kansen om suggesties te bekijken voor het optimaliseren van uw pagina en het verbeteren van uw scores.
Google Zoekconsole
U kunt ook het Core Web Vitals-rapport in Google Search Console (GSC) gebruiken om FID te meten.
Open GSC en ga naar het menu Ervaring, klik vervolgens op “Core Web Vitals”.
U kunt ervoor kiezen om FID te meten voor mobiele gebruikers of desktops. Selecteer hiervoor simpelweg een van de rapporten 'Mobiel' of 'Desktop'.
In het rapport worden alle pagina's met vergelijkbare problemen weergegeven.
FID optimaliseren
Hoe kunt u de First Input Delay van uw site optimaliseren nadat u deze hebt gemeten?
Bekijk de onderstaande tactieken. Veel van deze optimalisaties betekenen dat u de JS-code handmatig moet optimaliseren, waarvoor in de meeste gevallen een ervaren webdeveloper nodig is. Maar de prestatieverbeteringen zijn de moeite waard en uw gebruikerservaring zal aanzienlijk verbeteren.
Optimaliseer en minimaliseer CSS- en JavaScript-code
Begin met het comprimeren en optimaliseren van je CSS- en JavaScript-code. Dit verwijdert onnodige tekens, spaties en regeleinden, waardoor je een kleinere bestandsgrootte krijgt. Dit vermindert op zijn beurt het aantal processen dat een browser moet verwerken, wat de responsiviteit en paginasnelheid verbetert.
Het resultaat? Een lagere eerste invoervertraging.
Een snelle en eenvoudige manier om uw code te verkleinen is door een online tool zoals Minify Code te gebruiken of uw webontwikkelaar om hulp te vragen.
Splits lange JavaScript-taken op
Het probleem met lange Javascript-taken is dat ze de hoofdthread kunnen blokkeren, waardoor deze de invoer van de gebruiker niet kan verwerken. Dit brengt de responsiviteit van uw site in gevaar.
De oplossing is om deze taken op te splitsen in kleinere taken, zodat gebruikersinvoer tussen de taken kan worden verwerkt. Probeer je taken onder de 50 ms te houden.
De beste manier om dit te doen is door code te splitsen. Hierbij splits je de code op en laad je kleinere en noodzakelijke stukjes tegelijk, in plaats van één groot bestand. Tools zoals Webpack maken dit mogelijk.
Verminder de impact van code van derden en niet-kritieke scripts
Te veel scripts van derden, zoals tags en analyses, kunnen de uitvoering van de eigen gegevens van uw site vertragen.
Om uw First Input Delay-score te optimaliseren, moet u de impact van code van derden beperken, alle niet-kritieke scripts van derden verwijderen en de scripts die u niet kunt verwijderen, uitstellen.
Hoe bepaal je welke scripts het belangrijkst zijn?
Bedenk welke scripts een belangrijke rol spelen in de UX van je site. Geef prioriteit aan het laden van de scripts die de meeste waarde bieden voor gebruikers.
Begin met het verwijderen of vertragen van onnodige advertenties of pop-ups. Kijk ook in het gedeelte 'Mogelijkheden ' van uw PageSpeed Insights-rapport voor aanbevelingen. Hier vindt u een lijst met specifieke bestanden en taken die uw hoofdthread mogelijk blokkeren.
Gebruik async of defer zodat JavaScript alleen wordt uitgevoerd wanneer dat nodig is.
Gebruik Inactief tot dringend
Idle till urgent is bedacht door Philip Walton van Google en biedt een slimme manier om uw code te evalueren, zodat de invoervertraging minimaal is.
De strategie combineert twee populaire benaderingen voor code-evaluatie:
- Intensieve evaluatie: al uw code wordt direct uitgevoerd, wat resulteert in een pagina die lang laadt totdat deze volledig interactief is en daarna soepel verloopt.
- Luie evaluatie: uw code wordt alleen uitgevoerd wanneer dat nodig is.
Met Idle tot urgent kunt u code uitvoeren tijdens volledig inactieve periodes om de hoofdthread optimaal te benutten. Het garandeert echter ook dat dringend benodigde code direct wordt uitgevoerd.
Dit is een geweldige manier om je First Input Delay te verbeteren. Omdat code alleen wordt uitgevoerd tijdens inactieve periodes, minimaliseer je de blokkeringstijd van de hoofdthread.
Lees dit artikel van Philip Walton voor meer informatie over deze aanpak.
Gebruik webworkers
Met webworkers kunt u scripts op de achtergrond uitvoeren zonder dat dit gevolgen heeft voor de hoofdthread.
Het is een goede gewoonte voor webontwikkelaars om niet-UI-bewerkingen naar een achtergrondthread te verplaatsen.
Conclusie
Een positieve eerste indruk maakt veel indruk op uw websitebezoekers en u krijgt maar één kans om het goed te doen. Door tijd en moeite te investeren in het meten van de First Input Delay van uw website en het optimaliseren van uw score, kunt u uw gebruikerservaring op de lange termijn verbeteren.
Als u maandelijks meer dan $ 2.000 aan advertentie-inkomsten genereert, neem dan vandaag nog contact met ons op voor meer informatie over hoe Publift u kan helpen uw advertentie-inkomsten te verhogen en de beschikbare advertentieruimte op uw website of app optimaal te benutten.