O objetivo do Chrome User Experience Report é ajudar a comunidade da Web a entender a distribuição e a evolução do desempenho real do usuário. Até o momento, nosso foco tem sido as métricas de pintura e carregamento de página, como a First Contentful Paint (FCP) e a Onload (OL), que nos ajudaram a entender como os sites se comportam visualmente para os usuários. A partir da versão de junho de 2018, estamos testando uma nova métrica centrada no usuário que se concentra na interatividade das páginas da Web: First Input Delay (FID, na sigla em inglês). Com essa nova métrica, entenderemos melhor como os sites são responsivos à entrada do usuário.
A FID foi disponibilizada recentemente no Chrome como um teste de origem, o que significa que os sites podem ativar testes com esse novo recurso da plataforma da Web. Da mesma forma, o FID vai estar disponível no Relatório de UX do Chrome como uma métrica experimental, o que significa que ele vai estar disponível durante o período de teste de origem em um namespace "experimental" separado.
Como a FID é medida
O que é exatamente o FID? Confira como isso é definido na postagem do blog Primeira latência de entrada:
O primeiro atraso de entrada (FID) mede o tempo entre a primeira interação do usuário com seu site (ou seja, quando ele clica em um link, toca em um botão ou usa um controle personalizado com JavaScript) e o momento em que o navegador consegue responder a essa interação.
É como medir o tempo entre tocar a campainha de alguém e a pessoa atender a porta. Se demorar muito, pode haver vários motivos. Por exemplo, talvez a pessoa esteja longe da porta ou não possa se mover rapidamente. Da mesma forma, as páginas da Web podem estar ocupadas fazendo outro trabalho ou o dispositivo do usuário pode estar lento.
Como analisar o FID no Relatório de UX do Chrome
Com um mês de dados de FID de milhões de origens, já há muitos insights interessantes a serem descobertos. Vejamos algumas consultas que demonstram como extrair esses insights do Chrome UX Report no BigQuery.
Vamos começar consultando a porcentagem de experiências de FID rápidas para developers.google.com. Podemos definir uma experiência rápida como aquela em que o FID é menor que 100 ms. De acordo com as recomendações do RAIL, se o atraso for de 100 ms ou menos, a sensação será de instantaneidade para o usuário.
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'
Os resultados mostram que 95% das experiências de FID nessa origem são percebidas como instantâneas. Isso parece muito bom, mas como ele se compara a todas as origens no conjunto de dados?
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
Os resultados dessa consulta mostram que 84% das experiências de FID são inferiores a 100 ms. Portanto, developers.google.com está acima da média.
Em seguida, vamos tentar dividir esses dados para saber se há uma diferença entre a porcentagem de FID rápido em computadores e dispositivos móveis. Uma hipótese é que os dispositivos móveis têm valores de FID mais lentos, possivelmente devido a um hardware mais lento em comparação com computadores desktop. Se a CPU for menos potente, ela poderá ficar mais ocupada por mais tempo e resultar em experiências de FID mais lentas.
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
| form_factor | fast_fid |
|---|---|
| computador | 96,02% |
| telefone | 79,90% |
| tablet | 76,48% |
Os resultados corroboram nossa hipótese. Os computadores têm uma densidade cumulativa maior de experiências de FID rápidas do que os formatos de smartphones e tablets. Entender por que essas diferenças existem, por exemplo, o desempenho da CPU, exigiria testes A/B fora do escopo do Chrome UX Report.
Agora que você já sabe como identificar se uma origem tem experiências de FID rápidas, vamos analisar algumas origens que têm um bom desempenho.
Exemplo 1: http://secretlycanadian.com
Essa origem tem 98% das experiências de FID com menos de 100 ms. Como eles fazem isso? Analisando como ela foi criada no WebPageTest, é possível notar que ela tem muitas imagens, mas tem 168 KB de JavaScript que são executados em cerca de 500 ms na máquina do laboratório. Não é muito JavaScript de acordo com o HTTP Archive, que coloca esta página na 28ª percentila.
A barra rosa que varia de 2,7 a 3,0 segundos é a fase de Análise de HTML. Durante esse tempo, a página não é interativa e aparece visualmente incompleta (veja "3,0s" na tira de filme acima). Depois disso, todas as tarefas longas que precisam ser processadas são divididas para garantir que a linha de execução principal permaneça inativa. As linhas rosas na linha 11 demonstram como o trabalho do JavaScript é distribuído em bursts rápidos.
Exemplo 2: https://www.wtfast.com
Essa origem tem 96% de experiências de FID instantâneas. Ele carrega 267 KB de JavaScript (38º percentil no HTTP Archive) e o processa por 900 ms na máquina de laboratório. A tira de filme mostra que a página leva cerca de 5 segundos para pintar o plano de fundo e cerca de mais 2 segundos para pintar o conteúdo.
O mais interessante nos resultados é que nada interativo fica visível enquanto a linha de execução principal está ocupada entre três e cinco segundos. Na verdade, é a lentidão da FCP da página que melhora o FID. Esse é um bom exemplo da importância de usar muitas métricas para representar a experiência do usuário.
Comece a explorar
Saiba mais sobre o FID no episódio desta semana de O estado da Web:
A disponibilidade da FID no Chrome UX Report permite estabelecer um valor de referência de experiências de interatividade. Usando esse valor de referência, podemos observar as mudanças em versões futuras ou comparar origens individuais. Se você quiser começar a coletar FID nas medições de campo do seu site, inscreva-se no teste de origem em bit.ly/event-timing-ot e selecione o recurso "Tempo do evento". E, claro, comece a explorar o conjunto de dados para ter insights interessantes sobre o estado da interatividade na Web. Essa ainda é uma métrica experimental. Dê seu feedback e compartilhe sua análise no grupo de discussão do Chrome UX Report ou @ChromeUXReport no Twitter.