Desempenho e monitorização

PageSpeed Insights: interpretar o relatório e melhorar um site

Revisto a 8 min de leitura pagespeed rendimiento

O PageSpeed Insights ajuda a identificar problemas de carregamento e de interação num URL. Utilize-o para decidir o que melhorar e para verificar resultados, sem transformar o 100/100 num objetivo acima do funcionamento do site.

Distinguir laboratório e utilizadores reais

O relatório combina um teste de laboratório com o Lighthouse e, quando há amostras suficientes, dados reais do Chrome UX Report. Verifique se os dados reais correspondem ao URL ou à origem completa: não são intercambiáveis.

O teste de laboratório reflete umas condições concretas de dispositivo, rede e execução. Os dados reais resumem os últimos 28 dias. Uma alteração aplicada hoje pode melhorar um novo teste sem modificar de imediato o histórico. A explicação da Google sobre o PageSpeed Insights detalha essa diferença.

Core Web Vitals

Métrica O que observa Limiar de boa experiência
LCP Aparecimento do conteúdo principal 2,5 segundos ou menos
INP Resposta visual às interações 200 milissegundos ou menos
CLS Deslocamentos inesperados do design 0,1 ou menos

Os limiares são avaliados sobre o percentil 75 das experiências disponíveis. FCP, Speed Index e TBT ajudam no diagnóstico, mas não são as três Core Web Vitals. Consulte a referência das Web Vitals para a sua interpretação.

Uma boa pontuação de laboratório não garante todas as experiências reais, e uma pontuação de SEO não certifica a indexação, as posições nem as vendas.

Preparar um caso prático no WordPress

Escolha três páginas representativas, por exemplo a página inicial, uma categoria e um produto. Guarde os relatórios de telemóvel e de computador, anote a data e a configuração e repita as medições para reconhecer a sua variação normal.

Guarde uma cópia recuperável e utilize uma cópia de testes para alterações de tema, plugins ou base de dados. Se trabalhar com o LiteSpeed Cache, verifique primeiro que a cache de página funciona. Não precisa de ligar uma CDN para essa função.

Se o conteúdo principal demorar a aparecer

Identifique o elemento LCP do relatório. Se for uma imagem, verifique o seu peso, as dimensões e o momento da transferência. Não aplique carregamento diferido à imagem principal visível ao abrir a página.

Para imagens grandes, sirva variantes adequadas ao espaço apresentado e à densidade do ecrã, com srcset e sizes quando for o caso. Acrescentar atributos de largura e altura ajuda a reservar espaço, mas não redimensiona o ficheiro descarregado.

Se o documento HTML demorar a chegar, reveja a cache de página, a rede, os recursos do alojamento e a execução PHP. Comprimir uma imagem não resolve uma consulta SQL lenta: utilize o PHP X-Ray para localizar trabalho pesado no servidor.

Se o CSS ou o JavaScript bloquearem o carregamento

No LiteSpeed Cache, teste a minificação a partir de Page Optimization. Combinar ficheiros, diferir JavaScript e carregar CSS de forma assíncrona são opções diferentes: ative-as em separado e reveja os seus efeitos.

Verifique menus, formulários, filtros, consentimento e pagamento. Um recurso aparentemente sem uso durante o carregamento inicial pode ser necessário ao abrir um menu ou ao interagir. Não elimine automaticamente tudo o que uma captura de cobertura marque como não executado.

Se o problema for código de terceiros, identifique a função que cumpre e quanto custa. Não copie scripts externos para o alojamento sem rever atualizações, compatibilidade e condições do fornecedor.

Se houver saltos no design

Reserve dimensões ou proporção para imagens, anúncios e incorporações. Reveja também os tipos de letra e os blocos que aparecem depois do carregamento. Teste várias larguras de ecrã e o estado antes e depois do consentimento.

A opção de acrescentar tamanhos em falta pode ajudar a reservar espaço, mas não corrige por si só todos os saltos nem reduz o peso das imagens.

Se os recursos forem descarregados repetidamente

Reveja os cabeçalhos de cache do navegador. Os ficheiros com nome versionado podem ter uma duração longa, porque uma modificação produz outro URL. Se um ficheiro mudar mantendo o nome, precisa de uma política que permita atualizá-lo sem deixar os visitantes com versões antigas.

Não aplique uma duração longa indiscriminada a HTML personalizado. Os cabeçalhos de ficheiros servidos por terceiros dependem deles; decida se precisa desse recurso antes de tentar modificar o seu comportamento.

Otimizar imagens e compressão

O alojamento comprime automaticamente o conteúdo de texto compatível com Gzip ou Brotli. Verifique o Content-Encoding antes de acrescentar compressão a partir do PHP.

Para as imagens, guarde os originais e teste uma amostra. O LiteSpeed pode utilizar serviços online da QUIC.cloud para otimização e formatos modernos: reveja a ligação, a quota, o modo e o estado das tarefas. O guia da QUIC.cloud explica a ligação atual, diferente das antigas chaves de domínio.

Verificar que a melhoria é real

Altere uma coisa de cada vez, purgue apenas as caches necessárias e repita os mesmos testes. Compare a métrica afetada e o funcionamento, não apenas a cor do relatório. Uma categoria com demasiados produtos pode precisar de paginação e de menos elementos, em vez de mais definições de um plugin.

Depois da implementação, observe as experiências reais durante a respetiva janela de atualização. Mantenha um registo de alterações e reverta as que melhorem uma pontuação à custa de partir funções. Para continuar, utilize o guia completo de otimização do WordPress.

Também lhe pode ser útil

Algo não bate certo ou mudou? Diga-nos e revemos.