Saiba mais sobre nossos planos para melhorar a métrica "Cumulative Layout Shift" 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 cumulativa de layout porque a pontuação de cada mudança individual é somada ao longo da vida útil da página.
Embora todas as mudanças de layout sejam experiências insatisfatórias para o usuário, elas fazem mais diferença em páginas que ficam abertas por mais tempo. É por isso que a equipe de Métricas de velocidade do Chrome decidiu melhorar a métrica de 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 todo o ciclo de vida da página. Descobrimos que os usuários geralmente têm 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 ficar abertas por mais tempo. Alguns dos mais comuns são aplicativos 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:
- rolagens infinitas mudando o conteúdo conforme o usuário rola a tela.
- Gerenciadores de entrada que levam mais de 500 ms para atualizar a interface em resposta a uma interação do usuário, sem nenhum tipo de marcador de posição ou padrão de esqueleto.
Incentivamos os desenvolvedores a melhorar as experiências dos usuários, mas também estamos trabalhando para melhorar a métrica e receber feedback sobre possíveis abordagens.
Como decidiremos se uma nova métrica é melhor?
Antes de mergulhar no design de métricas, queríamos garantir que tivéssemos avaliado nossas ideias em uma ampla variedade de páginas da Web e casos de uso reais. Para começar, projetamos um pequeno estudo de usuários.
Primeiro, gravamos vídeos e rastros do Chrome de 34 jornadas de usuários em vários sites. Ao selecionar as jornadas do usuário, buscamos algumas coisas:
- Vários tipos diferentes de sites, como sites de notícias e de compras.
- Várias jornadas do usuário, como carregamento inicial de página, rolagem, navegações em apps de uma única página e interações do usuário.
- Uma variedade do número e da intensidade das mudanças individuais de layout nos sites.
- Poucas experiências negativas nos sites, com exceção das mudanças de layout.
Pedimos para 41 de nossos colegas assistirem a dois vídeos ao mesmo tempo, classificando qual dos dois era melhor em termos de mudança de layout. A partir dessas classificações, criamos uma ordem de classificação idealizada dos sites. Os resultados da classificação dos usuários 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 as navegações em aplicativos de uma única página. Percebemos que alguns sites têm experiências do usuário muito melhores durante essas atividades do que outros.
Como gravamos rastros do Chrome junto com os vídeos, tínhamos 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. Com isso, pudemos ver como cada variante de métrica classificava as jornadas dos usuários e como 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 novos conteúdos chegam por partes. Isso nos levou a experimentar técnicas para agrupar turnos. Para isso, analisamos três abordagens de janelamento:
- Janelas em cascata
- Janelas deslizantes
- Janelas de sessão
Em cada um desses exemplos, a página tem mudanças de layout com diferentes gravidades ao longo do tempo. Cada barra azul representa uma única troca 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 blocos do mesmo tamanho. Eles são chamados 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 dos carregamentos ou nas interações do usuário na página, as mesmas mudanças de layout podem estar em lados diferentes dos limites da janela em cascata.
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 de cada vez, mas é possível 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 em identificar áreas da página com bursts de mudanças de layout, poderíamos começar cada janela em uma mudança e continuar a aumentá-la até encontrarmos 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 problema potencial é que, se não houver lacunas nas trocas de layout, uma métrica baseada em janelas de sessão poderá crescer ilimitadamente, assim como a métrica atual de CLS. Também testamos isso com um tamanho máximo de janela.
Tamanhos das janelas
A métrica pode fornecer resultados muito diferentes dependendo do tamanho real das janelas. Por isso, testamos vários tamanhos de janela diferentes:
- Cada mudança como uma janela própria (sem janelas)
- 100 ms
- 300 ms
- 1 segundo
- 5 segundos
Resumo
Tentamos muitas maneiras de resumir as diferentes janelas.
Percentis
Analisamos o valor máximo da janela, bem como o 95o percentil, 75o percentil e mediana.
Média
Analisamos o valor médio da janela.
Orçamentos
Pensamos se houvesse alguma pontuação mínima de troca de layout que os usuários não perceberiam e basta contar as mudanças de layout nesse "orçamento" da pontuação. Assim, para vários valores de "orçamento" em potencial, analisamos a porcentagem de mudanças em relação ao orçamento e a pontuação de mudança total em relação ao orçamento.
Outras estratégias
Também vimos muitas estratégias que não envolviam janelas, como a troca total de layout dividida pelo tempo na página e a média das piores N mudanças individuais.
Os resultados iniciais
No geral, testamos 145 definições de métricas diferentes com base nas permutações das 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 de acordo com o quão perto eles estavam da classificação ideal.
Para obter uma linha de base, também classificamos todos os sites pela pontuação atual de CLS. O CLS ficou em 32o lugar, empatado 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 ordens aleatórias. Como esperado, a ordenação aleatória se saiu pior do que todas as estratégias testadas.
Para entender se podemos ter um overfitting para o conjunto de dados, após nossa análise, gravamos alguns vídeos e traces de mudança de layout, classificamos manualmente e vimos que as classificações das métricas eram muito semelhantes para o conjunto de dados novo e o original.
Algumas estratégias 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. Como cada uma teve aproximadamente o mesmo desempenho, planejamos avançar com uma análise mais profunda sobre as três. Também queremos ouvir o feedback dos desenvolvedores para entender se há fatores fora da experiência do usuário que devemos 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 um segundo
- Janelas de sessão limitadas a 5 segundos com intervalo de 1 segundo
- Janelas de sessão ilimitadas com intervalo de 1 segundo
Todos eles tiveram uma classificação muito boa no 95o percentil e no máximo.
Mas para tamanhos de janela tão grandes, nos preocupamos com o uso do 95o percentil — frequentemente estávamos analisando apenas janelas de 4 a 6, e o 95o percentil disso é muita interpolação. Não está claro o que a interpolação está fazendo em termos do valor da métrica. O valor máximo está muito mais claro, então decidimos seguir em frente e verificar 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 trocas de layout, ela terá uma longa janela de sessão com a mesma pontuação da CLS atual.
- Essa métrica não considerou o tempo de inatividade diretamente. Ela analisou apenas as mudanças que aconteceram na página, e não os momentos em que ela não estava mudando.
Percentis altos de janelas curtas
A janela deslizante máxima de 300 ms teve uma classificação muito alta, bem como o 95o percentil. 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. Aproveitar o máximo é muito mais claro e simples do que pegar o 95o percentil. Então, novamente, decidimos seguir em frente e verificar o máximo.
Estratégias que não deram certo
Estratégias que tentaram olhar para a experiência "média" de tempo gasto tanto sem quanto com trocas de layout tiveram um desempenho muito ruim. Nenhum dos resumos da mediana ou do 75o percentil de qualquer estratégia de janelamento classificou bem os sites. A soma das trocas de layout ao longo do tempo também não.
Avaliamos vários "orçamentos" para mudanças de layout aceitáveis:
- Porcentagem de mudanças de layout acima de um orçamento. Para orçamentos variados, todas elas têm uma classificação muito baixa.
- Média de deslocamento de layout acima de algum 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 usar apenas 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 podermos obter dados sobre o uso no mundo real de um conjunto muito maior de sites. Planejamos usar uma abordagem semelhante para classificar sites com base em suas pontuações métricas para fazer a análise em maior escala:
- Classifique todos os sites por CLS e por cada nova métrica candidata.
- Quais sites são classificados de maneira mais diferente pela CLS e por cada candidato? Encontramos algo inesperado nesses 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 nos carregamentos de páginas 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
Adoraríamos receber feedback de desenvolvedores Web sobre essas abordagens. Alguns pontos a serem considerados 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 nos esforçando para facilitar a adoção das métricas pelos desenvolvedores, incluindo-as na biblioteca web-vitals, documentando em web.dev e relatando-as em nossas ferramentas para desenvolvedores, como o Lighthouse.
Vantagens e desvantagens das métricas
Uma das principais estratégias resume as janelas de troca de layout como uma média, e as outras relatam a janela máxima. Para páginas que ficam abertas por muito tempo, a média provavelmente relatará um valor mais representativo, mas, em geral, provavelmente será mais fácil para os desenvolvedores agirem em uma única janela. Eles podem registrar a data em que ela ocorreu, os elementos que mudaram e assim por diante. Queremos saber o que é mais importante para os desenvolvedores.
Você acha que as janelas deslizantes ou de sessão são mais fáceis de entender? As diferenças são importantes para você?
Como dar feedback
É possível testar as novas métricas de mudança de layout em qualquer site usando nossos exemplos de implementações de JavaScript ou a bifurcação da extensão Core Web Vitals.
Envie seu feedback por e-mail para o Grupo do Google web-vitals-feedback, com "[Layout Shift Metrics]" no assunto. Queremos muito saber sua opinião.