Índice de velocidade: o que é e como otimizar seu site para isso

O índice de velocidade (SI) é uma métrica interessante ao considerar a velocidade da página. É absolutamente uma indicação do desempenho da sua página, mas é completamente diferente de outras métricas centradas no usuário, como First Contentful Paint e Largest Contentful Paint. SI indica a rapidez com que seu site carrega acima da dobra. Ou, dito de outra forma, quando todo o conteúdo na janela de visualização do usuário está completamente visível. Ao observar os tempos de carregamento de sua página, você provavelmente não será penalizado ou recompensado por seu Índice de Velocidade. Isso não é motivo para ignorá-lo. Como uma métrica única, é uma das poucas que engloba várias outras métricas e pode dar uma ideia sólida da velocidade, eficiência e desempenho geral do seu site.

Inscreva-se no nosso canal no Youtube

O que é índice de velocidade?

Lighthouse, a espinha dorsal do Google para o PageSpeed ​​Insights, analisa várias métricas de desempenho para avaliar seu site. O índice de velocidade (SI) é um deles, e o relatório exibirá o tempo em segundos, em vez de milissegundos, como acontece com algumas outras métricas. O Google define SI como “a rapidez com que o conteúdo de uma página é visivelmente preenchido”.

Muito simples, certo?

O índice de velocidade não leva em consideração scripts de back-end ou outras cargas não pintadas. Eles afetam isso, no entanto. O SI é simplesmente uma medida de quanto tempo leva para os usuários verem seu conteúdo por completo. Esse é o chute. Na íntegra . Enquanto outras métricas, como LCP, são medidas quando a maior parte do conteúdo é exibida, o Índice de velocidade é responsável por todo e qualquer conteúdo que deveria ser exibido na verdade.

Esta não é uma medida da velocidade geral da página. Isso leva em consideração quando o navegador renderiza todos os elementos. Incluindo scripts e elementos não visíveis que afetam o desempenho. No entanto, se você deseja um bom indicador de quando seus usuários percebem que a página está totalmente carregada , o SI é a métrica a ser observada. Por ser centrado no usuário, o SI pode ser uma boa indicação da integridade geral do site, bem como uma linha de base para a experiência do usuário (UX) do seu site.

Como medir o índice de velocidade

Tal como acontece com a maioria das métricas de desempenho do site, uma das principais ferramentas a serem usadas é o próprio PageSpeed ​​Insights do Google. Esta ferramenta também é uma das mais específicas nos resultados que retorna. É relativamente crítico até mesmo para os sites mais bem elaborados. O PageSpeed ​​Insights geralmente fornece dados de laboratório para seu site, com base em um agregado dos últimos 28 dias de coleta. No entanto, se você tiver visitantes suficientes que retransmitem informações para o Google por meio do Chrome, também poderá obter dados de campo do mundo real a partir do relatório. Porém, nem todo site pode conseguir isso.

Como você pode ver, a velocidade de muitas dessas métricas está no verde. Isso indica que eles são "bons". Obviamente, é aqui que você deseja seu site. No entanto, o Índice de velocidade é de 4,0 segundos e laranja. É muito tempo para o usuário esperar para ver tudo acima da dobra.

O que é uma pontuação de índice de boa velocidade?

O PageSpeed ​​Insights usa as seguintes pontuações para classificar o Índice de velocidade do seu site e codificá-lo por cores de acordo:

• Verde (bom) - 0 a 3,4 segundos
• Laranja (moderado) - 3,4 a 5,8 segundos
• Vermelho (lento) - mais de 5,8 segundos

Como dissemos antes, o PageSpeed ​​Insights é muito crítico em suas medições. Se você está no laranja ou vermelho, você pode querer usar uma ferramenta como GTmetrix ou o Teste de Velocidade do Pingdom para ver o que seus dados em tempo real mostram. Achamos que é melhor testar seu site usando várias ferramentas em momentos diferentes para obter a melhor imagem do desempenho geral.

Como otimizar sua pontuação do índice de velocidade

Você pode seguir várias etapas para otimizar sua pontuação do Índice de velocidade. Se você já tentou otimizar seu site para qualquer tipo de aumento de velocidade da página (ou, tecnicamente, diminuição), provavelmente também afetou de alguma forma sua pontuação de SI. Mostraremos algumas maneiras de direcionar especificamente seu tempo de SI para que sua página carregue o mais rápido possível para oferecer a seus visitantes a melhor experiência possível.

Reduzir recursos de bloqueio de renderização

Mais especificamente, reduzir o tempo de execução do JavaScript é uma das principais maneiras de aumentar a pontuação do Índice de velocidade. Recursos de bloqueio de renderização são scripts e código que evitam que outras partes do seu site sejam carregadas, tendo precedência. Em vez de o site carregar diferentes elementos simultaneamente, alguns elementos pausam todos os outros até que sejam concluídos.

E isso reduz o índice de velocidade do seu site. Para contornar isso, você pode adiar qualquer número de scripts e bits de código que carregam até depois que os elementos visíveis forem pintados no DOM. Identificar os culpados é relativamente fácil, pois você pode usar as ferramentas de desenvolvimento do Chrome para dar uma olhada em seu site enquanto ele carrega, e a ferramenta indicará o que está interrompendo a renderização dos elementos.

Além disso, os usuários do WordPress podem usar um plugin de cache (ou plugin de otimização de site) como W3 Total Cache ou WP Rocket para lidar com isso. Freqüentemente, esses plug-ins têm um botão simples para adiar os recursos de bloqueio de renderização.

Os usuários Divi também têm uma grande vantagem para bloquear esses recursos, já que as opções de tema permitem alternar o adiamento de CSS de bloqueio de renderização, bem como scripts jQuery. Além disso, os recursos de CSS críticos do tema dividem grandes blocos de código que podem atrasar o conteúdo do seu site e fazer com que carreguem muito mais rapidamente do que de outra forma. Embora alguns deles sejam alternadores, o Divi ativa outros automaticamente. A instalação do Divi deve ajudar sua pontuação SI imediatamente na maioria dos casos.

Reduzindo o trabalho do tópico principal do seu site

Assim como os recursos de bloqueio de renderização, você pode prejudicar o desempenho de seu site carregando diferentes elementos que consomem muito poder de processamento de seu servidor. Reduzi-los pode ajudar a levar o site ao navegador mais rapidamente.

A solução mais simples para isso é parar de usar tanto JavaScript . GTmetrix coloca isso da melhor maneira:

Em geral, quanto mais JavaScript sua página tiver, mais demorado será o processo de análise / compilação; resultando em uma espera mais longa para que os usuários visualizem o conteúdo e interajam com sua página.

Reconhecemos que isso pode não ser fácil. Você projetou o site para funcionar de uma determinada maneira. No entanto, pode haver código não utilizado que você pode eliminar e pode otimizar qualquer JavaScript de terceiros que esteja carregando em seu site. Além disso, reduza seu JavaScript.

Além da auditoria JS, certifique-se de minimizar seu CSS e HTML. Isso irá aliviar ainda mais a tensão do fio principal. Os plug-ins de cache e otimização também costumam ter essas opções.

Os usuários Divi, mais uma vez, têm uma vantagem aqui, já que o tema reduz e divide automaticamente CSS e JavaScript em pedaços pequenos para um rendimento mais rápido, eliminando a necessidade de muito foco de seu thread principal.

Perguntas mais frequentes sobre índice de velocidade

O índice de velocidade é um conceito simples com ramificações complexas. Queremos responder a algumas perguntas frequentes sobre o SI para ajudá-lo a otimizar seu site da melhor forma possível.

Como o índice de velocidade se encaixa no desempenho geral do meu site?

O índice de velocidade, como uma métrica única, é uma boa indicação do desempenho do seu site em várias áreas diferentes. Como leva em consideração o conteúdo totalmente visível e acima da dobra, você pode usá-lo como um medidor não apenas da carga percebida pelo usuário, mas também uma estimativa aproximada do que seu site está fazendo em várias áreas diferentes.

Na verdade, ele não fornece muitas informações sobre o que o seu site está fazendo. Ele pode ser visto como uma métrica abrangente que, como diz o GTmetrix, é "uma referência geral útil para avaliar o desempenho do seu site em sua totalidade".

Devo focar especificamente na minha pontuação do índice de velocidade?

Provavelmente não, não.

Embora seja muito útil fazer um benchmark de seu site, focando em outros problemas mais granulares, como First Contentful Paint (FCP), Maior Contentful Paint (LCP), Time to First Byte (TTFB) e First Input Delay (FID) são muito mais importante. Você pode realizar qualquer número de etapas para melhorá-los individualmente, o que, por sua vez, aumentará seu Índice de Velocidade. E quando considerado como uma referência geral, você pode ver como suas otimizações estão funcionando por meio do SI.

Conclusão

A otimização da velocidade da página é uma batalha sem fim que os proprietários de sites lutam. Você precisa encontrar o equilíbrio entre usabilidade, experiência e desempenho, e encontrar esse equilíbrio pode ser difícil. Quando os testes retornam tantas pontuações diferentes em tantos elementos diferentes, pode ser difícil saber onde investir sua energia e recursos. O índice de velocidade pode ajudar nisso, como uma métrica única que mostra o desempenho do seu site à medida que você ajusta outras partes mais específicas do desempenho do seu site.

O que você fez para otimizar o Índice de Velocidade do seu site ao longo dos anos?

Imagem de destaque do artigo por HappyDrawing / shutterstock.com