Dez maneiras de melhorar os tempos de carregamento do seu site e os pontos vitais do Google Core

O que são os principais Web Vitals

No início deste ano, o Google introduziu um novo conjunto de critérios que definem a estabilidade, velocidade e capacidade de resposta de qualquer site. Os três critérios principais são os seguintes:

• Deslocamento de layout cumulativo define o quanto a estrutura de uma página da Web deve mudar e mudar de posição. A referência para isso é 0,1.
• A maior pintura de conteúdo mede quanto tempo leva para carregar o conteúdo principal de uma página. Os melhores resultados devem ser de 2,5 segundos ou menos.
• O atraso da primeira entrada é o tempo entre a abertura de uma página da Web e o momento em que ela se torna interativa. O período de tempo mais procurado é de cerca de 100 milissegundos.

Com esses termos básicos em mente, vamos ver como você pode usar o Core Vitals para tornar seu site o mais rápido e eficiente possível.

1. Otimize seu CDN e cache do navegador

Suas pontuações FID e LCP devem ser melhoradas rapidamente usando este método. Sirva seus ativos estáticos de uma CDN ou armazene-os em cache em um serviço como o Cloudfront da AWS. Os navegadores obterão os resultados necessários muito mais rapidamente depois disso.

Além disso, as páginas dinâmicas podem ser armazenadas em cache em sua CDN com valores de TTL corretos já aplicados, dependendo de como seus aplicativos se comportam.

2. Use o dimensionamento exato para todos os anúncios e mídias

No que diz respeito às suas pontuações no CLS, esse é um dos fatores mais importantes. Sempre verifique se você definiu uma altura específica nas imagens ou ativos marcados, o que é muito importante, especialmente para os componentes de nível de dobra. Se você estiver com pressa, sempre poderá definir as alturas como automáticas e obter um tamanho aproximado que deve funcionar bem o suficiente em uma pitada.

Os anúncios também são considerados no CLS, e você precisa verificar suas alturas e tamanhos cuidadosamente para garantir que eles não desloquem o conteúdo exibindo incorretamente. Isso pode exigir que você entre em contato com seu provedor de serviços de publicidade ou pesquise algumas opções diferentes se seu CLS estiver sendo afetado de forma consistente.

Se você estiver em uma plataforma WordPress, recomendamos considerar um plugin como Ewww , que pode entregar automaticamente suas imagens no Webp e habilitar recursos como carregamento lento para atrasar o carregamento de todas as imagens no carregamento da página.

3. Carregue as imagens de resolução correta da maneira preguiçosa com base no tipo de dispositivo que está sendo usado

Essa técnica produz resultados incrivelmente rápidos e deve ser uma de suas primeiras considerações. Ao usar um pacote de carregamento lento para, surpreendentemente, carregar todas as imagens em seu site, seu LCP será impactado positivamente, principalmente reduzindo o peso da página e garantindo que ela seja carregada o mais rápido possível.

Também é essencial definir a resolução de cada ativo com base no tipo de dispositivo usado para visualizar seu site. Carregar a resolução como um tamanho único tornará o site muito mais lento em dispositivos menores ou menos poderosos e afetará seu LCP da pior maneira possível.

4. Use SSR e CSR de maneira inteligente

O Google está sempre interessado em incentivar e promover páginas Server Side Rendered (SSR) bem pontuadas para inspirar um desempenho valioso de SEO. No entanto, você deve considerar o equilíbrio entre SEO e desempenho de carregamento de página. Páginas com muito conteúdo podem levar muito tempo para carregar no servidor e reduzir o desempenho geral do seu site.

O conteúdo real deve ser mantido acima da dobra, enquanto outros recursos do site devem ser mantidos para melhorar o SSR. Esse estilo de carregamento assíncrono tira muito tempo de suas pontuações de carregamento e renderização.

5. Divida tudo dividindo seu código

Usar os tamanhos de arquivo mais significativos para ativos (principalmente arquivos JS) geralmente é uma má ideia. Em vez disso, você deve permitir o protocolo h2 e aproveitá-lo para carregar novamente os ativos de forma assíncrona em partes separadas.

Além disso, em vez de usar um arquivo HTML enorme, você pode dividir o site em vários arquivos menores e, assim, diminuir a carga de carregamento.

6. Use técnicas de compressão Brotli para reduzir ativos estáticos

No que diz respeito à compressão, Brotli parece ser a melhor opção em termos de velocidade de carregamento. No entanto, taxas de compactação mais altas aumentarão os tempos de pacote e compilação em termos de DevOps.

Mas no final das contas, o tempo de carregamento do site é o fator mais crucial e deve ser priorizado acima de qualquer outra coisa.

7. Torne o conteúdo da resposta e a solicitação de API o mais eficiente possível

Sem dúvida, o elemento mais vital em termos de velocidade de carregamento, mesmo as alterações mais pequenas, podem gerar grandes resultados com a API. As respostas e solicitações da API devem ser verificadas com frequência para fins de otimização.

Além disso, defina os parâmetros de dados e use apenas o necessário para economizar muito tempo e esforço. A escolha de uma rede para suas APIs também merece uma consideração cuidadosa, pois a hospedagem nas sub-redes erradas pode aumentar enormemente o requisito de tempo.

8. Reduza o tamanho geral de suas páginas e documentos

Páginas de destino de código pesado (qualquer coisa acima de 75kb provavelmente será grave) são muito indesejáveis, pois aumentam drasticamente os tempos de carregamento e busca.

Sempre tente manter as coisas limpas no lado do código, pois é fácil perder bits de dados redundantes.

9. Substitua as miniaturas de vídeo por imagens de espaço reservado

Muitos visitantes do site preferem não se envolver com o conteúdo do vídeo, portanto, carregar as miniaturas em vídeos que não estão sendo reproduzidos é um desperdício de recursos nesse caso.

É melhor escolher uma imagem de espaço reservado ou um espaço de vídeo em branco para conservar recursos e, assim, aumentar a velocidade do site.

10. Escolha o servidor mais rápido disponível

Isso pode parecer um fator óbvio, mas ainda vale a pena dizer. Investir na melhor infraestrutura de servidores geralmente é uma ótima ideia, pois afeta diretamente a velocidade de todo o seu site, sem exceção.

Ao gastar um pouco mais de dinheiro, você economizará uma quantidade considerável de tempo no geral. O Cloudflare é uma excelente ferramenta de nível DNS que permite otimizar seu site de maneira econômica, sem recursos caros de servidor.

Conclusão

As dicas acima o colocarão no caminho certo para alcançar uma melhor pontuação de velocidade de página e os principais sinais vitais. No entanto, você pode se encontrar em uma plataforma ou tema inchado que muitas vezes significará o melhor curso de ação para criar um site novo, mais limpo e mais leve.

Suponha que você esteja coçando a cabeça com todos esses termos ou se sentindo intimidado com a ideia de retrabalhar todo o seu site para aumentar a velocidade. Nesse caso, você pode considerar uma revisão do site de um especialista em web design que provavelmente sugerirá o melhor curso de ação para otimizar seu site existente ou sugerir a evolução para um novo site com uma base de código mais otimizada para os principais pontos vitais.