Google Core Web Vitals no WordPress: como otimizar seu site

Você já conseguiu otimizar seu site para o 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^[1] falhou nos testes do 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 seu site. O Google ainda usará coisas como velocidade, qualidade do conteúdo e compatibilidade com dispositivos móveis para classificar os sites. Então, se você tem ranqueado 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ê receberá grandes recompensas se o seu site oferecer ótimas experiências e ótimo conteúdo. Neste artigo, vamos ajudá-lo a criar um site desse tipo.

Começaremos com um mergulho no Google Core Web Vitals, para que você saiba exatamente o que eles significam e o que eles medem. Em seguida, compartilharemos nossas melhores dicas para a criação de páginas que sempre passam no Core Web Vitals.

Embora tenha havido uma mudança na linha do tempo 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 o seu forte, você provavelmente está se perguntando qual é a 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 pesquisa, 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]capa das classificações do Google tudo.

Você até descobrirá 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: Largest Contentful Paint (LCP), Cumulative Layout Shift (CLS) e First Input Delay (FID).

Maior pintura de conteúdo (LCP)

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

Melhor ainda, a Maior pintura de conteúdo mede apenas o conteúdo na janela de visualização do usuário. Quaisquer imagens abaixo da dobra não serão contabilizadas na sua pontuação LCP.

Se você deseja obter um resultado de aprovação, 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 toda a mudança que pode acontecer quando as imagens são carregadas com atraso ou as fontes mudam de estilo. Mesmo coisas como botões podem criar mudanças inesperadas na página.

Se seus elementos estiverem se movendo repentinamente (e mais de 0,1), você terá um problema de CLS para resolver.

Primeiro atraso de entrada (FID)

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

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

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

Uma das grandes vantagens do 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 entender). Em vez disso, tudo posso ser bastante fácil com várias ferramentas oficiais do Google para testar e corrigir seu site.

Quando se trata de testes, você precisa conhecer as duas categorias principais: ferramentas de teste de laboratório e ferramentas de teste de campo. As ferramentas de teste de campo são respaldadas por dados do mundo real obtidos de usuários reais que optaram 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 de 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 completo do site com todas as URLs categorizadas como Bom, Precisa de melhorias ou Ruim.

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

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

Se você clicar no Tipo você obterá uma lista completa de URLs que podem ser testados em Informações de velocidade da página Para maiores informações.

Usando o Page Speed ​​Insights

Digite o URL da sua página e clique 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 computadores sem executar um novo teste. Você encontrará os resultados no topo da página:

Se você gostaria de testar toda a sua página, clique Resumo da Origem. Como você pode ver, os principais indicadores vitais da Web foram marcados com porcentagens que indicam a frequência com que são aprovados. Esta página é uma aprovação sólida, 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 as principais métricas da Web.

Atualize sua hospedagem

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

Dito isto, se você já decidiu fazer a mudança, leia primeiro nossa comparação dos hosts WordPress de melhor desempenho. Mas, se você estiver mesmo com pressa, confira 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 do seu site em seu servidor para facilitar a recuperação. O cache do lado do servidor pode ser complicado de gerenciar e configurar, portanto, você precisará perguntar ao seu host em potencial sobre o processo.

Usando um plug-in 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. Mesmo o cache no nível da página fornece conteúdo rápido o suficiente para melhorar sua maior pintura de conteúdo.

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

Quão fácil é usar o WP Super Cache? Confira:

Depois que o plug-in estiver instalado e ativado, abra as configurações via Configurações → WP Super Cache. Clique em Fácil e vire Cache ativado e então Atualizar o status.

Em algum momento, você terá alguns problemas com seu cache. Você não apenas terá muitas páginas armazenadas 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.

É fácil configurá-lo. Clique no Pré-carregar opção. 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 estiver concluído, os arquivos estarão em seu wp-content/cache pasta no servidor.

Otimize suas imagens

As pessoas adoram fotos. E, todos nós usamos muitos deles, certo? No entanto, as imagens podem estar prejudicando suas pontuações do Core Web Vital. Há algumas razões para isso:

• A imagem pode estar 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 de 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 é> 2000px.
• Para planos de fundo, tente usar padrões, gradientes ou SVGs.
• Limite as imagens acima da dobra a um logotipo e uma imagem principal.
• Não use controles deslizantes ou carrosséis acima da dobra.

Depois de organizar suas imagens, você pode otimizar o restante. A otimização de imagem pode reduzir os tamanhos das imagens, melhorar suas dimensões e entregá-las a partir de uma rede de entrega de conteúdo (CDN) usando servidores mais próximos de seus usuários. Por tudo isso, recomendo Optimole.

O Optimole economiza muito trabalho de seus servidores ao fazer tudo o que foi descrito acima na nuvem. Dirija-se a Optimole e inscreva-se para obter uma chave de API (você precisa dela para acessar as operações na nuvem).

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

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

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

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

O carregamento lento significa que você carregará apenas as imagens que seus usuários podem ver na janela de visualização. Com essa configuração, deixe o Optimole lidar com o resto.

Otimizações de código

A coisa com a execução de 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 plugins com código inchado. Além disso, podemos otimizar o código de duas maneiras principais:

Uma desvantagem é que o Autoptimize tem muitas configurações, o que significa que não existe uma solução genuína que sirva para todos.

Dito isto, você pode escolher com segurança otimizar tudo de JavaScript, CSS, HTML. Essa configuração minimiza seu código removendo coisas como espaços e quebras de linha. Além da minificação, o Autoptimize tem ótimas opções de desempenho para quem deseja aprender um pouco mais e testar bastante.

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

Fontes e ícones

Você pode usar o Autoptimize para lidar com suas fontes, especialmente se estiver comprometido em usar o Google Fonts. Você pode até 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 este for 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 melhores práticas.

Mais importante ainda, o posicionamento do anúncio deve ser equilibrado entre obter mais cliques e 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 que o contêiner, todo o seu conteúdo será empurrado para baixo. Mire no meio da página onde o anúncio causará menos danos.

Depois de 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ê deve ver uma melhora imediata em seus resultados. Melhor ainda, cada uma das opções oferece um bom ponto de partida para otimizações adicionais.

Cobrimos muito terreno, então, para recapitular:

• Atualizar seu plano de hospedagem pode ajudar a melhorar seus resultados.
• Usar um plug-in de cache deve acelerar a entrega de conteúdo.
• A otimização de imagens e o uso de um CDN devem melhorar o desempenho do site.
• Com otimizações de código, você pode controlar como seu site carrega.
• Com seleção de fonte e pré-carregamento considerados, você pode desfrutar de aumentos de velocidade.
• Seguindo as práticas recomendadas de anúncios, você pode reduzir as mudanças de layout.