O que é o índice de velocidade de página do Google (SI) e como reduzi-lo

Já se foi o tempo em que uma métrica de velocidade de uma única página poderia dizer a velocidade real do seu site.

Hoje, os proprietários de sites têm um rico conjunto de pontuações de desempenho para analisar e entender o que acontece quando os visitantes acessam seus sites. Situado entre outras métricas do Lighthouse, um índice de velocidade de página (SI) baixo pode passar despercebido, mas ainda assim merece sua atenção.

O que exatamente o SI mede? Que prioridade você deve dar ao Índice de Velocidade em sua estratégia de otimização e como melhorá-lo?

Leia mais para descobrir.

O que é o índice de velocidade da página (SI)?

O Índice de velocidade da página (SI) é uma métrica de desempenho do relatório Lighthouse (também conhecido como métrica de laboratório) usada por ferramentas de teste de sites, como Google PageSpeed ​​​​Insights e GTmetrix.

Ao expandir a seção Desempenho no Google PSI, descobrimos que o SI avalia a velocidade com que o conteúdo acima da dobra de uma página da web é gerado visivelmente.

Como o índice de velocidade da página (SI) é calculado?

SI é diferente de outras métricas de desempenho no sentido de que não marca um momento específico no processo de carregamento da página (como First Contentful Paint (FCP) ou Largest Contentful Paint (LCP), por exemplo).

O Índice de velocidade da página, por sua vez, é calculado com a ajuda de uma captura de tela do carregamento da página no navegador. Dependendo da janela de visualização, o Lighthouse analisa a integridade visual entre cada quadro e usa o módulo Speedline Node.js para gerar a pontuação final do Índice de Velocidade.

Simplificando, o SI fornece uma avaliação rápida da posição da sua página da web em termos de tempo de carregamento visível.

Nota: Speedline é a versão mais recente do índice de velocidade original introduzido pelo WebpageTest.org em 2012 e é baseado nos mesmos princípios.

O que é um bom índice de velocidade?

Como regra geral derivada dos dados do Google, um índice de velocidade de página de:

• 0-3,4 s é considerado rápido

• 3,4–5,8 s é moderado

• qualquer coisa acima de 5,8 s é avaliada como lenta

Atingir abaixo da marca de 3,4 s costuma ser o objetivo, garantindo que os usuários considerem sua página rápida e eficiente.

Uma pontuação “lenta” no Índice de velocidade indica que o conteúdo acima da dobra é carregado muito mais tarde, dando aos visitantes do seu site a impressão de um tempo de carregamento mais lento.

Índice de velocidade versus carregamento de página: entendendo a diferença

Embora o Índice de velocidade e o tempo de carregamento da página se refiram à velocidade de carregamento do site, eles apresentam diferenças distintas.

• O Índice de Velocidade calcula aintegridade visual do conteúdo acima da dobraa partir da perspectiva do usuário;

• O tempo de carregamento da página mede otempo totalnecessário para uma página da web carregar completamente, incluindo todos os elementos como imagens, CSS e scripts.

Por que um índice de baixa velocidade de página é importante para o seu site?

Uma pontuação do Page Speed ​​Index acima de 5,8 s indica que a experiência de carregamento inicial em seu site é bastante lenta. Por si só, entretanto, o SI não fornece informações acionáveis ​​suficientes para determinar um culpado específico que você precisa abordar.

Em vez disso, pense no SI como uma métrica coletiva que é impactada por outras métricas que medem o processo de carregamento da página, como LCP e FCP.

Quanto mais baixa for a sua pontuação no SI, maior será a chance de o carregamento do seu site estar livre de confusão desnecessária. Para os visitantes do seu site, isso significaria um carregamento rápido da página que lhes permitiria começar a interagir com o seu site o mais cedo possível.

De acordo com um estudo interno recente de mais de 180 mil sites, o NitroPack descobriu que os visitantes perdem a paciência e abandonam um site em 2,75 s.

Além disso, o Google incorpora a velocidade da página, incluindo SI, como um fator de classificação em seu algoritmo de mecanismo de busca. Portanto, um SI baixo não apenas melhora a experiência do usuário e reduz as altas taxas de saída, mas também desempenha um papel fundamental no SEO, potencialmente direcionando mais tráfego orgânico para o seu site.

4 estratégias eficazes para otimizar seu índice de velocidade de página

Devido à natureza coletiva desta métrica, focar apenas na pontuação do Índice de Velocidade não produzirá os melhores resultados. Em vez disso, concentre-se em melhorar sua pontuação geral de desempenho e um ótimo lugar para começar são as seções Oportunidades e Diagnósticos em seu relatório PSI do Google:

Observação:isso não quer dizer, entretanto, que calcular o Índice de velocidade do seu site não seja uma ótima maneira de avaliar o andamento dos seus esforços de otimização. Por ser gerado em um ambiente controlado, é ótimo para fins de solução de problemas e depuração, especialmente quandonão há dados do Core Web Vitals disponíveis .

Conforme mencionado anteriormente, sua pontuação no Índice de velocidade é influenciada por uma série de melhorias, desde que priorizem a renderização inicial do conteúdo e a aparência do maior elemento acima da dobra.

A ideia central é maximizar o tempo que o thread principal fica livre. É essencialmente o coração das operações de um navegador. Ao minimizar sua carga de trabalho, o navegador pode carregar rapidamente todo o conteúdo visível, alcançando uma completude visual mais rápida.

Vamos ver como abaixo!

1. Reduza o tempo de execução do JavaScript

O principal objetivo aqui é otimizar seu código JavaScript para que ele seja executado com mais eficiência e leve menos tempo para ser executado. Para seus visitantes, isso significaria uma diminuição significativa nos atrasos e na falta de resposta da página.

As melhorias incluem (e não estão limitadas a):

• Removendo qualquer código redundante ou desnecessário
• Combinando funções semelhantes
• Refatorando loops usando forEach ou map em vez dos loops for tradicionais, quando apropriado
• Minimizando seus arquivos JS, tornando-os menores e mais rápidos para baixar e executar
• Implementar atributos async ou defer em suas tags de script para que sejam baixadas em segundo plano sem bloquear a página
• Removendo quaisquer bibliotecas ou plug-ins não utilizados e encontrando alternativas leves para bibliotecas atuais
• Dividindo seu JS em pedaços menores que podem ser carregados sob demanda
• Habilitando o cache do navegador para evitar baixar novamente arquivos JS em visitas repetidas

Minifique, adie e armazene em cache todos os arquivos JavaScript automaticamente com NitroPack →

2.Minimize o trabalho do thread principal

Pense no tópico principal como a lista de tarefas do seu navegador. Quanto menor a lista, mais rápido ela poderá tornar seu site uma experiência tranquila e responsiva para os visitantes.

Uma grande parte do descarregamento do thread principal é feita depois que você otimiza seu JavaScript, conforme mostrado acima. Outras técnicas incluem:

• Removendo JS não utilizado carregando apenas o JavaScript necessário para a visualização inicial (acima da dobra)

• Evitar layouts síncronos forçados agrupando alterações de estilo e leituras de layout para que não sejam feitas juntas
• Usando a propriedade contains do seu CSS para limitar a área que precisa de novo layout ou repintura.
• Mover tarefas não relacionadas à UI (como processamento de dados ou cálculos complexos) para um Web Worker, que é executado em um thread separado em vez do principal
• Escolhendo animações CSS em vez de baseadas em JavaScript
• Usando as propriedades de transformação e opacidade para animações, pois elas são otimizadas pelo thread de composição do navegador e não sobrecarregam o thread principal.
• Garantir que as imagens tenham o tamanho adequado e carregar lentamente aquelas que ficam abaixo da dobra
  

3. Reduza o impacto do código de terceiros

Todos os sites usam scripts de terceiros. Isso pode incluir scripts de rastreamento, anúncios, widgets incorporados e muito mais.

Dessa forma, o código de terceiros pode ser grande, não otimizado ou bloquear o thread principal, causando atrasos na renderização e na interatividade. Sem falar que alguns scripts podem introduzir vulnerabilidades ao seu site ou até mesmo funcionar mal.

Veja como você pode otimizá-los:

• Avalie quais scripts de terceiros são críticos e carregue o restante de forma assíncrona (para que não bloqueiem o thread principal)
• Como alternativa, você pode usar técnicas de adiamento e atraso para scripts não essenciais
• Verifique se alguns recursos de terceiros podem ser hospedados localmente em seus próprios servidores (mas com moderação)
• Considere remover scripts que não são mais necessários completamente
• Use redes de entrega de conteúdo (CDNs) para acelerar a entrega de scripts, servindo-os de um local próximo ao usuário

4. Certifique-se de que o texto permaneça visível durante o carregamento da Webfont

Para evitar Flash de texto invisível (FOIT) e melhorar a acessibilidade do conteúdo mesmo quando você usa fontes personalizadas em seu site, você precisa manipular a forma como os arquivos de fontes são baixados.

Considere uma combinação das técnicas de otimização abaixo, dependendo do seu caso:

• Use font-display: swap ou font-display: opcional para garantir que o texto permaneça visível durante o carregamento da fonte
• Subconjunto de fontes para incluir apenas os caracteres necessários no carregamento inicial, tornando o arquivo de fonte menor e mais rápido de carregar.
• Pré-carregue fontes da web essenciais para o seu design
• Reduza o tamanho dos seus arquivos de fontes incluindo apenas os pesos e estilos necessários
• Armazene em cache suas fontes da web para que os visitantes que retornam não precisem baixá-las novamente
• Hospede fontes localmente para melhor controle e redução de solicitações externas
• Ou se tudo isso parecer muito assustador – considere optar por fontes do sistema que carregam instantaneamente ou uma combinação de fontes do sistema e fontes da web

Melhorando a velocidade da sua página com NitroPack

Lembra-se de todos os avisos vermelhos anteriores no relatório PSI do Google?

Idealmente, você deseja que esta lista seja o mais curta possível.

Porém, realisticamente, sem habilidades avançadas de codificação ou a ajuda de um desenvolvedor profissional, você pode se deparar com uma barreira. Então o que vem depois?

Um cenário clássico é tentar vários plug-ins para cache, otimização de imagem, carregamento lento e compactação de código. Você pode até dar um passo adiante e pagar por um serviço CDN.

O resultado? Inchaço da pilha de tecnologia, conflitos de plug-ins e uma lista de avisos ainda mais longa.

Para evitar dores de cabeça (e dinheiro), considere optar por um serviço de otimização completo como o NitroPack .Embalado em um plug-in leve, você pode aproveitar mais de 35 recursos avançados que otimizam todos os recursos do seu site no piloto automático.

Agora você quer ver a lista, certo?

Configure o NitroPack em 3 minutos e acelere seu site automaticamente →