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 e do Chrome User Experience Report (CrUX, na sigla em inglês) e muito mais.

Elizabeth Sweeny
Elizabeth Sweeny

Na Conferência de Desenvolvedores do Chrome, Paul Irlanda e eu anunciamos atualizações no Lighthouse: Lighthouse CI, nova fórmula de pontuação de desempenho e muito mais. Além das grandes notícias do Lighthouse, apresentamos desenvolvimentos interessantes em ferramentas de desempenho, incluindo novas métricas de desempenho, atualizações do PageSpeed Insights e do Chrome User Experience Report (CrUX, além dos insights da análise do ecossistema da Web pelo Web Almanac).

Novas métricas de desempenho

Medir as nuances da experiência do usuário é fundamental para quantificar o impacto dela nos resultados e acompanhar as 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 de métricas são duas métricas de campo: Maior exibição de conteúdo (LCP) e Mudança de layout cumulativa (CLS), 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 Maior exibição de conteúdo (LCP, na sigla em inglês) informa o momento em que o maior elemento de conteúdo fica visível na janela de visualização.

Antes da Maior exibição de conteúdo, a Primeira exibição significativa (FMP, na sigla em inglês) 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 mostraram que apenas analisar quando o maior elemento da página é renderizado representa melhor quando o conteúdo principal de uma página é carregado.

A nova métrica de Maior exibição de conteúdo estará disponível em breve nos relatórios do Lighthouse e será possível 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 Primeira exibição de conteúdo (FCP) e o Tempo para interação (TTI, na sigla em inglês) em que a linha de execução principal ficou bloqueada por muito tempo para impedir a capacidade de resposta da entrada.

Uma tarefa é considerada longa quando é executada na linha de execução principal por mais de 50 milissegundos. Qualquer milissegundo acima desse período é contabilizado no 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 representando cinco tarefas com 60 milissegundos de tempo de bloqueio total de 270 milissegundos do tempo da linha de execução principal.

Enquanto o Tempo até interativo faz um bom trabalho de identificar quando a linha de execução principal é acalmada posteriormente no carregamento, o Tempo total de bloqueio visa quantificar o quanto a linha de execução principal fica sobrecarregada durante o carregamento. Dessa forma, TTI e TBT se complementam e oferecem equilíbrio.

Cumulative Layout Shift (CLS)

A Mudança de layout cumulativa (CLS, na sigla em inglês) mede a estabilidade visual de uma página e quantifica a frequência com que os usuários experimentam mudanças inesperadas de layout. Movimentações inesperadas de conteúdo podem ser muito frustrantes, e essa nova métrica ajuda a resolver esse problema medindo a frequência com que ele ocorre para os usuários.

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

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

Em breve, a nova fórmula de pontuação de desempenho do Lighthouse não enfatizará a FMP e a FCI e incluirá as três novas métricas (LCP, TBT e CLS), já que elas capturam melhor quando a página parece utilizável.

No Lighthouse v6 "Primeira exibição de conteúdo", "Índice de velocidade" e "Maior exibição de conteúdo" são as principais métricas de desempenho de carregamento: "Tempo até interativo", "Latência na primeira entrada", "Máximo de atraso na primeira entrada" e "Tempo total de bloqueio" são as principais métricas de interatividade, e "Mudança de layout cumulativa" é a principal métrica de previsibilidade.

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

Limites de dados de campo (CrUX) ajustados no PageSpeed Insights

No ano passado, analisamos o desempenho da Web em campo usando os dados da Experiência do usuário do Chrome (CrUX, na sigla em inglês). Com os 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 fazer 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 ouro para esse site. Os limites anteriores usados eram o 90o percentil para a primeira exibição de conteúdo e o 95o percentil para a primeira entrada de atraso (FID, na sigla em inglês).

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

Isso foi ajustado para ter uma distribuição geral melhor entre 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 Mais de 3.000 funcionários
FID 95º percentil 100 100-300 300+

Por exemplo, agora, se um site tem uma distribuição de FCP de 50% rápida, 30% moderada, 20% lenta, o 75o percentil da FCP está na seção moderada, tornando a pontuação de campo geral do site moderada.

Redirecionamentos de URL canônicos 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 um comando de nova análise ao PSI. No caso de sites redirecionados para um novo URL, é necessário gerar o relatório novamente sobre o URL de destino para ter uma visão mais completa da sua performance real.

Interface do usuário do PSI mostrando o redirecionamento do URL e o botão "Analisar novamente"

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 Conferência de Desenvolvedores do Chrome. Ele usa dados do Chrome User Experience Report para ajudar os proprietários de sites a descobrir possíveis problemas de experiência do usuário. O Relatório de velocidade atribui automaticamente grupos de URLs semelhantes aos intervalos "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 Web Almanac no CDS 2019.

Na palestra de abertura, anunciamos o lançamento do Web Almanac, um projeto anual que combina as estatísticas e tendências sobre o estado da Web com a experiência da comunidade da Web. 85 colaboradores, compostos por desenvolvedores do Chrome e a comunidade da Web, se ofereceram para trabalhar no projeto, que analisa 20 aspectos principais sobre o endereçamento da Web, como a criação, entrega e experiência dos sites. Comece a explorar o Almanaque da Web para saber mais sobre o estado de desempenho, JavaScript e 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 evoluções de ferramentas de velocidade: