Correção de problemas de mudança cumulativa de layout no DavidWalshBlog

Mais de 50 mil desenvolvedores de todo o mundo visitam o DavidWalshBlog todos os meses para aprender truques de JavaScript e corrigir problemas em seus códigos. Infelizmente, alguns deles têm uma experiência lenta no site.

David acompanha o desempenho de seu Core Web Vitals e o desempenho geral com Métricas de solicitação. Recentemente, notamos que a pontuação de desempenho do CLS estava com uma tendência bastante lenta para usuários de desktop e de dispositivos móveis.

Espere, o que é CLS?

Mudança cumulativa de layout (CLS) é um dos Núcleo Web Vital métricas de desempenho. Ele não mede diretamente o tempo de carregamento; em vez disso, mede o quanto uma página turnos enquanto ele está sendo carregado. O senhor com certeza já viu isso e ficou incomodado. Essas mudanças fazem com que um site sentir lento para um usuário.

O CLS e o restante dos Core Web Vitals são muito importantes. Não apenas porque medem a experiência do usuário, mas também porque influenciam o pagerank de um site na pesquisa. E o tráfego de pesquisa é a vida de blogueiros, sites de mídia, lojas de comércio eletrônico e praticamente todo mundo que tem um site.

Se conseguirmos corrigir o problema de CLS do site, proporcionaremos aos leitores uma experiência mais rápida e aumentaremos a classificação de pesquisa para que David possa ajudar ainda mais pessoas. Parece um ótimo incentivo, vamos pensar nisso.

Falha no Google Lighthouse

Para encontrar um problema de desempenho, muitos desenvolvedores usam uma ferramenta como o Google Lighthouse. Executei um relatório do Lighthouse no site de David, e aqui está o que obtive.

Uma pontuação perfeita! Vamos arrumar as coisas e voltar para casa.

O problema é que o O Google Lighthouse é uma mentira. Os usuários reais não terão esse desempenho. Essa pontuação representa apenas um único teste, realizado em meu computador extremamente rápido, nos EUA, com uma conexão de banda larga rápida.

Os usuários reais de David vêm de todas as partes do mundo, em diferentes dispositivos e redes, e em todos os momentos do dia. Sua experiência de desempenho está longe de ser perfeita. É por isso que precisamos obter monitoramento real do usuário para o desempenho, caso contrário, talvez nunca saibamos que há um problema.

Onde estão os problemas do CLS?

David escreve há muito tempo e tem centenas de publicações em seu site. O Request Metrics rastreia a pontuação do CLS por página para que possamos nos concentrar nos problemas.

A página de maior tráfego é a página raiz, e ela tem um bom CLS. Mas muitas de suas postagens, como Play Grand Poo World e Entrevista Pornhub têm pontuações de CLS preocupantes. Também podemos rastrear os elementos responsáveis pelo CLS e, para a maioria das postagens, seus main > article > p. Isso significa que o primeiro parágrafo do artigo é o que está mudando. Por que o senhor faria isso?

O que há de comum nessas publicações com as piores pontuações de CLS? Imagens. As imagens são uma causa muito comum de problemas de CLS porque um navegador nem sempre sabe o tamanho de uma imagem até que ela seja baixada. O navegador presume que seja 0x0 até ter a imagem e, em seguida, o turnos tudo ao seu redor para abrir espaço.

As publicações com muitas imagens mudavam várias vezes à medida que cada imagem era baixada e o artigo mudava para dar espaço ao novo conteúdo.

Uso correto de imagens para CLS

Para evitar mudanças de layout ao usar imagens, precisamos dar dicas ao navegador sobre o tamanho das imagens. O navegador usará essas dicas para reservar espaço no layout para a imagem quando o download for concluído.

<img src="https://davidwalsh.name/path/to/image" width="300" height="100" />

Observe que a largura e a altura são especificadas como seus próprios atributos, e não como parte de uma tag de estilo. Esses atributos definem o tamanho base da imagem e a proporção a ser usada. O senhor ainda pode usar CSS para tornar a imagem maior ou menor a partir daqui.

Observe também que não há px especificada.

Tamanhos de imagem no WordPress

O DavidWalsh.name está hospedado no WordPress, onde há algumas ferramentas integradas para fazer isso. Podemos utilizar wp_image_src_get_dimensions para obter as dimensões das imagens que ele está usando e adicioná-las à marcação.

Provando que funciona

David fez as alterações na imagem há alguns dias, e já estamos vendo uma melhora. O CLS caiu 20% para 0,123. Estamos muito próximos da faixa “Boa” do CLS agora.

Ainda há alguns problemas a serem resolvidos com relação às fontes, mas isso será assunto para outra ocasião e outra publicação.

Se o senhor deseja melhorar o desempenho real do seu site ou está preocupado com a possibilidade de perder seu SEO juice devido a problemas do Core Web Vital, dê uma olhada em Solicitar métricas. Ele tem as ferramentas para monitorar seu desempenho e dicas práticas para realmente corrigir os problemas.

Além disso, é gratuito, portanto, o senhor tem isso a seu favor.