Ir para o conteúdo principal

Como comprimir seus arquivos CSS, HTML e Javascript

Divi: o tema WordPress mais fácil de usar

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]

Ao reduzir os arquivos CSS, HTML e Javascript do seu site, você pode economizar um tempo precioso na velocidade de carregamento das páginas do seu site. Agora, não estamos falando de reduzir a velocidade de carregamento da página pela metade ou qualquer coisa, mas quando se trata da velocidade do seu site, qualquer pequeno gesto é importante. A velocidade de carregamento do seu site não é importante apenas para os visitantes inexperientes, mas também para mover as classificações dos mecanismos de pesquisa.

O termo "minify" é uma linguagem de programação que descreve o processo de remoção de caracteres desnecessários do código-fonte. Esses caracteres incluem espaços, quebras de linha, comentários e delimitadores de bloco que são úteis para nós, humanos, mas inúteis para máquinas. Minificamos os arquivos de um site que contém CSS, HTML e Javascript para que seu navegador possa lê-los mais rapidamente.

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 minification

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

É claro que este é apenas um pequeno exemplo usando um snippet de CSS, mas você pode imaginar quanto espaço ele economizaria ao reduzir milhares de linhas de código. Então, se você quisesse fazer isso manualmente, tecnicamente, você poderia. Mas você correria um alto risco de erro e gastaria 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 ser um desenvolvedor nem conhecer nenhuma das linguagens de programação para reduzir o tamanho dos arquivos do seu site. Minificação tornou-se uma prática comum no mundo do web design. Você não deve se surpreender ao saber que existem muitas ferramentas maravilhosas (e gratuitas) para fazer o trabalho por você.

Aqui está uma lista de ferramentas úteis para você começar. Como 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 minifixadores Andrew Chilton são simples de usar. Basta colar seu código e clicar no botão Minimizar para exibir o código reduzido. 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 online suporta os tipos de código 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é mesmo verificar o código compactado em busca de erros.
    • csscompressor.net (CSS only) - Este compressor CSS on-line é rápido, fácil e gratuito.
    • jscompress.com (Somente JS) - Essa ferramenta de compactação JavaScript permite compactar o código JavaScript copiar e colar, mas você também pode fazer o download de vários arquivos JavaScript de uma só vez. É ótimo para combinar arquivos JavaScript em um arquivo para 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, fácil de usar. Eles não oferecem opções avançadas, mas é perfeito para metas comuns de minificação.
    • refresh-sf.com (HTML, CSS e JS) - Este compressor irá 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 você precisar.
    • Compilador de Fechamento (Somente JS) - o Compilador de Fechamento faz parte Ferramentas de fechamento , um conjunto de ferramentas do Google Developers. Ele permite que você minimize seu Javascript com outras otimizações úteis. Você pode usar seu código Javascript digitando a URL do local do arquivo js e, em seguida, escolher como deseja que o código seja otimizado e formatado. Por exemplo, você escolhe otimizar seu código para espaço em branco somente se desejar. Depois de ter clicado no botão de construção, isso vai reduzir o código (ou compilar) para você e seu código para encontrar erros.
    • minifycode.com (HTML, CSS e JS) - Este site oferece minificadores para JavaScript , CSS et HTML com uma interface de usuário limpa e simples que minimiza seu código com o clique de um botão. Ele também inclui uma ferramenta "embelezadora" para descompactar o código reduzido 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 seu tamanho Reduza seu código HTML, CSS e JavaScript com uma ferramenta online

Muitas dessas ferramentas on-line têm um processo semelhante que envolve as seguintes etapas:

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

Para este exemplo, vou usar ferramentas minify de minifycode.com.

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]

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

estilo css divi.jpg

Ir para minifycode.com e clique na guia CSS Minifier. Em seguida, cole o código CSS na caixa de entrada e clique no botão Recolher CSS.

minification css.jpg

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

copiar um código compactado.jpg

Em seguida, retorne 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 o (s) arquivo (s) JavaScript e HTML do seu site.

Como minimizar HTML, CSS e JavaScript no WordPress usando plugins

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

Há muitos plugins por aí que farão o trabalho, mas vou mencionar brevemente alguns exemplos.

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]

Autoptimize (GRÁTIS)

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

Para usar o Autoptimize, você pode baixar, instalar e ativar o plug-in do Painel do WordPress em Plug-in> Adicionar novo.

autoptimize.jpg

Quando o plug-in estiver ativado, vá para Configurações> Otimização automática. Em seguida, na guia Configurações principais, verifique o código que você deseja otimizar (HTML, CSS e / ou JavaScript) e clique em Salvar 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 sua otimização de código.

opções de css advanced.jpg

É sobre isso! Bastante simples e poderoso.

Cache total de W3 (GRÁTIS)

v3 total cache.png
W3 Total Cache é um excelente plugin de cache que inclui a capacidade de minimizar seus arquivos HTML, JS e CSS.

parâmetros gerais w3 total cache.jpg

Cache o mais rápido WP (FREE)

wp mais rápido cache.png
WP Cache Fastest - Esses plugins de cache gratuitos do WordPress são extremamente populares com avaliações altas. O plug-in executa várias otimizações de desempenho, incluindo a combinação e a redução do HTML CSS e JavaScript para melhor desempenho.

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. [FREE]

Uma vez que o plugin é instalado, basta clicar na guia WP Quickest Cache na barra lateral do WordPress Dashboard (aquele com o incrível ícone Cheetah). Na guia Configurações, você encontrará opções para combinar e recolher arquivos HTML e CSS. Embora a redução de JavaScript esteja disponível apenas na versão pro.

wp mais rápido cache settings.png

Para resumir

Se você deseja tornar seu blog mais rápido e ter melhor desempenho, é necessário reduzir o tamanho de seus arquivos HTML, CSS e Javascript. Com todas as ferramentas on-line disponíveis, você pode facilmente reduzir seu código para qualquer site. Para aqueles que usam o WordPress, você tem à sua disposição poderosos plugins disponíveis para minimizar esses arquivos automaticamente em poucos cliques.

Isso é tudo para este tutorial, espero que agora você saiba como reduzir seus arquivos CSS, HTML e JS.

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
4 ações
ação4
chilrear
Enregistrer
Whatsapp