Como levei a proGrow de PageSpeed 52 para 97
Um site Webflow com páginas de 21MB, 1.321 classes CSS não utilizadas e lorem ipsum escondido. Eis o que encontrei e corrigi.
Uma página do site da proGrow tinha 21,3MB. Maior do que a maioria das aplicações de desktop. Era uma página de equipa com fotografias.
A proGrow é uma plataforma de inteligência industrial baseada no Porto. O site Webflow tinha um aspeto profissional, mas por baixo da superfície, as coisas estavam a desmoronar. Pediram-me para perceber porque é que o site parecia lento e o que podia ser feito.
Auditei as 13 páginas principais. O que encontrei não foi um grande problema. Foram dezenas de pequenos problemas, acumulados em cada página.
O que a auditoria revelou
Os números contavam uma história clara:
- Performance score médio: 83,85%
- Tamanho médio das páginas: 4,73MB
- Tempo médio de carregamento: 7,58 segundos
- Pedidos médios por página: 85
- Pior página: Equipa com 52% de performance e 21,3MB
A página da equipa era o pior caso, mas não estava sozinha. A homepage pesava 7,23MB com uma pontuação de performance de 70%. Mesmo as páginas com melhor desempenho tinham problemas estruturais escondidos por trás de pontuações decentes.
Os problemas eram sistémicos
Todas as páginas tinham os mesmos problemas recorrentes:
1.321 classes CSS não utilizadas. O projeto Webflow tinha acumulado mais de mil estilos que não estavam ligados a nada. Peso morto em cada carregamento de página.
19 animações não utilizadas. O motor de interações do Webflow carrega um script para gerir animações. Cada animação não utilizada acrescenta peso a esse script sem razão.
Hierarquia de títulos partida em quase todas as páginas. H1 em falta, H1 duplicados, H2 a saltar para H4. Uma página tinha “35%” e “5%” como elementos H1. Isto mata tanto o SEO como a acessibilidade.
Elementos escondidos ainda no DOM. Secções com display: none que continuavam a carregar as suas imagens e scripts. Algumas continham texto lorem ipsum que nunca tinha sido substituído.
Imagens OpenGraph em falta em todo o site. Não é um problema de performance, mas significava que cada partilha nas redes sociais mostrava uma pré-visualização genérica.
Imagens não otimizadas em todo o lado. Sem atributos de dimensão, sem texto alternativo, e tamanhos de ficheiro muito maiores do que o necessário. Só as fotografias da página da equipa representavam a maior parte dos 21,3MB.
O que corrigi
As correções foram metódicas, não espetaculares. Sem truques engenhosos, apenas limpeza do que não devia lá estar.
Limpeza de código: Removi todas as 1.321 classes não utilizadas, as 19 animações não utilizadas, e todos os elementos escondidos. Eliminei breakpoints desnecessários que estavam a gerar CSS extra. Consolidei componentes duplicados de navegação e rodapé em blocos reutilizáveis.
Otimização de imagens: Comprimi e redimensionei todas as imagens. Adicionei atributos de dimensão para que os browsers pudessem reservar espaço antes de carregar. Adicionei texto alternativo em todo o site.
Reestruturação de títulos: Reconstruí a hierarquia de títulos em todas as páginas. Um H1 claro, estrutura lógica de H2/H3, elementos HTML semânticos corretos.
Meta e SEO: Escrevi meta descriptions adequadas, criei imagens OpenGraph, corrigi inconsistências nos URLs (alguns slugs estavam em inglês em páginas portuguesas), e corrigi tags hreflang partidas.
Embeds de vídeo: Substituí embeds de YouTube não nativos por elementos de vídeo nativos do Webflow onde possível, removendo o peso de scripts de terceiros.
Os resultados
Testado duas semanas depois no GTmetrix (tráfego com origem na Europa):
| Página | Antes | Depois | Diferença |
|---|---|---|---|
| Equipa | 52% | 97% | +45 |
| Homepage | 70% | 86% | +16 |
| Caso de sucesso Nestlé | 76% | 96% | +20 |
| Artigo de blog | 83% | 100% | +17 |
| Demo | 85% | 98% | +13 |
| Preçário | 93% | 100% | +7 |
| Gestão de Qualidade | 95% | 99% | +4 |
Os structure scores melhoraram em todas as páginas, com a maioria a subir 5-10 pontos. Duas páginas atingiram 100% de performance.
As oportunidades restantes eram menores: substituir um player YouTube em duas páginas e converter algumas imagens de background para elementos img normais.
O que isto me ensinou
A maioria dos problemas de performance em Webflow não são sobre a plataforma. São sobre acumulação. Cada elemento escondido, classe não utilizada e imagem não comprimida acrescenta um pouco de peso. Multiplicando isso por algumas dezenas de páginas e um ano de desenvolvimento, uma página de equipa de 21,3MB começa a fazer sentido.
A solução é sempre a mesma: auditar tudo, remover o que não é preciso, otimizar o que resta. Não é trabalho entusiasmante, mas é a diferença entre 52% e 97%.
Leia o case study da proGrow para a visão geral do projeto e resultados completos.
25+ anos a construir para a web. Especialista em arquiteturas híbridas e em levar plataformas além dos seus limites.