PageSpeed Insights: como manter a velocidade do site alta

Se você administra um site, provavelmente já ouviu falar do Google PageSpeed Insights. É uma ferramenta gratuita do Google que mede o desempenho de suas páginas da web em dispositivos móveis e desktop. Mas obter uma pontuação alta muitas vezes pode parecer um jogo que você não pode vencer.

Hoje faremos uma análise detalhada do PageSpeed Insights, analisaremos todos os possíveis problemas que reduzem sua pontuação e explicaremos exatamente como otimizar seu site.

Por que a velocidade do site é tão importante?

Antes de analisarmos os problemas técnicos, vamos falar sobre por que você deve se importar. A velocidade do site não é apenas uma métrica de vaidade. Isso impacta diretamente seu negócio.

Primeiro, a velocidade é um fator de classificação importante para SEO. O Google declarou oficialmente que usa o Core Web Vitals para decidir a classificação de suas páginas. Se o seu site demorar muito para carregar, o Google enviará os resultados da pesquisa para baixo.

Em segundo lugar, a velocidade afeta a experiência do usuário e as taxas de conversão. A maioria dos usuários abandonará uma página se ela demorar mais de três segundos para aparecer. Um site rápido mantém os visitantes engajados e os torna muito mais propensos a comprar seu produto ou ler seus artigos.

Compreendendo as métricas do PageSpeed Insights

Quando você digita uma URL no PageSpeed Insights, ele fornece dois tipos de dados: dados de laboratório e dados de campo.

Os dados de campo mostram como os usuários reais vivenciam seu site. Ele é coletado ao longo de 28 dias usando o Chrome User Experience Report (CrUX). Isso é o que realmente importa para o seu SEO. Os dados do laboratório são coletados em um ambiente controlado para ajudá-lo a depurar problemas.

As principais métricas a serem observadas são:

• Primeira tinta contente (FCP): o tempo que o navegador leva para renderizar o primeiro texto ou imagem.
• Maior tinta contente (LCP): o tempo que leva para o maior bloco de conteúdo ficar visível.
• Mudança cumulativa de layout (CLS): mede o quanto o layout da sua página muda conforme ela é carregada.
• Interação com a próxima tinta (INP): quão rápido sua página responde depois que um usuário clica ou toca em algo.

Problemas comuns que estragam sua pontuação

Obter uma pontuação ruim é fácil. Para corrigi-lo, é preciso encontrar a causa raiz. Aqui estão os problemas mais comuns que você verá no seu relatório de diagnóstico do PageSpeed Insights.

1. Recursos de bloqueio de renderização

Isso acontece quando você tem arquivos javascript ou CSS bloqueando completamente o carregamento da página. O navegador precisa parar, baixar o arquivo e analisá-lo antes que ele possa mostrar algo ao usuário.Como consertar: você deve adiar ou carregar de forma assíncrona todos os javascript não críticos. Para CSS, extraia o CSS crítico e alinhe-o no destino, então carregue o restante de forma assíncrona.

2. Imagens enormes não otimizadas

As imagens geralmente constituem a maior parte do peso total de uma página da web. Carregar uma imagem de 5 MB para um logotipo pequeno é uma maneira garantida de desacelerar tudo.Como consertar: sempre compacte suas imagens usando formatos modernos como WebP. Você também deve usar oloading="lazy"atributo para que as imagens abaixo da dobra sejam carregadas somente quando o usuário rolar para baixo até elas. Sempre defina largura e altura explícitas nas tags de imagem para evitar mudanças de layout.

3. Muito javascript não utilizado

Os sites modernos geralmente carregam bibliotecas pesadas ou scripts de terceiros, mas usam apenas uma pequena fração do código. O navegador ainda precisa baixar e avaliar tudo, o que consome um tempo valioso de processamento.Como consertar: remova plugins não utilizados e tente dividir seu código. Carregue apenas os scripts que você realmente precisa naquela página específica.

4. Tempos de resposta lentos do servidor

O tempo até o primeiro byte (TTFB) mede quanto tempo seu servidor de hospedagem leva para retornar o HTML inicial. Se o seu servidor estiver lento, todas as outras otimizações não importarão muito.Como consertar: use um host web rápido. Implemente cache do lado do servidor e use uma rede de entrega de conteúdo (CDN) para atender seu site a partir de servidores fisicamente mais próximos de seus usuários.

Esta ferramenta é ótima porque diz onde exatamente você cometeu um erro e até mostra capturas de tela exatas. Então, basta corrigir esses erros passo a passo e seu SEO será melhorado.

Sugeriu converter imagens .jpg em .webp para nosso site, por exemplo.

Masnão fique chateado se não conseguir chegar a 100%, na verdade é muito difícil de fazer. Se o seu site é complexo, precisa de muitas imagens, algumas bibliotecas js específicas, você pode pensar – não há mais nada para otimizar, por que minha pontuação ainda é de 80-90%? Isso é absolutamente normal. Se o seu site estiver na “zona verde”, isso já é um bom sinal. Além disso, os resultados podem até variar em alguns pontos percentuais – sem qualquer alteração – se você testar a velocidade em um momento diferente.
No entanto, você ainda deve tentar maximizar seu desempenho analisando e corrigindo todos os erros da lista.

Por que nosso script de tradução mantém sua velocidade alta

Ao adicionar novos widgets ao seu site, você deve ter muito cuidado com o desempenho. É muito comum que plugins de tradução destruam sua pontuação no PageSpeed. Eles geralmente carregam enormes bancos de dados de idiomas no lado do cliente, executam grandes atrasos de JavaScript e bloqueiam a renderização enquanto descobrem qual idioma exibir.

Construímos nosso roteiro de tradução estritamente com o desempenho em mente. Veja por que nossa solução é leve e tem efeito mínimo na velocidade de desempenho:

• Limite de carga útil minúsculo: nosso roteiro principal é incrivelmente pequeno. Não agrupamos grandes bibliotecas de terceiros. Ele adiciona apenas alguns kilobytes ao tamanho da sua página.
• Carregamento assíncrono: o script foi projetado para ser executado de forma assíncrona. Ele nunca bloqueia a renderização do seu conteúdo principal.
• Entrega global de CDN: entregamos o roteiro e o texto traduzido de uma rede global. Isso significa que os dados percorrem a menor distância possível até o seu visitante.
• Injeção nativa de DOM: em vez de ocultar a página ou criar mudanças de layout, nosso script injeta nativamente strings traduzidas perfeitamente. Ele é executado em milissegundos, para que sua mudança cumulativa de layout permaneça perfeitamente em zero.

Ao manter o espaço técnico o menor possível, garantimos que você possa traduzir seu site completamente, sem sacrificar nenhuma de suas classificações de SEO conquistadas com muito esforço ou sua experiência de usuário.