Como otimizar seu site para Core Web Vitals (Adsense)

Tentando tanto passar o Core Web Vitals? Aqui estão algumas maneiras fáceis e práticas de melhorar suas pontuações CWV

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.

If you have been struggling to pass the Core Web Vitals test and improve your motor de busca ranking potentials, you will find practical solutions in this article.

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.

A maior pintura com conteúdo
Crédito: Web.dev

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.

Primeiro Atraso de Entrada
Crédito: Web.dev

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.

Mudança de layout cumulativa
Crédito: Web.dev

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.

If you are looking for a fast web host, there are lots of recommendations out there that are driven purely by Afiliados without sincerity. If you are running WordPress and you can afford it, I highly recommend 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.

I personally prefer optimizing every image before uploading them. I do not use any external service for image optimization. However, if you use WordPress or similar CMS, existem plugins and solutions to optimize images automatically. There are also cloud solutions irrespective of what you use.

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.

Below is an example of a responsive ad unit I used on my blog just below the header. I have replaced my Publisher ID and Ad slot with XXXXXX. Noticed that I added the height attribute (min-height: 300px). The moment I did that, all CLS issues were gone forever.

<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.

Observação: 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

If you have users from different parts of the world, then using a CDN can help improve your speed and indirectly your Core Web Vitals metrics.

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 was started by 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.

Mfon Abel Ekene

Mfon Abel Ekene

Gosto de criar conteúdos que sejam úteis. Minha paixão é ajudar a população da internet a encontrar o que precisa, apontando-os na direção certa. É o que eu amo fazer e eu coloco muitas horas de pesquisa e testes para garantir que eu faça exatamente isso através do meu conteúdo no TargetTrend.

Artigos: 47

Receba materiais tecnológicos

Tendências de tecnologia, tendências de inicialização, análises, renda online, ferramentas da web e marketing uma ou duas vezes por mês

5 Comentários

  1. Parece bastante estranho que o Google esteja dando um tiro no pé se você usar o Adsense em seu site e isso provavelmente afetará negativamente sua classificação no mecanismo de pesquisa no Google.
    Ótimas dicas que são apreciadas. Estou lutando com o Core Vitals apesar de armazenar tudo em cache no Cloudflare, então algumas dicas valem a pena tentar e talvez eu tenha que morder a bala e tentar criar páginas AMP.

    • Eu posso entender de onde você está vindo. Mas acho que, da perspectiva do Google, eles veem o AdSense e a Pesquisa como produtos diferentes. E jogo limpo para eles, eles recomendam um máximo de 3 anúncios por página, mas os webmasters abusam disso.

  2. Quão difícil é isso? Esta página, que explica como otimizar para Core Web Vitals, tem uma pontuação de página de apenas 55…

    • Qualquer ferramenta que você usou para verificar é irrelevante se for simulação. Você não está otimizando para bots, mas para usuários do mundo real.

      O Google não usa o PageSpeed ​​dentro de pontuações para classificação, eles usam dados do mundo real de dados CrUX.

      No que diz respeito ao relatório de experiência do usuário do mundo real, todas as nossas páginas são verdes, como você pode ver no resumo de origem no PageSpeed ​​Insight

Deixe um comentário

O seu endereço de e-mail não será publicado. Os campos obrigatórios são marcados com *