Geschatte invoerlatentie is een van de zes statistieken die worden bijgehouden in het gedeelte Prestaties van het Lighthouse-rapport. Elke statistiek legt een bepaald aspect van de laadsnelheid van de pagina vast.
In de Lighthouse-rapporten wordt de geschatte invoerlatentie in milliseconden weergegeven:
Wat de geschatte invoerlatentie meet
De geschatte invoerlatentie is een schatting van hoe lang het duurt voordat uw app reageert op gebruikersinvoer tijdens de drukste vijf seconden waarin de pagina wordt geladen. De timing van deze audit loopt van First Meaningful Paint tot het einde van de trace, wat ongeveer 5 seconden na Time to Interactive is. Als uw latentie langer is dan 50 ms, kunnen gebruikers uw app als laggy ervaren.
Het RAIL-prestatiemodel beveelt aan dat apps binnen 100 ms reageren op gebruikersinvoer, terwijl Lighthouse's geschatte invoerlatentiedoelscore 50 ms is. Waarom? Lighthouse gebruikt een proxystatistiek (beschikbaarheid van de hoofdthread) om te meten hoe goed uw app reageert op gebruikersinvoer.
Lighthouse gaat ervan uit dat uw app 50 ms nodig heeft om volledig te reageren op de invoer van de gebruiker (van het uitvoeren van JavaScript-uitvoeringen tot het fysiek schilderen van de nieuwe pixels op het scherm). Als uw hoofdthread 50 ms of langer niet beschikbaar is, heeft uw app niet genoeg tijd om het antwoord te voltooien.
Ongeveer 90% van de gebruikers zal de door Lighthouse gerapporteerde hoeveelheid invoerlatentie of minder tegenkomen. 10% van de gebruikers kan een hogere latentie verwachten.
Hoe u uw geschatte invoerlatentiescore kunt verbeteren
Om uw app sneller te laten reageren op gebruikersinvoer, optimaliseert u de manier waarop uw code in de browser wordt uitgevoerd. Bekijk de reeks technieken die worden beschreven op de pagina Rendering Performance van Google. Deze tips variëren van het overbrengen van berekeningen naar webwerkers om de rode draad vrij te maken, tot het herstructureren van uw CSS-selectors om minder berekeningen uit te voeren, tot het gebruik van CSS-eigenschappen die de hoeveelheid browserintensieve bewerkingen minimaliseren.
Hoe u de geschatte invoerlatentie handmatig kunt meten
Om de geschatte invoerlatentie handmatig te meten, maakt u een opname met de Chrome DevTools-tijdlijn. Zie Minder hoofdlijnenwerk doen voor een voorbeeld van de workflow. Het basisidee is om een opname te starten, de gebruikersinvoer uit te voeren die u wilt meten, de opname te stoppen en vervolgens de vlammengrafiek te analyseren om ervoor te zorgen dat alle fasen van de pixelpijplijn binnen 50 ms zijn voltooid.