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 600.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 das páginas do site. Agora, não estamos falando em reduzir a velocidade de carregamento da página pela metade ou algo assim, mas quando se trata da velocidade do seu site, um pouco conta.

A velocidade de carregamento do seu site é importante não apenas para novos visitantes, mas também para a classificação dos mecanismos de pesquisa.

O termo "apoucarNa 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.

Nós reduzimos os arquivos em um site que contém códigos 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 trecho de CSS, mas você pode imaginar a quantidade de espaço que 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ê corre um alto risco de erro e perde um tempo precioso da sua vida 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 do arquivo do seu site. Minificação tornou-se uma prática comum no mundo do web design. Portanto, não se surpreenda ao saber que existem muitas ferramentas maravilhosas (e gratuitas) para fazer o trabalho por você.

Veja também nossa 6 WordPress plugins para dar nova vida aos seus artigos

Aqui está uma lista de ferramentas úteis para você começar. Como muitos deles podem minimizar vários tipos de código, incluí 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 simples de usar. Basta 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 / redução on-line suporta tipos de HTML, CSS e JS. Ele ainda suporta diferentes combinações de tipos de código, como CSS + PHP e JavaScript + PHP. E você pode até verificar o código compactado quanto a erros.
    • csscompressor.net (Somente CSS) - Este compressor CSS online é rápido, fácil e gratuito.
    • jscompress.com (Somente JS) - Essa ferramenta de compactação JavaScript permite compactar o código JavaScript de copiar e colar, mas você também pode baixar vários arquivos JavaScript de uma só vez. É ótimo para combinar arquivos JavaScript em um arquivo, para um carregamento mais rápido da página.
    • Ferramentas de Dan - Ferramentas de Dan propor un minify CSS e para diminuir o JavaScript . Ambas as ferramentas têm 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 objetivos comuns de minificação.
    • refresh-sf.com (HTML, CSS e JS) - Este compressor reduzirá os tipos de código JavaScript, CSS e HTML. Ele também inclui todas as opções de compactação para cada tipo de código, se necessário.
    • Compilador de Fechamento (Somente JS) - o Closure Compiler faz parte de Ferramentas de fechamento , um conjunto 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 o URL no local do arquivo js e, em seguida, escolha 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 minimizadores 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 código 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 aba CSS Minifier. Em seguida, cole o código CSS na área 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 é tudo!

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 plugins

A maneira mais fácil de minimizar seu código HTML, CSS e JavaScript no WordPress é usar um plugin. Isso permite otimizar automaticamente os arquivos do site WordPress para reduzir o tempo de carregamento da página com apenas alguns cliques no botão.

Existem muitos plugins que farão o trabalho, mas mencionarei brevemente alguns exemplos.

Autoptimize (GRÁTIS)

autooptimize wp.png
A otimização automática é provavelmente o plug-in minify mais popular do WordPress. É popular porque é fácil de usar e possui 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 fontes, imagens, etc. do Google

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 Main parameters, verifique o código que você 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 seu código.

opções de css advanced.jpg

Isso é tudo! 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.

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]

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 WordPress no painel. Sob a 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.

wp mais rápido cache settings.png

Resumir

Se você deseja tornar seu blog mais rápido e ter melhor desempenho, reduza o tamanho dos arquivos HTML, CSS e Javascript. Com todas as ferramentas on-line 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

A Multilingual Press trabalha com uma instalação multissite do WordPress e permite vincular traduções. O plug-in é fornecido com os idiomas 174 incorporados no 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 comentários 0

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