Evoluções das ferramentas de velocidade: destaques da Conferência de Desenvolvedores do Chrome 2019

Novas métricas de desempenho, atualizações do PageSpeed Insights, do Chrome User Experience Report (CrUX, na sigla em inglês) e muito mais.

Elizabeth Sweeny
Elizabeth Sweeny

No Chrome Developer Summit, Paul Irish e eu anunciamos atualizações do Lighthouse: Lighthouse CI, nova fórmula de pontuação de desempenho e mais. Além das grandes novidades do Lighthouse, apresentamos desenvolvimentos de ferramentas de desempenho interessantes, incluindo novas métricas de desempenho, atualizações do PageSpeed Insights e do Chrome User Experience Report (CrUX), e insights da análise do Web Almanac sobre o ecossistema da Web.

Novas métricas de performance

Medir as nuances da experiência do usuário é fundamental para quantificar o impacto que ela tem na sua receita e acompanhar melhorias e regressões. Com o tempo, novas métricas evoluíram para capturar essas nuances e preencher as lacunas na medição da experiência do usuário. A adição mais recente à história das métricas são duas métricas de campo: Maior exibição de conteúdo (LCP, na sigla em inglês) e deslocamento cumulativo do layout (CLS, na sigla em inglês), que estão sendo incubadas no Grupo de trabalho de desempenho da Web do W3C, e uma nova métrica de laboratório: Tempo total de bloqueio (TBT, na sigla em inglês).

Maior exibição de conteúdo (LCP)

A Largest Contentful Paint (LCP) informa o horário em que o maior elemento de conteúdo fica visível na janela de visualização.

Antes da Largest Contentful Paint, a First Meaningful Paint (FMP) e o Índice de velocidade (SI, na sigla em inglês) serviam para capturar a experiência de carregamento após a exibição inicial, mas essas métricas são complexas e geralmente não identificam quando o conteúdo principal da página foi carregado. Pesquisas mostram que simplesmente observar quando o elemento maior da página é renderizado representa melhor quando o conteúdo principal de uma página é carregado.

A nova métrica "Largest Contentful Paint" vai estar disponível em breve nos relatórios do Lighthouse. Enquanto isso, você pode medir a LCP em JavaScript.

Tempo total de bloqueio (TBT)

A métrica Tempo total de bloqueio (TBT, na sigla em inglês) mede o tempo total entre a First Contentful Paint (FCP) e o Tempo para interação (TTI) em que a linha de execução principal foi bloqueada por tempo suficiente para evitar a capacidade de resposta da entrada.

Uma tarefa é considerada longa se for executada na linha de execução principal por mais de 50 milissegundos. Qualquer milissegundo acima disso é contado para o tempo de bloqueio da tarefa.

Um diagrama que representa uma tarefa de 150 milissegundos com 100 milissegundos de tempo de bloqueio.

O tempo total de bloqueio de uma página é a soma dos tempos de bloqueio de todas as tarefas longas que ocorreram entre a FCP e o TTI.

Um diagrama que representa cinco tarefas com 60 milissegundos de tempo de bloqueio total em 270 milissegundos de tempo da linha de execução principal.

Embora o Tempo para interação da página consiga identificar quando a linha de execução principal acalma mais tarde durante o carregamento, o objetivo do tempo total de bloqueio é quantificar a pressão da linha de execução principal durante o carregamento. Dessa forma, TTI e TBT se complementam e fornecem equilíbrio.

Cumulative Layout Shift (CLS)

A Cumulative Layout Shift (CLS) mede a estabilidade visual de uma página e quantifica a frequência com que os usuários experimentam mudanças inesperadas de layout. O movimento inesperado de conteúdo pode ser muito frustrante, e essa nova métrica ajuda a resolver esse problema medindo a frequência com que ele ocorre para seus usuários.

Um screencast que ilustra como a instabilidade do layout pode afetar negativamente os usuários.

Confira o guia detalhado sobre a mudança de layout cumulativa para saber como ela é calculada e como medi-la.

A nova fórmula de pontuação de desempenho do Lighthouse vai deixar de dar ênfase ao FMP e ao FCI e incluir as três novas métricas (LCP, TBT e CLS), já que elas capturam melhor quando uma página parece utilizável.

Na versão 6 do Lighthouse, a First Contentful Paint, o Índice de velocidade e a Largest Contentful Paint são as principais métricas de desempenho de carregamento. O Tempo para interação da página, o First Input Delay, o Max Potential First Input Delay e o Tempo de bloqueio total são as principais métricas de interatividade. E o Cumulative Layout Shift é a principal métrica de previsibilidade.

Confira a pontuação de desempenho do Lighthouse e a nova coleção de métricas do web.dev para saber mais.

Os limites de dados de campo (CrUX) foram ajustados no PageSpeed Insights.

No ano passado, analisamos a performance da Web no campo usando dados da experiência do usuário do Chrome (CrUX, na sigla em inglês). Com insights desses dados, reavaliamos os limites que usamos para rotular um site como "lento", "moderado" ou "rápido" no desempenho de campo.

Dois gráficos de barras mostrando a distribuição de velocidade lenta, rápida e moderada para FCP e FID.

Para receber uma avaliação geral de um site, o PageSpeed Insights (PSI) usa um determinado percentil da distribuição total de dados de campo como o número ideal para esse site. Os limites anteriores usados eram o percentil 90 para a primeira pintura de conteúdo e o percentil 95 para o primeiro atraso de entrada (FID).

Por exemplo, se um site tiver uma distribuição de FCP 50% rápida, 30% moderada e 20% lenta, a FCP do 90o percentil estará na seção lenta, tornando a pontuação de campo geral do site lenta.

Isso foi ajustado para ter uma distribuição geral melhor em todos os sites, e o novo detalhamento é:

Métrica Percentil geral Rápido (ms) Moderado (ms) Lento (ms)
First Contentful Paint (FCP) 75º percentil 1000 1000-3000 3000+
FID 95º percentil 100 100-300 Mais de 300

Por exemplo, se um site tiver uma distribuição de FCP de 50% rápido, 30% moderado e 20% lento, a FCP do percentil 75 estará na seção moderada, tornando a pontuação de campo geral do site moderada.

Redirecionamentos de URL canônico no PageSpeed Insights

Para que você possa medir a experiência do usuário da maneira mais precisa possível, a equipe do PageSpeed Insights adicionou uma solicitação de nova análise ao PSI. Para sites que são redirecionados para um novo URL, é necessário executar o relatório novamente no URL da página de destino para ter uma visão mais completa da sua performance real.

Interface do usuário do PSI mostrando o redirecionamento de URL e o botão "Reanalisar"

CrUX no novo Relatório de velocidade do Search Console

O Search Console lançou o novo relatório de velocidade uma semana antes da Chrome Dev Summit. Ele usa dados do Chrome User Experience Report para ajudar os proprietários de sites a descobrir possíveis problemas na experiência do usuário. O relatório de velocidade atribui automaticamente grupos de URLs semelhantes a "Rápido", "Moderado" e "Lento" e ajuda a priorizar melhorias de desempenho para problemas específicos.

Relatório de velocidade do Search Console.

Almanaque da Web

Dion Almaer apresentando o Web Almanac no CDS 2019.

Na palestra de abertura, anunciamos o lançamento do Almanaque da Web, um projeto anual que combina as estatísticas e tendências sobre o estado da Web com a experiência da comunidade da Web. Oitenta e cinco colaboradores, compostos por desenvolvedores do Chrome e pela comunidade da Web, se voluntariaram para trabalhar no projeto, que analisa 20 aspectos principais sobre a Web, abordando como os sites são criados, entregues e experimentados. Comece a explorar o Web Almanac para saber mais sobre o estado da performance, do JavaScript e do código de terceiros na Web.

Saiba mais

Para mais detalhes sobre as atualizações de ferramentas de desempenho da Chrome Developer Summit, assista à palestra sobre a evolução das ferramentas de velocidade: