Ir para o conteúdo principal

Como comprimir seus arquivos CSS, HTML e Javascript

Divi: o tema WordPress mais fácil de usar

Divi: O melhor tema WordPress de todos os tempos!

mais Downloads 901.000Divi é o tema WordPress mais popular do mundo. É completo, fácil de usar e vem com mais de modelos livres 62. [Recomendado]

Ao compactar os arquivos CSS, HTML e Javascript do seu site, você pode economizar um tempo valioso na velocidade de carregamento da página do seu site. Agora, não estamos falando sobre cortar a velocidade de carregamento de sua página pela metade ou nada, mas quando se trata da velocidade do seu site, qualquer pequena parte conta.

A velocidade de carregamento do seu site não é importante apenas para novos visitantes, mas também para as classificações dos buscadores.

O termo "apoucarEm linguagem de programação descreve o processo de remoção de caracteres desnecessários do código-fonte. Esses caracteres incluem espaços, quebras de linha, os comentários e delimitadores de blocos que são úteis para nós humanos, mas inúteis para máquinas.

Minificamos os arquivos de um site que contêm código CSS, HTML e JavaScript para que seu navegador possa lê-los mais rapidamente.

Leia também nosso artigo sobre 10 WordPress plugins para melhorar a velocidade do seu blog

Aqui está um exemplo de minificação CSS.

CSS antes da minificação

/ * Um exemplo de arquivo CSS ---------------------------------- * / .user-profile-card { margem: 0px; background: #33E43} .user-profile-description {border: 0; posição: absoluta; largura: auto; margem superior: 20px; }

CSS após minificação

.user-profile-card{margin:0;background:#33e43}.user-profile-description{border:0;position:absolute;width:auto;margin-top:20px}

Obviamente, este é apenas um pequeno exemplo usando um snippet CSS, mas você pode imaginar quanto espaço isso economizaria ao reduzir milhares de linhas de código. 

Como aumentar o tempo gasto no seu blog WordPress? Descubra consultando este artigo.

Então, se você quiser fazer isso manualmente, tecnicamente você pode. Mas você correrá um alto risco de erro e desperdiçará seu precioso tempo desnecessariamente!

Siga estas dicas e use as ferramentas à sua disposição.

Algumas ferramentas para realizar a compressão

Felizmente, você não precisa necessariamente ser um desenvolvedor ou conhecer uma das linguagens de programação para reduzir o tamanho dos arquivos do seu site. A minimização se tornou uma prática comum no mundo do web design. Portanto, você não deve se surpreender ao saber que existem muitas ferramentas maravilhosas (e gratuitas) para fazer o trabalho para você.

Veja também nossa 6 plug-ins do WordPress para dar uma nova vida aos seus artigos

Aqui está uma lista de ferramentas úteis para começar. Visto que muitos deles podem minimizar vários tipos de código, incluí as opções de tipo de código entre parênteses.

    • cssminifier.com et javascript-minifier.com (CSS e JS) - Esses dois minificadores de Andrew Chilton são fáceis de usar. Você só precisa colar seu código e clicar no botão Apoucar para exibir o código compactado. Você pode até baixar o código de saída como um arquivo por conveniência.
    • htmlcompressor.com (HTML, CSS e JS) - Esta ferramenta de compactação / minificação online oferece suporte aos tipos de código HTML, CSS e JS. Ele ainda oferece suporte a diferentes combinações de tipos de código, como CSS + PHP e JavaScript + PHP. E você pode até verificar se há erros no código compactado.
    • csscompressor.net (CSS apenas) - Este compressor CSS online é rápido, fácil e gratuito para usar.
    • jscompress.com (JS apenas) - Esta ferramenta de compactação JavaScript permite compactar o código JavaScript copiando e colando, mas você também pode baixar vários arquivos JavaScript de uma vez. Isso é ideal para combinar arquivos JavaScript em um único arquivo para melhor velocidade de carregamento da página.
    • Ferramentas de Dan - Dan's Tools propor un minify CSS e para diminuir o JavaScript . Ambas as ferramentas possuem uma interface de usuário realmente limpa e fácil de usar. Eles não oferecem opções avançadas, mas são ótimos para propósitos de minimização comuns.
    • refresh-sf.com (HTML, CSS e JS) - Este compressor reduzirá os tipos de código JavaScript, CSS e HTML. Também inclui todas as opções de compactação para cada tipo de código, se necessário.
    • Compilador de Fechamento (JS apenas) - Closure Compiler faz parte do Ferramentas de fechamento , um pacote de ferramentas do Google Developers. Ele permite que você reduza seu JavaScript com outras otimizações úteis. Você pode usar seu código javascript inserindo a url para a localização do arquivo js e, em seguida, escolhendo como deseja que o código seja otimizado e formatado. 

Por exemplo, você escolhe otimizar seu código para remover apenas os espaços em branco, se desejar. Depois de clicar no botão de compilação, ele reduzirá o código (ou o compilará) para você.

    • minifycode.com (HTML, CSS e JS) - Este site oferece minificadores para JavaScript , CSS et HTML com uma interface de usuário simples e limpa que comprime seu código com um único clique. Ele também oferece uma ferramenta "embelezadora" para descomprimir o código minificado para torná-lo mais legível (o oposto da minificação).

Se você estiver procurando por ferramentas off-line para minimizar seu HTML CSS ou JavaScript localmente, aqui estão algumas opções:

Como reduzir o tamanho do seu HTML, CSS e JavaScript usando uma ferramenta online

Muitas dessas ferramentas online têm um processo semelhante que envolve as seguintes etapas:

  • Cole seu código-fonte ou baixe o arquivo de código-fonte. 
  • Otimizar configurações para uma saída específica (se houver opções disponíveis)
  • Clique em um botão para compactar o código.
  • Copie o resultado do código minificado ou faça o download do arquivo de código minificado.

Neste exemplo, vou usar as ferramentas minify de minifycode.com.

Veja também: Como adicionar um código CSS com segurança em WordPress consultando este link.

Primeiro, localize o arquivo CSS (geralmente chamado style.css) nos arquivos do site e abra-o usando um editor de páginas. Em seguida, copie todo o código CSS para sua área de transferência.

estilo css divi.jpg

ir a minifycode.com e clique na guia minificador CSS. Em seguida, cole o código CSS na caixa de entrada e clique no botão Minify CSS.

minification css.jpg

Depois que o novo código minificado for gerado, copie-o.

Crie facilmente seu site com Elementor

Elementor permite criar facilmente qualquer design de site com uma aparência profissional. Pare de pagar caro pelo que você pode fazer por si mesmo. [Grátis]

copiar um code.jpg compactado

Volte ao arquivo CSS do seu site e substitua o código pela nova versão simplificada.

É isso aí!

Repita o mesmo processo para reduzir também os arquivos JavaScript e HTML do seu site.

Como minimizar HTML, CSS e JavaScript no WordPress usando plug-ins

A maneira mais fácil de manter seu HTML, CSS e JavaScript no mínimo no WordPress é usar um plugin. Isso permite que você otimize automaticamente os arquivos do seu site WordPress para reduzir o tempo de carregamento da página com apenas alguns cliques de botão.

Existem muitos plug-ins que farão o trabalho, mas mencionarei brevemente alguns exemplos.

Autoptimize (GRÁTIS)

autooptimize wp.png
Autoptimize é provavelmente o plugin minify WordPress mais popular. É popular porque é fácil de usar e vem com recursos poderosos. Ele pode agrupar (combinar scripts), minimizar e armazenar em cache seu código. Como bônus, você tem opções adicionais para otimizar Google Fonts, imagens, etc ...

Para usar a otimização automática, você pode baixar, instalar e ativar o plug-in no painel do WordPress em Plugin> Adicionar novo.

Para mais informações, consulte o nosso guia em:  Como instalar um plugin no WordPress

autoptimize.jpg

Depois que o plug-in estiver ativado, vá para Configurações> Otimização automática. Em seguida, na guia Parâmetros principais, marque o código que deseja otimizar (HTML, CSS e / ou JavaScript) e clique em Esalvar alterações.

otimização css.jpg

Você também pode clicar no botão Mostrar configurações avançadas na parte superior da página para personalizar ainda mais a otimização do código.

opções de css advanced.jpg

É mais ou menos isso! Muito simples e poderoso.

Cache total de W3 (GRÁTIS)

v3 total cache.png
W3 Total Cache é um excelente plug-in de cache que oferece a capacidade de minimizar seus arquivos HTML, JS e CSS.

parâmetros gerais w3 total cache.jpg

Cache mais rápido do WP (GRÁTIS)

wp mais rápido cache.png
WP Cache Fastest - Este plugin WordPress o cache é extremamente popular com críticas altas. Ele realiza várias otimizações de desempenho, incluindo a combinação e redução do código HTML e CSS JavaScript para obter melhor desempenho.

Leia também nosso artigo sobre plugins 8 WordPress para adicionar um chat ao vivo em seu blog

Depois que o plug-in estiver instalado, basta clicar na guia WP Cache Fastest na barra lateral do painel do WordPress. Na guia Configurações, você encontrará opções para combinar e reduzir arquivos HTML e CSS. Embora a redução do JavaScript esteja disponível apenas na versão pro.

Você está procurando os melhores temas e plugins do WordPress?

Baixe os melhores plugins e temas WordPress no Envato e crie facilmente o seu site. Já mais do que 49.720.000 downloads. [EXCLUSIVO]

wp mais rápido cache settings.png

Resumir

Se você deseja tornar seu blog mais rápido e ter melhor desempenho, é necessário reduzir o tamanho dos seus arquivos HTML, CSS e JavaScript. Com todas as ferramentas online disponíveis, você pode reduzir facilmente o código de qualquer site. 

9 WordPress plugins para esconder o conteúdo do seu Blog descobrir absolutamente

Para quem usa o WordPress, você tem plugins poderosos para reduzir esses arquivos automaticamente com apenas alguns cliques.

Descubra também alguns plugins premium do WordPress  

Você pode usar outros plugins do WordPress para dar uma aparência moderna e otimizar a aderência do seu blog ou site.

Oferecemos a você aqui alguns plugins premium do WordPress que ajudarão você a fazer isso.

1. Redirecionamento de página de erro 404 para página inicial ou página personalizada

Aqui está uma das melhores maneiras de adicionar facilmente uma página de erro 404, que redirecionará o visitante para a página inicial ou a página personalizada, após a ativação deste plugin. WordPress premium.

Todas as páginas de erro 404 serão redirecionadas para a página inicial ou para um URL personalizado. Usando este plugin do WordPress, você permitirá que o Google reduza a pagerank do seu site, se houver muitas páginas de erro do 404.

Descubra também Como corrigir erro 413 no WordPress

Este plugin do WordPress não apenas redireciona, mas também pode ser uma solução adequada para melhorar a classificação do seu site nos resultados dos mecanismos de pesquisa.

Descarregar | Demo | hospedagem na web

2. Cache de Borlabs

O WordPress é uma plataforma alimentada por um banco de dados que gera conteúdo dinamicamente. Quanto mais conteúdo e plugins você tiver, mais consultas ao banco de dados serão executadas. Isso pode diminuir o desempenho do seu site, especialmente quando o banco de dados está localizado em um servidor diferente.

O plugin do WordPress Borlabs Cache salva o conteúdo gerado dinamicamente como um arquivo estático na memória do servidor. Quando a página é solicitada, esse arquivo estático é carregado e enviado ao visitante, o que é consideravelmente mais rápido que as consultas comuns ao banco de dados. Mas isso não é tudo.

Veja também nosso 5 WordPress plugins para limpar o banco de dados do seu site

Suas páginas contêm muitos espaços em branco ou comentários HTML desnecessários, o que aumenta o tamanho geral da página. O Borlabs Cache remove todos eles e usa o GZIP para compactar suas páginas.

Discover Como exibir todas as suas publicações WordPress em uma única página

Muitos plug-ins têm seus próprios arquivos JavaScript e CSS, o que resulta em mais solicitações no seu servidor. O Borlabs Cache combina todos esses arquivos JavaScript e CSS para que, no melhor dos casos, o visitante precise carregar apenas um arquivo JavaScript e um arquivo CSS.

Descarregar Demo | hospedagem na web

3. Imprensa Multilíngue

O Multilingual Press funciona com uma instalação multisite do WordPress e permite que você vincule traduções. O plug-in vem com 174 idiomas integrados ao gerenciador de idiomas e oferece suporte a um número ilimitado de sites, para que você possa criar e vincular quantas traduções desejar.

Isso é bom para o SEO, pois permitirá que você mantenha seus idiomas em postagens e páginas separadas. Se você decidir usar uma tradução diferente do plug-in, seu conteúdo permanecerá intacto (mesmo depois de desativar ou remover o plug-in Multilingual Press). Além disso, você pode adicionar um widget de tradução para alternar entre traduções facilmente.

Crie facilmente sua loja online

Baixe gratuitamente o WooCommerce, os melhores plugins de e-commerce para vender seus produtos físicos e digitais no WordPress. [Recomendado]

Discover Como adicionar um trecho de código usando o Gutenberg no WordPress

A Multilingual Press é uma ótima opção gratuita para adicionar traduções ao seu site WordPress via multisite. Além disso, se você achar que precisa de mais opções, poderá optar pela versão pro, que custa US $ 75.

Descarregar Demo hospedagem na web

Outros recursos recomendados

Também convidamos você a consultar os recursos abaixo para aprofundar o controle e controle do seu site e blog.

Conclusão

Este artigo contém 1 comentário

Deixe um comentário

Seu endereço de email não será publicado. Campos obrigatórios estão marcados com *

Este site usa Akismet para reduzir indesejados. Saiba mais sobre como seus dados de comentários são usados.

De volta ao topo
2 ações
ação2
chilrear
Enregistrer