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

Sven Scheuerle Última atualização em 21.10.2020
9 min.
css minificação
Última atualizaçã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

Qualquer proprietário de website que tenha utilizado uma ferramenta como a PageSeepd Insights do Google está quase certamente familiarizado com esta sugestão de optimização: "Reduza o CSS".

Esta medida é recomendada por PageSpeed Insights se as solicitações de recuperação dos arquivos CSS influenciarem fortemente o tempo de carregamento do site. Uma explicação detalhada e explicações de outras mensagens na ferramenta, você pode encontrar no artigo"Google Pagespeed - As mensagens de erro mais importantes". 

Como a redução do CSS pode influenciar o tempo de carregamento do vosso site, gostaria de vos mostrar com um diagrama de cascata do meu blog blog bloggiraffe.de. Os exemplos são apenas pequenas secções, mas mostram claramente como o tempo de carga 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 diário 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. 

Conseqüência: Leva um tempo incrível até que você tenha encontrado todos os produtos e os tenha colocado no carrinho de compras. 

Solução: Você informa com antecedência ao supermercado quais produtos você precisa. O supermercado fornece-lhe os seus produtos numa prateleira para que apenas tenha de os colocar no carrinho de compras e pagar na caixa. 

Resultado: Ao compilar todos os produtos dentro de uma prateleira, você só tem que percorrer um caminho através do supermercado e assim economizar uma quantidade incrível de tempo. Isto funciona de forma semelhante com a minificação de códigos e scripts individuais do seu website. Para que você possa ver como tudo funciona na prática, eu gostaria de mostrar isso com pequenos exemplos. 

A economia de dados não só ajuda na otimização do desempenho.
Porque uma utilização consciente dos recursos também contribui para tornar o seu site mais sustentável. Leia os artigos sobre os tópicos How green is WordPress ? e Green Hosting.

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 se parece 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 este: 

 /* 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 puro que foi originalmente desenvolvida para a saída de HTML dinâmico em navegadores web(wikipedia.org). Com isso, os operadores do site hoje têm a possibilidade de usar HTML e CSS de forma ampliada. 

Um código JavaScript padrão (wiki.selfhtml.org) Parece que é assim, por exemplo:

 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 você pode ver muito bem como a minificação do código HTML, CSS e JavaScript funciona. Como usuário avançado e profissional, você também pode realizar essa compressão manualmente e usar uma ferramenta como linkcode-generator.de. Como usuário do WordPress , o especial "Minify Plugins" pode fazer este trabalho para você. Isto não só poupa tempo, como 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 Plugins Fundir + Minificar + Refrescar (Fundir + Minimizar + Atualizar) já diz, o foco desta ferramenta é inteiramente na compressão do CSS, bem como do código 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 em WordPress o Plugin Merge + Minify + Refresh oferece-lhe algumas configurações para optimizar o tempo de carregamento do seu website.

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 funções mais importantes do Merge + Minify + Refresh Plugins: 

  • 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 arquivos CSS e JavaScript podem ser minificados e armazenados em cache. O carregamento acelerado desses arquivos é posteriormente habilitado via 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 usuários. Você só pode ver as configurações para a compressão do JavaScript e CSS.

wp super minif wordpress

Principais características do WP Super Minify Plugins: 

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

#3 Fast Velocity Minify

velocidade rápida minify

O Plugin Velocidade rápida Minify permite a otimização do tempo de carga para desenvolvedores e usuários avançados. Por um lado, reduz os pedidos HTTP fundindo arquivos CSS e Javascript, e por outro lado, minimiza os arquivos 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 usuários avançados e desenvolvedores, o Plugin Fast Velocity Minify oferece muitos artifícios e opções 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 principais características 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 WordPress -Plugin Autoptimize oferece-lhe a simples optimização do seu website. Com apenas alguns passos simples você pode comprimir arquivos HTML, CSS e JavaScript e assim acelerar o tempo de carregamento da sua página. 

O Autoptimize-Plugin move scripts para o rodapé e atrasa o carregamento de arquivos, como HTML, CSS e JavaScript, ou muitos outros arquivos, como o Google Fonts.

Importante para os clientes da RAIDBOXES

O Autoptimize não é compatível com outros caches, tais como o cache do servidor RAIDBOXES . Portanto, desaconselhamos vivamente o uso 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.

autoptimizar o 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 funções 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 Velocidade da luz é também um WordPress -Plugin, que combina arquivos HTML, CSS e JavaScript. O poderoso Plugin também tem um cache e compressão Gzip, um sistema de limpeza de banco de dados e também uma otimização htacces. 

Na versão gratuita do WP Speed of Light-Plugins estão disponíveis todas as funcionalidades standard para a optimização do seu website. Nas configurações do Plugin, você pode selecionar os grupos individuais (HTML, CSS, JavaScript) que você deseja minimizar e combinar.

velocidade wp do wordpress da luz

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

WP Speed of Light oferece além da pura compressão de arquivos muitas outras funções, que você pode usar de uma maneira fácil através do backend claramente organizado. 

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

 Fundir + Minimizar
+ Actualizar
WP Super
Minify
Velocidade rápida
Minify
AutoptimizeVelocidade WP
de Luz
Gratuitosimsimsimsimsim
Adequado aPrincipiantesPrincipiantesAvançados + ProfissionaisPrincipiantes + AvançadosPrincipiantes + Avançados
Compactação HTMLnãonãosimsimsim
Compactação CSSsimsimsimsimsim
Compactação JavaScriptsimsimsimsimsim
Classificaçã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 blogue BLOGGiraffe.de sobre o trabalho independente em negócios online, e dá dicas e truques aos seus e suas leitoras.

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 *.