Por que estou escrevendo isso

Eu administro alguns sites agora e, desde o início, meu desempenho tem aumentado e diminuído. Eu achei isso completamente irritante às vezes. Tudo parece funcionar muito bem para mim localmente, mas depois verifico a análise do meu servidor e vejo que em alguns países minha velocidade tem sido terrível.

Sempre pareceu serCLSouPCLesse tem sido o problema para mim. Então pensei em compartilhar minha experiência e tentar ajudar outras pessoas a descobrir isso, especialmente se você estiver passando pela mesma coisa. Ou talvez você tenha tido problemas com isso e tenha uma perspectiva ou solução única? Eu adoraria ouvir sobre isso.

De acordo comDiário do mecanismo de pesquisa, otimizar essas duas métricas pode melhorar significativamente a visibilidade do seu site e a satisfação do usuário. Isso parecia ótimo em teoria, mas na verdade consertá-los foi uma história diferente. Deixe-me explicar o que aprendi.

O que são CLS e LCP, exatamente?

Antes de entrar em minhas próprias dificuldades, deixe-me explicar o que realmente são, porque quando vi essas siglas pela primeira vez no Google Search Console, não tinha ideia do que significavam.

Mudança cumulativa de layout (CLS)mede o quanto o layout da sua página salta enquanto carrega. Sabe quando você está prestes a tocar em um botão e a página inteira muda, então você clica na coisa errada? Esse é um problema do CLS. É incrivelmente frustrante para o usuário e acontece que os mecanismos de pesquisa também o penalizam por isso.

Maior pintura com conteúdo (LCP)mede quanto tempo leva para o maior elemento visível da sua página carregar. Geralmente é uma imagem principal ou um grande bloco de texto. Se o seu LCP for lento, seus visitantes estarão olhando para uma página meio carregada e muitos simplesmente sairão.

Ambos se enquadram no GooglePrincipais sinais vitais da Web, o que afeta diretamente suas classificações de pesquisa. Portanto, mesmo que seu conteúdo seja brilhante, pontuações baixas de CLS e LCP podem impedi-lo.

Otimize seu site para CLS e LCP

🖼️

Definir dimensões da imagem
Especifique a largura e a altura das imagens

📢

Use anúncios com responsabilidade
Evite redimensionamento inesperado de anúncios

⚡

Pré-carregar recursos importantes
Garanta que o conteúdo crítico seja carregado rapidamente

🔄

Minimize o conteúdo dinâmico
Limite o conteúdo que muda durante o carregamento

📊

Monitore o desempenho regularmente
Use ferramentas para rastrear pontuações CLS e LCP

Meu pesadelo CLS

CLS foi o primeiro problema que encontrei. Minhas páginas pareciam boas para mim, mas minhas pontuações eram terríveis. Depois de muita pesquisa, encontrei os principais culpados:

Imagens sem dimensões:Eu não estava definindo largura e altura em minhas imagens. O navegador não tinha ideia de quanto espaço reservar, então tudo mudou assim que as imagens foram carregadas.
Fontes carregando com atraso:Minhas fontes personalizadas foram carregadas após a renderização da página, fazendo com que todo o meu texto saltasse conforme a nova fonte substituía a substituta. Este foi sutil, mas fez sentido.
Conteúdo dinâmico:Eu tinha alguns componentes que injetavam conteúdo após o carregamento da página, empurrando tudo abaixo deles para baixo.

A solução para a maioria dos meus problemas de CLS foi surpreendentemente simples. Comecei a definir dimensões explícitas para todas as imagens e mídias. Adicionei a troca de exibição de fonte ao carregamento da fonte para que o substituto seja renderizado imediatamente. E reservei espaço com CSS para qualquer conteúdo que carregue dinamicamente.

Ferramentas comoInformações do Google PageSpeedforam uma grande ajuda aqui. Eles mostram exatamente quais elementos estão causando mudanças de layout, para que você não fique adivinhando.

Então veio o problema do LCP

Justo quando pensei que tinha as coisas resolvidas, meuPontuações LCPcomeçou a sinalizar. A parte frustrante foi que meu site carregou rápido no Reino Unido, mas minhas análises mostraram velocidades terríveis em outros países. Essa é a questão do LCP - depende muito de onde seus usuários estão e a que distância eles estão do seu servidor.

Os principais problemas que encontrei foram:

Imagens grandes não otimizadas:Minhas imagens de heróis eram grandes demais. Eu estava enviando fotos em resolução total sem compactá-las.
Tempo de resposta do servidor:Sem um CDN, os usuários distantes do meu servidor aguardavam séculos pela primeira resposta.
JavaScript de bloqueio de renderização:Eu tinha scripts carregando na cabeça que estavam bloqueando a renderização da página até que terminassem.

ComoEstudo de Backlinkomostra que sites com boas pontuações de LCP têm engajamento visivelmente melhor e taxas de rejeição mais baixas. Depois que comecei a corrigir esses problemas, pude ver a diferença em minhas próprias análises.

O que realmente ajudou meu LCP

Comecei a compactar todas as minhas imagens e a usar o formato WebP sempre que possível. Também movi scripts não essenciais para serem carregados de forma assíncrona ou adiá-los totalmente. Meus sites são hospedados no Vercel, que cuida de muitas coisas de rede de ponta para mim, mas se você estiver em hospedagem tradicional, configurar umCDNpode fazer uma enorme diferença para o tráfego internacional.

Uma CDN armazena cópias do seu site em locais ao redor do mundo, para que os visitantes sejam atendidos em algum lugar mais próximo deles, em vez de no seu servidor de origem único. Se você observar velocidades ruins em regiões específicas, essa é uma das primeiras coisas que vale a pena observar.

A parte irritante – nunca é realmente “consertada”

Aqui está o que ninguém te contaCLS e LCP. Você não os conserta uma vez e segue em frente. Cada vez que adiciono um novo recurso, uma nova imagem ou altero meu layout, as pontuações podem mudar novamente. É uma coisa contínua.

Já tive semanas em que tudo estava verde no Google Search Console, então adicionei um novo componente e de repente meu CLS foi sinalizado novamente. É totalmente irritante, mas aprendi a verificar meus Core Web Vitals após cada mudança significativa.

Impacto do CLS e LCP na experiência do usuário

0,1 segundos

Tolerância do usuário

32%

Aumento da taxa de rejeição

Queda na taxa de conversão

Principais sinais vitais da Web

Importância da classificação SEO

Um relatório deA marca financeiradestaca como sites lentos podem levar diretamente à perda de receita. Isso é motivação suficiente para manter o controle, mesmo quando parece entediante.

As ferramentas que mais me ajudaram

Se você estiver lidando com os mesmos problemas, aqui estão as ferramentas que realmente uso e considero úteis:

Console de pesquisa do Google:Foi aqui que percebi meus problemas pela primeira vez. Ele mostra suas pontuações do Core Web Vitals divididas por página e informa exatamente o que precisa de atenção.
Informações do PageSpeed:Eu corro todas as páginas depois de fazer alterações. Fornece recomendações específicas e práticas, em vez de conselhos vagos.Guia de desempenho web do Shopifytambém é um ótimo recurso complementar.
Extensão Web Vitals:Esta extensão do Chrome mostra seu CLS, LCP e outras métricas em tempo real enquanto você navega em seu próprio site. Eu o mantenho constantemente durante o desenvolvimento.

Depois de identificar seus problemas de desempenho, use nossoFerramenta de classificação de IA da Pesquisa Googlepara verificar se suas melhorias estão realmente se traduzindo em melhor visibilidade de pesquisa. Não faz sentido fixar pontuações se isso não estiver ajudando na sua classificação.

Meu conselho se você estiver passando por isso

Se o seu desempenho tem sido tão alto quanto o meu, aqui está o que eu sugeriria:

Não entrar em pânico.Problemas de CLS e LCP são incrivelmente comuns. Você não está fazendo tudo errado – essas métricas são apenas sensíveis.
Verifique suas análises por país.Seu site pode ser rápido para você, mas lento para visitantes de outros lugares. Um CDN pode resolver isso rapidamente.
Corrija as imagens primeiro.Na minha experiência, imagens não otimizadas e dimensões ausentes são a causa da maioria dos problemas de CLS e LCP.
Teste após cada alteração.Adquira o hábito de executar o PageSpeed Insights sempre que fizer atualizações significativas.
Ser paciente.Os dados do Google Search Console podem levar dias ou semanas para serem atualizados. Não presuma que suas correções não estão funcionando só porque o painel ainda não mudou.

Ainda estou aprendendo e ainda lidando com isso. Minhas pontuações são melhores do que eram, mas eu não as chamaria de perfeitas. Se você encontrou soluções que funcionaram para você, eu realmente quero saber mais sobre elas. Você também pode tentar visualizar seus dados de desempenho com nossocriador de gráficos online gratuitopara acompanhar melhorias ao longo do tempo.

O resultado final é este:CLS e LCPnão vão embora. Eles são importantes para o SEO, são importantes para a experiência do usuário e, se você administra sites como eu, eles o manterão alerta. Mas eles podem ser corrigidos e cada melhoria que você fizer vale a pena.