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

Publicado em 2 de junho de 2021

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

Todos nós gostaríamos de ver menos mudanças de layout na Web. É aqui que a métrica 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 podem contribuir para saltos surpreendentes de conteúdo para os usuários.

A métrica é chamada de "cumulativa" porque a pontuação de cada mudança é somada durante a vida útil de uma página. Embora todas as mudanças de layout na Web causem experiências ruins para os usuários, páginas de longa duração, como apps de página única (SPAs) ou apps de rolagem infinita, acumulam naturalmente mais CLS ao longo do tempo. Ao limitar a agregação à pior "janela" de turnos, a CLS agora pode ser medida de maneira mais consistente, independentemente da duração da sessão.

Como anunciamos em Como desenvolver a métrica de CLS, estamos ajustando a métrica de CLS para uma janela de sessão máxima com um intervalo de um segundo e 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 vão notar nenhuma mudança de CLS na 75ª percentil, e os 30% restantes vão notar uma melhoria.

Implantação do ajuste de janelamento para CLS

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

A partir de hoje, essa mudança na CLS foi lançada em várias ferramentas da Web do Chrome, incluindo Lighthouse, PageSpeed Insights e Chrome UX Report. Confira abaixo um resumo do lançamento do ajuste de janela do CLS e quais ferramentas ainda oferecem a capacidade de comparar com a implementação original.

As Ferramentas do desenvolvedor do Chrome também serão atualizadas em breve para oferecer suporte ao 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, essa mudança deve acontecer sem problemas, sem a necessidade de nenhuma ação para aproveitar os dados da correção.

CLS "antiga"

Vale lembrar que a CLS "antiga" mede a mudança de layout durante toda a vida útil da página. Como alguns desenvolvedores podem querer monitorar a definição 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, ele está disponível no JSON como audits['cumulative-layout-shift'].details.items[0].totalCumulativeLayoutShift.

Você vai encontrar o recurso como experimental_uncapped_cumulative_layout_shift na API CrUX e como experimental.uncapped_cumulative_layout_shift no BigQuery do CrUX.

Depois de 1º de junho, as solicitações da API CrUX vão retornar a métrica "CLS antiga":

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

Após 8 de junho, o seguinte CrUX BigQuery (em inglês) comparará o CLS antigo com o 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

Será possível continuar usando esses dados por até seis meses, e a "antiga CLS" será desativada em 14 de dezembro de 2021.

Atualizar a ponderação do CLS no Lighthouse

Quando a CLS foi introduzida no Lighthouse, ela era uma métrica nova e brilhante. Para garantir que os desenvolvedores tivessem tempo para testar, comparar e otimizar, a CLS foi menos ponderada 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%, de acordo com a metodologia de ter as Core Web Vitals como as métricas mais pesadas na pontuação do Lighthouse.

Você pode encontrar os pesos atualizados das métricas no Lighthouse v8 na calculadora de pontuação.

A implementação da CLS do Lighthouse 8.0 inclui a janela e a contribuição da CLS de subframes. Antes da versão 8.0, a CLS no Lighthouse não incluía o CLS dos subframes no cálculo da métrica, mas agora inclui. E, só para confirmar, a CLS de campo medida pelo CrUX também processa janelas e subframes de maneira semelhante.

Ainda assim, a principal diferença entre o CLS de laboratório e o de campo é que a janela de observação do CLS de laboratório termina em "totalmente carregado", conforme determinado nas condições de laboratório, enquanto no campo, a janela de observação se estende por todo o tempo de vida da página, incluindo a atividade pós-carregamento. No entanto, o ajuste de janela atenua essa diferença de forma significativa.

Como medir no campo

Se você quiser medir a implementação mais recente do CLS, também é possível registrar isso para seus dados de campo usando o RUM com o fragmento de PerformanceObserver a seguir.

Ou use diretamente a biblioteca JavaScript do Web Vitals, que também foi atualizada com essa mudança.

Outras atualizações

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

• Vamos atualizar 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 BigQuery vai ser atualizado em 8 de junho de 2021.
• No CrUX, os limites de três níveis de First Contentful Paint foram atualizados para ser, Bom: [0-1,8s], Precisa melhorar: (1,8s-3s), Ruim: [3s-∞]

Conclusões

Esperamos que essa mudança reflita uma transição tranquila para a maioria dos sites. Confira as Core Web Vitals e otimizar CLS para conferir dicas e truques sobre como medir e otimizar as mudanças de layout. Como sempre, entre em contato com o grupo de feedback de web vitals para enviar feedback sobre as métricas e nossos fóruns de feedback específicos para ferramentas do Lighthouse e do Relatório de UX do Chrome para problemas com ferramentas. Saúde!

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

Imagem principal de Barn Images / @barnimages no Unsplash