A partir de hoje, uma alteração na CLS foi lançada em várias plataformas de ferramentas da Web do Chrome, incluindo o Lighthouse, o PageSpeed Insights e o Chrome UX Report.
Hoje queremos compartilhar como estamos evoluíndo a medição da métrica Mudança de layout cumulativa (CLS, na sigla em inglês) em várias plataformas de ferramentas da Web do Chrome. Para 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 da CLS serão lançadas para ferramentas que incluem o Lighthouse, o PageSpeed Insights e o 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 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 individual é somada durante a vida útil de uma página. Embora todas as mudanças de layout na Web causem experiências ruins do usuário, 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 com mais consistência, independentemente da duração da sessão.
Conforme anunciamos em Como desenvolver a métrica de CLS, estamos ajustando a métrica de CLS para uma janela máxima de sessão com um intervalo de um segundo, limitado a cinco segundos. Essa atualização reflete melhor a experiência do usuário em páginas de longa duração. Com essa mudança em vigor, 70% das origens não vão esperar nenhuma mudança de CLS no 75o percentil, e os 30% restantes terão uma melhoria.
Lançamento do ajuste de janelamento para a CLS
Falamos que a definição de CLS atualizada é uma janela de sessão máxima com um intervalo de um segundo, limitado a cinco segundos. O que isso significa para as ferramentas?
A partir de hoje, essa mudança no CLS foi lançada em várias plataformas de ferramentas da Web do Chrome, incluindo o Lighthouse, o PageSpeed Insights e o Chrome UX Report. Confira abaixo um resumo do lançamento do ajuste de janelamento de CLS, bem como quais ferramentas ainda oferecem a possibilidade de comparação com a implementação original.
| Ferramenta | Ajuste de janelamento de CLS "ativo" | Disponibilidade de CLS "antiga" |
|---|---|---|
| Painel do Lighthouse para DevTools | Canal Canary, 2 de junho de 2021 | N/A |
| CLI do Lighthouse | v8, lançado em 1o de junho de 2021 | Disponível como totalCumulativeLayoutShift no Lighthouse v8 |
| Lighthouse CI | v0.7.3, 3 de junho de 2021 | N/A |
| PageSpeed Insights (PSI) | 1º de junho de 2021 | Não relevante |
| API PSI | 1º de junho de 2021 | Disponível no lighthouseResult como totalCumulativeLayoutShift. Indisponível nos dados do campo loadingExperience |
| Chrome UX Report (CrUX, na sigla em inglês) - BigQuery | Conjunto de dados de 202105, publicado em 8 de junho de 2021 | Disponível como experimental.uncapped_cumulative_layout_shift até 202111 |
| Chrome UX Report (CrUX): API | 1º de junho de 2021 | Após 1o de junho de 2021, disponível como
experimental_uncapped_cumulative_layout_shift
14 de dezembro de 2021 |
O Chrome DevTools também será atualizado para oferecer suporte ao ajuste de janelamento em breve. A atualização da CLS também foi feita no Search Console e entrará em vigor em 1o de junho de 2021.
Para a maioria dos desenvolvedores, espera-se que essa mudança ocorra sem problemas, e nenhuma ação é necessária para aproveitar os dados da correção.
CLS "antigo"
Como lembrete, 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 mais antiga de CLS junto com o ajuste de janelas, temos boas notícias: estamos expondo a "CLS antiga" no Lighthouse e no CrUX.
No Lighthouse v8,
ele está disponível no JSON como
audits['cumulative-layout-shift'].details.items[0].totalCumulativeLayoutShift.
Ele pode ser encontrado como
experimental_uncapped_cumulative_layout_shift
na API CrUX e como
experimental.uncapped_cumulative_layout_shift no CrUX BigQuery.
Após 1o 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 CrUX BigQuery a seguir vai comparar o CLS antigo e 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
Você poderá continuar usando esses dados por até seis meses, com a desativação da "CLS antiga" em 14 de dezembro de 2021.
Atualização da ponderação de CLS no Lighthouse
Quando a CLS foi apresentada pela primeira vez no Lighthouse, ela era uma nova métrica brilhante. Assim, para garantir que os desenvolvedores tivessem tempo para testar, comparar e otimizar, a CLS teve um peso menor na pontuação de desempenho.
Agora, depois de passar algum tempo sob as mãos dos desenvolvedores, a pontuação do Lighthouse aumentou o peso da CLS de 5% para 15%, consistente com a metodologia de fazer com que as Core Web Vitals sejam as métricas mais ponderadas na pontuação do Lighthouse.
As ponderações atualizadas das métricas no Lighthouse v8 estão disponíveis na calculadora de pontuação.
A implementação de CLS do Lighthouse 8.0 inclui o janelamento e a contribuição da CLS de subframes. Antes da versão 8.0, a CLS no Lighthouse não incluía a CLS dos subframes no cálculo da métrica, mas agora inclui. Só para confirmar, o CLS de campo medido pelo CrUX também processa janelas e subframes da mesma forma.
Ainda assim, a principal diferença entre a CLS de laboratório e de campo é que a janela de observação da CLS de laboratório termina em "totalmente carregado", conforme determinado nas condições de laboratório. Já em campo, a janela de observação se estende por toda a vida útil da página, incluindo a atividade pós-carregamento. Dito isso, o ajuste de janelamento reduz significativamente essa diferença.
Medir no campo por conta própria
Para medir a implementação mais recente do CLS, registre isso para seus dados de campo via RUM usando o snippet do PerformanceObserver a seguir.
Ou usando diretamente a biblioteca JavaScript das Métricas da Web, que também foi atualizada com essa mudança.
Atualizações adicionais
Além das atualizações da Mudança de layout cumulativa, as seguintes atualizações relacionadas a métricas também foram feitas nas nossas ferramentas da Web:
- Estamos atualizando para a definição mais recente da métrica Maior exibição de conteúdo. A API CrUX, o PSI, a API PSI e o Search Console serão atualizados em 1o de junho de 2021. O CrUX BigQuery será atualizado em 8 de junho de 2021.
- No CrUX, os limites de tri-agrupamento da Primeira exibição de conteúdo foram atualizados para: Bom: [0-1,8 s], Precisa melhorar: (1,8 s-3 s), Ruim: [3s-PRIMARY]
Conclusões
Esperamos que essa mudança reflita uma transição tranquila para a maioria dos sites e recomendamos que você confira as Métricas da Web e Otimizar a CLS para ver dicas e sugestões sobre como medir e otimizar as mudanças de layout. Como sempre, fique à vontade para entrar em contato pelo grupo web-vitals-feedback para enviar feedback sobre as métricas e nossos fóruns de feedback específicos sobre o Lighthouse e o Chrome UX Report para problemas relacionados. Saúde!
Agradecemos a participação de Johannes Henkel, Rick Viscomi, Vivek Sekhar, Rachel Andrew, Milica Mihajlija, Jeff Jose e PaulIrlandês.
Imagem principal da Barn Images / @barnimages no Unsplash