Cada caractere de código que um navegador descarrega aumenta o tamanho de uma página, e minificar CSS e JavaScript é uma das formas mais simples de o reduzir. A minificação retira tudo o que os ficheiros de código contêm e que um navegador não precisa para os executar. Os espaços, as quebras de linha, os comentários e os nomes de variáveis compridos que tornam o código legível para programadores são todos removidos, reduzindo o tamanho do ficheiro sem mudar o funcionamento do código. Este artigo explica o que faz a minificação, como funciona em CSS e JavaScript, quanto costuma reduzir o tamanho dos ficheiros e como a ativar no teu website.
Os ficheiros de código são escritos para serem mantidos por programadores. Isso significa que são formatados com indentação, divididos em linhas legíveis, anotados com comentários e estruturados com nomes descritivos. Tudo isso é útil quando um programador lê ou edita o código. Nada disso é útil quando um navegador o analisa e executa. A minificação remove os extras legíveis para humanos e produz um ficheiro mais pequeno que o navegador processa exatamente da mesma forma. Para um contexto sobre como o tamanho dos ficheiros contribui para a velocidade de carregamento, lê o artigo sobre o que é o tempo de carregamento da página e como se mede.
O que remove realmente a minificação dos ficheiros de código?
Quando minificas CSS e JavaScript, o resultado parece ilegível para um humano mas é funcionalmente idêntico ao original. Eis o que é removido.
Espaços e quebras de linha
- Os programadores usam espaços e quebras de linha para tornar o código visualmente organizado e fácil de percorrer
- Os navegadores tratam os espaços como irrelevantes e ignoram-nos por completo ao analisar o código
- Remover os espaços de um ficheiro CSS típico reduz-o em 15 a 25 por cento só por si
Comentários
- Os comentários são notas escritas no código para explicar o que fazem as secções, quem as escreveu ou quando foram atualizadas pela última vez
- São completamente ignorados pelo navegador
- Um código bem comentado pode ter uma parte significativa de cada ficheiro ocupada por comentários, todos desnecessários na versão servida
Nomes compridos de variáveis e funções
- Em JavaScript, os programadores dão nomes descritivos às variáveis e às funções para que o código se explique por si. Nomes como
calculateTotalOrderPriceouuserSessionDurationcomunicam o significado com clareza - Os minificadores substituem-nos por alternativas curtas como
aoubsem mudar o que o código faz - Chama-se a isto ofuscação de nomes e produz a maior redução adicional de tamanho para além da remoção de espaços
Padrões de código redundantes
- Alguns minificadores também simplificam a estrutura do código, trocando expressões lógicas mais longas por equivalentes mais curtos que dão o mesmo resultado
- Isto vai além de remover caracteres e implica reescrever secções do código para o tornar mais curto, o que por vezes se chama otimização de código ou uglification, além da minificação
Como funciona a minificação de CSS?
Os ficheiros CSS definem o aspeto visual de cada elemento de uma página. Um ficheiro CSS típico de um website tem centenas ou milhares de regras, cada uma a especificar cores, tamanhos, espaçamentos, letras e comportamento do layout.
O que faz um minificador de CSS
- Remove todos os espaços entre seletores, propriedades e valores
- Remove os comentários
- Junta propriedades abreviadas sempre que possível
- Remove os pontos e vírgulas desnecessários no fim dos blocos de regras
- Converte valores de cor em equivalentes mais curtos quando existem
Como é o CSS minificado
- Original: bem formatado em várias linhas, com espaçamento e comentários entre secções
- Minificado: todas as regras comprimidas numa ou em poucas linhas, sem espaços entre propriedades, valores ou seletores
- O resultado visual no navegador é idêntico. Só o ficheiro servido ao navegador é diferente
Redução típica do tamanho de um ficheiro CSS
- A minificação reduz normalmente o tamanho de um ficheiro CSS em 20 a 30 por cento
- Os ficheiros CSS muito comentados ou com formatação solta podem ter reduções maiores
Como funciona a minificação de JavaScript?
Os ficheiros JavaScript controlam o comportamento interativo de uma página. Tendem a ser maiores do que os ficheiros CSS e beneficiam mais da minificação por causa dos ganhos adicionais da ofuscação de nomes.
O que faz um minificador de JavaScript
- Remove todos os espaços, quebras de linha e comentários
- Renomeia variáveis e funções para alternativas mais curtas
- Simplifica a lógica do código sempre que possível sem mudar o resultado
- Remove código morto, ou seja, secções de código que nunca podem ser alcançadas nem executadas
Redução típica do tamanho de um ficheiro JavaScript
- A minificação reduz normalmente o tamanho de um ficheiro JavaScript em 30 a 50 por cento
- Os ficheiros JavaScript grandes, com muitos comentários, nomes de variáveis descritivos e lógica extensa, podem ter reduções de 60 por cento ou mais
- Os ficheiros JavaScript contribuem para o Total Blocking Time quando atrasam o processo principal. Ficheiros JavaScript mais pequenos são analisados e executados mais depressa, o que reduz o bloqueio
O HTML também pode ser minificado?
Sim, o HTML também pode ser minificado, embora os ganhos sejam normalmente menores do que no CSS e no JavaScript.
O que remove a minificação de HTML
- Espaços entre etiquetas HTML
- Comentários HTML
- Etiquetas de fecho e aspas opcionais, quando os navegadores as conseguem deduzir
Deves minificar o HTML?
- Nas páginas geradas no servidor que produzem documentos HTML grandes, a minificação pode trazer uma redução significativa no tamanho de cada resposta
- Nas páginas com HTML curto, a redução é mínima e muitas vezes não compensa a complexidade acrescentada de a processar
- A minificação de HTML é ativada com menos frequência do que a de CSS ou JavaScript e faz-se normalmente ao nível do servidor, e não como passo de compilação
A minificação afeta o aspeto ou o funcionamento de um website?
O código minificado corretamente produz exatamente o mesmo resultado no navegador que o original. O navegador não quer saber da formatação, dos comentários nem dos nomes das variáveis. Processa a lógica e aplica os estilos, seja qual for a forma como o código-fonte está escrito.
Quando a minificação pode causar problemas
- Os minificadores mal escritos podem por vezes introduzir erros de sintaxe que quebram o comportamento do código
- O JavaScript que depende de os nomes das variáveis serem preservados de uma forma específica pode quebrar quando a ofuscação de nomes os renomeia
- Minificar código de terceiros que não foi pensado para ser minificado pode ocasionalmente produzir comportamentos inesperados
Como evitar problemas de minificação
- Usa ferramentas de minificação estabelecidas e bem mantidas, em vez de escreveres soluções à medida
- Testa o site depois de ativar a minificação para confirmar que tudo aparece e funciona como esperado
- Guarda as versões originais, sem minificação, dos ficheiros para desenvolvimento e edição. Serve apenas as versões minificadas aos visitantes
Como minificar os ficheiros do teu website?
Através da tua plataforma de websites
- Muitos criadores de websites e sistemas de gestão de conteúdo incluem a minificação como definição integrada ou opção de desempenho
- Ativá-la é normalmente um único interruptor, sem processamento manual de ficheiros
- É a abordagem mais simples e o ponto de partida recomendado para utilizadores sem conhecimentos técnicos
Através de um plugin ou extensão
- Os sistemas de gestão de conteúdo que suportam plugins têm muitas vezes plugins de desempenho muito usados que incluem a minificação a par de outras melhorias de velocidade
- Estes plugins tratam da minificação automaticamente em cada pedido de página ou como processo agendado
Como parte de um processo de compilação
- As equipas de desenvolvimento que trabalham com websites feitos à medida incluem normalmente a minificação como passo automático na cadeia de compilação
- As ferramentas de compilação modernas minificam o JavaScript durante o processo de compilação. Os minificadores de CSS podem ser acrescentados ao mesmo fluxo de trabalho
- Esta abordagem garante que a versão minificada é sempre a que é publicada, sem processamento em tempo de execução
A minificação é uma parte de um conjunto mais amplo de melhorias de velocidade. Para um guia completo sobre como reduzir o tempo de carregamento do website em todas as áreas principais, lê o artigo sobre como reduzir o tempo de carregamento do teu website. Para saberes como a minificação contribui para as pontuações das Core Web Vitals, em particular o Total Blocking Time, lê o artigo sobre o que são as Core Web Vitals. Para verificar os resultados depois de ativar a minificação, lê o artigo sobre como testar a velocidade do teu website.
Como o WEMASY trata a minificação
O criador de websites do WEMASY minifica automaticamente os ficheiros CSS e JavaScript servidos aos visitantes. Isto acontece ao nível da plataforma, sem qualquer configuração. Os ficheiros de origem originais são mantidos à parte para o processo de desenvolvimento da própria plataforma, e só as versões minificadas são servidas quando os visitantes carregam as páginas.
A minificação está incluída a par de outras melhorias de velocidade automáticas: compressão de imagens, cabeçalhos de cache do navegador e entrega por CDN. Estas funcionam em conjunto como parte da configuração de alojamento por defeito em todos os planos do WEMASY.
Vê o que está incluído no criador de websites WEMASY, ou consulta as opções de planos na página de preços.
Perguntas frequentes
O que é a minificação no desenvolvimento web?
A minificação é o processo de remover caracteres desnecessários dos ficheiros de código, incluindo espaços, quebras de linha, comentários e nomes de variáveis compridos, para reduzir o tamanho do ficheiro sem mudar o funcionamento do código. Os ficheiros CSS e JavaScript minificados são mais pequenos e descarregam mais depressa do que as versões originais, o que contribui para tempos de carregamento de página mais curtos. O navegador processa o código minificado exatamente da mesma forma que o original. Com o criador de websites do WEMASY, podes configurar isto diretamente no teu website.
Quanto reduz a minificação o tamanho dos ficheiros?
A minificação de CSS reduz normalmente o tamanho do ficheiro em 20 a 30 por cento. A minificação de JavaScript reduz normalmente o tamanho do ficheiro em 30 a 50 por cento, com reduções maiores possíveis em ficheiros muito comentados ou escritos de forma extensa. A redução exata depende da forma como o código original foi escrito: os ficheiros bem formatados e muito anotados têm os maiores ganhos, enquanto o código já compacto tem melhorias menores.
A minificação muda o aspeto ou o funcionamento de um website?
Não. O código minificado corretamente produz o mesmo resultado visual e o mesmo comportamento no navegador que a versão original sem minificação. O navegador não depende da formatação, dos comentários nem dos nomes das variáveis para executar o código. Processa a lógica e aplica os estilos de qualquer forma. A única vez em que a minificação pode causar problemas é quando introduz um erro de sintaxe ou quando o JavaScript depende de nomes de variáveis preservados de uma forma incompatível com a ofuscação de nomes.
Deve minificar-se o CSS e o JavaScript em todos os websites?
Sim, em qualquer website em que o desempenho importe. A minificação é uma melhoria de baixo risco, sem desvantagem visível e com ganhos consistentes. É particularmente simples de implementar quando a plataforma do website a trata automaticamente. O ponto principal a ter em conta é garantir que os ficheiros de origem sem minificação são preservados à parte, para o código poder continuar a ser lido e editado durante o desenvolvimento.
Qual é a diferença entre minificação e compressão?
A minificação remove de forma permanente os caracteres desnecessários dos ficheiros de código antes de serem servidos. A compressão, como o Gzip ou o Brotli, é aplicada pelo servidor no momento da entrega e reduz o tamanho dos ficheiros durante a transferência. Ambas reduzem a quantidade de dados transferidos para o navegador, mas funcionam de forma diferente e podem ser usadas em conjunto. Um ficheiro minificado que também é comprimido durante a transferência é mais pequeno do que um ficheiro que usa apenas um dos dois métodos.
A minificação pode estragar um website?
Pode, em casos raros. As ferramentas de minificação mal implementadas podem introduzir erros de sintaxe, e o JavaScript que depende de nomes de variáveis específicos preservados pode comportar-se de forma inesperada depois da ofuscação de nomes. Usar ferramentas estabelecidas e bem mantidas reduz muito este risco. Testa sempre o site depois de ativar a minificação e mantém acessíveis os ficheiros de origem originais, sem minificação, para resolução de problemas ou edições futuras.