Como Aumentar a Velocidade do Site - Guia PageSpeed

A velocidade do site não é apenas uma questão de experiência do utilizador - é um fator de ranking direto no Google. Desde 2021, as métricas de velocidade do site do Google fazem parte do algoritmo de ranking, e o Google PageSpeed Insights é a ferramenta que mostra o desempenho do seu site. Neste guia vamos percorrer passos concretos para melhorar a sua pontuação.

Compreender as métricas do PageSpeed

O Google PageSpeed Insights mede seis métricas-chave que, em conjunto, compõem a pontuação global. O Largest Contentful Paint (LCP) mede a rapidez com que o maior elemento visível da página carrega - idealmente abaixo dos 2,5 segundos. O Interaction to Next Paint (INP) mede a rapidez com que a página responde às interações do utilizador - idealmente abaixo dos 200 milissegundos.

O Cumulative Layout Shift (CLS) mede a estabilidade visual da página - quanto os elementos se movem durante o carregamento. O valor ideal é inferior a 0,1. O First Contentful Paint (FCP) mede quando o primeiro conteúdo aparece no ecrã. O Time to First Byte (TTFB) mede a rapidez com que o servidor responde ao pedido. O Total Blocking Time (TBT) mede durante quanto tempo a thread principal fica bloqueada.

Otimização de imagens - o maior impacto

As imagens são a causa mais comum de um site lento. Uma fotografia de 5 MB não otimizada pode atrasar o carregamento da página em vários segundos. Eis o que fazer.

Primeiro, utilize formatos de imagem modernos. O formato WebP proporciona um tamanho 25-35% menor do que o JPEG com a mesma qualidade. O AVIF vai ainda mais longe com um tamanho 50% menor, mas não tem suporte total em todos os navegadores. Para o WordPress, os plugins ShortPixel ou Imagify convertem automaticamente as imagens para WebP.

As dimensões das imagens devem corresponder ao tamanho de exibição. Se uma imagem é exibida a 800x600 píxeis, não faz sentido carregar um original de 4000x3000. Utilize o atributo srcset para imagens responsivas que se adaptam ao tamanho do ecrã.

A compressão é fundamental - para a maioria das imagens web, 80-85% de qualidade é perfeitamente suficiente. A diferença entre 85% e 100% de qualidade é impercetível a olho nu, mas a diferença no tamanho do ficheiro pode ser enorme.

Lazy Loading - carregue apenas o que está visível

O lazy loading adia o carregamento de imagens e outros recursos até que o utilizador faça scroll até eles. Isto reduz drasticamente o tempo de carregamento inicial da página porque o navegador não tem de descarregar todas as imagens de uma só vez.

No HTML moderno, o lazy loading é trivialmente simples - adicione um atributo loading="lazy" às tags img. A plataforma CMS WordPress adiciona automaticamente lazy loading a todas as imagens desde a versão 5.5. Apenas tenha cuidado para não aplicar lazy loading a imagens na parte "above the fold" da página (imagens de hero, logótipo), porque isso pode afetar negativamente a métrica LCP.

Para iframes (vídeo do YouTube, Google maps), o lazy loading é especialmente importante porque esses recursos podem ser extremamente grandes. Em vez de um embed direto, considere exibir uma imagem em miniatura com um botão de reprodução que carrega o iframe apenas ao clicar.

Caching - não carregue a mesma coisa duas vezes

O caching do navegador permite que os recursos estáticos (imagens, CSS, JavaScript) sejam armazenados no navegador do visitante. Quando um utilizador volta a visitar o seu site, esses recursos carregam a partir do computador dele em vez do servidor - instantaneamente.

Na BeoHosting, com um servidor LiteSpeed avançado, o caching é excecionalmente eficiente. O LiteSpeed Cache para WordPress cria automaticamente versões HTML estáticas das suas páginas, eliminando a necessidade de processamento PHP e consultas à base de dados em cada pedido.

Configure os cabeçalhos Cache-Control para diferentes tipos de ficheiros. Para imagens, CSS e ficheiros JS, defina uma duração de cache longa (por exemplo, 1 ano). Para páginas HTML, utilize uma duração mais curta ou revalidação para que as alterações de conteúdo apareçam rapidamente.

Minificação de CSS e JavaScript

A minificação remove espaços em branco desnecessários, comentários e formatação dos ficheiros CSS e JavaScript, reduzindo o seu tamanho. Para um site típico, a minificação pode reduzir o tamanho do CSS em 10-30% e do JavaScript em 20-40%.

Para o WordPress, o plugin LiteSpeed Cache tem minificação e combinação de ficheiros CSS/JS integradas. O Autoptimize é uma excelente alternativa. Tenha cuidado ao combinar ficheiros JavaScript porque pode causar conflitos entre plugins - teste exaustivamente após ativar.

A técnica de Critical CSS extrai o CSS necessário para renderizar o conteúdo "above the fold" e injeta-o diretamente no HTML, enquanto o resto do CSS carrega de forma assíncrona. Isto melhora drasticamente as métricas FCP e LCP.

Otimizações do lado do servidor

A escolha do fornecedor de alojamento e a configuração do servidor têm um enorme impacto na velocidade do site. A BeoHosting utiliza o servidor LiteSpeed Enterprise, discos NVMe SSD e CloudLinux para um desempenho ótimo. Consulte os nossos planos de alojamento.

A compressão GZIP ou Brotli reduz o tamanho dos dados transferidos em 60-80%. Na BeoHosting, a compressão Brotli é ativada automaticamente para todos os sites. Os protocolos HTTP/2 e HTTP/3 permitem o carregamento paralelo de vários recursos através de uma única ligação, acelerando significativamente o carregamento de páginas com muitas imagens, estilos e scripts.

O OPcache do PHP guarda em cache o código PHP compilado na memória, eliminando a necessidade de voltar a analisar e recompilar em cada pedido. Na BeoHosting, o OPcache é ativado automaticamente e configurado de forma ótima.

Otimização de fontes

As fontes web podem abrandar significativamente o carregamento da página. As Google Fonts, por mais populares que sejam, exigem pesquisas DNS adicionais e downloads a partir de um servidor externo. Considere alojar as fontes localmente - descarregue os ficheiros das fontes e sirva-os a partir do seu próprio servidor.

Utilize font-display: swap no CSS para que o texto fique imediatamente visível com a fonte do sistema enquanto a fonte web carrega. Limite o número de variantes de fontes - em vez de carregar 6 pesos diferentes, utilize os 2-3 de que realmente precisa. Faça preload das fontes-chave com link rel="preload" para um carregamento mais rápido.

Otimização da base de dados

Para sites WordPress, a base de dados pode tornar-se um estrangulamento de desempenho se não for mantida regularmente. Elimine revisões de publicações com mais de 30 dias, comentários de spam, transientes e metadados não utilizados. O plugin WP-Optimize pode manter a base de dados automaticamente.

Utilize object caching (Redis ou Memcached) para guardar em cache os resultados de consultas frequentes à base de dados. Na BeoHosting, o Redis está disponível nos planos Business e Premium e pode reduzir drasticamente o tempo de geração de páginas para sites dinâmicos.

CDN - Content Delivery Network

Uma CDN distribui os recursos estáticos do seu site por servidores em todo o mundo, para que os visitantes carreguem o conteúdo a partir do servidor mais próximo. Para sites com uma audiência predominantemente portuguesa, uma CDN não é criticamente importante porque o servidor da BeoHosting já está na região. Mas para sites com uma audiência global, uma CDN pode melhorar significativamente a velocidade.

A Cloudflare oferece um plano de CDN gratuito que inclui proteção DDoS e otimização básica. A integração com o WordPress é simples e não exige conhecimentos técnicos.

Checklist prática de otimização do PageSpeed

Comprima e converta as imagens para WebP. Implemente lazy loading para imagens abaixo da fold. Ative o caching do navegador com durações longas para recursos estáticos. Minifique os ficheiros CSS e JavaScript. Utilize o PHP 8.4 para um desempenho máximo. Ative a compressão GZIP ou Brotli. Otimize as fontes e limite o número de variantes. Limpe regularmente a base de dados. Utilize caching de páginas (LiteSpeed Cache para WordPress). Minimize o número de scripts e recursos externos.

Conclusão

Melhorar a pontuação do PageSpeed é um processo iterativo - não espere atingir uma pontuação de 100/100 de uma só vez. Concentre-se primeiro nos maiores problemas que o PageSpeed Insights identifica, normalmente imagens e JavaScript. Com a BeoHosting já tem um lado de servidor otimizado, por isso pode concentrar-se nas otimizações de front-end. Procure uma pontuação verde (90+) tanto para a versão móvel como para a versão de desktop do seu site.