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 reduzir 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 qualquer coisa, mas quando se trata da velocidade do seu site, qualquer pequeno gesto conta. A velocidade de carregamento do seu site não é apenas importante para visitantes iniciantes, 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 blocos que são úteis para nós, humanos, mas inúteis para máquinas. Nós reduzimos 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 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 quanto espaço economizaria ao reduzir milhares de linhas de código. Então, se você quiser fazer isso manualmente, tecnicamente, poderá. Mas você correria um alto risco de erro e desperdiçaria um tempo valioso 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 ou conhecer nenhuma das linguagens de programação para reduzir o tamanho dos arquivos do seu site. Minificação se tornou 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í 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 o 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 on-line 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é 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 é perfeito 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ê minimize seu Javascript com outras otimizações úteis. Você pode usar seu código Javascript inserindo o URL do local do arquivo js e escolha 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 clicar no botão de compilação, ele reduzirá o código (ou o compilará) para você, assim como seu código, para procurar por 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 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 seu tamanho Reduza seu código HTML, CSS e JavaScript com uma ferramenta online

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

Cole no 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 ampliar ou compactar o código.
Copie a saída do código minificado ou faça o download do arquivo de código minificado.

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]

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

Primeiro, localize o arquivo css (geralmente 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 code.jpg compactado

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 também reduzir 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 WordPress para reduzir o tempo de carregamento da página com apenas alguns cliques no botão.

Existem muitos plugins por aí que farão o trabalho, mas mencionarei 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
A otimização automática é provavelmente o plug-in minify 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 um bônus adicional, você tem opções adicionais para otimizar fontes, imagens e muito mais 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.

autoptimize.jpg

Depois que o plug-in estiver ativado, vá para Configurações> Otimização automática. Em seguida, na guia Configurações principais, marque 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

Isso é tudo! Muito simples e poderoso.

Cache total de W3 (GRÁTIS)

v3 total cache.png
W3 Total Cache é um excelente plugin de armazenamento em 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 gratuitos de cache do WordPress são extremamente populares com críticas elevadas. O plug-in realiza várias otimizações de desempenho, incluindo a combinação e a redução do HTML CSS e JavaScript para obter 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]

Depois que o plug-in estiver 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 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 seu código para qualquer site. Para quem usa o WordPress, você tem à sua disposição plugins poderosos disponíveis para minimizar esses arquivos automaticamente em apenas alguns cliques.

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

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