Planos para melhorar a métrica de CLS para que sejam mais imparciais para páginas de longa duração.
Nós (equipe de Métricas de velocidade do Chrome) destacamos recentemente nossa pesquisa inicial sobre opções para tornar a métrica de CLS mais justa para páginas que ficam abertas por um longo tempo de resposta. Recebemos muitas feedback útil e, depois de concluir a análise em grande escala, finalizamos a alteração que planejamos fazer na métrica: janela máxima da sessão com 1 segundo intervalo de 5 segundos.
Leia os detalhes a seguir.
Como avaliamos as opções?
Analisamos e pegamos todos os feedbacks recebidos da comunidade de desenvolvedores em conta.
Também implementamos as principais opções no Chrome e fizemos uma análise em grande escala das métricas em milhões de páginas da Web. Qa verificou quais tipos de sites cada opção melhorou e como as opções foram comparadas, especialmente analisando sites que receberam pontuações diferentes por diferentes . No geral, descobrimos que:
- Todas as opções reduziram a correlação entre o tempo gasto na página e pontuação da troca de layout.
- Nenhuma das opções resultou em uma pontuação pior para qualquer página. Portanto, não há não se preocupe, pois essa mudança pode piorar as pontuações do seu site.
Pontos de decisão
Por que uma janela de sessão?
Na postagem anterior, abordamos alguns tipos de janelamento diferentes estratégias para agrupar trocas de layout e, ao mesmo tempo, garantir que a pontuação não aumente ilimitadas. O feedback que recebemos dos desenvolvedores favoreceu esmagadoramente a estratégia de janela de sessão porque agrupa as trocas de layout mais intuitivamente.
Veja um exemplo para revisar as janelas de sessão:
No exemplo acima, muitas mudanças de layout ocorrem ao longo do tempo à medida que o usuário visualiza o página. Cada um deles é representado por uma barra azul. Observe acima que as barras azuis têm alturas diferentes; que representam a pontuação dos cada troca de layout individual. Uma janela de sessão começa com a primeira troca de layout e continua a se expandir até que haja uma lacuna sem trocas de layout. Quando o próximo quando ocorre uma mudança de layout, uma nova janela de sessão é iniciada. Como existem três lacunas sem trocas de layout, há três janelas de sessão no exemplo. Semelhante ao definição atual de CLS, as pontuações de cada deslocamento são somadas, de modo que cada a pontuação da janela é a soma das trocas de layout individuais dela.
Com base no valor inicial pesquisa, escolhemos um intervalo de um segundo entre as janelas de sessão, que funcionou bem fazer análises em grande escala. Então, a "Lacuna de sessão" mostrado no exemplo acima é 1 segundo.
Por que a janela de sessão máxima?
Restringimos o resumo estratégias para duas opções em nossa pesquisa inicial:
- Pontuação média de todas as janelas de sessão, para uma sessão muito grande janelas (não limitadas com intervalos de cinco segundos entre elas).
- A pontuação máxima de todas as janelas de sessão, para janelas de sessão menores (limitado a cinco segundos, com intervalos de um segundo entre eles).
Após a pesquisa inicial, adicionamos cada métrica ao Chrome para que pudéssemos fazer análise em grande escala de milhões de URLs. Na análise em grande escala, encontramos muitos URLs com padrões de mudança de layout como este:
No canto inferior direito, é possível ver que há apenas uma pequena mudança de layout Janela de sessão 2, com pontuação muito baixa. Isso significa que a pontuação média é muito baixa. Mas e se o desenvolvedor corrigir essa pequena mudança de layout? Depois, é calculada apenas na Janela de sessão 1, ou seja, a pontuação da página quase dobra. Seria realmente confuso e desanimador para os desenvolvedores para melhorar suas trocas de layout e só descobrir que a pontuação piorou. E remover essa pequena mudança de layout é obviamente um pouco melhor para o usuário experiência do usuário, de modo que isso não deve piorar a pontuação.
Devido a esse problema com as médias, decidimos prosseguir com a em janelas menores, limitadas e máximas. Então, no exemplo acima, a Janela de sessão 2 seria ignorado, e apenas a soma das trocas de layout na Janela de sessão 1 ser denunciado.
Por que 5 segundos?
Avaliamos vários tamanhos de janela e encontramos duas coisas:
- Para janelas curtas, carregamento de página mais lento e respostas mais lentas às interações do usuário poderia dividir as trocas de layout em várias janelas e melhorar a pontuação. Qa queria manter a janela grande o suficiente para não recompensar lentidão!
- Algumas páginas têm um fluxo contínuo de pequenas mudanças de layout. Para exemplo, uma página de placares esportivos que muda um pouco a cada atualização de resultado. Esses os turnos são irritantes, mas não ficam mais irritantes com o passar do tempo. Então nós queria garantir que a janela fosse limitada para esses tipos de trocas de layout.
Com esses dois fatores em mente, comparar vários tamanhos de janela em muitos páginas da Web reais, concluímos que cinco segundos seria um bom limite para a tamanho da janela.
Como isso afetará a pontuação de CLS da minha página?
Como essa atualização limita a CLS de uma página, nenhuma página terá uma pontuação pior como resultado dessa mudança.
De acordo com nossa análise, 55% das origens não vão notar nenhuma mudança na CLS no 75o percentil. Isso ocorre porque, no momento, as páginas não têm mudanças de layout, ou elas já estão limitadas a uma janela de sessão única.
As outras origens terão pontuações melhores no 75o percentil com essa mudança. A maioria terá apenas uma pequena melhoria, mas cerca de 3% verá. suas pontuações melhoram com a indicação de que precisa melhorar. ou "ruim" classificação para ter uma "boa" classificação. Essas páginas costumam usar rolagens infinitas ou têm atualizações lentas da interface do usuário, como descrito em nossa apresentação anterior post.
Como posso testar?
Em breve, atualizaremos nossas ferramentas para usar a nova definição de métrica. Até lá, você pode testar a versão atualizada da CLS em qualquer site usando o exemplo JavaScript implementações ou a bifurcação das Core Web Vitals extensão.
Agradecemos a todos que leram a postagem anterior e forneceram feedback.