A otimização da CLS em 0,2 levou a um aumento de 15% nas visualizações de página por sessão, 13% mais tempo de sessão e uma redução de 1,72 ponto percentual na taxa de rejeição.
Yahoo! A JAPAN é uma das maiores empresas de mídia do Japão, oferecendo mais de 79 bilhões de visualizações de página por mês. A plataforma de notícias Yahoo! A JAPAN News tem mais de 22 bilhões de visualizações de página por mês e uma equipe de engenharia dedicada a melhorar a experiência do usuário.
Ao monitorar continuamente as Core Web Vitals, eles correlacionaram a pontuação melhorada de Cumulative Layout Shift (CLS) do site com um aumento de 15% nas visualizações de página por sessão e 13% na duração da sessão.
0,2
Melhoria da CLS
15,1%
Mais visualizações de página por sessão
13,3%
Duração maior da sessão
O conteúdo da página que se move de forma inesperada geralmente causa cliques acidentais, desorientação na página e, por fim, frustração do usuário. Usuários frustrados tendem a não ficar por muito tempo. Para manter os usuários satisfeitos, o layout da página precisa permanecer estável durante todo o ciclo de vida da jornada do usuário. No Yahoo! JAPAN News, essa melhoria teve um impacto positivo significativo nas métricas de engajamento essenciais para os negócios.
Para conferir detalhes técnicos sobre como eles melhoraram o CLS, leia o Yahoo! Postagem da equipe de engenharia da JAPAN News.
Como identificar o problema
Monitorar as Core Web Vitals, incluindo a CLS, é fundamental para detectar problemas e identificar a origem deles. No Yahoo! A JAPAN News, Search Console, forneceu uma ótima visão geral de grupos de páginas com problemas de desempenho, e o Lighthouse ajudou a identificar oportunidades de melhoria da experiência em cada página. Usando essas ferramentas, eles descobriram que a página de detalhes do artigo tinha um CLS ruim.
É importante lembrar da parte cumulativa do Cumulative Layout Shift. A pontuação é capturada durante todo o ciclo de vida da página. Na vida real, a pontuação pode incluir mudanças que acontecem como resultado de interações do usuário, como rolar uma página ou tocar em um botão. Para coletar as pontuações de CLS dos dados de campo, a equipe integrou os relatórios da biblioteca JavaScript web-vitals.
A equipe usou o Chrome DevTools para identificar quais elementos estavam fazendo mudanças de layout na página. O recurso Layout Shift Regions nas Ferramentas do desenvolvedor visualiza os elementos que contribuem para a CLS destacando-os com um retângulo azul sempre que ocorre uma mudança de layout.
Eles descobriram que uma mudança de layout ocorreu depois que a imagem principal na parte de cima do artigo foi carregada para a primeira visualização.
No exemplo acima, quando a imagem termina de carregar, o texto é empurrado para baixo (a mudança de posição é indicada pela linha vermelha).
Como melhorar o CLS para imagens
Para imagens de tamanho fixo, é possível evitar mudanças de layout especificando os atributos width
e height no elemento img e usando a propriedade
aspect-ratio
do CSS disponível em navegadores modernos. No entanto, o Yahoo! A JAPAN News precisava
oferecer suporte não apenas a navegadores modernos, mas também a navegadores instalados em sistemas operacionais
relativamente antigos, como o iOS 9.
Eles usaram caixas de proporção, um método que usa marcação para reservar o espaço na página antes que a imagem seja carregada. Esse método exige o conhecimento prévio da proporção da imagem, que foi possível acessar pela API de back-end.
Resultados
O número de URLs com baixa performance no Search Console diminuiu 98%, e o CLS nos dados do laboratório diminuiu de cerca de 0,2 para 0. Mais importante ainda, houve várias melhorias correlacionadas nas métricas de negócios.
Quando o Yahoo! A JAPAN News comparou as métricas de engajamento do usuário antes e depois da otimização do CLS e notou várias melhorias:
15,1%
Mais visualizações de página por sessão
13,3%
Duração maior da sessão
1,72%*
Taxa de rejeição mais baixa (*pontos percentuais)
Ao melhorar a CLS e outras métricas das Core Web Vitals, o Yahoo! A JAPAN News também recebeu o rótulo"Página rápida" no menu de contexto do Chrome para Android.
As mudanças de layout são frustrantes e desencorajam os usuários a ler mais páginas, mas isso pode ser melhorado usando as ferramentas adequadas, identificando problemas e aplicando as práticas recomendadas. Melhorar o CLS é uma oportunidade para melhorar sua empresa.
Para mais informações, leia o Yahoo! Postagem da equipe de engenharia do JAPAN.