Otimizar a CLS em 0,2 levou a um aumento de 15% nas visualizações de página por sessão, a durações de sessão 13% mais longas e a uma redução de 1,72 ponto percentual na taxa de rejeição.
Central de Ajuda do Yahoo! Japan é uma das maiores empresas de mídia do Japão, fornecendo mais de 79 bilhões de visualizações de página por mês. A plataforma de notícias deles, o Yahoo! 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, elas correlacionaram a pontuação aprimorada da Mudança de layout cumulativa (CLS) do site com um aumento de 15% nas visualizações de página por sessão e de 13% na duração da sessão.
0,2
Melhoria na CLS
15,1%
Mais visualizações de página por sessão
13,3%
Sessão mais longa
A movimentação inesperada do conteúdo da página 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 felizes, o layout da página precisa permanecer estável durante todo o ciclo de vida da jornada do usuário. Para o Yahoo! Japão Notícias que essa melhoria teve um impacto positivo significativo nas métricas de engajamento crítico dos negócios.
Para detalhes técnicos sobre como eles melhoraram o CLS, leia a documentação do Yahoo! JAPAN News da equipe de engenharia do Google Notícias.
Identificação do problema
Monitorar as Core Web Vitals, incluindo o CLS, é crucial para detectar problemas e identificar a origem deles. No Yahoo! JAPAN News, o Search Console forneceu uma ótima visão geral de grupos de páginas com problemas de desempenho, e o Lighthouse ajudou a identificar oportunidades por página para melhorar a experiência na página. Usando essas ferramentas, eles descobriram que a página de detalhes do artigo tinha CLS ruim.
![Relatório de Core Web Vitals do Google Search Console mostrando um índice alto de CLS para a página de detalhes do artigo.](https://web.dev/static/case-studies/yahoo-japan-news/image/google-search-console-cor-65713bd9c58c3.png?authuser=7&hl=pt)
![Lighthouse para evitar grandes mudanças de layout mostrando elementos de DOm que mais contribuem para a CLS na página.](https://web.dev/static/case-studies/yahoo-japan-news/image/lighthouse-avoid-large-la-23c5555fd5f8f.png?authuser=7&hl=pt)
É importante ter em mente a parte cumulativa da mudança de layout cumulativa. A pontuação é capturada durante todo o ciclo de vida da página. No mundo 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 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. As regiões de mudança de layout no DevTools mostram elementos que contribuem para a CLS, destacando-os com um retângulo azul sempre que ocorre uma mudança de layout.
![Página de detalhes do artigo com retângulos azuis sobrepostos na imagem principal e no texto.](https://web.dev/static/case-studies/yahoo-japan-news/image/article-details-page-blu-565ff494e023.png?authuser=7&hl=pt)
Eles descobriram que uma mudança de layout ocorria depois que a imagem principal na parte de cima do artigo era carregada na primeira visualização.
![Capturas de tela da página de detalhes do artigo mostrando uma comparação lado a lado antes e depois da mudança de layout.](https://web.dev/static/case-studies/yahoo-japan-news/image/screenshots-the-article-b6de7e5cb4ab7.jpg?authuser=7&hl=pt)
No exemplo acima, quando a imagem termina de carregar, o texto é empurrado para baixo (a mudança de posição é indicada com a linha vermelha).
Melhorar a CLS para imagens
Para imagens de tamanho fixo, as mudanças de layout podem ser impedidas especificando os atributos width
e height
no elemento img
e usando a propriedade CSS
aspect-ratio
,
disponível em navegadores mais recentes. No entanto, o Yahoo! 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.
A equipe usou 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. Para usar esse método, é preciso saber com antecedência a proporção da imagem, que era possível conseguir com a API de back-end.
![Capturas de tela da página de detalhes do artigo mostrando uma comparação lado a lado antes e depois da otimização da CLS.](https://web.dev/static/case-studies/yahoo-japan-news/image/screenshots-the-article-5191c90be0709.jpg?authuser=7&hl=pt)
Resultados
O número de URLs com baixo desempenho no Search Console diminuiu 98%, e a CLS nos dados de laboratório diminuiu de cerca de 0,2 para 0. Mais importante, houve várias melhorias correlacionadas nas métricas de negócios.
![Relatório do Search Console mostrando uma queda significativa nas páginas com problemas de desempenho.](https://web.dev/static/case-studies/yahoo-japan-news/image/search-console-report-sho-a2a53f06e3baf.png?authuser=7&hl=pt)
Quando o Yahoo! O JAPAN News comparou as métricas de engajamento do usuário antes e depois da otimização do CLS, percebeu várias melhorias:
15,1%
Mais visualizações de página por sessão
13,3%
Sessão mais longa
1,72%*
Taxa de rejeição mais baixa (*pontos percentuais)
Ao melhorar a CLS e outras métricas das Core Web Vitals, o Yahoo! JAPAN News também recebeu o rótulo"Página rápida" no menu de contexto do Chrome para Android.
![Marcador de página rápido no Chrome para Android.](https://web.dev/static/case-studies/yahoo-japan-news/image/fast-page-label-chrome-da3bd8521a851.png?authuser=7&hl=pt)
Mudanças de layout são frustrantes e desencorajam os usuários a ler mais páginas, mas isso pode ser melhorado com o uso das ferramentas adequadas, a identificação de problemas e a aplicação de práticas recomendadas. Melhorar a CLS é uma chance de aprimorar seus negócios.
Para mais informações, consulte a Central de Ajuda do Yahoo! Japan (link em inglês).