Deseja compactar seus arquivos CSS, HTML e javascript no WordPress?
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 conjunto de ferramentas do Google Developers. Ele permite que você reduza seu JavaScript junto 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 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 , APF 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:
- phpied.com/cssmin-js/ (Somente CSS)
- yui.github.io/yuicompressor (JS e CSS)
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.
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.
Depois que o novo código minificado for gerado, copie-o.
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)
A otimização automática é provavelmente a WordPress Plugin do minify mais popular. É popular porque é fácil de usar e repleto de recursos poderosos. Ele pode agrupar (combinar scripts), reduzir 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
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.
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.
É mais ou menos isso! Muito simples e poderoso.
Cache total de W3 (GRÁTIS)
W3 Total Cache é um excelente plug-in de cache que oferece a capacidade de minimizar seus arquivos HTML, JS e CSS.
Cache mais rápido do WP (GRÁTIS)
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.
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 outro WordPress plugins para dar uma aparência moderna e otimizar o manuseio 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. Ao usar este WordPress Plugin, você permitirá que o Google reduza o pagerank do seu site se ele tiver muitas páginas de erro 404.
Descubra também Como corrigir erro 413 no WordPress
Ce WordPress Plugin não apenas redireciona, mas também pode ser uma solução adequada para melhorar a classificação do seu site nos resultados dos buscadores.
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 vincular traduções. O plug-in vem com 174 idiomas integrados ao gerenciador de idiomas e suporta um número ilimitado de sites, para que você possa criar e vincular quantas traduções desejar.
Isto é bom para o SEO porque isso permitirá que você mantenha seus idiomas em postagens e páginas separadas, e se você decidir usar uma tradução diferente do plugin, seu conteúdo permanecerá intacto (mesmo após desabilitar ou remover o plugin Multilingual Press). Além disso, você pode adicionar um widget de tradução para alternar entre traduções facilmente.
Discover Como adicionar um trecho de código usando o Gutenberg no WordPress
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.
- Como adicionar uma legenda a uma imagem no Gutenberg
- 6 WordPress plugins para apimentar as suas barras laterais
- 10 plugins do WordPress para adicionar um gerenciador de downloads
- O que entender ataques DDoS no WordPress
É possível utilizar JS compresso https://www.jsonformatting.com/js-minify/