Todos nós já sentimos aquela pontada de frustração quando uma página da web carrega em ritmo de lesma, ou um botão se move assim que você tenta clicar nele. Na WPBeginner, somos obcecados pela velocidade do site porque sabemos que esses pequenos momentos fazem uma grande diferença na experiência do usuário.
Quando o Google introduziu as Core Web Vitals, ele deu um nome a esses problemas de desempenho, mas o jargão técnico pode parecer avassalador. Você pode se preocupar que seu SEO sofra se você não tiver um diploma em ciência da computação.
A boa notícia é que você não precisa ser um desenvolvedor para obter ótimas pontuações. Nós passamos por esse exato processo de otimização e o reduzimos ao essencial para você.
Neste guia, vamos guiá-lo através de passos simples e práticos para melhorar suas Core Web Vitals para um site WordPress mais rápido e suave.
Aqui está uma visão geral rápida do que abordaremos neste guia:
- O que são as Métricas Essenciais da Web do Google?
- Como Testar Sua Pontuação do Google Core Web Vitals
- Por Que as Core Web Vitals São Importantes?
- Como Melhorar Suas Core Web Vitals no WordPress (7 Dicas)
- Perguntas Frequentes Sobre Core Web Vitals
- Guias de Especialistas sobre Medição e Melhoria de Desempenho do WordPress
O que são as Métricas Essenciais da Web do Google?
As Core Web Vitals do Google são métricas de desempenho específicas que o mecanismo de busca usa para medir a experiência geral do usuário de um site. Essas pontuações fazem parte dos sinais de experiência de página do Google, que podem influenciar seus rankings de SEO.
A verdade é que ninguém gosta de um site lento, e isso inclui o Google. As Core Web Vitals ajudam você a medir a rapidez com que seu site se torna visível, interativo e estável para seus visitantes.
Para fazer isso, o Google usa três testes principais:
- Largest Contentful Paint (LCP)
- Interação para a Próxima Pintura (INP)
- Cumulative Layout Shift (CLS)
Nota: Até março de 2024, o Google usava o Atraso da Primeira Entrada (FID) em vez do INP. Você ainda pode ver essa métrica mais antiga relatada em algumas ferramentas de teste de desempenho.
Os nomes desses testes podem soar técnicos, mas o que eles medem é bem simples de entender. Vamos ver como cada um funciona.
Largest Contentful Paint (LCP)
Largest Contentful Paint (LCP) mede a rapidez com que o conteúdo principal da sua página se torna visível para os usuários. Isso pode ser uma imagem em destaque, um grande bloco de texto ou outro elemento proeminente.
Uma página pode carregar rapidamente no geral, mas se o conteúdo mais importante aparecer por último, a página ainda parecerá lenta para o usuário. O LCP ajuda você a identificar e corrigir esse problema.
Interação para a Próxima Pintura (INP)
Interaction to Next Paint (INP) mede quanto tempo seu site leva para fornecer feedback visual após um usuário interagir com ele. Essa interação pode ser um clique, um toque ou uma tecla pressionada.
Por exemplo, quando alguém clica no botão 'Enviar' do seu formulário de contato, o INP mede o tempo até que algo visualmente mude na tela para reconhecer essa ação.
Cumulative Layout Shift (CLS)
Cumulative Layout Shift (CLS) mede a estabilidade visual da sua página enquanto ela carrega. Uma pontuação CLS ruim significa que os elementos estão pulando pela tela enquanto a página é renderizada.
Isso é frustrante quando um usuário tenta clicar em um botão, apenas para vê-lo se mover no último segundo porque um anúncio ou imagem carregou acima dele. Uma boa pontuação CLS significa que seu layout é estável e previsível.
Como Testar Sua Pontuação do Google Core Web Vitals
A maneira mais fácil de testar sua pontuação de Core Web Vitals é com a ferramenta PageSpeed Insights do Google. Basta inserir o URL que você deseja verificar e clicar no botão 'Analisar'.
Os resultados são exibidos na seção 'Avaliação dos Core Web Vitals'. Uma nota de aprovação será indicada em verde ao lado do título.
Abaixo disso, você pode ver as pontuações específicas para cada uma das três métricas. Para passar na avaliação, você precisa atingir essas metas:
- Largest Contentful Paint (LCP): 2,5 segundos ou menos
- Interaction to Next Paint (INP): 200 milissegundos ou menos
- Cumulative Layout Shift (CLS): 0.1 ou menos
Como visualizar as Métricas Essenciais da Web para todo o seu site
Para ver uma pontuação média de todo o seu site, você pode usar o relatório Métricas Essenciais da Web na sua conta do Google Search Console.
Este relatório mostra quais URLs em seu site têm pontuações boas, precisam de melhoria ou ruins, permitindo que você priorize seus esforços de otimização.
Para relatórios ainda mais detalhados, você pode usar o teste Lighthouse integrado diretamente no navegador Chrome. Simplesmente abra um site, clique com o botão direito em qualquer lugar e selecione a opção 'Inspecionar'.
Observação: Você deve executar os testes do Chrome no modo anônimo para obter os resultados mais precisos. Caso contrário, suas próprias extensões de navegador podem afetar negativamente as pontuações.
Por Que as Core Web Vitals São Importantes?
As Métricas Essenciais da Web são importantes porque refletem diretamente como os usuários experimentam seu site. Elas se concentram não apenas na velocidade bruta, mas em quão rapidamente os visitantes podem realmente ver e interagir com seu conteúdo.
Um estudo descobriu que um atraso de um segundo no tempo de carregamento da página pode causar uma perda de 7% nas conversões e 11% menos visualizações de página. Um site mais rápido com uma experiência de usuário ruim ainda está prejudicando seus resultados.
Melhorar as Métricas Essenciais da Web ajuda você a resolver isso. Como a experiência do usuário é um fator de classificação SEO confirmado pelo Google, uma boa pontuação pode lhe dar uma vantagem sobre seus concorrentes.
Como Melhorar Suas Core Web Vitals no WordPress (7 Dicas)
Melhorar sua pontuação no Core Web Vitals no WordPress não é tão difícil. Seguindo algumas dicas essenciais de otimização de desempenho, você pode passar facilmente na avaliação.
1. Otimizando sua Hospedagem WordPress
Seu provedor de hospedagem WordPress desempenha o papel mais importante no desempenho do seu site. Um host de qualidade otimiza seus servidores especificamente para WordPress, o que dá ao seu site uma plataforma sólida para construir.
Na WPBeginner, nós usamos a SiteGround por esse exato motivo. Eles são um dos poucos hosts oficialmente recomendados pelo WordPress.org, e seu desempenho é excelente.
A plataforma deles roda no Google Cloud e inclui seu poderoso plugin SG Optimizer. Ele lida com todo o cache avançado e ajustes de desempenho automaticamente, o que é um grande motivo pelo qual nosso site é tão rápido.
Se você estiver usando um host diferente, então WP Rocket é a melhor alternativa. É o plugin de cache que recomendamos para nossos outros projetos, e torna muito mais fácil alcançar uma melhor pontuação no Core Web Vitals.
2. Melhorando a Pontuação Largest Contentful Paint (LCP)
Como mencionamos, LCP é o tempo que leva para o maior elemento de conteúdo aparecer na tela. Em um post de blog típico, esta é frequentemente a imagem em destaque ou o texto do artigo.
Para descobrir qual elemento está sendo medido, role para baixo nos resultados do PageSpeed Insights e expanda a aba 'Elemento Largest Contentful Paint'.
Se for uma imagem grande, tente substituí-la por um arquivo menor. Você pode aprender mais em nosso guia sobre como otimizar imagens para a web.
3. Melhorando a Pontuação de Interação para a Próxima Pintura (INP)
A pontuação de Interação para a Próxima Pintura mede o tempo entre um usuário clicar em algo em seu site e ver uma resposta visual. Um longo atraso aqui pode fazer com que seu site pareça lento e sem resposta.
Por exemplo, imagine que um visitante preenche um formulário de contato e clica no botão 'Enviar'. Em nossos sites, usamos WPForms porque ele é construído para velocidade e processa envios sem atrasos, criando uma experiência fluida.
Uma causa principal de INP ruim é o JavaScript que carrega antes do resto da página. A maneira mais fácil de corrigir isso é com um plugin como o WP Rocket, que mostraremos como configurar.
Primeiro, você precisa instalar e ativar o plugin. Depois disso, vá para Configurações » WP Rocket e mude para a aba ‘Otimização de Arquivos’.
Role até o final e marque a caixa ao lado de ‘Carregar JavaScript de forma adiada’. Não se esqueça de salvar suas alterações.
Esta configuração simples diz ao seu site para carregar o conteúdo visível primeiro e esperar pelo JavaScript. Essa única mudança pode melhorar drasticamente sua pontuação de INP.
4. Melhorando a Pontuação de Cumulative Layout Shift (CLS)
Uma pontuação CLS ruim é causada quando elementos em uma página se movem enquanto carregam. Para ver quais elementos estão causando problemas, expanda a aba ‘Evitar grandes mudanças de layout’ em seu relatório do PageSpeed.
Para evitar isso, você deve informar aos navegadores as dimensões (largura e altura) de suas imagens, incorporações de vídeo e anúncios. Isso permite que o navegador reserve a quantidade correta de espaço para o elemento antes que ele carregue.
O WordPress adiciona automaticamente dimensões às suas imagens, mas você deve verificar outras incorporações de mídia. Você pode fazer isso usando a Ferramenta de Inspeção em seu navegador para verificar se um elemento tem atributos de largura e altura definidos.
5. Eliminando Elementos que Bloqueiam a Renderização
Elementos que bloqueiam a renderização são arquivos, geralmente JavaScript ou CSS, que precisam carregar antes que o resto da sua página possa ser exibido. Isso diminui a velocidade percebida da sua página e prejudica suas pontuações de Core Web Vitals.
O PageSpeed Insights listará esses arquivos problemáticos para você. Eles geralmente vêm de plugins e ferramentas de terceiros como Google Analytics ou Facebook Pixel.
Corrigir isso manualmente pode ser complicado para iniciantes. Temos um guia passo a passo sobre como eliminar recursos que bloqueiam a renderização facilmente, sem tocar em nenhum código.
6. Dimensionando Imagens Corretamente no WordPress
Fazer upload de imagens desnecessariamente grandes é um erro comum que deixa os sites lentos. Fotos de alta resolução levam muito mais tempo para carregar e muitas vezes não são necessárias para visualização na web.
Isso é especialmente problemático para usuários de dispositivos móveis. Mesmo que seu tema reduza a imagem para caber em uma tela menor, o navegador do visitante ainda precisa baixar o arquivo em tamanho integral.
Temos um guia detalhado sobre como otimizar imagens corretamente para o seu site WordPress sem perder qualidade.
7. Usando uma CDN para Melhorar sua Pontuação de Core Web Vitals
Uma CDN, ou Rede de Distribuição de Conteúdo, é um serviço que torna seu site mais rápido para visitantes em todo o mundo. Isso é feito armazenando cópias de seus arquivos estáticos (como imagens e CSS) em servidores em diferentes locais geográficos.
Isso permite que os usuários baixem esses arquivos do servidor que está mais próximo deles, o que reduz os tempos de carregamento. Também alivia muito a carga do seu servidor de hospedagem principal.
Para o WPBeginner, nós confiamos na CDN empresarial da Cloudflare. Ela não apenas aumenta nossa velocidade, mas também fornece um firewall poderoso que bloqueia milhões de solicitações de spam e ataques maliciosos todos os dias.
Para a maioria das empresas, até mesmo o plano gratuito da Cloudflare oferece um excelente serviço de CDN e proteção básica de firewall. É uma das maneiras mais eficazes de melhorar suas pontuações de Core Web Vitals.
Perguntas Frequentes Sobre Core Web Vitals
Tendo ajudado milhares de usuários a acelerar seus sites, recebemos muitas perguntas sobre Core Web Vitals. Aqui estão as respostas para algumas das mais comuns.
P: Quais são os três Core Web Vitals?
R: As três métricas principais são Largest Contentful Paint (LCP) para desempenho de carregamento, Interaction to Next Paint (INP) para interatividade do site e Cumulative Layout Shift (CLS) para estabilidade visual.
P: Qual é uma boa pontuação de Core Web Vitals?
R: Você deve almejar um LCP de 2,5 segundos ou menos e um INP de 200 milissegundos ou menos. Para CLS, uma pontuação de 0,1 ou inferior é considerada boa.
P: Um bom tema pode corrigir automaticamente meus Core Web Vitals?
R: Um tema bem codificado fornece uma excelente base, mas não é uma solução mágica. Suas pontuações também são fortemente influenciadas pelo seu provedor de hospedagem, tamanho das imagens e número de plugins que você usa.
Q: Com que frequência devo verificar minhas pontuações do Core Web Vitals?
R: Recomendamos verificar suas pontuações pelo menos uma vez por mês. Também é uma boa ideia testá-las após instalar um novo plugin, alterar seu tema ou adicionar novos recursos importantes ao seu site.
Guias de Especialistas sobre Medição e Melhoria de Desempenho do WordPress
Agora que você sabe como otimizar o Core Web Vitals, talvez queira ver outros artigos relacionados à medição e melhoria do desempenho do WordPress:
- O Guia Definitivo para Aumentar a Velocidade e o Desempenho do WordPress
- Como Acelerar o Desempenho do WooCommerce
- Como Executar Corretamente um Teste de Velocidade de Site (Melhores Ferramentas)
- Como Testar a Carga de um Site WordPress
- O que é a Pontuação INP do Google e Como Melhorá-la no WordPress
- Como Usar o Plugin GTmetrix para Melhorar o Desempenho do Site WordPress
- Hospedagem WordPress Mais Rápida (Testes de Desempenho)
Esperamos que este guia tenha ajudado você a aprender como otimizar o Core Web Vitals para WordPress. Outra parte fundamental da experiência do usuário é a segurança, por isso recomendamos seguir nossa lista de verificação de segurança do WordPress para proteger seu site.
Se você gostou deste artigo, por favor, inscreva-se em nosso Canal do YouTube para tutoriais em vídeo do WordPress. Você também pode nos encontrar no Twitter e no Facebook.
Olaf
A otimização geral do site pode parecer simples no “papel”, mas na prática, geralmente é uma história diferente. Alcançar números e velocidades impressionantes às vezes pode parecer um trabalho árduo. Depende do estado do site que você herda e de quão bem o proprietário anterior o manteve, ou das tecnologias que eles usaram para construí-lo. Às vezes, se um site é construído em um construtor de páginas e depende de vários plugins para cada função menor, é desafiador elaborar qualquer estratégia para melhorar os Core Web Vitals. Esta lista fornece um ponto de partida sólido, um guia sobre o que verificar, o que melhorar e como fazer isso. Uma ótima base para iniciantes.
Samuel
É fácil se empolgar com outros aspectos de SEO e esquecer dos Core Web Vitals. Embora eu saiba da existência dos Core Web Vitals para os usuários, eu não tenho prestado muita atenção a isso. Sempre que eu crio um novo site WordPress, meu foco é sempre em quão rápido ele vai ranquear no Google ou em qualquer outro motor de busca. Ler este artigo está informando meus pensamentos para incluir os Web Vitals em meus fluxos de trabalho como desenvolvedor web. Obrigado por este guia detalhado. Eu acabei de finalizar um site para um novo cliente e este artigo será colocado em uso seguindo todas as instruções aqui. Muito obrigado.
Dayo Olobayo
Eu estava lutando com o tempo de carregamento lento do meu site WordPress até implementar as estratégias descritas neste guia. As instruções facilitaram a otimização dos meus Core Web Vitals e agora meu site está incrivelmente rápido. Obrigado!
WPBeginner Support
De nada!
Admin
Jiří Vaněk
Inicialmente, eu tive muitos problemas com a velocidade do WordPress. Tenho um site no meu próprio servidor com 4 vCPUs e 8GB de RAM. Mesmo assim, eu continuava vendo números vermelhos. Com isso, quero dizer que, muitas vezes, a otimização não é apenas sobre o desempenho do servidor ou hospedagem, mas também sobre como você otimiza o próprio WordPress. Nesse contexto, tenho que dizer que o plugin WP Rocket me ajudou mais. Somente após implementar este plugin eu finalmente entrei nos números verdes. Talvez o que mais ajudou foi o pré-carregamento de links de URL e um cache relativamente sofisticado. Provavelmente nenhum plugin de cache é tão genuinamente bom quanto o WP Rocket. Em relação a SEO, comecei a ganhar melhores posições somente após o site ser devidamente otimizado.
WPBeginner Support
Thank you for sharing what you use for your site
Admin
Mohammed Haider
Eu tenho um site no WordPress. Não consigo passar nos Core Web Vitals. Existe algum plugin gratuito para WordPress que possa me ajudar a alcançar isso?
WPBeginner Support
Existem muitas partes diferentes para a pontuação dos Core Web Vitals, recomendamos dar uma olhada na seção “Como Melhorar Seus Core Web Vitals no WordPress” para nossas recomendações.
Admin
Jiří Vaněk
O plugin Autooptimize com algum tipo de plugin de cache é gratuito e pode ajudar muito.
Ladyson
Não se esqueça que muitos criadores de temas drag-n-drop causam problemas com o código deles.
Atualizá-los regularmente também pode resolver o problema de pontuações baixas. Eles estão otimizando o código deles para Web Vitals.
WPBeginner Support
That is certainly something to keep in mind as well
Admin
miamiatz
O Google é bom em inventar coisas úteis. O problema de Cumulative Layout Shift é crítico na maioria dos dispositivos digitais.
Você quer clicar em algo apenas para perceber que o link/ícone/botão que você pretendia clicar mudou para um lugar diferente e você acaba clicando em outra coisa.
Esse problema é encontrado até mesmo em aplicativos Android principais e aplicativos não principais, incluindo aplicativos de mídia social, aplicativos de notícias, até mesmo aplicativos financeiros. É ridículo.
Parabéns ao Google por inventar esses Core Web Vitals.
Tenho um ou dois pontos a fazer para aqueles interessados nos web vitals:
A maioria dos temas do WordPress vem com folhas de estilo que são carregadas uma após a outra.
O CSS personalizado declarado usando o personalizador de temas é carregado por último.
Agora, se você declarar o tamanho ou a forma de algo (até mesmo fontes) no CSS personalizado que foi declarado de forma diferente nos arquivos CSS do tema, o item será carregado com o estilo padrão do tema primeiro e depois ajustado para obedecer à declaração CSS encontrada no CSS personalizado.
Isso causa mudanças de layout.
Equipe Editorial
Obrigado por compartilhar essas percepções. Sim, otimizar a entrega de CSS pode ajudar, juntamente com o carregamento preguiçoso de itens.
Admin
Ackson Mwape
Muito obrigado pelo artigo oportuno.
Equipe Editorial
Always a pleasure Ackson
Admin