Velocidade da Página

O que é velocidade da página?

A velocidade da página pode ser definida de várias maneiras. Do ponto de vista técnico, pode ser definido como o tempo que leva para exibir todo o conteúdo em uma página da web específica, ou mesmo para um navegador receber o primeiro byte de um servidor web. No entanto, no final do dia, o que realmente importa é a velocidade com que seus visitantes sentirão que uma página está carregando. É uma sensação acima de tudo, não apenas métricas. Essa sensação é um pouco mais complicada de medir com valores numéricos.

É por isso que gigantes da web como o Google vieram com métricas centradas no usuário mais precisas. Isso ajuda a determinar quanto tempo leva para uma página ficar pronta para interação do usuário ou para exibir conteúdo consumível de valor agregado, como texto ou imagens. Tudo depende de qual parte da experiência do usuário você deseja focar e se você a interpreta como uma métrica básica, parte de uma análise geral de desempenho da página.

Por que o desempenho da página é importante para o SEO?

Experiência de usuário

Estudos mostraram que uma página de carregamento lento impede que os visitantes permaneçam no seu site. Quanto mais lenta uma página, mais o visitante perde a confiança em um site e o abandonará precocemente. E se eles saírem, eles podem não voltar. Após 3 segundos, quase metade de seus visitantes mudará para o site de um concorrente. Você não quer isso.

SEO

Os desenvolvedores da Web sabem que a velocidade da página é importante quando se trata de SEO. Os mecanismos de pesquisa começaram a levar em consideração a velocidade da página em seus resultados de pesquisa. Em 2010, o Google tornou público o fato de que eles estão usando a velocidade da página como um fator de classificação.

Em 2017, eles anunciaram que destacariam ainda mais páginas da web predominantemente que carregam rápido em dispositivos móveis. Foi então que o Google começou a se esforçar muito por um novo padrão da Web: as Accelerated Mobile Pages (AMP). Essa tecnologia otimiza e torna as páginas da web muito rápidas para carregar em dispositivos de baixo consumo de energia e baixa conectividade.

Fazer com que suas páginas da web carreguem mais rápido oferece uma melhor classificação para mais palavras-chave de pesquisa e, consequentemente, mais tráfego orgânico gratuito de alta qualidade.

Conforme os mecanismos de pesquisa evoluíram, o Google colocou um foco significativo na experiência geral do usuário de um site. Em 2020, o gigante das buscas apresentou o Page Experience aos seus sinais de classificação. Este novo sinal de classificação combina Core Web Vitals com métricas existentes, como navegação segura e compatibilidade com dispositivos móveis, para gerar sinais de pesquisa para a experiência geral da página.

Os sinais de experiência da página buscam avaliar as páginas da web pela experiência de seus usuários. Em resumo, eles ampliam os critérios recentes na página do Google com fatores que afetam a experiência da pessoa ao consumir o conteúdo da página.

Conversões

De acordo com um relatório da Akamai, páginas de carregamento rápido também levam a taxas de conversão mais altas. O Walmart.com experimentou um aumento de 2% na conversão a cada segundo de aumento da velocidade da página. Este é apenas um exemplo famoso que mostra como gastar o tempo na velocidade de carregamento da página pode levar a mais vendas, bem como permitir que os visitantes escolham o conteúdo que desejam ver sem tempos de espera desnecessários.

Embora nem todos os sites sejam tão grandes e complexos, essas páginas de carregamento rápido manterão a satisfação do visitante e os converterão em clientes fiéis.

Métricas de velocidade da página

Ao otimizar seu site para fornecer uma experiência rápida, existem várias métricas principais que você pode considerar. Todos eles fazem parte de uma abordagem holística para a engenharia de velocidade. No entanto, vamos dar uma olhada mais de perto nos principais elementos vitais da Web:

• Largest Contentful Paint (LCP): esta métrica descreve o tempo de carregamento de uma página. Ele mede em qual ponto o maior elemento de conteúdo na janela de visualização é renderizado na tela.
• Atraso na primeira entrada (FIP): essa métrica está relacionada à interatividade de uma página. O FID é medido como o intervalo entre a primeira interação do usuário e quando o navegador começa a responder a este evento.
• Mudança de layout cumulativa (CLS). Essa métrica trata da estabilidade visual da página. Mostra as instâncias em que o layout de uma página muda inesperadamente. Uma página que muda pode fazer com que o usuário clique acidentalmente no botão errado, e traz consequências terríveis.

Várias outras métricas importantes compõem a pontuação de desempenho de uma página da Web e devem ser otimizadas de forma adequada:

• Índice de velocidade: Calcula a rapidez com que o conteúdo acima da dobra é exibido visualmente durante o carregamento da página, de forma controlada e consistente em todos os dispositivos e navegadores de seu interesse. Gravamos um vídeo do carregamento da página no navegador e examinamos a progressão visual entre os quadros.
• Tempo de interação (TTI): esta métrica mede a rapidez com que uma página pode ser usada e interativa depois que o navegador começa a recuperar seu conteúdo.
• Total Blocking Time (TBT): determina a quantidade acumulada de tempo que uma página da Web fica bloqueada para responder a qualquer entrada do usuário. É calculado somando a porção de bloqueio de todas as tarefas longas entre Primeira pintura com conteúdo e Tempo para interação. Qualquer tarefa longa que execute mais de 50 ms. A quantidade de tempo após 50 ms é a parte do bloqueio de uma tarefa longa. Por exemplo, quando uma tarefa de 70 ms de comprimento é detectada, a porção de bloqueio é de 20 ms.

Como melhorar a velocidade da página do site?

Hospedagem na Web de alto desempenho

A otimização de hardware e software de um servidor pode trazer tempos de resposta abaixo de 100 ms. A medição do tempo até o primeiro byte (TTFB) é uma das principais métricas de desempenho que os mecanismos de pesquisa analisam das páginas que rastreiam para classificá-las em relação à concorrência. Recomendamos que você sempre use os serviços de provedores de nuvem com um histórico sólido, pois isso garante desempenho, segurança, recursos e suporte de primeira linha. WP Engine é a solução testada em batalha para colocar seu site rápido em execução em um piscar de olhos.

Aproveite o cache do navegador

Os navegadores armazenam em cache muitos dados (CSS, imagens, arquivos JavaScript e mais) para que, quando um visitante volte ao seu site, o navegador não precise recarregar a página inteira. Use as ferramentas de desenvolvedor do seu navegador e verifique se você já definiu uma data de validade para o seu cache. Em seguida, defina o cabeçalho "expira" de sua resposta HTTP com a duração que deseja que as informações sejam armazenadas em cache. A menos que o design e os componentes do seu site mudem regularmente, recomendamos que você defina esse cache para um ano.

Otimize CSS, JavaScript e HTML

Reduza o número de bytes baixados para sua página da Web compactando, combinando e minimizando arquivos CSS, JavaScript e HTML.

Reduza as solicitações HTTP

Mantenha o número de solicitações HTTP e seus domínios de origem necessários para processar sua página o mais baixo possível. Cada solicitação adiciona latência de computação e rede ao seu aplicativo da web. Além disso, toda vez que o navegador envia uma solicitação HTTPS a um domínio pela primeira vez, ele precisa executar um handshake SSL / TLS com o servidor remoto, que pode levar várias centenas de milissegundos para ser concluído regularmente.

Use o protocolo HTTP mais recente

HTTP / 2 é outra maneira fácil de tornar sua página da web mais rápida! HTTP / 2 é uma versão de última geração do protocolo HTTP que vai além das armadilhas de desempenho HTTP / 1.X com transferência de dados binários, multiplexação e união de conexões. A 3ª versão do protocolo está a caminho e promete desempenho ainda melhor. Você deveria tentar.

Reduza os redirecionamentos

Os usuários enfrentam um tempo adicional de espera pelo ciclo de solicitação-resposta HTTP para concluir cada vez que a página A redireciona para a página B. O impacto cumulativo desses redirecionamentos pode ser enorme. Sugerimos o uso de um script de redirecionamento com desempenho otimizado e evitando um grande número de redirecionamentos.

Remover JavaScript de bloqueio de renderização

Adiar ou excluir remove o número máximo de scripts de seu documento HTML para que o navegador possa continuar a construir uma árvore DOM e renderizar sua página sem interrupção. Isso torna o carregamento do seu site mais rápido, diminuindo o tempo que leva para o navegador localizar e analisar todo o seu conteúdo.

Use uma rede de distribuição de conteúdo (CDN)

As redes de distribuição de conteúdo (CDNs) são sistemas distribuídos de servidores que armazenam cópias de seu conteúdo em todo o mundo e o entregam rapidamente de locais próximos ao usuário final. Os CDNs podem oferecer um grande aumento de desempenho - diminuindo a latência do seu site, reduzindo o tempo de carregamento da página e reduzindo a sobrecarga em seu servidor.

Otimize as imagens

Certifique-se de que suas imagens não sejam maiores do que o necessário, que usem um formato de arquivo de última geração e que sejam compactadas para a web. Por exemplo, o formato WebP oferece uma alta taxa de compactação enquanto mantém a alta qualidade da imagem.

Sprites CSS combinam várias imagens em uma e são uma técnica poderosa para acelerar o seu site. Isso reduz as solicitações HTTP, pois você só precisa carregar uma imagem grande e, em seguida, renderizar uma parte dessa imagem em locais específicos de uma página.

Permitir compressão

Habilitar a compactação Gzip ou Brotli no servidor reduz bastante o tamanho dos arquivos antes de enviá-los para o navegador. Como ajuda a entregar páginas menores e mais rápidas com menos consumo de memória do lado do cliente, é uma vitória rápida e fácil para o desempenho do seu site.

Remova o código morto

Sempre tome cuidado para não adicionar JavaScript, CSS ou comentários inúteis no código de sua página. Por exemplo, se uma biblioteca (por exemplo, jQuery) é necessária apenas em uma página específica, certifique-se de que não seja carregada em outras páginas onde afetaria a velocidade da página sem agregar valor.

Carregue conteúdo acima da dobra rapidamente

Freqüentemente, os desenvolvedores da Web projetam páginas para serem consumidas somente depois que a página e seus recursos forem totalmente carregados. No entanto, otimizar o código e a estrutura de suas páginas para conteúdo acima da dobra proporcionará aos usuários uma experiência de navegação significativamente melhor, pois eles poderão consumir seu conteúdo muito mais rápido.

Conclusão

A velocidade da página define a velocidade de carregamento de uma página.

A velocidade da página é crítica para o desempenho de um site, a percepção da marca e a experiência geral do usuário.

O desempenho da página é tão importante no celular quanto no desktop.

Uma página lenta faz com que o visitante saia prematuramente do site.

A velocidade da página é crítica para a otimização do mecanismo de pesquisa.

As páginas da web de alto desempenho obtêm melhores classificações nos mecanismos de pesquisa.

O investimento em um provedor de hospedagem na Web sólido compensa.

Execute nosso teste de velocidade da página para avaliar os problemas de desempenho de qualquer página pública.

Aplique as recomendações acima para melhorar rapidamente a velocidade de sua página.

Monitore continuamente o desempenho de suas páginas.

Execute um teste de velocidade da página após cada alteração de código para continuar fornecendo a melhor experiência do usuário.

Dicas

• Experimente a plataforma de hospedagem WP Engine para obter a melhor velocidade do site.
• Realize regularmente uma auditoria de SEO completa para completar a otimização de suas páginas.
• Explore os recursos do web.dev para obter as informações mais recentes sobre o desempenho da web.