Experimenteren met eerste invoervertraging in het Chrome UX-rapport

Het doel van het Chrome User Experience Report is om de webgemeenschap inzicht te geven in de distributie en evolutie van echte gebruikersprestaties. Tot nu toe lag onze focus op verf- en paginalaadstatistieken zoals First Contentful Paint (FCP) en Onload (OL), die ons hebben geholpen te begrijpen hoe websites visueel presteren voor gebruikers. Vanaf de release van juni 2018 experimenteren we met een nieuwe, op de gebruiker gerichte statistiek die zich richt op de interactiviteit van webpagina's: First Input Delay (FID). Deze nieuwe maatstaf zal ons in staat stellen beter te begrijpen hoe websites reageren op gebruikersinvoer.

FID is onlangs beschikbaar gemaakt in Chrome als origin-proefversie , wat betekent dat websites zich kunnen aanmelden om te experimenteren met deze nieuwe webplatformfunctie. Op dezelfde manier zal FID beschikbaar zijn in het Chrome UX-rapport als een experimentele statistiek, wat betekent dat het beschikbaar zal zijn gedurende de oorspronkelijke proefperiode binnen een aparte 'experimentele' naamruimte.

Hoe FID wordt gemeten

Wat is FID precies? Hier ziet u hoe het wordt gedefinieerd in de blogpost over de First Input Delay- aankondiging:

First Input Delay (FID) meet de tijd vanaf het moment waarop een gebruiker voor het eerst interactie heeft met uw site (dat wil zeggen wanneer hij op een link klikt, op een knop tikt of een aangepast, door JavaScript aangedreven besturingselement gebruikt) tot het moment waarop de browser daadwerkelijk in staat is om op die interactie te reageren.

Animatie die laat zien hoe een drukke hoofdlijn de reactie op een gebruikersinteractie vertraagt.

Het is alsof je de tijd meet tussen het aanbellen bij iemand en het opendoen van de deur. Als het lang duurt, kunnen daar vele redenen voor zijn. Misschien is de persoon bijvoorbeeld ver weg van de deur of kan hij of zij niet snel bewegen. Op dezelfde manier kunnen webpagina's bezig zijn met ander werk of kan het apparaat van de gebruiker traag zijn.

FID verkennen in het Chrome UX-rapport

Met één maand aan FID-gegevens van miljoenen herkomsten valt er al een schat aan interessante inzichten te ontdekken. Laten we eens kijken naar een paar zoekopdrachten die laten zien hoe u deze inzichten uit het Chrome UX-rapport op BigQuery kunt halen.

Laten we beginnen met een zoekopdracht naar het percentage snelle FID-ervaringen voor ontwikkelaars.google.com . We kunnen een snelle ervaring definiëren als een ervaring waarbij de FID minder dan 100 ms bedraagt. Volgens de RAIL-aanbevelingen moet de vertraging voor de gebruiker onmiddellijk aanvoelen als de vertraging 100 ms of beter bedraagt.

SELECT
  ROUND(SUM(IF(fid.start < 100, fid.density, 0)), 4) AS fast_fid
FROM
  `chrome-ux-report.all.201806`,
  UNNEST(experimental.first_input_delay.histogram.bin) AS fid
WHERE
  origin = 'https://developers.google.com'

De resultaten laten zien dat 95% van de FID-ervaringen op deze oorsprong als onmiddellijk worden ervaren. Dat lijkt heel goed, maar hoe verhoudt dit zich tot alle oorsprongen in de dataset?

SELECT
  ROUND(SUM(IF(fid.start < 100, fid.density, 0)) / SUM(fid.density), 4) AS fast_fid
FROM
  `chrome-ux-report.all.201806`,
  UNNEST(experimental.first_input_delay.histogram.bin) AS fid

Uit de resultaten van deze zoekopdracht blijkt dat 84% van de FID-ervaringen minder dan 100 ms duren. Developers.google.com is dus bovengemiddeld.

Laten we vervolgens proberen deze gegevens te segmenteren om te zien of er een verschil is tussen het percentage snelle FID op desktop en mobiel. Eén hypothese is dat mobiele apparaten langzamere FID-waarden hebben, mogelijk als gevolg van langzamere hardware in vergelijking met desktopcomputers. Als de CPU minder krachtig is, kan deze langere tijd drukker zijn en resulteren in langzamere FID-ervaringen.

SELECT
  form_factor.name AS form_factor,
  ROUND(SUM(IF(fid.start < 100, fid.density, 0)) / SUM(fid.density), 4) AS fast_fid
FROM
  `chrome-ux-report.all.201806`,
  UNNEST(experimental.first_input_delay.histogram.bin) AS fid
GROUP BY
  form_factor
vormfactor snel_fid
bureaublad 96,02%
telefoon 79,90%
tablet 76,48%

De resultaten bevestigen onze hypothese. Desktop heeft een hogere cumulatieve dichtheid van snelle FID-ervaringen dan telefoon- en tabletvormfactoren. Om te begrijpen waarom deze verschillen bestaan, bijvoorbeeld CPU-prestaties, zijn A/B-tests nodig die buiten het bereik van het Chrome UX-rapport vallen.

Nu we hebben gezien hoe we kunnen identificeren of een oorsprong snelle FID-ervaringen heeft, gaan we eens kijken naar een aantal oorsprongen die heel goed presteren.

Voorbeeld 1: http://secretlycanadian.com

WebPageTestfilmstrip van secretlycanadian.com

Deze oorsprong heeft 98% van de FID-ervaringen onder de 100 ms. Hoe doen ze dat? Als we analyseren hoe het in WebPageTest is gebouwd, kunnen we zien dat het een behoorlijk grote WordPress-pagina is met veel afbeeldingen, maar dat het 168 KB JavaScript bevat dat in ongeveer 500 ms wordt uitgevoerd op onze laboratoriummachine. Dit is niet zozeer JavaScript volgens het HTTP Archive , dat deze pagina in het 28e percentiel plaatst.

AWebPageTest-waterval van secretlycanadian.com

De roze balk van 2,7 tot 3,0 seconden is de Parse HTML- fase. Gedurende deze tijd is de pagina niet interactief en lijkt deze visueel onvolledig (zie “3.0s” in de filmstrip hierboven). Daarna worden alle lange taken die nog moeten worden verwerkt, opgesplitst om ervoor te zorgen dat de rode draad rustig blijft. De roze lijnen op rij 11 laten zien hoe het JavaScript-werk in snelle uitbarstingen wordt verspreid.

Voorbeeld 2: https://www.wtfast.com

WebPageTest-filmstrip van wtfast.com

Deze oorsprong heeft 96% directe FID-ervaringen. Het laadt 267 KB JavaScript (38e percentiel in HTTP-archief) en verwerkt dit gedurende 900 ms op de laboratoriummachine. Uit de filmstrip blijkt dat de pagina ongeveer 5 seconden nodig heeft om de achtergrond te schilderen en nog ongeveer 2 seconden om de inhoud te schilderen.

WebPageTest-waterval van wtfast.com

Het meest interessante aan de resultaten is dat er zelfs niets interactiefs zichtbaar is terwijl de hoofdthread tussen de 3 en 5 seconden bezig is. Het is eigenlijk de traagheid van de FCP van deze pagina die de FID verbetert . Dit is een goed voorbeeld van het belang van het gebruik van veel statistieken om de gebruikerservaring weer te geven.

Begin met verkennen

Je kunt meer leren over FID in de aflevering van deze week van The State of the Web :

Doordat FID beschikbaar is in het Chrome UX Report, kunnen we een basislijn van interactiviteitservaringen vaststellen. Met behulp van deze basislijn kunnen we de verandering ervan in toekomstige releases observeren of individuele oorsprong benchmarken. Als u wilt beginnen met het verzamelen van FID in de veldmetingen van uw eigen locatie, kunt u zich aanmelden voor de origin-proef door naar bit.ly/event-timing-ot te gaan en de functie Event Timing te selecteren. En begin natuurlijk met het verkennen van de dataset voor interessante inzichten in de staat van interactiviteit op internet. Dit is nog steeds een experimentele statistiek, dus geef ons uw feedback en deel uw analyse in de Chrome UX Report-discussiegroep of @ChromeUXReport op Twitter.