Evolução da Mudança de layout cumulativa nas ferramentas da Web

A partir de hoje, uma mudança na CLS foi lançada em várias plataformas de ferramentas da Web do Chrome, incluindo Lighthouse, PageSpeed Insights e Chrome UX Report.

Addy Osmani

Elizabeth Sweeny

Hoje, gostaríamos de compartilhar como estamos evoluindo a medição do Cumulative Layout Shift (CLS) métrica em várias superfícies de ferramentas da Web do Chrome. Para os desenvolvedores, essas mudanças refletirão melhor a experiência do usuário para páginas de longa duração (como aqueles com rolagem infinita ou apps de página única). Essas atualizações da CLS serão lançadas para ferramentas como Lighthouse, PageSpeed Insights e Chrome UX Report.

Todos nós gostaríamos de ter menos mudanças de layout na Web. É aqui que a métrica de CLS se mostrou útil para medir a estabilidade visual de uma página da Web. Isso ajuda a incentivar os sites a definir melhor as dimensões do conteúdo, como imagens ou anúncios, que contribuam para saltos surpreendentes de conteúdo para os usuários.

O nome da métrica é "cumulativo". porque a pontuação de cada mudança individual é somada ao longo da vida útil de uma página. Embora todas as mudanças de layout na Web causem experiências do usuário ruins, páginas de longa duração, como aplicativos de página única (SPAs) ou aplicativos de rolagem infinita, acumulam naturalmente mais CLS com o tempo. Limitando a agregação à pior "janela" de turnos, A CLS agora pode ser medida com mais consistência, independentemente da duração da sessão.

Como anunciamos em Evolução da métrica de CLS, estamos ajustando a métrica de CLS para um janela máxima de 1 segundo com intervalo de 1 segundo, com limite de 5 segundos. essa atualização reflete melhor a experiência do usuário em páginas de longa duração. Com essa mudança, 70% das origens não devem esperar nenhuma mudança de CLS no 75o percentil, e os 30% restantes vão notar uma melhoria.

Implantação do ajuste de janelamento para CLS

Falamos sobre a definição atualizada da CLS como uma janela máxima de sessão com um intervalo de um segundo, limitado a 5 segundos. O que isso significa para as ferramentas?

A partir de hoje, essa mudança no CLS foi lançada em várias superfícies de ferramentas da Web do Chrome, incluindo Lighthouse, PageSpeed Insights e Chrome UX Report. Confira abaixo um resumo da implementação do ajuste de janelamento de CLS, bem como quais ferramentas ainda fornecem a capacidade de comparar com a implementação original.

Em breve, o Chrome DevTools também será atualizado para ser compatível com o ajuste de janelas. A atualização da CLS também foi feita no Search Console e será refletida a partir de 1o de junho de 2021.

Para a maioria dos desenvolvedores, Espera-se que essa mudança aconteça sem problemas, sem que seja necessária nenhuma ação para aproveitar os dados da correção.

"Antigo" CLS

Como lembrete, os "antigos" A CLS mede a mudança de layout durante toda a vida útil da página. Como alguns desenvolvedores podem querer monitorar a definição mais antiga de CLS junto com o ajuste de janelamento, temos boas notícias para compartilhar: estamos expondo o "antigo CLS" no Lighthouse e no CrUX.

No Lighthouse v8, está disponível no JSON como audits['cumulative-layout-shift'].details.items[0].totalCumulativeLayoutShift:

Você vai encontrá-lo como experimental_uncapped_cumulative_layout_shift na API CrUX e como experimental.uncapped_cumulative_layout_shift no BigQuery CrUX.

Após 1o de junho, as solicitações da API CrUX vão retornar o "antigo CLS" métrica:

{
  "origin": "https://web.dev",
  "metrics": [
    "experimental_uncapped_cumulative_layout_shift"
  ]
}

Depois de 8 de junho, CrUX do BigQuery vai comparar o CLS antigo e novo:

WITH
  new_data AS (
  SELECT
    cls
  FROM
    `chrome-ux-report.all.202105`,
    UNNEST(layout_instability.cumulative_layout_shift.histogram.bin) AS cls
  WHERE
    origin = 'https://web.dev'
    AND effective_connection_type.name = '4G'
    AND form_factor.name = 'phone'),
  old_data AS (
  SELECT
    uncapped_cls
  FROM
    `chrome-ux-report.all.202105`,
    UNNEST(experimental.uncapped_cumulative_layout_shift.histogram.bin) AS uncapped_cls
  WHERE
    origin = 'https://web.dev'
    AND effective_connection_type.name = '4G'
    AND form_factor.name = 'phone')
SELECT
  cls.start AS start,
  cls.`END` AS `end`,
  cls.density AS cls_density,
  uncapped_cls.density AS uncapped_cls_density
FROM
  new_data
INNER JOIN
  old_data
ON
  new_data.cls.start = old_data.uncapped_cls.start

Você pode continuar usando esses dados por um período de até seis meses, com "antigo CLS" que será desativada em 14 de dezembro de 2021.

Atualizar a ponderação do CLS no Lighthouse

Quando a CLS foi introduzida no Lighthouse, era uma nova métrica brilhante. Assim, para garantir que os desenvolvedores tenham tempo de testar, comparar, e otimizá-la, a CLS teve um peso menor na pontuação de desempenho.

Agora, depois de algum tempo nas mãos dos desenvolvedores, a pontuação do Lighthouse aumentou o peso da CLS de 5% para 15%, consistente com a metodologia das Core Web Vitals são as métricas com maior peso na pontuação do Lighthouse.

Confira as ponderações atualizadas das métricas no Lighthouse v8 na calculadora de pontuação.

A implementação de CLS do Lighthouse 8.0 inclui janelamento e contribuição de CLS de subframes. Antes da versão 8.0, o CLS no Lighthouse não incluía subframes no cálculo da métrica, mas agora faz isso. Só para confirmar, o CLS de campo medido pelo CrUX também lida com janelas e subframes.

Ainda assim, a principal diferença entre a CLS de laboratório e de campo é que a janela de observação do CLS do laboratório termina em "totalmente carregada". conforme determinado nas condições de laboratório, enquanto que, no campo, a janela de observação se estende a todo o ciclo de vida da página, incluindo a atividade pós-carregamento. Dito isso, o ajuste de janelamento mitiga essa diferença significativamente.

Faça sua própria medição em campo

Caso queira medir a implementação mais recente da CLS, Você também pode registrar isso para seus dados de campo via RUM usando o snippet PerformanceObserver a seguir.

Ou contando diretamente com Biblioteca JavaScript de Métricas da Web, que também foi atualizado com essa alteração.

Atualizações adicionais

Além das atualizações na Cumulative Layout Shift, as seguintes atualizações relacionadas a métricas também foram feitas em nossas ferramentas da Web:

• Estamos atualizando para a definição mais recente da métrica "Maior exibição de conteúdo". As APIs CrUX, PSI e PSI e o Search Console serão atualizadas em 1o de junho de 2021. O CrUX do BigQuery será atualizado em 8 de junho de 2021.
• No CrUX, os limites de tribinagem da First Contentful Paint foram atualizados para: Bom: [0 - 1,8 s], Precisa melhorar: (1, 8 s - 3 s), Ruim: [3 s - ✕]

Conclusões

Esperamos que essa mudança reflita uma transição tranquila para a maioria dos sites e incentivamos você a conferir Métricas da Web e Otimize a CLS para ver dicas e truques sobre como medir e otimizar seu layout. Como sempre, fique à vontade para entrar em contato pelo grupo web-vitals-feedback para feedback sobre as métricas e nossos fóruns de feedback específicos sobre ferramentas para Lighthouse: Chrome UX Report para problemas de ferramentas. Saúde!

Agradecimentos a Johannes Henkel, Rick Viscomi, Vivek Sekhar, Rachel Andrew, Milica Mihajlija, Jeff Jose e Paul Ireland pelo feedback.

Imagem principal da Barn Images / @barnimages no Unsplash