Reduzir o HTML, CSS e JavaScript: é muito simples no WordPress

Sven Scheuerle Atualizado em 21.10.2020
9 min.
css minificação
Última actualização em 21.10.2020

A redução de ficheiros HTML, CSS e JavaScript é um dos muitos pequenos ajustes para otimizar a velocidade de carregamento do teu site. Neste artigo, o Sven explica-te o que significa reduzir o CSS, HTML e outros. Quanto tempo de carregamento economizas com um código fino e que plugins do WordPress ajudam na implementação.

Se olhares para os sites da World Wide Web hoje em dia, perceberás rapidamente que eles não são de forma alguma comparáveis aos sites de há 10 anos. No início, um simples código HTML e um pequeno texto era suficiente. Hoje em dia, porém, os sites são compostos por um extenso código, muitas vezes composto por HTML, CSS e JavaScript. Isto deve-se em parte à variedade de funcionalidades que estão agora disponíveis para websites, mas também aos designs e modelos cada vez mais extensos que são utilizados no web design. . 

Portanto, não é incomum que ficheiros HTML, CSS ou JavaScript tenham centenas de kilobytes de tamanho. Para processar todos estes códigos nos ficheiros e poder exibir o site, o navegador da web envia inúmeras solicitações (as chamadas solicitações HTTP) ao servidor. 

Quanto mais "solicitações" forem enviadas, maior será o tempo de carregamento. Para manter o número de solicitações tão baixo quanto possível e, também assim, o tempo de carregamento do site, deves fundir e comprimir os ficheiros.  

O que significa redução de HTML, CSS e JavaScript?

A minimização, isto é, reduzir ao máximo o tamanho dos ficheiros HTML, CSS, etc. - faz parte de uma boa otimização OnPage. Embora apenas represente uma pequena parte dos tempos de carregamento, também pode ser decisiva para as tuas classificações nos motores de busca. 

O WordPress, em particular, não é conhecido por ter ferramentas integradas para otimizar o tempo de carregamento. Portanto, deves verificar o desempenho do teu site WordPress regularmente.

Reduzir os tempos de carregamento

Todo o operador de sites que já tenha utilizado uma ferramenta como PageSeepd Insights do Google, conhece com certeza esta sugestão de otimização: "Reduzir o CSS"

Esta medida é recomendada pelo PageSpeed Insights quando as solicitações de recuperação dos ficheiros CSS têm uma forte influência no tempo de carregamento do site. Podes encontrar uma explicação detalhada e explicações de outras mensagens na ferramenta no artigo "Google Pagespeed - As mensagens de erro mais importantes". 

De que forma a redução do CSS pode influenciar o tempo de carregamento do teu site, vou-te agora mostrar com um diagrama de cascata do meu blog bloggiraffe.com . Os exemplos são apenas pequenas secções, mas mostram claramente como o tempo de carregamento pode ser reduzido.

Exemplo 1 - Não comprimido (não reduzido):

css recompactado
Diagrama de cascata - sem compactação de ficheiros HTML, CSS e JavaScript

Exemplo 2 - Comprimido (reduzido):

css comprimido
Diagrama de cascata - com compactação de ficheiros HTML, CSS e JavaScript

Já na solicitação do domínio principal, dá para ver que eu consegui reduzir o tempo de carregamento de 1233 milissegundos para 860 milissegundos. Também os tempos de carregamento dos ficheiros individuais poderiam ser reduzidos ao mínimo em alguns casos.

O que acontece ao comprimir arquivos HTML, CSS e JavaScript? 

Como mencionado no artigo, quando arquivos como HTML, CSS e JavaScript são comprimidos, os arquivos individuais são combinados num único arquivo. 

Como resultado, o navegador que estás a usar para acessar um determinado site tem de enviar menos solicitações ao servidor para conseguir exibir o site e, se for o caso, carregar scripts necessários.

Um exemplo da vida quotidiana para entender

Imagina que vais ao supermercado e tens 10 produtos na tua lista de compras, mas eles estão em corredores e prateleiras diferentes. 

Consequência: Demora muito tempo para encontrares cada produto e colocá-los no carrinho de compras. 

Solução: Informa o supermercado com antecedência quais os produtos que precisas. O supermercado irá dispôr os teus produtos numa prateleira, para que só precises de os colocar no carrinho de compras e pagar na caixa. 

Resultado: Ao teres todos os teus produtos dispostos numa só prateleira, tens de percorrer apenas um caminho pelo supermercado e economizas uma quantidade incrível de tempo. É semelhante à minimização de códigos e scripts individuais do teu site. Para que possas ver como tudo funciona na prática, eu gostaria de te mostrar isto com pequenos exemplos. 

A economia de dados não só ajuda a otimizar o desempenho.
Porque o uso consciente dos recursos também ajuda a tornar o teu site mais sustentável. Por favor, lê os artigos sobre os tópicos Quão verde é o WordPress? e Alojamento verde .

HTML

HTML (Hypertext Markup Language) é necessário para a estrutura básica de um site. Os textos, links ou imagens são produzidos através deste. 

Por exemplo, um código HTML padrão é parecido com isto:

 <!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="Beispiel-Code" content="width=device-width, initial-scale=1.0">
    <title>HTML Code zur Komprimierung</title>
  </head>
  <body>
    <p>Dieser HMTL-Code soll komprimiert werden.</p>
  </body>
</html>

Comprimido:

 <!doctype html><html><head><meta charset="utf-8"><meta name="Beispiel-Code" content="width=device-width, initial-scale=1.0"><title>HTML Code zur Komprimierung</title></head><body><p>Dieser HMTL-Code soll komprimiert werden.</p></body></html>

CSS

CSS (Cascading Style Sheets) não é uma verdadeira linguagem de programação. A chamada linguagem de folha de estilo é usada, no entanto, para alterar a aparência de elementos individuais do site. 

Por exemplo, um código CSS padrão é parecido com isto:

 /* Add your CSS customizations below this line */

.post-content a:not([class*="button"]){
     color:#ff8c00;
}

.post-content a:not([class*="button"]):hover {
    text-decoration: underline;
    color: #ff8c00;
}

.widget-area a {
    color: #ff8c00;
}

.widget-area a:hover {
    text-decoration: underline;
    color: #ff8c00;
}

.main-navigation {
    font-size: 20px;
}

label.wp-comment-cookies-consent {
    float: none;
}

Comprimido:

 /* Add your CSS customizations below this line */.post-content a:not([class*="button"]){ color:#ff8c00;}.post-content a:not([class*="button"]):hover { text-decoration: underline; color: #ff8c00;}.widget-area a { color: #ff8c00;}.widget-area a:hover { text-decoration: underline; color: #ff8c00;}.main-navigation { font-size: 20px;}label.wp-comment-cookies-consent { float: none;}

JavaScript

JavaScript é uma linguagem de script pura que foi originalmente desenvolvida para gerar HTML dinâmico em navegadores da web (wikipedia.org). Isto dá aos operadores de sites a oportunidade de usar HTML e CSS de uma maneira ampla. 

Um código JavaScript padrão (wiki.selfhtml.org) é, por exemplo, parecido com isto:

 function Quadrat() {
  var Eingabe  = document.getElementById('Eingabe');
  var Ergebnis = Eingabe.value * Eingabe.value;
  alert("Das Quadrat von " + Eingabe.value + " = " + Ergebnis);
  Eingabe.value = 0;
 }

var los  = document.getElementById('los');
los.addEventListener ('click', Quadrat, true);

Comprimido:

 function Quadrat() { var Eingabe = document.getElementById('Eingabe'); var Ergebnis = Eingabe.value * Eingabe.value; alert("Das Quadrat von " + Eingabe.value + " = " + Ergebnis); Eingabe.value = 0; }var los = document.getElementById('los');los.addEventListener ('click', Quadrat, true); 

Com a ajuda dos exemplos acima podes ver muito bem como funciona a miniaturização do código HTML, CSS e JavaScript. Se és um utilizador experiente e profissional, podes também fazer esta compactação manualmente usando uma ferramenta como linkcode-generator.com . Como utilizador do WordPress, os “Minify Plugins” especiais podem fazer esse trabalho por ti. Isto não só economiza tempo, mas também funciona de forma totalmente automática.

5 plugins Minify para WordPress

Na lista seguinte enumerei cinco plugins de minimização populares que fazem o trabalho de compactação de HTML, CSS e JavaScript por ti. 

#1 Merge + Minify + Refresh

atualização de minify merge

Como o nome do plugin Merge + Minify + Refresh (Fundir + Minimizar + Atualizar) já diz, o foco desta ferramenta está inteiramente na compactação do código CSS e JavaScript. 

O plugin combina folhas de estilo em cascata (CSS) e ficheiros Javascript em grupos individuais. Estes, por sua vez, são minimizados com Minify para CSS e Google Closure para JavaScript. 

Após a instalação no WordPress, o plugin Merge + Minify + Refresh oferece algumas opções de configuração para otimizar o tempo de carregamento do teu site.

fundir minify refrescar palavrapresspng

Entre outras coisas, podes escolher aqui se os ficheiros CSS e JS devem ser fundidos ou não. Além disso, podes escolher se a compactação deve ser feita por WP-Cron e se os dados devem ser armazenados na cache externa ou comprimidos num ficheiro gzip. 

Uma funcionalidade muito útil é o chamado "HTTP2 Server Push". Aqui o servidor envia várias respostas para uma solicitação para o navegador correspondente. 

As 3 funcionalidades mais importantes do plugin Merge + Minify + Refresh

  • Fusão / Compactação de CSS e JavaScript
  • HTTP2 Server Push
  • Capacidade para vários sites

#2 WP Super Minify

wp super minify

Com o plugin WP Super Minify os ficheiros CSS e JavaScript podem ser reduzidos em tamanho e armazenados na cache. O carregamento acelerado desses ficheiros é então possível através do Minify PHP Framework. 

O que há de especial neste plugin é que se trata de um software de código aberto. O código-fonte da ferramenta é, portanto, aberto e pode ser desenvolvido por qualquer utilizador.

Nas configurações do WP Super Minify não há muita escolha para os utilizadores. Aqui apenas podes ver as configurações para a compactação de JavaScript e CSS.

wp super minif WordPress

As funcionalidades mais importantes do plugin WP Super Minify

  • Compactação / redução de ficheiros CSS e Javascript
  • Minimizar a estrutura PHP

#3 Fast Velocity Minify

velocidade rápida minify

O plugin Fast Velocity Minify permite a otimização do tempo de carregamento para desenvolvedores e utilizadores avançados. Por um lado, reduz as solicitações de HTTP fundido ficheiros CSS e Javascript e, por outro lado, minimiza os ficheiros com o PHP Minify. 

No backend do WordPress, encontrarás inúmeras opções de configuração após instalar o plugin Minify, o que certamente pode sobrecarregar um ou outro utilizador. O bom é: Muitas configurações padrão já estão predefinidas, de modo a que seja suficiente para um leigo quando ativa o plugin. 

Para utilizadores avançados e desenvolvedores, o plugin Fast Velocity Minify oferece muitos gadgets e possibilidades de otimização.

velocidade rápida minify WordPress

Além disso, este plugin também oferece uma versão Pro. Nesta versão tens à disposição funcionalidades para excluir vários ficheiros CSS e JavaScript. 

As funcionalidades mais importantes do Fast Velocity Minify

  • Compactação / redução de ficheiros HTML, CSS e JavaScript
  • PHP Minify
  • Exclusão de ficheiros e scripts
  • Ficheiros estáticos da cache
  • Suporte WP CLI
  • Compatível com uma ampla variedade de plugins de cache

#4 Autoptimize

autoptimize

O plugin do WordPress Autoptimize oferece-te a otimização simples do teu site. Com apenas alguns passos podes comprimir ficheiros HTML, CSS e JavaScript e, assim, acelerar o tempo de carregamento da tua página. 

O plugin Autoptimize move scripts, por exemplo, para o rodapé e atrasa o carregamento de ficheiros, como HTML, CSS e JavaScript, ou muitos outros ficheiros, como Google Fonts.

Importante para os clientes da RAIDBOXES

O Autoptimize não é compatível com outras caches, por exemplo, a cache do servidor da RAIDBOXES. Por isso, desaconselhamos vivamente a utilização do Autoptimize no nosso sistema!

Assim que tiver instalado o plugin no WordPress, encontrarás vários separadores como “JS, CSS, HTML”, “Imagens” e “Extras” nas configurações. As possibilidades e opções individuais são descritas muito bem aqui e são fáceis de entender, mesmo para leigos.

autoptimize WordPress

No separador "JS, CSS e HTML" podes escolher entre diferentes opções de otimização para os ficheiros JavaScript, CSS e HTML. O separador "Imagens" permite-te otimizar automaticamente as imagens e atrasar o carregamento de ficheiros de imagem. 

No item de menu “Extras”, podem ser feitas outras otimizações automáticas, por exemplo, para Google Fonts, para emojis e para carregar ficheiros por meio de domínios de terceiros. 

As funcionalidades mais importantes do Autoptimize

  • Minimizar / armazenar em cache ficheiros HTML, CSS e JavaScript
  • Otimização de imagens
  • Remover Google Fonts
  • Remover emojis
  • Sincronizar o JavaScript
  • Compatível com uma ampla variedade de plugins de cache

#5 WP Speed of Light

velocidade da luz em wp

O plugin WP Speed of Light também é um plugin WordPress que combina ficheiros HTML, CSS e JavaScript. O poderoso plugin também possui compactação de cache e Gzip, sistema de limpeza da base de dados e otimização de htacces. 

Na versão gratuita do plugin WP Speed ​​of Light , todos os recursos padrão para otimizar o teu site estão disponíveis para ti. Nas configurações do plugin, podes selecionar os grupos individuais (HTML, CSS, JavaScript) que pretendes minimizar e combinar.

velocidade da luz em wp WordPress

Além disso, a versão Pro do plugin tem à disposição mais algumas funcionalidades, tais como excluir ou mover scripts. 

Além da pura compactação de ficheiros, WP Speed ​​of Light oferece muitas outras funcionalidades que podes usar facilmente através do backend simples. 

As funcionalidades mais importantes do plugin: 

  • Compactação de ficheiros HTML, CSS e JavaScript
  • Compactação da cache e Gzip
  • Ferramentas de grupo
  • Limpeza da base de dados
  • Otimizar imagens

Comparação direta dos plugins

 Merge + Minify
+ Refresh
WP Super
Minify
Fast Velocity
Minify
AutoptimizaçãoWP Speed
of Light
Gratuitosimsimsimsimsim
Adequado aPrincipiantesPrincipiantesAvançados + ProfissionaisPrincipiantes + AvançadosPrincipiantes + Avançados
Compactação HTMLnãonãosimsimsim
Compactação CSSsimsimsimsimsim
Compactação JavaScriptsimsimsimsimsim
Avaliação4/53/54/55/54/5

Conclusão

A redução do tamanho dos ficheiros HTML, CSS ou JavaScript pode aumentar o tempo de carregamento do teu site em alguns milissegundos. Podes escolher de entre uma série de plugins WordPress gratuitos e muito úteis. 

Mesmo que este elemento de afinação seja apenas uma pequena parte da otimização OnPage, ele deve ser sempre verificado novamente. Desta forma, podes certificar-te de que o tempo de carregamento do teu site não é afetado negativamente pelos ficheiros acima mencionados.

Foto: Paula Schmidt | Unsplash

O Sven, freelancer e profissional de marketing por paixão, atua no marketing online há já vários anos. Para além disso, ele é blogger e escreve regularmente no seu blog BLOGGiraffe.de sobre o trabalho independente em negócios online, e dá dicas e truques aos seus leitores.

Artigos relacionados

Comentários sobre este artigo

Escreve um comentário

O teu endereço de e-mail não será publicado. Os campos obrigatórios estão marcados com * .