A minificação é o processo que consiste em remover todos os caracteres desnecessários de um ficheiro CSS, JavaScript ou HTML sem alterar o seu comportamento funcional: espaços, quebras de linha, comentários, ponto e vírgula redundantes, indentação. O ficheiro resultante é mais leve e, por isso, mais rápido de transferir e analisar pelo browser. É uma das otimizações de desempenho mais simples de implementar e entre as que produzem ganhos imediatos e mensuráveis nas pontuações PageSpeed.
O que é exatamente a minificação?
Quando se escreve CSS ou JavaScript, o código é formatado para ser legível por humanos: indenta-se o código, adicionam-se comentários para explicar a lógica, inserem-se linhas em branco entre blocos. Tudo isto é indispensável para a manutenção do código, mas completamente desnecessário para o browser que o executa. A minificação remove sistematicamente tudo o que não é necessário para a execução.
Na prática: um ficheiro CSS de 120 KB com comentários, indentação e espaços pode ser reduzido a 85 KB após a minificação — sem perder uma única regra de estilo. Um ficheiro JavaScript de 200 KB pode descer para 140 KB. Esta redução de 20 a 30% no peso dos ficheiros traduz-se diretamente num tempo de carregamento mais curto, especialmente notável em ligações móveis e redes lentas.
Minificação vs compressão: qual é a diferença?
Estes dois termos são frequentemente confundidos, mas descrevem operações distintas e complementares. A minificação modifica o conteúdo do ficheiro: remove caracteres, encurta nomes de variáveis (em JavaScript) e reescreve o código para o tornar mais curto. O ficheiro minificado é permanente — é este ficheiro modificado que fica armazenado no servidor.
A compressão (GZIP ou Brotli), em contrapartida, não modifica o ficheiro: comprime-o on the fly durante a transferência de rede, como um ficheiro ZIP. O servidor envia a versão comprimida e o browser descomprime-a na receção. Ambas as otimizações são cumuláveis: um ficheiro CSS minificado e depois comprimido com GZIP pode atingir uma redução de 70 a 80% em relação ao original não otimizado.
Minificação CSS
Remoção de espaços, comentários, quebras de linha e regras redundantes. Redução típica: 15 a 25%.
Minificação JS
Para além de espaços e comentários, encurta também nomes de variáveis (uglification). Redução típica: 20 a 40%.
Minificação HTML
Remoção de espaços entre tags e comentários HTML. Ganho mais modesto: 5 a 15%.
Minificação CSS em detalhe
A minificação CSS remove todos os caracteres que não alteram o rendering visual: espaços múltiplos (um único espaço entre seletor e chaveta é suficiente), quebras de linha, comentários (`/* ... */`), ponto e vírgula antes da chaveta de fecho, zeros desnecessários (0.5 torna-se .5) e por vezes as unidades em valores zero (0px torna-se 0). Ferramentas como cssnano ou clean-css também podem otimizar as cores (#ffffff torna-se #fff) e fundir seletores idênticos.
Minificação JavaScript: uglification incluída
A minificação JavaScript vai mais longe do que a CSS. Para além de remover espaços e comentários, ferramentas avançadas como Terser ou UglifyJS praticam a uglification: renomeiam as variáveis locais com nomes curtos (uma ou duas letras), simplificam expressões equivalentes e removem código morto. Um ficheiro JavaScript legível com nomes de variáveis descritivos (`updateProductPrice`) torna-se um ficheiro compacto com variáveis `a`, `b`, `c` — funcionalmente idêntico, mas muito mais curto.
Source maps: depurar código minificado
Impacto nos Core Web Vitals e na pontuação PageSpeed
O Google PageSpeed Insights sinaliza explicitamente os ficheiros CSS e JavaScript não minificados como oportunidades de melhoria, com uma estimativa dos kilobytes que podem ser poupados. A minificação melhora em particular o TBT (Total Blocking Time) ao reduzir o tempo de análise (parsing) dos ficheiros JS, e contribui para melhorar o LCP (Largest Contentful Paint) ao reduzir o tempo de carregamento dos recursos que bloqueiam o rendering.
O ganho na pontuação PageSpeed depende da quantidade de código não minificado presente na sua loja. Numa loja PrestaShop típica em que vários módulos adicionam cada um os seus próprios ficheiros CSS e JS, a minificação pode acrescentar 5 a 15 pontos na pontuação mobile.
Minificação no PrestaShop: definições nativas
O PrestaShop inclui nativamente opções de minificação e concatenação no back office, acessíveis através de Parâmetros avançados > Desempenho. Estão disponíveis duas opções: a minificação dos ficheiros HTML, CSS e JavaScript por um lado, e a concatenação dos ficheiros CSS e JS num único ficheiro por outro (o que reduz o número de pedidos HTTP).
- Acesso através de: Back office → Parâmetros avançados → Desempenho → CCC (Combinar, Comprimir, Cache)
- "Comprimir CSS": minifica e concatena as folhas de estilo num único ficheiro
- "Comprimir JavaScript": minifica e concatena os ficheiros JS num único ficheiro
- "Otimização Apache": ativa a compressão GZIP no servidor
- Atenção: alguns módulos mal codificados podem causar conflitos durante a concatenação — testar após ativação