Como minimizar HTML, CSS e JavaScript usando o plug-in de otimização automática

O Google e outros mecanismos de pesquisa valorizam o seu site se ele carregar tão rapidamente. Como nenhum dos espectadores tem muitos pacientes para esperar muito tempo para visualizar seu conteúdo e você tem apenas 1,5 segundos para chamar sua atenção. Se o site demorar muito para abrir, você geralmente perde os espectadores. Portanto, isso é essencial para acelerar seu site. Existem várias maneiras de otimizar seu site. Mas uma das partes mais importantes é Minimize HTML, CSS e JavaScript.


Se você já fez um teste de velocidade em Velocidade de página do Google ou GTmetrix, você provavelmente vê essa opção.

Todo site carregado com muitos arquivos contém HTML, CSS e JavaScript. E a maioria dos arquivos inclui muito espaço, comentários, delimitadores de blocos, etc. Portanto, leva significativamente mais tempo para carregar adequadamente.

Isso também depende da qualidade do tema. Por exemplo, uma qualidade de tema premium sempre melhor que um tema grátis. Os temas premium são bem codificados e criados por desenvolvedores altamente qualificados. Mas nem todos os temas são iguais e têm diferentes tipos de funções. Por isso Minifying esses arquivos HTML, CSS e JavaScript, você pode aumentar estrategicamente a velocidade do site e fazer seus visitantes felizes.

O que é o Minify e por que é benéfico?

Minificação é uma linguagem de programação que remove todos os caracteres desnecessários do código-fonte sem alterar sua funcionalidade. Esses caracteres desnecessários geralmente contêm “caracteres de espaço em branco, novos caracteres de linha, comentários, e delimitadores de bloco “. 

Antes de Minify e Depois de Minify

Eles são usados ​​para adicionar legibilidade ao código, mas não são necessários para sua execução. Dessa forma, reduz a quantidade de código que deve ser transferida pela Web e economiza sua largura de banda. Por isso minimizando HTML, CSS e JavaScript, você pode remover facilmente caracteres desnecessários do seu site e reduzir significativamente aumentar a velocidade do seu site. 

Como minimizar HTML, CSS e JavaScript

Existem duas maneiras de Minify HTML, CSS & JavaScript. Você pode editar o código do tema ou usar um plugin do WordPress, chamado Otimizar automaticamente. Neste artigo, mostraremos os dois processos sobre Como minimizar HTML, CSS e JavaScript.

Para saber o arquivo exato em HTML, CSS ou JavaScript que está causando o problema, é necessário verificar em qualquer ferramenta de teste de velocidade do site, como Ferramenta Google PageSpeed ou GTmetrix. Porque nem todos os seus arquivos contêm esse tipo de caracteres desnecessários.

Depois de verificar o resultado do site, você o receberá. Aqui está uma foto abaixo do meu site que considera consertando CSS e Javascript.

Como reduzir CSS, JavaScript

Adia a qualidade do seu tema. Portanto, não se preocupe, se você vir o Minify para ambos, e é melhor obter um tema Premium.

Existem algumas ferramentas on-line pelas quais você pode Minify código HTML, CSS e JavaScript. 

Antes de fazer qualquer alteração, faça um backup desse arquivo.

# 1 Código Minify:

Ferramenta Minify Code

Código Minify é uma ferramenta de redução tudo em um. Pode minimizar seus códigos JavaScript, CSS e HTML. Tudo o que você precisa para copiar o código HTML ou CSS ou JavaScript e colá-lo aqui. Então clique em Minify Opção. Essa ferramenta Minimize seu código automaticamente. Depois disso, copie o código Minified nesse arquivo.

Você também pode minimizar seu código CSS e JavaScript como código HTML com essa ferramenta.

# 2 Willpeavy:

Willpeavy

Willpeavy é outra ótima ferramenta para Minimizar HTML códigos. Essa ferramenta funciona da mesma maneira que o código minify. Minimize o HTML e qualquer CSS ou JS incluído na sua marcação. Para usar esta ferramenta, basta copiar seu código aqui e clicar em Minify.

Minimizar usando o plug-in de otimização automática

Otimizar automaticamente

Se você não estiver familiarizado com essa codificação, é melhor usar um plug-in e recomendado para iniciantes. Então aqui vem o Plug-in de otimização automática para WordPress Comercial.

A otimização automática concatena todos os scripts e códigos de estilo e os torna menores e carregam tão rapidamente. Minifica todo o HTML, CSS & O próprio código Javascript e tornando sua página realmente leve. Com o Minification, esse plug-in adiciona cabeçalhos expirados e move estilos para o cabeçalho da página e pode mover scripts para o rodapé.

Otimize automaticamente as configurações de recomendação

Você pode fazer tudo facilmente com as configurações do plugin. Depois de ativar este plugin, vá para Definições> Otimizar automaticamente.  Clique no botão “Mostrar configurações avançadas”.

No HTML seção, marque “Otimizar código HTML” e “Manter comentários HTML” para obter um desempenho mais rápido.

Otimizar automaticamente opções de HTML

No Javascript seção, ative “Otimizar código JavaScript”. Você também pode ativar a opção “Forçar a entrada do JavaScript” para carregar o JS com antecedência e reduzir a chance de erros do JS. Caso seu JS quebre scripts, você poderá ativar “Adicionar wrap-try-catch wrapping”.
Opções de otimização automática de JavaScript

No CSS seção, habilite “Otimizar código CSS”, “Também agregue CSS embutido”. Você também pode ativar “Inline e adiar CSS” se tiver reduzido o CSS. Experimente esta ferramenta para reduzir seu CSS e cole-o na caixa.

Opções de CSS de otimização automática

Insira o seu CDN URL no campo “CDN Base URL”. Por exemplo, “//cdn.example.com/”.

E por último, ative “Salvar script / css agregado como arquivo estático”. Mas certifique-se de que seu servidor da Web possa lidar adequadamente com a compactação e a validade.

Opções de CDN de otimização automática

Depois de Minificar seu código, não se esqueça de verificar a velocidade do seu site novamente. Em seguida, compare-o com os resultados anteriores. Se o seu site está com algum problema ou não aparece corretamente, tente limpar o Cache

Conclusão

Minificando HTML, CSS e JS é benéfico para o seu site. Ele remove os caracteres desnecessários do seu código e os torna menores, compatíveis com o navegador. Dessa forma, você pode melhorar a velocidade de carregamento do seu site.

Se este tutorial ajudar a minimizar HTML, CSS e JavaScript, compartilhe este artigo em Facebook, Twitter, Google+.

Artigos relacionados,

  • Como aproveitar o cache do navegador no WordPress
  • Como otimizar o banco de dados do WordPress usando o WP-Sweep
  • 7 Melhor Otimizador de Imagem para WordPress 2017
  • Como ativar facilmente a compactação Gzip no WordPress para carregamento mais rápido
Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map