5 maneiras de melhorar suas métricas de Core Web Vitals

/em

Se você chegou até este artigo, provavelmente está em busca de melhorar os resultados de Core Web Vitals de seu site.

Primeiro, um aviso

Não há nenhuma garantia de uma única coisa que vá resolver um problema específico. Você deve ter uma visão mais ampla da otimização do seu site. Muitas pequenas correções geram grandes resultados. Portanto, embora eu lhe dê algumas coisas aqui nas quais você pode trabalhar, isso está longe de ser definitivo. Até mesmo o Google diz que muitos elementos trabalham juntos para chegar as pontuações, então é difícil determinar que se você fizer essas coisas, a pontuação aumentará.

O que o Google oferece são insights sobre o que está retardando as coisas ou o que está prejudicando a experiência do usuário. Muitas ferramentas também fornecem conselhos sobre como consertar as coisas. Web.dev/measure, por exemplo, não produz resultados detalhados, mas dá uma ideia de qual é o impacto de uma determinada correção.

5 coisas que você ou seu desenvolvedor podem fazer

Ao longo dos anos, tem-se falado constantemente sobre a importância da velocidade do site e da experiência do usuário. Porém, embora haja muito material disponível sobre como otimizar o seu site, é difícil colocar esse conhecimento em prática. Nos últimos meses, o Google mais uma vez colocou a velocidade em primeiro plano, com a atualização da experiência da página que acontecerá em 2021. Para ajudá-lo a se preparar para isso, ele desenvolveu ferramentas que fornecem ideias e muita documentação para ler.

Para muitos problemas, o conselho não mudou muito. Tudo se resume a fornecer o conteúdo principal aos usuários o mais rápido possível. Execute o teste para ver o desempenho do seu site, tente priorizar as correções e comece! Abaixo, você encontrará uma mistura de maneiras novas e antigas de aprimorar o seu site para melhorar as suas principais métricas da Web.

Otimize as suas imagens

Vou começar esta lista com a regra de ouro: otimizar as imagens. Uma das coisas mais importantes que você pode fazer pelo seu site é otimizar adequadamente as suas imagens. Sim, provavelmente você já ouviu isso um milhão de vezes, mas vamos dizer de novo: faça isso. Aquela imagem grande não otimizada na sua página inicial ou página de destino pode prejudicá-lo. Imagens grandes costumam ser o largest contentful paint (LCP) para qualquer site. Certifique-se de dar as boas-vindas aos seus visitantes, tornando o carregamento rápido!

Em resumo, certifique-se de oferta-la no tamanho necessário e comprimir bem. Existem muitas ferramentas para ajudá-lo a fazer isso. Não pense que você precisa manter uma resolução enorme para que a imagem seja nítida nas telas mais comuns.

Leia mais sobre otimização de imagens: 

Tente também adotar formatos modernos como o WebP. Esses formatos podem fornecer imagens de alta qualidade em um tamanho menor. WebP é bem suportado e até a Apple saltou a bordo! O próximo lançamento do Safari 14 – tanto no MacOS quanto no iOS – terá suporte para WebP. Sim, o novo Chromium powered pelo navegador Microsoft Edge também oferece suporte a WebP.

Seu CMS também é uma ferramenta que o ajudará a melhorar o carregamento de imagens. Com lançamento previsto para agosto, o WordPress 5.5 oferecerá suporte ao carregamento lento de imagens. Isso significa que ele só carregará as imagens que aparecem na tela e deixará o restante para carregar quando o usuário interagir com a tela em questão. Isso diz ao navegador para carregar imagens grandes apenas quando necessário.

Outro conselho sobre a velocidade do site é o uso de um CDN, mas você sabia que também pode usar um CDN especificamente para imagens? Um CDN de imagem oferece mais controle sobre como você deseja veicular e como deseja que apareçam. Uma imagem enviada por um CDN de imagem obtém uma string de propriedades em seu URL que informa ao navegador como a imagem deve se comportar.

Estabilize o carregamento especificando espaço para imagens e similares

Uma das novas métricas é a mudança de layout cumulativa, ou (cumulative layout shift) CLS, para abreviar. Um exemplo disso é quando uma página para celular parece pronta e apenas quando você deseja clicar em um botão, o conteúdo muda e um anúncio de carregamento lento aparece no lugar. Isso acontece com frequência e é uma das principais causas de frustração dos usuários. Agora, embora otimizar o seu CLS não torne necessariamente a sua página mais rápida, com certeza vai parecer mais rápida.

CLS é medido por imagens sem dimensões no CSS. Também pode ser medido por anúncios e incorporações sem dimensão ou conteúdo injetado dinamicamente. Quando as dimensões não são fornecidas corretamente, esses elementos tendem a pular um pouco durante o processo de carregamento, fazendo com que pareçam irregulares e instáveis. Isso também pode ser devido ao novo conteúdo sendo inserido acima do conteúdo existente. Não faça isso, exceto talvez após uma interação explícita do usuário.

Uma das maneiras de melhorar as suas Principais Métricas da Web e evitar a CLS é adicionando a largura e a altura das imagens no CSS. Dessa forma, o navegador reservará espaço para aquela imagem que provavelmente aparecerá depois do texto. Agora, os “solavancos” vão desaparecer porque o navegador sabe que algo será adicionado no devido tempo. Você pode pensar em adicionar algum tipo de espaço reservado, de baixa resolução, se quiser que algo apareça rapidamente.

Portanto, simplesmente certifique-se de que as suas imagens tenham os atributos de largura e altura adequados. Claro, você também pode fazer isso com imagens responsivas regulares. Apenas certifique-se de que você esteja usando a mesma proporção para todos os tamanhos.

Para lidar com anúncios ou conteúdo injetado, reserve espaço para eles também. No final, seu CLS pode diminuir um pouco.

Leia mais um pouco sobre Core Web Vitals: 

Acelere o seu servidor para diminuir o tempo de carregamento

Quanto mais rápido o seu servidor responder às solicitações, melhor. Fazer com que o servidor responda mais rápido melhora diretamente muitas métricas de velocidade do site. Em sites complexos, o servidor se mantém ocupado tratando de solicitações e servindo arquivos e scripts, portanto, é melhor otimizar esses processos.

A otimização do seu servidor consiste em várias partes. Primeiro, atualize o seu plano de hospedagem. Não economize na hospedagem. Escolha um que ofereça bom desempenho a um preço justo. Além disso, há a questão de como o servidor foi configurado – use uma versão recente do PHP! – e qual hardware você escolheu. Talvez você deva atualizar o hardware se achar que isso está faltando. Além disso, você precisa pesquisar como os seus bancos de dados funcionam e ver se pode fazer melhorias. Use ferramentas como o plugin Query Monitor WordPress para manter a análise de consultas no seu site.

Você também pode verificar como o servidor envia arquivos para os clientes. Existem várias maneiras de aprimorar esse processo, com o link rel = preload, por exemplo, ou push de servidor HTTP / 2. Essas são soluções mais avançadas que permitem ajustar como o seu servidor responde às solicitações. Aqui, novamente, um CDN pode fazer maravilhas para melhorar as suas Principais Métricas da Web.

Leia mais sobre o assunto:

Procure o Critical CSS para carregar conteúdo, acima da dobra, mais rápido

Quando o navegador carrega uma página, ele precisa obter o HTML, renderizá-lo, obter o CSS, renderizá-lo, obter o JavaScript, renderizá-lo etc. Quanto mais arquivos você precisar para carregar o seu site e quanto maiores forem, mais lento será o carregamento. Frequentemente, enquanto o navegador está ocupado fazendo algumas coisas, ele não consegue carregar outras coisas em segundo plano. Certos elementos bloqueiam o processo. Os chamados JavaScript e CSS de bloqueio de renderização influenciam tudo.

Como o CSS carrega mais tarde, pode demorar um pouco para que algo apareça na tela. Ao pegar as partes críticas do seu design – a parte que aparece acima da dobra – do arquivo CSS principal e inseri-lo no seu código, você pode colocar algo na tela muito mais rápido. Corrigir isso, mais uma vez, não torna o seu site mais rápido, mas faz com que ele pareça mais rápido. Tudo para a experiência do usuário.

Para obter um conjunto de Critical CSS, você pode escolher entre uma série de ferramentas ou pode fazê-lo manualmente. Além disso, você pode usar plug-ins de cache do WordPress.

Leia mais sobre plugins para WordPress: 

Melhore o carregamento de scripts de terceiros

Para muitos sites, a lentidão também vem de fora. Se o seu site depende de scripts de anúncios, por exemplo, você está basicamente nas mãos do provedor de anúncios. Você só pode esperar que ele tenha um bom desempenho nos anúncios. Se os anúncios carregam muito devagar, bem, talvez seja hora de encontrar outro provedor.

Se você achar que scripts de terceiros tornam o seu site mais lento, verifique isso. Pergunte a si mesmo: eu realmente preciso desse anúncio específico? Qual é o valor desses scripts? Pode haver uma opção diferente por aí que é um pouco mais otimizada e menos estressante para o seu servidor. Talvez você possa tentar isso?

Se possível, você mesmo pode experimentar hospedar o script. Dessa forma, você tem um pouco mais de controle do processo de carregamento. Se você não pode fazer isso, veja se consegue pré-carregar mais rápido.

No mínimo, certifique-se de carregar os scripts de forma assíncrona ou adiá-los até o último momento. Dessa forma, o navegador pode construir a página primeiro, antes de obter e executar o script externo. Use async se o script que você está carregando for importante, como um script de análise. Você pode usar o defer para recursos menos críticos. Na internet há muita documentação sobre a otimização de scripts de terceiros.

Melhorar as Principais Métricas da Web: todas as pequenas melhorias contam

Com a atualização da experiência da página em maio de 2021, o Google colocou a velocidade do site e a experiência do usuário em primeiro plano novamente. Sempre olhamos o SEO de maneira holística – há muitas partes móveis e você deve trabalhar em todas elas para construir o melhor site que existe.

Embora as dicas mencionadas acima possam ajudá-lo a melhorar as pontuações das Principais Métricas da Web, você realmente deve fazer isso para oferecer aos visitantes uma experiência melhor.

Fonte: https://yoast.com/boost-core-web-vitals/

Precisa de ajuda para otimizar seus resultados? Fale com a GoCache :)

Por que a velocidade de um site é importante? Google Playbook Os desafios da segurança em nuvem
pt_BRPT_BR
en_USEN pt_BRPT_BR