Planos para melhorar a métrica de CLS para que ela seja mais justa em relação a páginas de longa duração.
Recentemente, nós, da Equipe de métricas de velocidade do Chrome, descrevemos nossa pesquisa inicial sobre opções para tornar a métrica de CLS mais justa para páginas que estão abertas por um longo tempo. Recebemos muitos feedbacks úteis e, depois de concluir a análise em grande escala, finalizamos a mudança que planejamos fazer na métrica: janela máxima de sessão com intervalo de 1 segundo, limitada a 5 segundos.
Confira os detalhes a seguir.
Como avaliamos as opções?
Analisamos todo o feedback recebido da comunidade de desenvolvedores e consideramos tudo isso.
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. Verificamos quais tipos de site cada opção melhorou e como as opções foram comparadas, principalmente analisando os sites com pontuação diferente por opções distintas. No geral, descobrimos que:
- Todas as opções reduziram a correlação entre o tempo gasto na página e a pontuação da troca de layout.
- Nenhuma das opções resultou em uma pontuação pior para qualquer página. Portanto, não se preocupe que essa alteração piorará as pontuações do seu site.
Pontos de decisão
Por que usar uma janela de sessão?
Na postagem anterior, abordamos algumas estratégias diferentes de janelamento para agrupar mudanças de layout e garantir que a pontuação não aumente ilimitadas. O feedback que recebemos dos desenvolvedores foi esmagadoramente favorável à estratégia de janela de sessão, porque ela agrupa as mudanças de layout de forma mais intuitiva.
Confira um exemplo para analisar as janelas de sessão:
No exemplo acima, muitas mudanças de layout ocorrem ao longo do tempo, à medida que o usuário visualiza a página. Cada uma delas é representada por uma barra azul. Observe que as barras azuis têm alturas diferentes. Elas representam a pontuação de cada mudança de layout individual. Uma janela de sessão começa com a primeira mudança de layout e continua a expandir até que haja uma lacuna sem mudanças de layout. Quando a próxima mudança de layout ocorrer, uma nova janela de sessão será iniciada. Como há três lacunas sem mudanças de layout, há três janelas de sessão no exemplo. Semelhante à definição atual de CLS, as pontuações de cada turno são somadas, de modo que a pontuação de cada janela seja a soma das mudanças de layout individuais.
Com base na pesquisa inicial, escolhemos um intervalo de um segundo entre as janelas de sessão, e essa lacuna funcionou bem na nossa análise em grande escala. Portanto, a "Lacuna de sessão" mostrada no exemplo acima é de um segundo.
Por que a janela de sessão máxima?
Refinamos as estratégias de resumo a duas opções em nossa pesquisa inicial:
- A pontuação média de todas as janelas de sessão para janelas de sessão muito grandes (janelas ilimitadas 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 (limitada a 5 segundos, com intervalos de 1 segundo entre elas).
Após a pesquisa inicial, adicionamos cada métrica ao Chrome para que pudéssemos fazer uma 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 notar que há apenas uma única mudança de layout pequena na janela da sessão 2, o que resulta em uma pontuação muito baixa. Isso significa que a pontuação média é muito baixa. Mas e se o desenvolvedor corrigir essa pequena mudança no layout? Em seguida, a pontuação é calculada apenas na janela da sessão 1, o que significa que a pontuação da página quase duplica. Seria muito confuso e desanimador para os desenvolvedores melhorar as mudanças de layout e descobrir que a pontuação piorou. E a remoção dessa pequena mudança de layout é obviamente um pouco melhor para a experiência do usuário, então não deve piorar a pontuação.
Devido a esse problema com as médias, decidimos avançar com as janelas menores, limitadas e máximas. Portanto, no exemplo acima, a janela de sessão 2 seria ignorada e apenas a soma das mudanças de layout na janela de sessão 1 seria informada.
Por que cinco segundos?
Avaliamos vários tamanhos de janela e encontramos dois fatores:
- Para janelas curtas, carregamentos de página mais lentos e respostas mais lentas às interações do usuário podem dividir as mudanças de layout em várias janelas e melhorar a pontuação. Queríamos manter a janela grande o suficiente para não recompensar a lentidão.
- Algumas páginas têm um fluxo contínuo de pequenas mudanças de layout. Por exemplo, uma página com placares esportivos que muda um pouco a cada atualização da pontuação. Essas mudanças são irritantes, mas não ficam mais irritantes com o passar do tempo. Então, queríamos garantir que a janela fosse limitada para esses tipos de mudanças de layout.
Com essas duas coisas em mente, comparando uma variedade de tamanhos de janela em muitas páginas da Web do mundo real, concluímos que cinco segundos seriam um bom limite para o 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.
Com base na nossa análise, 55% das origens não terão nenhuma mudança na CLS no 75o percentil. Isso ocorre porque as páginas não têm mudanças de layout no momento ou as mudanças já estão restritas a uma única janela de sessão.
O restante das origens terá pontuações melhores no 75o percentil com essa mudança. A maioria delas notará apenas uma pequena melhoria, mas cerca de 3% verá uma melhoria nas pontuações, passando de "Precisa de melhorias" ou "Ruim" para uma classificação "boa". Essas páginas tendem a usar controles de rolagem infinitas ou ter muitas atualizações lentas de interface, conforme descrito na postagem anterior.
Como posso testar?
Em breve, vamos atualizar nossas ferramentas para usar a nova definição de métrica. Até lá, é possível testar a versão atualizada da CLS em qualquer site usando o exemplo de implementações JavaScript ou a bifurcação da extensão Web Vitals.
Agradecemos a todos que leram a postagem anterior e deram feedback.