Google Core Web Vitals no WordPress: como otimizar seu site

Você já conseguiu otimizar seu site para Google Core Web Vitals?

Você pode dizer não, está tudo bem. Você não está sozinho. Na verdade, a Searchmetrics descobriu que até 96% dos 2 milhões de sites principais ^[1] falharam nos testes Core Web Vitals. Não sou matemático, mas parece muito.

O Google Core Web Vitals é a ferramenta mais recente para ajudar o Google a analisar o seu site. O Google ainda usará recursos como velocidade, qualidade do conteúdo e compatibilidade com dispositivos móveis para classificar os sites. Então, se você tem se classificado bem, pode relaxar um pouco.

Mas só um pouco, porque seus concorrentes estão procurando a vantagem que os levará ao topo. Como você pode ficar à frente deles? Você oferece ótimas experiências de usuário, que é exatamente o que o Google também deseja.

E você obterá grandes recompensas se seu site fornecer ótimas experiências e ótimo conteúdo. Neste artigo, vamos ajudá-lo a fazer esse site.

Começaremos mergulhando nos pontos vitais da web do Google, para que você saiba exatamente o que eles significam e o que medem. Em seguida, compartilharemos nossas melhores dicas para a construção de páginas que sempre passam no Core Web Vitals.

Embora tenha havido uma mudança no cronograma e a atualização não seja lançada até meados de junho, ainda temos muito trabalho a fazer. Vamos começar!

📚 Índice:

O que são Google Core Web Vitals (e por que você deveria se preocupar com eles)?

Se as atualizações do Google não são sua praia, você provavelmente está se perguntando sobre o que é toda essa empolgação. Vamos dar uma olhada rápida nos detalhes.

Em maio de 2020, o Google anunciou uma nova adição aos seus rankings de busca, Core Web Vitals. Um anúncio como este geralmente significa muito trabalho para alguém. Com mais de 200 fatores exclusivos usados ​​para classificar sites ^[2] , as classificações do Google cobrem tudo .

Você descobrirá até que a idade do seu domínio desempenha algum papel na sua classificação. Nesse caso, o Google Core Web Vitals se concentra na experiência do usuário ou em como é usar seu site.

No futuro, o Google Core Web Vitals terá uma variedade de métricas, mas a atualização de 2021 inclui três: Maior Contentful Paint (LCP), Cumulative Layout Shift (CLS) e First Input Delay (FID).

Pintura com maior conteúdo (LCP)

Seu LCP é uma medida de quanto tempo leva para o download da maior parte do conteúdo. Pode ser uma imagem ou simplesmente um texto. Seja o que for, uma vez carregado, o site parece pronto.

Melhor ainda, a pintura com maior conteúdo mede apenas o conteúdo na janela de visualização do usuário. Todas as imagens abaixo da dobra não contam contra sua pontuação de LCP.

Se quiser obter um resultado de aprovação, você precisa que seu LCP seja inferior a 2,5s.

Mudança cumulativa de layout (CLS)

O CLS mede a estabilidade da sua página durante o processo de carregamento. Ele mede todas as mudanças que podem ocorrer quando as imagens são carregadas tarde ou quando as fontes mudam de estilo. Mesmo coisas como botões podem criar mudanças inesperadas na página.

Se seus elementos estão se movendo repentinamente (e mais de 0,1), você tem um problema de CLS para resolver.

Atraso na primeira entrada (FID)

O FID mede a rapidez com que um navegador se torna interativo. Isso significa que os visitantes podem fazer coisas e obter uma reação. Inclui coisas como clicar em links, pressionar botões ou preencher caixas de seleção.

Você pode passar esta métrica se os usuários puderem fazer coisas como inserir dados em formulários e pesquisas dentro de 100 ms.

Como testar (e ler) sua pontuação do Google Core Web Vitals

Uma das melhores coisas sobre Core Web Vitals é sua abordagem amigável. Este não é um monte de métricas misteriosas que são difíceis de testar (muito menos de entender). Em vez disso, tudo pode ser bastante fácil com uma série de ferramentas oficiais do Google para testar e corrigir seu site.

Quando se trata de testes, você precisa saber sobre as duas categorias principais: ferramentas de teste de laboratório e ferramentas de teste de campo . As ferramentas de teste de campo são apoiadas por dados do mundo real obtidos de usuários reais que optam pelo Relatório de experiência do usuário do Chrome. Isso os torna mais valiosos para o Core Web Vitals. Vamos nos concentrar em duas opções:

• Relatório do Google Core Web Vitals do Google Search Console.
• O teste Page Speed ​​Insights, que tem resultados de campo e laboratório.

Vamos começar com o relatório Google Core Web Vitals, porque ele nos dirá quais URLs são o problema.

Usando o Google Search Console

Quando estiver no console, role para baixo para encontrar Experiência → Core Web Vitals. Clicar aqui abrirá um relatório de site completo com cada URL classificado como Bom, Precisa de Melhoria ou Ruim.

⚠️ Se você não configurou o Google Search Console, reserve um momento para ler nosso guia para usar Google Search Console com WordPress .

Clique em Abrir relatório para obter informações mais específicas sobre qual métrica Core Web Vitals está causando mais problemas.

Se você clicar em Tipo , obterá uma lista completa de URLs que podem ser testados em Page Speed ​​Insights para obter mais informações.

Usando o Page Speed ​​Insights

Insira o URL da sua página e clique em Analisar para iniciar o teste. Não deve demorar muito para concluir a análise, que exibirá os resultados móveis primeiro por padrão. No entanto, você pode visualizar os dados do Core Web Vitals de dispositivos móveis e desktops sem executar um novo teste. Você encontrará os resultados no topo da página:

Se desejar testar a página inteira, clique em Resumo da origem. Como você pode ver, os principais valores vitais da web foram marcados com porcentagens que indicam a frequência com que passam. Esta página é um passe sólido, mas o que podemos fazer para as páginas com falha?

O que posso fazer para melhorar minha pontuação do Google Core Web Vitals?

Na verdade, há muito que podemos fazer para melhorar as pontuações do Core Web Vitals (mesmo sem habilidades técnicas). Vejamos nossas melhores dicas para melhorar a experiência do usuário e o Core Web Vitals.

Atualize sua hospedagem

Sim, não há maneira melhor de melhorar a resposta do servidor do que ter uma boa. Na realidade, mudar de host pode ser difícil (para não dizer caro), mas você não precisa pular da hospedagem compartilhada para a hospedagem dedicada. Quer dizer, esse salto resolverá muitos problemas de desempenho, mas mesmo um pequeno salto para um servidor mais rápido também pode fornecer melhorias de desempenho perceptíveis.

Dito isso, se você já decidiu fazer a mudança, leia nossa comparação dos de melhor desempenho Hosts WordPress primeiro. Mas, se você estiver realmente com pressa, verifique a tabela abaixo:

Além das otimizações padrão, cada um dos hosts acima oferece alguma forma de cache do lado do servidor. Cache é o processo de armazenar uma versão HTML de seu site no servidor para facilitar a recuperação. O armazenamento em cache do lado do servidor pode ser complicado de gerenciar e configurar, então você precisará perguntar ao seu host em potencial sobre o processo dele.

Usando um plugin de cache

No entanto, nem todos os hosts oferecem cache do lado do servidor, mas você pode aproveitar alguns dos benefícios com um plug-in de cache de página Até mesmo o armazenamento em cache no nível da página fornece conteúdo rápido o suficiente para melhorar sua pintura com maior conteúdo.

Quando se trata de usar um plugin, eu recomendo WP Super Cache porque é totalmente gratuito (sem atualizações) com opções simples e avançadas (como pré-carregamento).

O WP Super Cache é fácil de usar? Confira:

Assim que o plugin for instalado e ativado, abra as configurações via Configurações → WP Super Cache. Clique em Fácil e ative Cache e em seguida, Atualizar status.

Em algum momento, você terá alguns problemas com o seu cache. Não apenas você terá muitas páginas em cache, mas novas alterações não aparecerão no site. Se isso acontecer, você pode limpar o cache clicando em Excluir Cache.

O WP Super Cache também oferece a opção de pré-carregar suas páginas mais populares. No entanto, o pré-carregamento consumirá recursos valiosos, portanto, você precisará escolher com sabedoria e monitorar sua CPU diariamente.

Configurar é fácil. Clique na opção Pré-carregar . Você pode definir a regularidade da atualização do cache e se os arquivos antigos devem ser excluídos ou não.

Quando estiver satisfeito com as configurações, clique em Pré-carregar cache agora para começar. Assim que o processo de cache for concluído, os arquivos estarão em sua pasta wp-content/cache no servidor.

Otimize suas imagens

As pessoas adoram fotos. E, todos nós usamos muito deles, certo? Mas, as imagens podem estar prejudicando suas pontuações do Core Web Vital. Existem alguns motivos para isso:

• A imagem pode ser muito pesada.
• As dimensões da imagem são muito grandes.
• Você está carregando todas as imagens da página.
• As imagens são enviadas do seu servidor para pessoas em todo o mundo.

Felizmente, existe uma maneira fácil de corrigir todos os itens acima.

Primeiro, considere algumas coisas quando se trata de imagens:

• Você precisa de todas as imagens?
• Quais dimensões você usa? Nosso objetivo é> 2.000 px.
• Para planos de fundo, tente usar padrões, gradientes ou SVGs .
• Limite as imagens acima da dobra a um logotipo e a uma imagem principal.
• Não use controles deslizantes ou carrosséis acima da dobra.

Depois de organizar suas imagens, você pode otimizar o resto. A otimização de imagens pode reduzir os tamanhos das imagens, melhorar suas dimensões e entregá-las a partir de uma Content Delivery Network (CDN)/a> usando servidores mais próximos de seus usuários. Por tudo isso, recomendo Optimole .

O Optimole poupa muito trabalho aos seus servidores ao fazer todas as opções acima na nuvem. Vá para Optimole e inscreva-se para obter uma chave API (você precisa dela para acessar as operações de nuvem).

Você receberá um e-mail para validar sua conta por meio do painel do Optimole. Pegue a chave da API e vá para o seu site WordPress.

Depois de instalar e ativar o Optimole, acesse as configurações no menu Mídia → Optimole . Cole sua chave de API e clique em conectar.

Você também deve ativar Dimensionar imagens e carregamento lento .

O dimensionamento das imagens significa que o Optimole enviará imagens com o tamanho perfeito para o dispositivo (não importa o que seja) para reduzir a mudança de layout.

Carregamento lento significa que você só carregará as imagens que seus usuários podem ver na janela de visualização. Com essa configuração, deixe o Optimole cuidar do resto.

Otimizações de código

O lance de administrar um site WordPress são todas as partes móveis. Entre os temas e plug-ins e as linguagens que os alimentam, é difícil para uma pessoa não técnica otimizar o código.

Obviamente, podemos optar por temas com bases de código otimizadas e evitar plug-ins com código inchado. Além disso, podemos otimizar o código de duas maneiras principais:

Uma desvantagem: a otimização automática tem muitas configurações, o que significa que não há uma solução única que sirva para todos.

Dito isso, você pode escolher com segurança Otimizar todo o JavaScript, CSS, HTML. Esta configuração minimiza seu código removendo coisas como espaços e quebras de linha. Além da minimização, o Autoptimize tem ótimas opções de desempenho para qualquer pessoa que queira aprender um pouco mais e testar muito.

Por exemplo, você pode obter aumentos de velocidade significativos usando tarefas avançadas, como pré-carregamento de CSS e CSS crítico embutido , mas você precisará ler cada opção antes de usar isso.

Fontes e ícones

Você pode usar a otimização automática para lidar com suas fontes, principalmente se estiver comprometido com o uso de fontes do Google. Você pode até mesmo tentar pré-carregar suas fontes do Google para evitar o”flash de texto sem estilo”que prejudica sua mudança cumulativa de layout.

Eu recomendo tentar algumas opções diferentes e ver o que funciona melhor para o seu site. Infelizmente, se você estiver usando o Elementor , ainda verá a mudança de layout. Se for este o seu caso, considere mudar para fontes do sistema.

Práticas recomendadas para anúncios

Quando se trata de mudança de layout, os anúncios são um dos maiores problemas. Normalmente, os anúncios empurram o conteúdo para baixo, o que cria uma experiência ruim para o usuário. Felizmente, é possível reduzir a mudança seguindo as práticas recomendadas.

Mais importante ainda, o posicionamento do anúncio deve ser equilibrado entre a obtenção de mais cliques e o impacto em seu layout. Por exemplo, não coloque anúncios na parte superior da janela de visualização. Se o tamanho final do anúncio for maior do que o contêiner, ele empurrará todo o seu conteúdo para baixo. Mire no meio da página, onde o anúncio causará menos danos.

Quando você decidir o melhor posicionamento, reserve um espaço para o anúncio. Embora isso possa deixá-lo com algum espaço em branco, pode valer a pena a troca.

Conclusão

Com essas dicas, você verá uma melhora imediata em seus resultados. Melhor ainda, cada uma das opções oferece um bom ponto de partida para otimizações futuras.

Cobrimos muito terreno, então, para recapitular:

• Atualizar seu plano de hospedagem pode ajudar a melhorar seus resultados.
• Usar um plugin de cache deve acelerar a entrega de conteúdo.
• Otimizar imagens e usar um CDN deve melhorar o site desempenho.
• Com otimizações de código, você pode controlar como seu site carrega.
• Com a seleção de fontes e pré-carregamento consideradas, você pode aproveitar aumentos de velocidade.
• Seguindo práticas recomendadas de anúncio, você pode reduzir as mudanças de layout.

<✓ O que você fez para se preparar para a atualização do Google Core Web Vitals? Fique à vontade para nos informar nos comentários abaixo.