Como otimizar seu site para Core Web Vitals (Adsense)

A corrida para melhorar os Core Web Vitals não é fácil. Fica mais difícil se você contar com um programa de publicidade como o Google AdSense para monetizar seu site.

Sites que executam o Google AdSense são 10 vezes mais propensos a falhar no teste Core Web Vitals do que o mesmo site sem o Google AdSense nele. Isso se deve principalmente ao número de solicitações e recursos de terceiros que o Google AdSense adiciona ao seu site. A maioria desses ativos não é otimizada, é grande e não é fácil de usar.

Fora do AdSense e das plataformas de publicidade, se você tiver muitas imagens não otimizadas, JavaScript e CSS, especialmente acima da dobra, provavelmente também será reprovado no teste Core Web Vitals.

Se você está lutando para passar no teste Core Web Vitals e melhorar seu motor de busca classificando potenciais, você encontrará soluções práticas neste artigo.

O que são Core Web Vitals?

Core Web Vitals são métricas do Google Lighthouse que determinam como um site está oferecendo uma boa experiência de página. Embora existam muitas métricas ao executar um teste, as métricas mais importantes são a maior exibição de conteúdo (LCP), o atraso da primeira entrada (FID) e o deslocamento de layout cumulativo (CLS).

Google anunciou que, a partir de maio de 2021, essas métricas se tornarão parte de seus sinais de classificação usados ​​para determinar as posições da página da Web nos resultados de pesquisa.

Em resumo, você pode dizer que o Core Web Vitals não foi feito para ser um terror para os webmasters, mas um meio de melhorar a experiência da página dos sites.

Pintura com maior conteúdo (LCP): o LCP mede o tempo que leva para que a maior imagem visível ou bloco de texto em uma página da Web seja carregado. Se o maior texto ou imagem visível carregar rapidamente, percebe-se que o restante de suas imagens e texto será carregado rapidamente. O tempo de carregamento necessário para passar é 2.5 segundos.

Primeiro Atraso de Entrada (FID): O FID mede a interatividade da página da web. Isso é determinado por quanto tempo leva para o navegador começar a processar manipuladores de eventos depois que um usuário clica em seu site. Isso é amplamente chamado de Primeira impressão do seu site. O tempo necessário para passar é 100 milissegundos.

Mudança de layout cumulativa (CLS): o CLS mede a mudança de layout que acontece em uma página da web. Quando uma página da Web é carregada e, de repente, algo aparece ou desaparece e a página precisa se ajustar para ser maior ou menor, essa mudança é o que é medido. É terrível para a experiência do usuário e eu concordo. A pontuação que você deve precisar para passar é 0.1.

Como otimizar seu site para o Core Web Vitals

Siga estas etapas para otimizar seu site:

1. Comece com um host rápido

Se você tem um host com um tempo de resposta terrível, todas as outras coisas que vou listar aqui podem não dar os resultados desejados. Quanto mais rápido seu servidor responder às solicitações, melhor.

Por que um host da Web com um tempo rápido para o primeiro byte (TTFB) é importante? Alguns argumentarão que o TTFB não importa, mas importa. Essa é a base de tudo o mais. Se você tiver usuários em cidades com internet lenta, a rapidez com que seu host pode responder significará tudo. Qualquer host da web pode ter um bom desempenho se você tiver usuários principalmente de cidades com internet super rápida.

Tente testar como seu host responderá a 3G ou 2G em vez de 4G. Porque se você tiver muitos usuários se conectando via 3G ou 2G, isso está aumentando sua pontuação no Core Web Vitals. Então, cada milissegundo conta. A diferença entre obter 100ms no seu FID e obter 101ms é que com 100ms você passa, mas com 101ms você falha. Então, se alguém lhe disser que 1 ms não importa, essa pessoa pode estar errada.

Ao escolher um host da web, certifique-se sempre de ter um datacenter mais próximo da maioria dos usuários do seu site. Você pode encontrar suas localizações observando suas análises. De onde vem a maioria dos seus usuários? Escolha um datacenter mais próximo deles. Quanto mais perto melhor.

Eu pessoalmente notei uma mudança significativa nos dados de campo de um site do Core Web Vitals depois de mudar o host da web. Eu não fiz mais nada.

Se você está procurando um host rápido, existem muitas recomendações por aí que são orientadas exclusivamente por Afiliados sem sinceridade. Se você estiver executando o WordPress e puder pagar, eu recomendo fortemente Kinsta. Eles são os melhores para WordPress. Se você precisa de algo mais barato ou não está usando o WordPress, então Cloudways é muito eficaz também.

2. Use um tema leve e otimizado para velocidade

Esta dica é particularmente muito útil para não codificadores e até para codificadores com menos tempo. Especialmente se você estiver usando o WordPress onde há tantas opções, certifique-se de usar um tema leve e otimizado para velocidade.

Como o tema é como o esqueleto do seu site, se o esqueleto estiver quebrado, o corpo será quebrado. Isso é apenas isso.

Há uma longa lista de práticas recomendadas que você deve procurar em um tema. Algumas das más práticas mais comuns são excessivamente dependentes do JQuery, carregando muito CSS/JS quando não necessário, tamanho de tema grande e muito mais. Você sempre pode usar uma ferramenta como Laboratórios amarelos, para testar a demonstração.

Se você estiver usando o WordPress, você pode verificar a lista de temas WordPress mais rápidos.

3. Otimize suas imagens

As imagens são legais. Eles tornam o conteúdo tão atraente. Mas eles podem ser um fardo se não forem otimizados. Ter imagens grandes como 3 MB definitivamente afetará sua velocidade. E se essas imagens estiverem visíveis quando seu site for visitado antes da rolagem, elas definitivamente afetarão sua métrica de LCP.

A verdade é que imagens não otimizadas aumentam o tamanho da sua página. Quanto maior o tamanho da página, mais tempo leva para carregar.

Pessoalmente, prefiro otimizar todas as imagens antes de enviá-las. Não utilizo nenhum serviço externo para otimização de imagens. No entanto, se você usa WordPress ou similar CMS, existem plugins e soluções para otimizar imagens automaticamente. Existem também soluções em nuvem, independentemente do que você usa.

4. Remova ou reduza o tamanho das imagens de fundo

As imagens de fundo geralmente são muito grandes. E pode diminuir o tempo de carregamento, pois precisa ser carregado primeiro antes que o conteúdo significativo seja exibido.

Você pode remover completamente a imagem de fundo para ter um site mais rápido. Se eles são tão importantes, considere otimizá-los para o menor tamanho possível ou usar padrões em vez de imagens.

5. Use o cache do navegador

Se você tem muitos leitores fiéis, deve considerar o cache do navegador. Quando um usuário visita seu site pela primeira vez, o navegador armazenará esse site em cache. Para todas as outras visitas, ele será carregado em um instante. Isso pode melhorar muito o FID e o LCP a partir da segunda visita.

Para usuários do WordPress, a maioria dos plugins de cache pode ajudá-lo a conseguir isso.

6. Reduza o JavaScript e adie o JavaScript não utilizado

Embora o JavaScript seja incrível, muitas vezes é um bloqueio de renderização. Isso significa que isso pode afetar seu tempo de carregamento e, finalmente, seu FID.

Tente minimizar o JavaScript removendo os espaços em branco e comentários para reduzir o tamanho do arquivo. Além disso, certifique-se de adiar JavaScript não crítico. Isso deve melhorar seu FID.

Para usuários do WordPress, existem plugins como Autoptimize, WP Rocket e outros que podem fazer isso por você.

7. Defina o atributo de tamanho do AdSense

Se você estiver executando o AdSense em seu site e tiver dificuldades com o CLS, isso poderá resolver todos os seus problemas. Ele fez para mim e deve para você.

Se você tiver um bloco de anúncios próximo ao cabeçalho que fica visível quando um usuário visita, um problema é que o anúncio pode não carregar imediatamente. Ele pode carregar depois que a página já estiver carregada e, quando isso acontece, há uma mudança no layout. Isso é muito comum para blocos de anúncios responsivos. Com isso acontecendo, é impossível passar a métrica CLS.

A melhor maneira de lidar com isso é editar um pouco seu código do AdSense. Não se preocupe, é muito legítimo. Basta especificar o atributo de tamanho do anúncio, especialmente a altura. Depois de fazer isso, você não notará mais uma mudança de layout sempre que o anúncio estiver sendo carregado.

Abaixo está um exemplo de bloco de anúncios responsivo que usei em meu blog logo abaixo do cabeçalho. Substituí meu ID de editor e espaço de anúncio por XXXXXX. Percebi que adicionei o atributo height (min-height: 300px). No momento em que fiz isso, todos os problemas do CLS desapareceram para sempre.

<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- Header ad -->
<ins class="adsbygoogle"
     style="display:block; min-height: 300px"
     data-ad-client="ca-pub-xxxxxxxxxxxxxx"
     data-ad-slot="xxxxxxxxxx"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>

O que isso faz é reservar esse tamanho na página. Assim, sempre que os anúncios aparecem, não há mudança de layout, pois você já definiu o tamanho.

8. Defina o atributo de tamanho para suas imagens e outras mídias

Assim como com anúncios, imagens e outras mídias podem causar mudanças de layout quando são carregadas em seu site. Você pode estar lendo alguma coisa, então uma imagem é carregada e de repente há uma mudança de layout, o que você estava lendo está fora de vista e tudo o que você vê é outra coisa ou até clica em outra coisa por engano.

Você pode evitar tudo isso definindo o atributo size para seus arquivos de mídia. Sua métrica CLS ficará feliz por você ter feito isso.

9. Imagens de carregamento lento.

Você pode ter visto o conselho no PageSpeed ​​Insight para adiar imagens fora da tela. O que significa simplesmente é carregar suas imagens com preguiça.

O que o carregamento lento faz é reduzir o tamanho da página e também reduzir o tempo de carregamento da sua página quando um usuário a visita. O que é bom para métricas CWV.

Isso ajudará, em particular, a melhorar o LCP.

10. Otimize o CSS minificando e gerando CSS crítico

CSS é o que faz um site parecer legal, mas um arquivo CSS grande pode ser um grande problema porque atrasará a renderização da página para o usuário.

Quando um usuário visita seu site, o navegador, por comportamento normal, atrasa a renderização de sua página da web para o usuário até que ele seja carregado, analisado e executado todo o CSS referenciado no cabeçalho da página da web. Se você tiver um arquivo CSS grande, isso pode ser um grande problema. Isso tornará seu site mais lento.

O CSS crítico pode ajudar carregando apenas o CSS necessário para o carregamento da página. Enquanto o resto do CSS pode ser carregado de forma assíncrona.

Também minimizar seu CSS removendo espaços em branco e comentários para reduzir o tamanho do arquivo pode ajudar.

Você também pode remover CSS não utilizado. Se um serviço que você usa está enviando CSS que não são usados, é seguro removê-los.

Se você usa o WordPress, existem plugins como WP Rocket, LiteSpeed ​​Cache, FlyingPress e outros que podem ajudá-lo a conseguir isso.

11. Implemente o carregamento inteligente do AdSense

Esse método pode eliminar quase completamente todos os desafios se o AdSense for responsável por desacelerar seu website.

Trata-se de carregar o AdSense de forma inteligente. O AdSense não será carregado até que um usuário execute uma ação como rolar ou clicar. Isso melhorará consideravelmente o tempo de carregamento e quaisquer dados vitais da web principais afetados pelo Google AdSense.

Existem muitos plugins do WordPress que podem ajudá-lo a fazer isso, WP Rocket e Flying Scripts são um exemplo. Este método, tanto quanto sei, não viola a política do Google AdSense.

Nota: Embora esse método possa ajudar a melhorar a velocidade percebida e as pontuações da página, ele pode afetar sua receita do Google AdSense. Eu recomendo que você faça um experimento para ter certeza se vale a pena

12. Use a fonte System Stack se puder

As fontes adicionam tempo de carregamento extra em qualquer site. E para páginas da web sem imagens, seu bloco de texto pode ser responsável por sua classificação LCP. Nesse caso, sua pontuação no LCP será diretamente influenciada pela sua fonte.

Embora o Google Font e o Font Awesome continuem a melhorar, o uso de fontes de pilha do sistema oferece uma melhoria significativa. Embora não seja tão fantasioso dependendo do dispositivo.

13. Use um CDN

Se você tiver usuários de diferentes partes do mundo, usar um CDN pode ajudar a melhorar sua velocidade e indiretamente suas métricas Core Web Vitals.

Um CDN em explicação simples faz muitas cópias do seu site e as armazena em vários Pontos de Presença (POPs) em diferentes partes do mundo. Quando alguém solicita seu site, ele atende seu site no local mais próximo.

Por exemplo, se seu site estiver hospedado nos Estados Unidos e você tiver um visitante do Reino Unido, em vez de buscar seu site nos Estados Unidos, a CDN servirá seu site no Reino Unido. O efeito disso será a entrega rápida. Velocidade.

Você pode verificar o melhores CDNs lá fora.

14. Configure a pré-busca de DNS

Se você depende de um serviço externo como um CDN para a entrega do seu site, talvez seja necessário configurar uma pré-busca de DNS para minimizar o atraso devido à pesquisa de DNS.

A pré-busca de DNS irá pré-buscar o DNS antes de ser chamado. Para que ele seja carregado em um instante quando finalmente for chamado.

15. Otimize scripts de terceiros

Verifique se alguns dos serviços que você usa em seu site não estão adicionando scripts de terceiros que podem tornar seus sites mais lentos.

Você pode substituir a solução por solicitações de terceiros, deixando seu site mais lento com uma solução melhor.

Quando se trata do Google AdSense, outro script de terceiros, há pouco que você possa fazer. A prática recomendada é usar no máximo 3 anúncios unidos em uma página. Evite conteúdo correspondente, pois traz baixa renda, mas aumenta o tempo de carregamento.

16. Remova o AdSense de cima da dobra

Este conselho é baseado em experimentos. Se todas as suas métricas forem boas no relatório do console de pesquisa, exceto LCP, primeiro certifique-se de que suas imagens e fontes estejam otimizadas. Se eles estiverem otimizados e você ainda estiver falhando no LCP, o AdSense pode ser o responsável.

Se você puder, remova o AdSense de cima da dobra por um mês e veja se o problema desaparece.

Se você não quiser removê-lo, você pode adiá-lo manualmente ou com a ajuda de um plugin como o Flying Scripts.

17. Mude para AMP

AMP significa Accelerated Mobile Pages. A ideia do AMP é otimizar as páginas da web para carregar mais rápido no celular. E, claro, o AMP open source projeto foi iniciado pelo Google.

Embora o AMP tenha sido originalmente planejado para acelerar as páginas para dispositivos móveis, ele também pode acelerar as páginas para desktop.

As páginas AMP são consistentemente mais rápidas do que as páginas para dispositivos móveis ou desktop, às vezes mais de 100% de acordo com nossa observação.

Se a única estratégia de monetização do seu site for o Google AdSense, considere mudar todo o seu site para AMP. Eu notei pessoalmente que, em um blog que possuo, o AdSense em páginas AMP às vezes converte mais do que em dispositivos móveis e computadores!

Conclusão

O Core Web vitals pode ajudar você a melhorar seu site para seus usuários, não apenas para o Google. É muito comum ter uma boa pontuação nos testes de dados de laboratório, mas uma pontuação ruim nos dados de campo.

Isso se deve à composição de seus usuários. Se a maioria de seus usuários são de lugares com internet lenta, você pode ter feito um bom trabalho otimizando, mas ainda falhando nos dados de campo.