Guia SEO para melhorar a velocidade da página e os tempos de carregamento

A velocidade da página há muito tempo é um fator de ranqueamento para o Google. Desde o primeiro anúncio em 2010, seguido por uma atualização adicional em 2018 e, finalmente, pela introdução do Core Web Vitals em 2020, está claro que o tempo de carregamento do site é uma prioridade máxima para os mecanismos de busca. Neste artigo, exploraremos o que significa a velocidade da página hoje, como medi-la e, o mais importante, como melhorar as pontuações de velocidade da página do seu site.

Entendendo os Core Web Vitals do Google

Por muito tempo, o próprio Google teve dificuldade em medir a velocidade da página. Quais são as métricas certas? Dados de campo ou dados de laboratório? Medir a página inteira ou apenas a parte superior? Existem dezenas de métricas que entram em jogo na velocidade da página e foi um longo caminho para entender quais delas são realmente importantes para o usuário.

Eventualmente, o Google se concentrou em um conjunto de três métricas consideradas as mais importantes para a velocidade da página: Largest Contentful Paint (LCP), First Input Delay (FID) e Cumulative Layout Shift (CLS). Conhecidas em conjunto como Core Web Vitals, essas métricas são projetadas para medir a velocidade percebida, em vez da velocidade real.

Largest Contentful Paint (LCP)

O Largest Contentful Paint é o tempo que leva para o maior elemento dentro da viewport carregar completamente. Os benchmarks para esta métrica são os seguintes:

• Bom: menos de 2,5 segundos
• Precisa de melhoria: de 2,5 a 4 segundos
• Ruim: mais de 4 segundos

Como é comum que o maior elemento seja uma imagem, a otimização de imagens é a principal contribuição para esta métrica. Além disso, o LCP depende dos tempos de resposta do servidor, do código que bloqueia a renderização e da renderização do lado do cliente.

First Input Delay (FID)

O First Input Delay é o atraso entre o momento em que um elemento interativo é pintado e o momento em que se torna funcional. Por exemplo, um botão é pintado na página, você o clica, mas ele ainda não está responsivo. Os benchmarks para esta métrica são os seguintes:

• Bom: menos de 100 milissegundos
• Precisa de melhoria: de 100 a 300 milissegundos
• Ruim: mais de 300 milissegundos

O FID pode ser otimizado com a divisão de código e o uso de menos JavaScript.

Cumulative Layout Shift (CLS)

O Cumulative Layout Shift mede se os elementos da página se movem durante o carregamento. Por exemplo, uma página parece pronta para uso, mas então uma nova imagem aparece no topo e o resto do conteúdo é deslocado para baixo — isso é um shift de layout. Os benchmarks para esta métrica são os seguintes:

• Bom: menos de 0,1
• Precisa de melhoria: de 0,1 a 0,25
• Ruim: mais de 0,25

O CLS depende de dimensões de elementos definidas corretamente e do carregamento de recursos em uma sequência especificada, de cima para baixo.

Ferramentas para medir a velocidade da página

Existem muitas ferramentas fornecidas pelo Google que oferecem os Core Web Vitals como parte de sua verificação de página:

• PageSpeed Insights do Google
• Google Search Console
• Chrome Lighthouse
• GTmetrix

No entanto, algumas dessas ferramentas usam dados de laboratório em vez de dados de campo, enquanto o Google classifica suas páginas exclusivamente com base em dados de campo. Além disso, a maioria das ferramentas pode avaliar apenas uma página por vez, o que não é uma abordagem prática para otimizar um site inteiro.

Entre as ferramentas do Google, a melhor para usar é provavelmente o Google Search Console. Lá, você pode ir em Experiência > Core Web Vitals e ver o relatório de todas as suas páginas de uma vez. Embora o relatório de alto nível seja fornecido em massa, identificar quais páginas são afetadas por quais problemas pode ser um processo tedioso.

Uma maneira melhor de medir a velocidade da página pode ser usar o WebSite Auditor. Lá você pode ir em Estrutura do Site > Auditoria do Site e obter um relatório de velocidade da página para todo o website, bem como ver todas as páginas afetadas, tudo em um único painel. Ou você pode ir em Auditoria do Site > Páginas > Velocidade da Página e ver uma lista de páginas com os problemas de velocidade que as afetam. Clicar em qualquer página também lhe dará uma lista dos elementos da página que podem ser otimizados para melhorar seu desempenho.

Otimizar a velocidade da página

Agora que você tem uma lista das páginas afetadas, é hora de trabalhar na melhoria da velocidade de sua página. Abaixo estão algumas das oportunidades de otimização mais comuns e algumas dicas sobre como aproveitá-las.

Defina as dimensões das imagens

Quando você omite as dimensões das imagens do seu código, pode levar um tempo para o navegador redimensioná-las corretamente. Isso significa que o conteúdo da sua página vai saltar e afetar negativamente sua pontuação CLS.

Para evitar esse problema, sempre defina as propriedades de largura e altura para suas imagens, como segue:

<img src="cuscino.jpg" width="640" Height="360" alt="almofada roxa com estampa de flores" />

Use formatos de imagem modernos

Nem todos os formatos de imagem são criados iguais. Nossos confiáveis formatos JPEG e PNG agora têm características de compressão e qualidade piores em comparação com AVIF, JPEG 2000, JPEG XR e WebP.

Entre os formatos listados, WebP é provavelmente o primeiro a considerar. Ele suporta compressão com e sem perdas, além de possibilitar transparência e animação. Além disso, os arquivos WebP são geralmente 25% a 35% mais leves que PNG e JPEG de qualidade similar. E embora no passado fosse uma preocupação comum que o formato WebP não fosse suportado por alguns navegadores, recentemente o Safari adicionou suporte para WebP na versão 14, então o suporte total para o formato entre os navegadores agora é superior a 90%.

Comprima as imagens

Independentemente de usar formatos de imagem de última geração ou não, compactar suas imagens ainda é uma maneira válida de reduzir o tamanho geral da página. Novamente, se o seu site é construído em WordPress, você pode compactar suas imagens em massa com plugins de otimização de imagem como WP Smush. Você também pode usar compressores online se não quiser instalar muitos plugins e correr o risco de atrasar seu site. Como último recurso, use editores de imagem para compactar as imagens antes de enviá-las para seu site.

Implementar lazy loading para imagens

Imagens off-screen são aquelas que aparecem abaixo da dobra, o que significa que o usuário não as veria até rolar além da tela inicial. E este será um tema recorrente para o resto do artigo: carregar tudo o que está abaixo da dobra deve ser adiado até que os elementos acima da dobra sejam totalmente carregados. A área acima da dobra é o que o Google usa para medir a velocidade de sua página, então é aqui que a maior parte do esforço de otimização deve ser concentrada.

A técnica para lidar com imagens off-screen é chamada de lazy loading. Basicamente, as imagens acima da dobra são carregadas primeiro, e as imagens off-screen são carregadas apenas à medida que o usuário rola para baixo na página.

Converter GIFs em vídeos

Pode parecer contraintuitivo, mas os GIFs geralmente terão um tamanho de arquivo maior do que os vídeos. Não sei como chegamos a isso, mas converter um GIF grande em um vídeo resultará em uma redução de tamanho de até 500% ou até mais. Então, se o seu relatório de velocidade da página diz para você usar formatos de vídeo para conteúdo animado, você deve levar isso a sério.

Para converter GIFs em vídeos, você pode usar qualquer conversor online ou baixar uma ferramenta como o FFmpeg. O Google realmente recomenda a criação de dois formatos de vídeo: WebM e mp4. O WebM é semelhante ao WebP, pois é mais leve, mas ainda não é suportado por todos os navegadores. Portanto, ao adicionar seu vídeo à página, você deve listar a versão WebM primeiro e depois a versão mp4 como backup.

<vídeo autoplay loop muted playsinline>
<source src="animacao.webm" type="video/webm">
<source src="animacao.mp4" type="video/mp4">
</video>

Observe que o elemento de vídeo também possui quatro atributos adicionais: autoplay, loop, muted e playsinline. Esses atributos fazem com que seu vídeo se comporte como um GIF: ele começa a ser reproduzido automaticamente, é repetido em loop, sem áudio e é reproduzido em linha.

Remover CSS não utilizado

O CSS não utilizado pode atrasar a construção da árvore de renderização pelo navegador. O fato é que um navegador precisa percorrer toda a árvore DOM e verificar quais regras CSS se aplicam a cada nó. Assim, quanto mais CSS não utilizado houver, mais tempo um navegador levará para calcular os estilos para cada nó.

O objetivo aqui é identificar as partes do CSS que são não utilizadas ou não críticas e removê-las completamente ou alterar a ordem em que são carregadas. Consulte este guia sobre como diferir o CSS não utilizado.

Minificar código CSS, JS e HTML

Os arquivos JS e CSS podem frequentemente conter comentários, espaços, quebras de linha e pedaços de código desnecessários. Removê-los pode tornar seus arquivos até 50% mais leves, embora a média de minificação seja bem menor. No entanto, é uma contribuição marginal para a velocidade de sua página e vale a pena tentar.

Se você tem um site pequeno, pode minificar o código usando minificadores online, como CSS Minifier, JavaScript Minifier e HTML Compressor. Ou, se o seu site for construído em uma plataforma CMS como WordPress, certamente existem alguns plugins que podem fazer o trabalho para você. Para um site personalizado, consulte este guia sobre minificação de CSS e este sobre minificação de JS.

Extrair CSS crítico

Por padrão, o CSS é um recurso que bloqueia a renderização. Sua página não será renderizada até que o navegador recupere e analise os arquivos CSS, o que pode levar muito tempo.

Para resolver isso, você pode extrair apenas os estilos necessários para a área acima da dobra da sua página e adicioná-los ao elemento `` do seu documento HTML. O restante dos seus arquivos CSS pode ser carregado assincronamente. Isso melhorará significativamente suas pontuações LCP e tornará suas páginas mais rápidas para os usuários.

Otimizar a resposta do servidor

A coisa mais desagradável sobre os atrasos na resposta do servidor é que existe uma vasta seleção de motivos que podem causá-los. Por exemplo, podem ser roteamento lento, lógica de aplicativo lenta, esgotamento de recursos da CPU, consultas de banco de dados lentas, esgotamento de memória, frameworks lentos, etc.

Uma solução não técnica fácil para esses problemas é mudar para uma hospedagem melhor, o que em muitos casos significa de uma hospedagem compartilhada para uma gerenciada. A hospedagem gerenciada geralmente inclui redes CDN e outros truques para a distribuição de conteúdo que terão um impacto positivo na velocidade da página. Mas se você quiser sujar as mãos, aqui está um guia mais detalhado sobre como resolver um servidor sobrecarregado.

Para quem busca uma melhoria rápida sem mergulhar nos detalhes técnicos, a transição para um provedor de hospedagem de alta qualidade pode fazer uma diferença significativa. A SiteGround, por exemplo, oferece hospedagem rápida e segura projetada para sites e empresas de pequeno e médio porte. Seus serviços incluem uma CDN gratuita, cache avançado e uma implementação otimizada de PHP, todos elementos que contribuem para tempos de carregamento mais rápidos e um site mais responsivo no geral.

Gerenciar eficientemente recursos de terceiros

Recursos de terceiros, como botões de compartilhamento social e embeds de reprodutores de vídeo, tendem a consumir muitos recursos. Além disso, toda vez que o navegador encontra um pedaço de JS, ele interromperá a execução do HTML até que o tenha processado. Tudo isso tende a contribuir para uma queda mensurável na velocidade da página.

Se um dos seus recursos de terceiros não for essencial, ou seja, não for importante para a aparência ou função da parte acima da dobra, você deve removê-lo do caminho de renderização crítico. Para carregar recursos de terceiros de forma mais eficiente, você pode usar o atributo *async* ou *defer*. O atributo *async* é mais suave: ele permite que você baixe HTML e JS simultaneamente, mas ainda interromperá o HTML para executar JS. O atributo *defer* é mais rigoroso: ele não interromperá o HTML para executar JS, que será executado apenas no final.

Usar pré-conexão para conexões

Estabelecer conexões, especialmente as seguras, leva muito tempo. O fato é que isso requer pesquisas de DNS, handshakes SSL, troca de chaves secretas e algumas idas e vindas ao servidor final responsável pela solicitação do usuário. Portanto, para economizar esse tempo precioso, você pode pré-conectar seu site às origens necessárias com antecedência.

Para pré-conectar seu site a uma fonte de terceiros, basta adicionar uma tag de link à sua página.

<link rel="preconnect" href="https://exemplo.com">

Identificar e otimizar tarefas JavaScript de longa duração

Sempre que houver um bloco de JavaScript que leva mais de 50ms para ser executado, sua página pode parecer não responsiva ao usuário. Para resolver este problema, é aconselhável localizar essas tarefas de longa duração, dividi-las em segmentos menores e carregá-las assincronamente. Dessa forma, haverá pequenas janelas de responsividade incorporadas ao processo de carregamento de sua página. Você pode usar o Chrome DevTools para identificar tarefas excessivamente longas – elas são marcadas com bandeiras vermelhas:

Uma vez identificadas as tarefas de longa duração em suas páginas, você pode dividi-las em tarefas menores, atrasar sua execução ou até mesmo movê-las da thread principal por meio de um web worker.

Pré-carregar recursos críticos

Cabe aos navegadores decidir quais recursos carregar primeiro. Portanto, eles geralmente tentam carregar os recursos mais importantes, como CSS, antes de scripts e imagens, por exemplo. Infelizmente, nem sempre essa é a melhor maneira de proceder. Ao pré-carregar recursos, você pode alterar a prioridade de carregamento de conteúdo em navegadores modernos, informando-os sobre quais recursos serão necessários como parte do código responsável pela renderização do conteúdo acima da dobra.

Com a ajuda da tag <link rel=”preload”>, você pode informar ao navegador que um recurso é necessário como parte do código responsável pela renderização do conteúdo acima da dobra, e fazê-lo recuperá-lo o mais rápido possível. Veja um exemplo de como a tag pode ser usada.

<link rel="preload" as="script" href="script.js" />
<link rel="preload" as="style" href="style.css" />
<link rel="preload" as="image" href="img.png" />
<link rel="preload" as="video" href="vid.webm" type="video/webm" />
<link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin />

Note que o recurso será carregado com a mesma prioridade. A diferença é que o download começará mais cedo, pois o navegador sabe do pré-carregamento com antecedência. Para instruções mais detalhadas, consulte este guia sobre pré-carregamento de recursos críticos.

Implementar o cache do navegador

Sem o cache do navegador, toda vez que você visita a mesma página, ela é carregada do zero. Com o cache do navegador, alguns elementos da página são armazenados na memória do navegador, então apenas uma parte da página precisa ser carregada do servidor. Naturalmente, a página carrega muito mais rápido em visitas subsequentes e suas pontuações de velocidade da página aumentam.

Normalmente, o objetivo é armazenar em cache o máximo de recursos da página pelo maior tempo possível e garantir que os recursos atualizados sejam revalidados para o cache. Na verdade, você pode controlar todos esses parâmetros com cabeçalhos HTTP especiais que contêm instruções para o cache. Um bom ponto de partida para aprender sobre cache HTTP é este guia do Google.

Otimizar a estrutura do DOM

Uma árvore DOM muito grande com regras de estilo complicadas pode afetar negativamente a velocidade, o tempo de execução e o desempenho da memória. A melhor prática é ter uma árvore DOM com menos de 1500 nós no total, uma profundidade máxima de 32 nós e nenhum nó pai com mais de 60 nós filhos.

Uma prática muito boa é remover os nós DOM dos quais você não precisa mais. Para isso, considere remover os nós que atualmente não estão sendo exibidos do documento carregado e tente criá-los apenas depois que um usuário rolar uma página para baixo ou pressionar um botão.

Eliminar redirecionamentos desnecessários

Livrar-se de todos os redirecionamentos desnecessários é uma das melhores coisas que você pode fazer pela velocidade do seu site. Cada redirecionamento adicional retarda a renderização da página e adiciona uma ou mais viagens de ida e volta de solicitação-resposta HTTP.

A melhor prática é não usar redirecionamentos. No entanto, se você precisar desesperadamente deles, é crucial escolher o tipo certo de redirecionamento. É melhor usar um redirecionamento 301 para redirecionamento permanente. Mas se, por exemplo, você deseja redirecionar usuários para páginas promocionais de curto prazo ou URLs específicos para dispositivos, os redirecionamentos temporários 302 são a melhor opção.

Esses problemas listados não são todos os problemas que podem afetar a velocidade da página, mas sim os mais comuns e aqueles com maior potencial de melhoria. Certifique-se de adaptar suas estratégias de otimização aos problemas refletidos em seu relatório de velocidade da página. Tenha em mente que os problemas presentes em muitas das páginas do seu site podem ser frequentemente resolvidos em massa implementando alterações em todo o site.