Mais de 50 mil desenvolvedores visitam o DavidWalshBlog todo mês, do mundo todo, para aprender truques de JavaScript e corrigir problemas em seus códigos. Infelizmente, alguns deles têm uma experiência lenta no website.
David monitora o desempenho de seus Core Net Vitals e o desempenho geral com Métricas de solicitação. Recentemente, notamos que sua pontuação de desempenho no CLS estava bem lenta para usuários de desktop e dispositivos móveis.

Espere, o que é CLS?
Mudança de format cumulativa (CLS) é um dos Núcleo Net Important métricas de desempenho. Ele não mede o tempo de carregamento diretamente, em vez disso, mede o quanto uma página turnos enquanto ele está sendo carregado. Você definitivamente já viu isso e ficou incomodado com isso. Essas mudanças fazem um website sentir lento para um usuário.
CLS e o resto do Core Net Vitals são tremendous importantes. Não só porque eles medem a experiência do usuário, mas também porque eles influenciam o pagerank de um website na busca. E o tráfego de busca é vida para blogueiros, websites de mídia, lojas de e-commerce e praticamente todo mundo com um website.
Se pudermos consertar o problema do CLS do website, daremos aos leitores uma experiência mais rápida e aumentaremos a classificação de busca para que David possa ajudar ainda mais pessoas. Parece um ótimo incentivo, vamos descobrir.
Falha com o Google Lighthouse
Para encontrar um problema de desempenho, muitos desenvolvedores usarão uma ferramenta como o Google Lighthouse. Eu executei um relatório do Lighthouse no website do David, e aqui está o que obtive.

Uma pontuação perfeita! Vamos arrumar as malas e ir para casa.
O problema é que O Google Lighthouse é uma mentira. Usuários reais não terão esse desempenho. Essa pontuação representa apenas um único teste, do meu computador ultrarrápido, nos EUA, em uma conexão de banda larga rápida.
Os usuários reais de David vêm de todo o mundo, em vários dispositivos e redes, e em todos os momentos do dia. A experiência de desempenho deles está longe de ser perfeita. É por isso que precisamos obter monitoramento de usuário actual 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 posts em seu website. O Request Metrics rastreia a pontuação 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 Jogue Grand Poo World e Entrevista Pornhub têm pontuações CLS preocupantes. Também podemos rastrear os elementos responsáveis pelo CLS e, para a maioria das postagens, principal > article > p
. Isso significa que o primeiro parágrafo do artigo é a coisa mudando. Por que ele faria isso?
O que há de comum nessas postagens com as piores pontuações CLS? Imagens. Imagens são uma causa muito comum de problemas CLS porque um navegador nem sempre sabe o tamanho de uma imagem até que ela seja baixada. O navegador assume que é 0x0 até que tenha a imagem, então turnos tudo ao redor para abrir espaço.
Postagens com muitas imagens mudavam muitas vezes conforme cada imagem period baixada e o artigo mudava para abrir espaço para o novo conteúdo.
Usando imagens corretamente para CLS
Para evitar mudanças de format ao usar imagens, precisamos dar dicas ao navegador sobre o tamanho das imagens. O navegador usará essas dicas para reservar espaço no format para a imagem quando ela terminar de baixar.
Observe que width e top são especificados como seus próprios atributos — não fazem parte de uma tag fashion. Esses atributos definem tanto um tamanho base da imagem quanto a proporção a ser usada. Você ainda pode usar CSS para tornar a imagem maior ou menor daqui.
Observe também que não há px
unidade especificada.
Tamanhos de imagem no WordPress
DavidWalsh.identify é hospedado no WordPress, onde há algumas ferramentas internas 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 de imagem alguns dias atrás, e já estamos vendo uma melhora. O CLS caiu 20% para 0,123. Estamos bem perto da faixa “Bom” do CLS agora.

Ainda há algumas questões a serem resolvidas em relação às fontes, mas isso será assunto para outra ocasião e outro submit.
Se você está procurando melhorar o desempenho actual do seu website, ou está preocupado em perder seu website positioning juice devido a problemas no Core Net Important, dê uma olhada em Métricas de solicitação. Ele tem ferramentas para monitorar seu desempenho e dicas práticas para realmente corrigir os problemas.
Além disso, é gratuito, o que tem tudo a seu favor.

Sobre Todd Gardner
Todd Gardner é um empreendedor e desenvolvedor de software program que construiu vários produtos lucrativos. Ele pressiona por ferramentas simples, software program sustentável e equilíbrio entre complexidade e risco. Ele é o cofundador da TrackJS e Request Metrics, onde ajuda milhares de desenvolvedores a construir websites mais rápidos e confiáveis. Ele também produz o programa de comédia de software program PubConf.