Reduza o HTML, CSS e JavaScript: Funciona tão simples como isto em WordPress

9 min.
css minificação

A miniaturização de arquivos HTML, CSS e JavaScript é um dos muitos pequenos ajustes para otimizar a velocidade de carregamento do seu site. Neste artigo vamos explicar Sven Scheuerleo que é a miniaturização de CSS, HTML e Co., quanto tempo de carregamento você economiza usando o código lean e quais WordPress -Plugins ajudá-lo com a implementação.

Se você olhar para os sites na World Wide Web hoje, você perceberá rapidamente que eles não são de forma alguma comparáveis a sites de 10 anos atrás. 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 funções que estão agora disponíveis para websites, mas também aos designs e templates cada vez mais extensos que são utilizados no web design. 

Portanto, não é raro que os arquivos HTML, CSS ou JavaScript cresçam rapidamente até centenas de kilobytes. Para processar todos estes códigos nos arquivos e para poder exibir o site, o navegador da web envia numerosos pedidos (os chamados pedidos HTTP) para o servidor. 

Quanto mais "pedidos" forem enviados, maior será o tempo de carregamento. Para manter o número de pedidos tão baixo quanto possível, e portanto o tempo de carregamento do site, você deve fundir e comprimir os arquivos.  

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

A minimização - ou seja, reduzir ao máximo o tamanho do arquivo HTML, CSS, etc. - faz parte de toda boa otimização OnPage. Embora apenas represente uma pequena parte dos tempos de carregamento, também pode ser decisivo para as suas classificações nos motores de busca. 

Direto WordPress não é conhecido por ter ferramentas inerentes para otimizar o tempo de carga. Portanto, você deve verificar o desempenho do seu WordPress -Veja a página regularmente.

RB Performance E Book Newsletter 02

Reduzir os tempos de carregamento

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

Esta medida é recomendada PageSpeed Insights quando as solicitações de recuperação dos arquivos CSS têm uma forte influência no tempo de carregamento do site. Uma explicação detalhada e explicações de outras mensagens na ferramenta pode ser encontrada 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 bloggiraffe.com espectáculo. Os exemplos são apenas pequenas secções, mas mostram claramente como o tempo de carga pode ser reduzido.

Exemplo 1 - Sem compressão (não reduzida):

css recompactado
Diagrama cascata - sem compressão de arquivos HTML, CSS e JavaScript

Exemplo 2 - Comprimido (reduzido):

css comprimido
Diagrama cascata - com compressão de arquivos HTML, CSS e JavaScript

Já ao recuperar o domínio principal você pode ver que eu poderia reduzir o tempo de carregamento de 1233 milissegundos para 860 milissegundos. Também os tempos de carregamento dos arquivos individuais poderiam ser reduzidos ao mínimo em alguns casos.

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

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

Como resultado, o navegador que você está usando para acessar uma determinada página web tem que enviar menos solicitações ao servidor para exibir a página web e carregar quaisquer scripts necessários.

Um exemplo diário para entender

Imagine que você vai ao supermercado e tem 10 produtos na sua lista de compras. Mas eles estão em corredores e prateleiras diferentes. 

Conseqüência: Demora muito tempo para encontrar cada produto e colocá-lo no carrinho de compras. 

Solução: Você informa com antecedência ao supermercado quais produtos você precisa. O supermercado irá fornecer-lhe os seus produtos dentro de uma prateleira, para que só tenha de os colocar no carrinho de compras e pagar na caixa. 

Resultado: Ao colocar todos os produtos juntos dentro de uma prateleira, você só tem que percorrer um caminho pelo supermercado e economizar uma quantidade incrível de tempo. É semelhante à miniaturização de códigos e scripts individuais em seu site. 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 a otimizar o desempenho.
Porque uma utilização consciente dos recursos também contribui para tornar o seu site mais sustentável. Por favor, leia as contribuições para os tópicos Quão verde éWordPress ? e Acolhimento verde .

HTML

O HTML (Hypertext Markup Language) é necessário para a estrutura básica de um website. É assim que os textos, links ou mesmo imagens são exibidos. 

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. No entanto, a chamada linguagem da folha de estilo é utilizada para alterar a aparência dos elementos individuais do website. 

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). Por meio dela os operadores de páginas web têm hoje a possibilidade de usar HTML e CSS estendido. 

Um código JavaScript padrão (wiki.selfhtml.org) parece ser o seguinte:

 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 funciona a miniaturização do código HTML, CSS e JavaScript. Se você é um usuário avançado e profissional, você também pode fazer essa compressão manualmente usando uma ferramenta como linkcode-generator.com usar. Como WordPress usuário, o "MinifyPlugins" especial pode fazer o trabalho por você. Isto não só poupa tempo, como também funciona de forma totalmente automática.

5 Minify Plugins para WordPress

Na lista seguinte, eu listei cinco miniaturizaçõesPlugins populares que fazem o trabalho de compressão de HTML, CSS e JavaScript para você. 

#1 Fundir + Minimizar + Actualizar

atualização de minify merge

Como o nome do Plugins Fundir + Minificar + Refrescar (Fundir + Minimizar + Atualizar) já diz, o foco desta ferramenta é inteiramente a compressão do código CSS e JavaScript. 

Isto 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çãoWordPress , o Plugin Merge + Minify + Refresh oferece-lhe algumas definições para optimizar o tempo de carregamento do seu website.

fundir minify refrescar palavrapresspng

Entre outras coisas, você pode escolher aqui se os arquivos CSS e JS devem ser fundidos ou não. Além disso, você pode escolher se a compressão deve ser feita por WP-Cron e se os dados devem ser armazenados em cache fora ou comprimidos dentro de um arquivo gzip. 

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

As 3 funções mais importantes do Merge + Minify + RefreshPlugins : 

  • Fusão / Compressão de CSS e JavaScript
  • Push do Servidor HTTP2
  • Multisite capaz

#2 WP Super Minify

wp super minify

Com o Plugin WP Super Minify Os arquivos CSS e JavaScript podem ser redimensionados e armazenados em cache. O carregamento acelerado desses arquivos é posteriormente habilitado via Minify PHP Framework. 

O que há de especial neste Plugin é que é software de código aberto. O código fonte da ferramenta é, portanto, aberto e pode ser desenvolvido por qualquer usuário.

Nas configurações do WP Super Minify não há muita escolha para os usuários. Aqui você só pode ver as configurações para a compressão do JavaScript e CSS.

wp super minif WordPress

As funções mais importantes do WP Super MinifyPlugins : 

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

#3 Velocidade Rápida Minimizada

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, minimiza arquivos com PHP Minify. 

No WordPress backend você encontrará após a instalação do Minify Plugins numerosas opções de configuração, que podem ser um pouco avassaladoras para alguns usuários. O bom é que muitas configurações padrão já estão predefinidas, então é suficiente para que os leigos a Plugin ativem. 

Para usuários avançados e desenvolvedores, Plugin Fast Velocity Minify oferece muitos gadgets e possibilidades de otimização.

velocidade rápida minify WordPress

Além disso, esta Plugin também oferece uma versão Pro. Nesta versão você tem funções para excluir vários arquivos CSS e JavaScript. 

As funções mais importantes da Fast Velocity Minify

  • Compressão / redução de arquivos HTML, CSS e JavaScript
  • PHP Minify
  • Excluindo arquivos e scripts
  • arquivos estáticos de cache
  • Suporte WP CLI
  • Compatível com uma variedade de cachingPlugins

#4 Autoptimizar

autoptimize

O- WordPress Plugin Autoptimização oferece-lhe a optimização fácil do seu website. Com apenas alguns passos você pode comprimir arquivos HTML, CSS e JavaScript e assim acelerar o tempo de carregamento da sua página. 

Por exemplo, o script AutoptimizePlugin move-se para o rodapé e atrasa o carregamento de arquivos como HTML, CSS e JavaScript, ou muitos outros arquivos como o Google Fonts. Além disso, isto é compatível Plugin com muitos sistemas de cachePlugins bem conhecidos. 

Uma vez WordPress instalado o Plugin in, você encontrará várias abas nas configurações como "JS, CSS, HTML", "Imagens" e "Extras". As possibilidades e opções individuais estão muito bem descritas aqui e são também muito fáceis de entender para os leigos.

autoptimize WordPress

Na aba "JS, CSS & HTML" você pode escolher entre diferentes opções de otimização para os arquivos JavaScript, CSS e HTML. O separador "Imagens" permite-lhe optimizar automaticamente as imagens e atrasar o carregamento de ficheiros de imagem. 

Sob o item de menu "Extras" podem ser feitas outras auto-optimizações, por exemplo, para Google Fonts, para Emojis, bem como para carregar arquivos através de domínios de terceiros. 

As funções mais importantes do Autoptimize

  • Minimização / caching de arquivos HTML, CSS e JavaScript
  • Otimização de imagens
  • Remover Fontes do Google
  • Remover Emojis
  • Sincronizar o JavaScript
  • Compatível com uma variedade de cachingPlugins

#5 WP Velocidade da luz

velocidade da luz em wp

No 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 todos os recursos padrão para otimizar o seu site estão disponíveis. Nas Pluginconfigurações, você pode selecionar os grupos individuais (HTML, CSS, JavaScript) que você deseja minimizar e combinar.

velocidade da luz em wp WordPress

Além disso, a versão Pro Plugins tem mais algumas funções, tais como excluir ou mover scripts. 

WP Speed of Light oferece muito mais funções além da pura compressão de arquivos, que você pode usar facilmente através do backend claramente organizado. 

As funções mais importantes do Plugins: 

  • Compressão de arquivos HTML, CSS e JavaScript
  • Cache e compressão Gzip
  • Ferramentas de grupo
  • Limpeza da base de dados
  • Otimização de imagens

A Plugins em comparação directa

 Fundir + Minificar
+ Refrescar
WP Super
Minify
velocidade rápida
Minify
AutoptimizaçãoVelocidade WP
de luz
Sem custosSimSimSimSimSim
Adequado paraPrincipiantesPrincipiantesavançado + profissionaisprincipiantes + avançadosprincipiantes + avançados
Compressão de HTMLnãonãoSimSimSim
Compressão CSSSimSimSimSimSim
compressão JavaScriptSimSimSimSimSim
Avaliação4/53/54/55/54/5

Conclusão

A redução do tamanho dos arquivos HTML, CSS ou JavaScript pode aumentar o tempo de carregamento do seu site em alguns milissegundos. Você pode escolher entre uma série WordPress de muito úteis e gratuitosPlugins . 

Mesmo que este parafuso de ajuste seja apenas uma pequena parte da sua otimização OnPage, ele deve ser sempre verificado novamente. Desta forma, pode certificar-se de que o tempo de carregamento do seu website não é afectado negativamente pelos ficheiros acima mencionados.

Foto: Paula Schmidt | Unsplash

Sven Scheuerle, freelancer e profissional de marketing por paixão, atua no marketing online há já vários anos. Para além disso, ele é blogueiro e relata regularmente no seu blog BLOGGiraffe.de sobre autoemprego 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 * .