Saiba mais sobre nossos planos para melhorar a métrica "Mudança de layout cumulativa" e envie seu feedback.
A Mudança de layout cumulativa (CLS, na sigla em inglês) é 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 insatisfatórias para o usuário, elas aumentam mais em páginas abertas por mais tempo. É por isso que a equipe de métricas de velocidade do Chrome queria melhorar a métrica de CLS para ser 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, já que descobrimos que os usuários geralmente têm experiências negativas após o carregamento ao rolar ou navegar pelas páginas. No entanto, recebemos preocupações sobre como isso afeta páginas de longa duração, que são páginas que o usuário geralmente abre há muito tempo. Existem vários tipos diferentes de páginas que tendem a ficar abertos 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 pontuações de CLS altas descobriu que a maioria dos problemas foi causada pelos seguintes padrões:
- Rolagens infinitas movendo 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 essas experiências do usuário, mas também estamos trabalhando para melhorar a métrica e receber 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 páginas da Web e casos de uso do mundo real. Para começar, projetamos um pequeno estudo de usuários.
Primeiro, gravamos vídeos e rastros do Chrome de 34 jornadas do usuário por vários sites. Ao selecionar as jornadas do usuário, buscamos algumas coisas:
- diversos tipos de sites, como sites de notícias e de compras.
- Várias jornadas do usuário, como carregamento de página inicial, rolagem, navegações de uma única página no app e interações do usuário.
- Uma variedade de mudanças de número e intensidade de layout individual nos sites.
- Poucas experiências negativas nos sites além das mudanças de layout.
Pedimos para 41 dos nossos colegas assistirem a dois vídeos por vez, classificando qual dos pares era melhor em termos de mudança de layout. A partir dessas classificações, criamos uma ordem idealizada de classificação dos sites. Os resultados da classificação de usuários confirmaram nossas suspeitas de que nossos colegas, como a maioria dos usuários, estão realmente frustrados com mudanças de layout após o carregamento, especialmente durante a rolagem e navegações em aplicativos de página única. Percebemos que alguns sites têm experiências do usuário muito melhores durante essas atividades do que outros.
Como registramos os rastros do Chrome 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 em cada jornada do usuário. Assim, pudemos ver como cada variante de métrica classificava as jornadas do usuário e a diferença entre cada uma e a 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 é incluído. Isso nos levou a testar técnicas para agrupar mudanças. 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 de gravidade variada 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 pedaços de tamanho igual. Essas são as janelas em cascata. Observe que a quarta barra realmente parece ter sido agrupada na segunda janela em cascata, mas como as janelas têm 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 em cascata.
Janelas deslizantes
Uma abordagem que permite ver mais agrupamentos possíveis com o mesmo comprimento é atualizar continuamente a janela potencial ao longo do tempo. A imagem acima mostra uma janela deslizante de cada 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 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 aumentando-a até encontrarmos uma lacuna de um 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 sem mudanças. Um problema potencial é que, se não houver lacunas nas mudanças de layout, uma métrica com base em janelas de sessão pode crescer sem limites, assim como a métrica atual de CLS. Tentamos também com um tamanho máximo de janela.
Tamanhos de janela
A métrica pode fornecer resultados muito diferentes, dependendo do tamanho real das janelas. Por isso, tentamos vários tamanhos de janela diferentes:
- Cada turno 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 95o percentil, 75o percentil e mediana.
Média
Analisamos o valor médio da janela.
Orçamentos
Queríamos saber se havia uma pontuação mínima de mudança de layout que os usuários não perceberiam, e poderíamos simplesmente contar as mudanças de layout acima desse "orçamento" na pontuação. Portanto, para vários valores de "orçamento" potenciais, observamos a porcentagem de mudanças em relação ao orçamento e a pontuação total da mudança em relação ao orçamento.
Outras estratégias
Também analisamos muitas estratégias que não envolveram janelas, como a mudança total de layout dividida pelo tempo na página e a média das N alterações individuais mais malsucedidas.
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 e as classificamos de acordo com a proximidade da classificação ideal.
Para obter uma linha de base, também classificamos todos os sites de acordo com sua pontuação de CLS atual. A CLS ficou em 32o, empatada com 13 outras estratégias, então foi melhor do que a maioria das combinações das estratégias acima. Para garantir que os resultados fossem significativos, também adicionamos três ordens aleatórias. Como esperado, as ordens aleatórias tiveram um desempenho pior do que todas as estratégias testadas.
Para entender se estamos fazendo overfitting para o conjunto de dados, depois da nossa análise registramos alguns vídeos e traces de mudança de layout, classificamos manualmente e percebemos que as classificações das métricas foram muito semelhantes para o conjunto de dados novo 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 ficaram no topo da lista. Cada um teve aproximadamente o mesmo desempenho, então planejamos avançar com uma análise mais profunda sobre os três. Também gostaríamos de receber 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.
Percentis altos 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 intervalo de 1 segundo
- Janelas de sessão ilimitadas com intervalo de um segundo
Todas foram classificadas muito bem no 95o percentil e no máximo.
Mas, para tamanhos de janela tão grandes, estávamos preocupados em usar o 95o percentil. Muitas vezes, olhamos apenas para 4 a 6 janelas, e pegar 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 é muito mais claro, então decidimos continuar verificando o máximo.
Média de janelas de sessão com longos intervalos
A média das pontuações de todas as janelas de sessão ilimitadas com intervalos de cinco 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 longa janela de sessão com a mesma pontuação da CLS atual.
- Essa métrica não considerou diretamente o tempo de inatividade. Ela analisou apenas as mudanças ocorridas na página, e não em 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 o tamanho de janela mais curto, há menos interpolação de percentil do que tamanhos de janela maiores, mas também estávamos preocupados com janelas deslizantes "repetidas". Se um conjunto de mudanças de layout ocorrer em dois frames, haverá várias janelas de 300 ms que as incluem. Tomar o máximo é muito mais claro e simples do que pegar o do 95o percentil. Então, novamente decidimos avançar com a verificação do máximo.
Estratégias que não deram certo
As estratégias que tentaram analisar a experiência "média" de tempo gasto sem mudanças de layout e com mudanças 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 mudanças de layout também não mudou ao longo do tempo.
Avaliamos vários "orçamentos" diferentes para mudanças de layout aceitáveis:
- Percentual de mudanças de layout acima de determinado orçamento. Em vários orçamentos, todos eles tiveram uma classificação muito ruim.
- Mudança média 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 igual à média das janelas de sessão com longas lacunas. Decidimos continuar com apenas a última opção porque ela é mais simples.
Próximas etapas
Análise em grande escala
Implementamos as principais estratégias listadas acima no Chrome para que possamos obter dados sobre o uso real de um conjunto muito maior de sites. Planejamos usar uma abordagem semelhante para classificar sites com base nas pontuações de métricas para fazer a análise em maior escala:
- Classifique todos os sites por CLS e por cada novo candidato a métrica.
- Quais sites são classificados de maneira mais diferente pela 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 das 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. Existe uma melhoria esperada nos carregamentos de página de longa duração com uma mudança de layout aceitável? Observamos algum resultado inesperado para páginas de curta duração?
Feedback sobre nossa abordagem
Adoraríamos receber feedback de desenvolvedores da Web sobre essas abordagens. Alguns pontos a ter em mente ao considerar as novas abordagens:
O que não muda
Queremos esclarecer que muitas coisas não serão alteradas com uma nova abordagem:
- Nenhuma das nossas ideias de métrica muda a maneira como as pontuações de mudanças de layout de frames individuais são calculadas, apenas a maneira como resumemos vários frames. Isso significa que a API JavaScript para mudanças de layout vai permanecer a mesma, e os eventos subjacentes nos traces do Chrome que as ferramentas para desenvolvedores usam também vão permanecer os mesmos. Assim, os retângulos de mudança de layout em ferramentas como WebPageTest e Chrome DevTools continuarão funcionando da mesma maneira.
- Vamos continuar trabalhando para facilitar a adoção das métricas pelos desenvolvedores, incluindo na biblioteca web-vitals, documentando no web.dev e gerando relatórios em nossas ferramentas para desenvolvedores, como o Lighthouse.
Vantagens e desvantagens das métricas
Uma das principais estratégias resume as janelas de mudança de layout como uma média, e o restante informa a janela máxima. Para páginas que ficam abertas por muito tempo, a média provavelmente informará um valor mais representativo, mas, em geral, será mais fácil para os desenvolvedores agirem em uma única janela: eles podem registrar quando isso ocorreu, os elementos que mudaram e assim por diante. Adoraríamos receber feedback sobre 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 nosso Grupo do Google web-vitals-feedback com "[Métricas de mudança de layout]" como assunto. Queremos muito saber sua opinião.