Minify / Combine WordPress CSS + Javascript Files = Faster Site

WordPress reduz arquivos JS e CSS

Uma das melhores coisas que aprendemos enquanto pesquisávamos para nosso artigo sobre como fazer o site Joomla carregar rápido (1.29 segundos para ser exato), descobrimos uma grande joia de ferramenta. 

Como muitas pessoas fazem quando se esforçam para fazer um site carregar mais rápido, elas se referem ao Site de recomendações do Google PageSpeed, e com razão, porque se o Google faz uma declaração, geralmente vale a pena ouvi-la. No entanto, às vezes é muito complicado fazer todas as otimizações e você pode não ter as habilidades para fazer essas alterações.

Conteúdo[Show]

Como você deve saber, ao tornar seu site WordPress mais rápido, há um monte de otimizações que você precisa fazer. Um deles é saber como aproveitar o cache do navegador no WordPress corretamente, algo sobre o qual CollectiveRay tem um ótimo artigo aqui.  

Mas isso não é o suficiente se os arquivos CSS e Javascript forem muito grandes. É disso que se trata a minificação. 

O que é minificação? (e como isso pode beneficiar seu site)

Minificação é a função de pegar uma parte da codificação e remover quaisquer caracteres dela (como espaços, quebras de linha, tabulações e outros) que não transmitam nenhum significado, exceto para tornar o texto mais legível. Arquivos WordPress minimizados funcionam da mesma maneira como o código original, com a única diferença de que ocupam um pouco menos de espaço porque cortam informações extras. Por esse motivo, o arquivo fica menor para baixar, resultando em um site mais rápido no geral.

A minimização é particularmente importante e útil para scripts (como arquivos Javascript), folhas de estilo CSS e outros componentes de site semelhantes.

Leia mais: Como contratar (ÓTIMOS) desenvolvedores Javascript - 5 principais sites, clique aqui - https://www.collectiveray.com/hire-javascript-developer

O principal motivo para fazer isso e os benefícios para o seu site são:

  • Reduzindo o tempo de carregamento e tornando seu site mais rápido em geral. Dado que a maioria dos sites usa vários scripts e arquivos de folha de estilo, o que resulta em MUITO espaço extra. Embora você possa pensar que a remoção de espaços não resultará em muitas mudanças, o processo de minimização completo de todos os arquivos de uma instalação do WordPress pode representar um benefício significativo.
  • Ocultando o código de leitores casuais. Embora a minimização resultante não oculte o código do seu site (ou seja, isso é diferente da ofuscação de código), mas torna um pouco mais difícil para usuários casuais entenderem, se isso é algo que o preocupa. 

Embora a minimização do seu código seja improvável que faça um enorme diferença nos tempos de carregamento do seu site, visto como parte de uma estratégia de otimização completa, seria uma das muitas coisas que você deveria fazer. Ele pode reduzir o tempo de carregamento da página em alguns pontos percentuais, o que o torna uma boa tática de implementação, no entanto.

O que acontece durante o processo de minimização?

Essencialmente, o processo de minify passa por esses arquivos de texto e remove tudo o que se destina apenas ao consumo humano, porque, afinal, a máquina que analisa o arquivo não o torna legível. O processo de minificação do WordPress remove qualquer coisa como espaço em branco extra (espaços, novas linhas, tabulações), comentários ou qualquer outro texto que aumente o tamanho do arquivo sem diminuir a "semântica" do arquivo para o navegador. O significado ainda está lá, os arquivos são apenas menores.

Por exemplo, é assim que um arquivo CSS normal seria:

body {
margem: 30px;
padding: 30px;
color: # FFFFFF;
plano de fundo: # f7f7f7;
}
h1 {
font-size: 12px;
cor # 222222;
margem inferior: 5px;
}

Embora a versão reduzida deste código se pareça com isto:

body{margin:30px;padding:30px;color:#fff;background:#f7f7f7}h1{font-size:12px}

Você pode ver que a informação textual é exatamente a mesma, é apenas removida do material que está lá para fins de legibilidade. O mesmo conceito se aplica a arquivos Javascript.

O resultado final do uso de plug-ins ou meios para minificar Javascript WordPress seria que a saída HTML, junto com os arquivos CSS e arquivos JS usados ​​pelo seu site e seus plug-ins, teria a seguinte aparência:

código minimizado

Embora isso possa parecer um monte de lixo, na verdade, todo o significado ainda está lá - ele foi apenas "reduzido" para remover qualquer coisa desnecessária que está aumentando seu tamanho.

Existem muitos plug-ins que podem ajudá-lo a realizar esse processo, que mencionarei a seguir.

Reduza Javascript WordPress

O processo para minimizar o Javascript WordPress é bastante simples. Você simplesmente precisa instalar um dos plug-ins abaixo. Você também pode querer observar que os principais arquivos Javascript do WordPress já estão minimizados por padrão.

Na verdade, se você der uma olhada no código-fonte do seu site WordPress, verá a extensão .min.js, que mostra que os arquivos reais já estão reduzidos.

arquivos do wordpress javascript do núcleo minify

Este não é necessariamente o caso de plug-ins e temas de terceiros.

Você também pode querer realizar a etapa extra de remover quaisquer plug-ins extras e gerar scripts de que você pode não precisar.

Se você está absolutamente obcecado pelo desempenho, também pode optar por criar versões dos arquivos Javascript que SÓ incluem o script usado pelo seu site. Veja por padrão, a maioria dos arquivos de script tem código extra que é incluído "apenas no caso" de ser necessário.

Você pode querer aprender sobre como fazer isso aqui.

Reduza CSS WordPress

Mais uma vez, o processo de Minify CSS WordPress é direto. Você pode apenas instalar um plugin e isso executará a minificação de seus arquivos CSS automaticamente. Embora a maioria dos arquivos principais do WordPress tenham uma versão reduzida dos arquivos CSS, isso não se aplica necessariamente a todos os plug-ins e temas.

Mais uma vez, também recomendamos realizar um exercício de cobertura de código CSS para remover qualquer código CSS supérfluo que seja simplesmente peso morto.

Mencionaremos vários plug-ins que minimizam o CSS do WordPress na próxima seção abaixo. 

5 melhores plug-ins para WordPress Minify

Estaremos discutindo produtos genéricos que são usados ​​em geral para tornar seu site mais rápido por meio de minificação e plug-ins específicos cujo único recurso é o processo de minificação.

1. WP foguete

Este é o nosso plugin favorito de longe.

A razão é simples, este é de longe o melhor produto que pode realizar diversas tarefas de otimização de velocidade, de uma forma bem simples, mas com um excelente resultado em tornar seu site mais rápido, inclusive realizando uma minimização de arquivos CSS e Javascript WordPress.

Realmente e verdadeiramente, é apenas uma das coisas que este plug-in faz, mas depois de instalá-lo, você descobrirá que não precisa fazer mais nada.

Como você pode ver abaixo, essa minimização é uma das opções básicas de otimização. Com isso, você verá que existe concatenação, este é um processo secundário de otimização, que cria um arquivo a partir de todos os arquivos CSS e JS (pois também torna mais rápido o download dos arquivos)

Minify javascript css wordpress plugin

O plugin não é gratuito, mas o preço é muito barato, de apenas US $ 49. Dado o tempo que você economiza e o resultado de fazer seu site carregar mais rápido, literalmente em minutos, é altamente recomendável optar por isso.

WP Rocket depoimento

Instalamos este plugin em cada site WordPress que configuramos, simplesmente porque ele nos economiza muito tempo de otimização.

Clique aqui para obter o menor preço do WP Rocket

2. JCH Optimize

 

Aqui está um pequeno truque para ajudá-lo muito - usar JCH Optimize - esta é uma ferramenta que funciona em múltiplas plataformas como WordPress, Joomla, Drupal e Magento.

A grande vantagem do JCH Optimize é que ele implementa um grande número de Google Page Speed e outras recomendações para fazer seu site carregar o mais rápido possível.

É ótimo porque quase não precisa de configuração e intervenção de um usuário.

Se você está procurando um serviço de hospedagem rápido, dê uma olhada em nosso host, nós os revisamos completamente aqui: https://www.collectiveray.com/inmotion-hosting-review

JCH otimizar

E você não tem que mexer com nenhum código, tudo isso é feito pelo plugin - ele preserva todo o seu código original, então você não vai quebrar nada mexendo por aí. Além disso, normalmente, ele faz as otimizações que geralmente são as mais difíceis de realizar. Para citar alguns, estes são os que são bem feitos

  • Combina arquivos CSS de todos os seus modelos, módulos e plug-ins em um único arquivo, reduzindo assim o número de solicitações enviadas ao seu site
  • Combina arquivos Javascript, que geralmente são muito difíceis de combinar sem quebrar o site
  • Compacta o CSS e o Javascript para que fiquem menores e o tempo de transferência seja reduzido
  • Minimiza o Javascript e CSS, para torná-lo mais compacto e reduzir seu tamanho ainda mais (reduz qualquer espaço em branco extra, comentários, etc.)
  • Adiciona uma tag DEFER, de forma que sua página carregue primeiro, e executa o Javascript após o carregamento da página, tornando o site mais rápido para carregar. Visto que essa implementação específica é crítica para um site rápido, cobrimos isso extensivamente aqui: https://www.collectiveray.com/defer-parsing-of-javascript-wordpress-async
  • Cria IMAGE Sprites - isso também reduz o número de solicitações enviadas ao seu site em uma quantidade muito grande e é uma das otimizações mais difíceis de se obter manualmente

Ele também permite que você ajuste algumas opções avançadas, como excluir certos arquivos para garantir que, se alguma extensão não funcionar após executá-la por meio do JCH Optimize, isso funcionará de qualquer maneira.

A versão PRO, que está disponível por míseros US $ 29, dará acesso a várias outras opções de otimização, como incluir CSS e Javascript embutidos e carregar o Javascript de forma assíncrona para não bloquear o carregamento do site.

Acredite nisso, instale o plugin, habilite-o e verifique seus resultados antes e depois. Se você não conseguir uma boa melhora, volte aqui e reclame, mas tenho certeza que você não vai voltar :)

Clique aqui para baixar o JCH Optimize

3. W3 Total Cache

Este é outro plugin que você verá que é um software genérico que faz um monte de coisas relacionadas a tornar o WordPress rápido, incluindo a redução de arquivos CSS, JS e HTML.

Embora você descubra que isso é mencionado com frequência quando se trata de plug-ins, deve-se notar que este produto não é absolutamente uma boa ideia para pessoas que não são técnicas.

Configurações de cache de página no W3 Total Cache

Sabe-se que ele cria problemas significativos, com alguns bugs que permanecem mesmo depois que o software é desinstalado e excluído do site.

Nós mesmos da CollectiveRay tentamos usar esse plugin várias vezes, mas neste ponto e no estado atual, não recomendamos mais que ele seja usado para fins de minimização ou para tornar os sites mais rápidos, a menos que você saiba exatamente o que está fazendo.

4. WP Super Minify

Este plugin usa o Minify PHP Framework e usá-lo combina, minimiza e armazena em cache arquivos JavaScript e CSS embutidos sob demanda para acelerar o carregamento da página.

Ativando este plug-in, a fonte de seu HTML, JavaScript embutido e CSS agora são retirados de coisas extras, resultando em tamanhos menores.

O que é diferente dos outros plugins mencionados aqui é que este plugin SÓ realiza o processo de minificação, e nenhuma outra otimização, o que é uma ótima opção para quem quer apenas realizar esta função e nada mais por qualquer motivo.

5. Redução de velocidade rápida 

Embora existam muitos outros plug-ins minify do WordPress que podemos recomendar, este será o último que mencionamos aqui. 

O plugin Fast Velocity combina todos os arquivos CSS e JavaScript para que o servidor da web tenha que lidar com menos solicitações. Ao mesmo tempo, ele também minimiza os arquivos e cria cópias em cache para tempos de carregamento mais rápidos.

Este plugin habilita automaticamente as opções para minimizar seu HTML, JavaScript e CSS, mas, você pode desative um ou mais deles manualmente indo para o Configurações → Redução de velocidade rápida aba.

Você pode optar por impedir que arquivos específicos sejam minimizados se um de seus plug-ins quebrar depois de habilitar isso.

 

Velocidade rápida diminuída

Resumindo 

Embora o processo de minificação não seja uma função inovadora, ele deve ser implementado como uma das várias tarefas para tornar o seu WordPress mais rápido e é altamente recomendável que você implemente um dos produtos mencionados acima.

Baixe a lista de 101 truques do WordPress que todo blogueiro deve saber

101 truques do WordPress

Clique aqui para baixar agora

 

Sobre o autor
David Attard
Autor: David AttardSite: https://www.linkedin.com/in/dattard/
David tem trabalhado na ou em torno da indústria online / digital nos últimos 18 anos. Ele tem vasta experiência nas indústrias de software e web design usando WordPress, Joomla e nichos ao seu redor. Como consultor digital, seu foco é ajudar as empresas a obter uma vantagem competitiva usando uma combinação de seu website e plataformas digitais disponíveis hoje.

Mais uma coisa... Você sabia que as pessoas que compartilham coisas úteis como esta postagem também parecem FANTÁSTICAS? ;-)
. deixe um útil comente com suas ideias, depois compartilhe com seu (s) grupo (s) do Facebook, que considerariam isso útil e vamos colher os benefícios juntos. Obrigado por compartilhar e ser legal!

Divulgação: Esta página pode conter links para sites externos de produtos que amamos e recomendamos de todo o coração. Se você comprar produtos que sugerimos, podemos receber uma taxa de referência. Essas taxas não influenciam nossas recomendações e não aceitamos pagamentos por análises positivas.

Autor (es) em destaque em:  Logotipo da revista Inc   Logotipo do Sitepoint   Logotipo do CSS Tricks    logotipo do webdesignerdepot   Logotipo WPMU DEV   e muitos mais ...