Saiba mais sobre nossos planos para melhorar a métrica "Mudança de layout cumulativa" e envie seu feedback.
A Cumulative Layout Shift (CLS) é uma métrica que mede a estabilidade visual de uma página da Web. A métrica é chamada de mudança de layout cumulativa porque a pontuação de cada mudança individual é somada durante a vida útil da página.
Embora todas as mudanças de layout sejam experiências ruins para o usuário, elas se acumulam mais em páginas que ficam abertas por mais tempo. Por isso, a equipe de métricas de velocidade do Chrome se propôs a melhorar a métrica CLS para que ela seja mais neutra em relação ao tempo gasto em uma página.
É importante que a métrica se concentre na experiência do usuário durante toda a vida útil da página, já que descobrimos que os usuários costumam ter experiências negativas após o carregamento, enquanto rolam ou navegam pelas páginas. No entanto, ouvimos preocupações sobre como isso afeta páginas que têm uma duração longa, ou seja, páginas que o usuário geralmente abre há muito tempo. Há vários tipos diferentes de páginas que tendem a permanecer abertas por mais tempo. Alguns dos mais comuns são apps de mídia social com rolagem infinita e aplicativos de página única.
Uma análise interna de páginas de longa duração com altas pontuações de CLS descobriu que a maioria dos problemas foi causada pelos seguintes padrões:
- Roladores infinitos movem o conteúdo conforme o usuário rola a tela.
- Os gerenciadores de entrada levam mais de 500 ms para atualizar a interface em resposta a uma interação do usuário, sem nenhum tipo de marcador ou esqueleto.
Embora incentivemos os desenvolvedores a melhorar essas experiências do usuário, também estamos trabalhando para melhorar a métrica e procurando feedback sobre possíveis abordagens.
Como decidir se uma nova métrica é melhor?
Antes de mergulhar no design de métricas, queríamos garantir que nossas ideias fossem avaliadas em uma ampla variedade de casos de uso e páginas da Web reais. Para começar, criamos um pequeno estudo de usuários.
Primeiro, gravamos vídeos e rastreamentos do Chrome de 34 jornadas do usuário em vários sites. Ao selecionar as jornadas do usuário, nosso objetivo era:
- Vários tipos diferentes de sites, como sites de notícias e de compras.
- Várias jornadas de usuário, como carregamento inicial da página, rolagem, navegação em uma página do app e interações do usuário.
- Várias mudanças de layout individuais em número e intensidade nos sites.
- Algumas experiências negativas nos sites, além das mudanças de layout.
Pedimos a 41 colegas para assistir dois vídeos de cada vez e avaliar qual deles era melhor em termos de mudança de layout. Com base nessas classificações, criamos uma ordem de classificação ideal dos sites. Os resultados da classificação do usuário confirmaram nossas suspeitas de que nossos colegas, assim como a maioria dos usuários, ficam muito frustrados com as mudanças de layout após o carregamento, especialmente durante a rolagem e a navegação de uma única página no app. Descobrimos que alguns sites têm experiências do usuário muito melhores durante essas atividades do que outros.
Como registramos os rastros do Chrome junto com os vídeos, tivemos todos os detalhes das mudanças de layout individuais em cada jornada do usuário. Eles foram usados para calcular os valores das métricas de cada ideia para cada jornada do usuário. Isso nos permitiu ver como cada variante de métrica classificou as jornadas do usuário e como cada uma era diferente da classificação ideal.
Quais ideias de métricas testamos?
Estratégias de janelamento
Muitas vezes, as páginas têm várias mudanças de layout agrupadas, porque os elementos podem mudar várias vezes à medida que o novo conteúdo chega aos poucos. Isso nos levou a testar técnicas para agrupar turnos. Para isso, analisamos três abordagens de janelas:
- Janelas em cascata
- Janelas deslizantes
- Janelas de sessão
Em cada um desses exemplos, a página tem mudanças de layout de gravidade variável ao longo do tempo. Cada barra azul representa uma única mudança de layout, e o comprimento representa a pontuação dessa mudança. As imagens ilustram como diferentes estratégias de janelamento agrupam as mudanças de layout ao longo do tempo.
Janelas em cascata
A abordagem mais simples é dividir a página em janelas de tamanhos iguais. Elas são chamadas de janelas em cascata. Observe acima que a quarta barra realmente parece ser agrupada na segunda janela em cascata, mas como as janelas têm um tamanho fixo, elas ficam na primeira janela. Se houver pequenas diferenças no tempo de carregamento ou nas interações do usuário na página, as mesmas mudanças de layout poderão cair em lados diferentes dos limites da janela de rolagem.
Janelas deslizantes
Uma abordagem que permite ver mais agrupamentos possíveis do mesmo tamanho é atualizar continuamente a janela potencial ao longo do tempo. A imagem acima mostra uma janela deslizante por vez, mas podemos analisar todas as janelas deslizantes possíveis ou um subconjunto delas para criar uma métrica.
Janelas de sessão
Se quiséssemos nos concentrar na identificação de áreas da página com explosões de mudanças de layout, poderíamos iniciar cada janela em uma mudança e continuar aumentando até encontrar uma lacuna de determinado tamanho entre as mudanças de layout. Essa abordagem agrupa as mudanças de layout e ignora a maior parte da experiência do usuário que não muda. Um possível problema é que, se não houver lacunas nas trocas de layout, uma métrica baseada em janelas de sessão poderá crescer sem limites, assim como a métrica CLS atual. Também testamos isso com um tamanho máximo de janela.
Tamanhos de janela
A métrica pode gerar resultados muito diferentes dependendo do tamanho das janelas. Por isso, testamos vários tamanhos de janela:
- Cada mudança como uma janela própria (sem janelas)
- 100 ms
- 300 ms
- 1 segundo
- 5 segundos
Resumo
Tentamos várias maneiras de resumir as diferentes janelas.
Percentis
Analisamos o valor máximo da janela, bem como o percentil 95, o percentil 75 e a mediana.
Média
Analisamos o valor médio da janela.
Orçamentos
Pensamos se talvez houvesse uma pontuação mínima de mudança de layout que os usuários não notassem e se poderíamos contar as mudanças de layout acima desse "orçamento" na pontuação. Para vários valores de "orçamento" em potencial, analisamos a porcentagem de turnos acima do orçamento e a pontuação total do turno acima do orçamento.
Outras estratégias
Também analisamos muitas estratégias que não envolviam janelas, como a mudança total de layout dividida pelo tempo na página e a média das piores mudanças individuais.
Os resultados iniciais
No geral, testamos 145 definições de métricas diferentes com base nas ideias acima. Para cada métrica, classificamos todas as jornadas dos usuários pela pontuação na métrica e, em seguida, classificamos as métricas pelo quão perto eles estavam da classificação ideal.
Para ter uma referência, também classificamos todos os sites pela pontuação atual de CLS. A CLS ficou em 32º lugar, empatada com 13 outras estratégias, então foi melhor do que a maioria das permutações das estratégias acima. Para garantir que os resultados fossem significativos, também adicionamos três ordenações aleatórias. Como esperado, a ordenação aleatória se saiu pior do que todas as estratégias testadas.
Para entender se estávamos fazendo uma superadaptação para o conjunto de dados, após a análise, gravamos alguns novos vídeos e rastros de mudança de layout, classificamos manualmente e observamos que as classificações das métricas eram muito semelhantes para o novo conjunto de dados e o original.
Algumas estratégias diferentes se destacaram nas classificações.
Melhores estratégias
Quando classificamos as estratégias, descobrimos que três tipos de estratégias estão no topo da lista. Cada um deles teve aproximadamente a mesma performance, então planejamos continuar com uma análise mais aprofundada nos três. Também queremos receber feedback dos desenvolvedores para entender se há fatores além da experiência do usuário que precisamos considerar ao decidir entre eles. Veja abaixo como enviar feedback.
Altos percentis de janelas longas
Algumas estratégias de janelamento funcionaram bem com tamanhos de janela longos:
- Janelas deslizantes de 1 segundo
- Janelas de sessão limitadas a 5 segundos com um intervalo de 1 segundo
- Janelas de sessão sem limite com intervalo de 1 segundo
Todos eles tiveram uma classificação muito boa na percentila 95 e no máximo.
No entanto, para tamanhos de janela tão grandes, estávamos preocupados em usar a 95ª percentil. Muitas vezes, analisávamos apenas quatro a seis janelas, e usar a 95ª percentil delas é muita interpolação. Não está claro o que a interpolação está fazendo em relação ao valor da métrica. O valor máximo é muito mais claro, então decidimos continuar verificando o máximo.
Média de janelas de sessão com intervalos longos
A média das pontuações de todas as janelas de sessão não limitadas com intervalos de 5 segundos entre elas teve um desempenho muito bom. Essa estratégia tem algumas características interessantes:
- Se a página não tiver lacunas entre as mudanças de layout, ela vai acabar sendo uma janela de sessão longa com a mesma pontuação do CLS atual.
- Essa métrica não leva em consideração o tempo de inatividade diretamente. Ela analisa apenas as mudanças que ocorreram na página, e não os momentos em que a página não estava mudando.
Percentis altos de janelas curtas
A janela deslizante máxima de 300 ms e o percentil 95 tiveram classificações muito altas. Para janelas deslizantes mais curtas, há menos interpolação de percentil do que tamanhos de janela maiores, mas também nos preocupamos com janelas deslizantes "repetidas". Se um conjunto de mudanças de layout ocorrer em dois frames, há várias janelas de 300 ms que as incluem. Usar o valor máximo é muito mais claro e simples do que usar o valor do percentil 95. Por isso, decidimos verificar o valor máximo.
Estratégias que não deram certo
As estratégias que tentaram analisar a experiência "média" do tempo gasto sem mudanças de layout e com mudanças de layout foram muito ruins. Nenhum dos resumos de percentil 75 ou mediana de nenhuma estratégia de janela classificou os sites bem. Assim como a soma das mudanças de layout ao longo do tempo.
Avaliamos vários "orçamentos" diferentes para mudanças de layout aceitáveis:
- Porcentagem de mudanças de layout acima de um determinado orçamento. Para vários orçamentos, eles tiveram uma classificação muito baixa.
- Mudança de layout média acima de um certo excesso. A maioria das variações dessa estratégia teve um desempenho ruim, mas o excesso médio em uma sessão longa com uma grande lacuna teve um desempenho quase tão bom quanto a média de janelas de sessão com lacunas longas. Decidimos seguir em frente com a segunda opção porque ela é mais simples.
Próximas etapas
Análise em grande escala
Implementamos as principais estratégias listadas acima no Chrome para receber dados sobre o uso real de um conjunto muito maior de sites. Planejamos usar uma abordagem semelhante de classificação de sites com base nas pontuações de métricas para fazer a análise em grande escala:
- Classifique todos os sites por CLS e por cada nova métrica candidata.
- Quais sites são classificados de forma mais diferente pelo CLS e por cada candidato? Encontramos algo inesperado ao analisar esses sites?
- Quais são as maiores diferenças entre as novas métricas candidatas? Alguma dessas diferenças se destaca como vantagens ou desvantagens de um candidato específico?
- Repita a análise acima, mas agrupando por tempo gasto em cada carregamento de página. Há uma melhoria esperada para carregamentos de página de longa duração com mudança de layout aceitável? Há resultados inesperados para páginas de curta duração?
Feedback sobre nossa abordagem
Queremos receber feedback dos desenvolvedores da Web sobre essas abordagens. Algumas considerações importantes ao considerar as novas abordagens:
O que não muda
Queremos esclarecer que muitas coisas não vão mudar com a nova abordagem:
- Nenhuma das nossas ideias de métricas muda a forma como as pontuações de mudança de layout para frames individuais são calculadas, apenas a maneira como resumemos vários frames. Isso significa que a API JavaScript para mudanças de layout permanece a mesma, e os eventos subjacentes nos rastros do Chrome usados pelas ferramentas do desenvolvedor também permanecem os mesmos. Os retângulos de mudança de layout em ferramentas como WebPageTest e Chrome DevTools continuam funcionando da mesma forma.
- Vamos continuar trabalhando para facilitar a adoção das métricas pelos desenvolvedores, incluindo-as na biblioteca de Core Web Vitals, documentando-as no web.dev e informando-as nas nossas ferramentas para desenvolvedores, como o Lighthouse.
Vantagens e desvantagens entre as métricas
Uma das principais estratégias resume as janelas de mudança de layout como uma média, e as outras informam a janela máxima. Para páginas que ficam abertas por muito tempo, a média provavelmente vai informar um valor mais representativo, mas, em geral, é mais fácil para os desenvolvedores agir em uma única janela. Eles podem registrar quando ocorreu, os elementos que mudaram e assim por diante. Queremos saber qual é o mais importante para os desenvolvedores.
Você acha as janelas deslizantes ou de sessão mais fáceis de entender? As diferenças são importantes para você?
Como dar feedback
Você pode testar as novas métricas de mudança de layout em qualquer site usando nosso exemplo de implementações de JavaScript ou nossa versão da extensão das Core Web Vitals.
Envie um e-mail com feedback para nosso grupo do Google web-vitals-feedback com o assunto "[Layout Shift Metrics]". Queremos saber sua opinião.