Como posso minimizar os ficheiros no meu site WordPress?

Procédure

A minificação é o ato de reduzir o tamanho de um ficheiro, geralmente uma folha de estilos CSS, um script JS ou um ficheiro HTML, para melhorar o tempo de carregamento do sítio. É uma prática comum que é fácil de pôr em prática para melhorar o desempenho do sítio. Como estes ficheiros são criados por humanos, estão repletos de comentários, espaços e quebras de linha, enquanto os nomes das funções e das variáveis são muitas vezes longos e descritivos, para que qualquer pessoa possa compreender e modificar o ficheiro sem ter de o decifrar.

Estes elementos são, portanto, essenciais para um humano, mas totalmente inúteis para uma máquina, e apenas tornam o ficheiro mais pesado, levando a um aumento da utilização da largura de banda e, por conseguinte, do tempo de carregamento do seu sítio. É aqui que entra a minificação: ao remover estes elementos supérfluos do ficheiro, é possível reduzir significativamente o seu tamanho, sem comprometer de forma alguma o conteúdo ou o funcionamento do sítio.

Um exemplo vale mais do que mil palavras, por isso vejamos o seguinte ficheiro CSS não minificado:

/* Altera o tamanho e o fundo dos parágrafos da classe */ p.class { font-size: 15px; background-color: blue; } /* Altera a cor da etiqueta input */ input { color: white; }

Ao minimizá-la, o seu conteúdo é apresentado da seguinte forma:

p.class{font-size:15px;background-color:blue;}input{color:white;}

Com todos os caracteres supérfluos removidos, é mais difícil encontrar o caminho em torno do ficheiro, particularmente quando este tinha originalmente várias centenas ou mesmo milhares de linhas, mas por outro lado é agora alguns Kb mais leve.

Reduzir o tamanho de um ficheiro de 60 KB para 55 KB, por exemplo, pode parecer insignificante, mas representa uma redução significativa, neste caso de cerca de 9% do tamanho total do ficheiro.
O efeito é ainda mais visível se todos os ficheiros do sítio forem reduzidos: se cada ficheiro for reduzido em 9%, isso traduz-se numa redução global de 9% do peso do sítio, o que corresponde a menos dados a carregar, acelerando o carregamento do sítio.

Minimizar os ficheiros no seu site WordPress

Há duas formas de o fazer: substituir manualmente o conteúdo de cada ficheiro por uma versão minificada ou automatizar a minificação através de extensões ou outros scripts.

O primeiro método pode ser viável para um pequeno sítio caseiro (sem utilizar um CMS como o WordPress), mas tornar-se-ia rapidamente complexo e moroso à medida que o número de ficheiros a processar aumentasse. Para um sítio WordPress, isto seria simplesmente impossível de manter: uma instalação típica do WordPress contém centenas de ficheiros CSS, sem contar com todas as extensões que possa instalar, e estes ficheiros são repostos no seu estado inicial a cada atualização, o que significa recomeçar o processo de cada vez que o seu sítio é atualizado.

É por isso que é preferível e recomendado utilizar uma extensão que reduza automaticamente os ficheiros do seu site, como a nossa extensão LWS Optimize.

Minimizar com o LWS Optimize

O LWS Optimize, uma extensão de otimização de sítios criada pela LWS, oferece a minificação de todos os ficheiros HTML, CSS e JS do seu sítio, para além do sistema de cache de ficheiros, que é ativado por defeito na extensão. Para ativar a minificação, vá às definições da extensão e depois ao separador "Front-End":

Aqui, active as opções "CSS File Minification", "JS File Minification" e "HTML Minification" para ativar a minificação de todos os ficheiros:

A minimização está agora activada no seu sítio, mas como está ligada ao sistema de cache de ficheiros, poderá ter de limpar esta cache para que a minimização tenha efeito nas páginas do seu sítio. Para tal, aceda ao separador "Caching" e clique no botão "Esvaziar cache" junto à ação "Limpeza manual":

Se não quiser que determinados ficheiros sejam minificados, pode voltar ao separador "Front-End" e clicar no botão "Excluir ficheiros" da ação da sua escolha para abrir o modal de exclusão:

No campo do modal recém-aberto, introduza o URL completo do ficheiro que pretende excluir, ou apenas parte dele, se pretender excluir todos os ficheiros cujo URL contenha essa parte. Pode clicar no botão verde "+" para adicionar outros URLs ou no botão vermelho "-" para os remover. Pode excluir tantos URLs quantos quiser. Quando tiver terminado, clique no botão "Guardar" para guardar as alterações.

No exemplo acima, o ficheiro "woocommerce.css", localizado numa pasta para a extensão WooCommerce, e todos os ficheiros CSS para a extensão Elementor foram excluídos da minificação de ficheiros CSS. Mais uma vez, terá de limpar a cache de ficheiros para aplicar as suas exclusões.

Como o LWS Optimize minimiza seus arquivos

A minificação HTML, por outro lado, é um pouco diferente das outras: todo o conteúdo é recuperado depois de as outras acções terem sido executadas e a página carregada, depois minificada antes de ser colocada em cache em "wp-content/cache/lwsoptimize/cache".

Conclusão

Agora você sabe como :

• Minificar manualmente os seus ficheiros CSS, JS e HTML e os benefícios desta prática.
• Usar extensões, como o LWS Optimize, para automatizar a minificação e melhorar a eficiência do seu site WordPress.
• Excluir determinados arquivos da minificação, se necessário, para manter a funcionalidade do seu site.
• Entenda o funcionamento interno do LWS Optimize ao minificar seus arquivos.

Ao otimizar seus arquivos com a minificação, você dá um passo gigante em direção a um site mais rápido e a uma melhor experiência do usuário. 🌐

🙌 Obrigado por acompanhar este artigo técnico! Se tiver alguma dúvida ou feedback sobre o serviço de minificação ou a extensão LWS Optimize, não hesite em deixar-nos um comentário. O seu feedback é inestimável para nos ajudar a melhorar constantemente os nossos serviços. 💬