Como compactar arquivos CSS para acelerar seu site

Aviso importante!

Eu sei que você não quer ver propagandas, porém o conteúdo gratuito só está aqui graças a publicidade. Considere desativar o AdBlock para esse site.

Quem trabalha com desenvolvimento web está sempre em busca de soluções para otimizar e melhorar a velocidade de acesso aos sites que cria, e um dos pontos que ajuda a melhorar este quesito é a otimização das folhas de estilo CSS.

Com alguns segundos é possível reduzir muito o tamanho das folhas de estilo, reduzindo assim também o tempo de carregamento das páginas e diminuindo o consumo de banda do servidor. Confira a dica na aula a seguir, e não esqueça de comentar dizendo o que achou da aula.

Update: A minha dica para quem quiser usar esta ferramenta mas não quer perder a legibilidade e organização do código fonte, é manter uma cópia do arquivo original. Exemplo: você mantém o arquivo orginal que você escreveu salvo e apenas otimiza uma cópia dele, que é o arquivo usado no site, assim quando quiser fazer alguma alteração basta pegar o original, alterar e compactar novamente.

Sobre o autor

Ricardo Bernardi

Sou técnico em hardware e desenvolvedor web, e sobre estes dois assuntos comecei a compartilhar aulas e artigos, tornando-me blogueiro em 2008. Em 2010 esse hobby virou profissão, e desde então tenho buscado melhorar e profissionalizar cada vez mais os projetos que mantenho na web.

Comentários

Atualmente temos 18 comentários para este post. Participe você também, clique aqui e comente sobre o assunto.

  • Eduardo Zagato Junior comentou em

    Ferramenta muito boa, economiza alguns ms, dependendo do site, alguns segundos de carregamento.

    Responder
  • Muito bom o post, eu estava revirando a internet atrás de algo assim. Todos os testes que faço em meu site, diz que ele é lento para acessar, mas eu não vejo assim.

    Responder
  • Amigo muito obrigado, antes no meu site em WordPress, tinha vários Plugins e carrega em 3.7 segundos, fiz uma limpeza otimizei muitas paginas em JS e CSS, meu site ficou ou seja esta ficando né muito bom com um carregamento de 1.8 isso é muito com, tirei ate o W3 Total Cache, é bem melhor trabalhar no código do que ficar instalando Plugins no WordPress, vou escolher um Plugins de cache, caso não seja possível resolver na base do código.

    Muito obrigado pela dica amigo Deus abençoe!!

    Responder
  • Ótima vídeo-aula, e para quem usa WordPress, existe plugins que fazem a compactação automaticamente, assim não precisa manter um arquivo original e outro compactado ;)

    []'s

    Responder
  • Douglas comentou em

    Muitooo boa aula! ja tinha visto ela,mas queria saber se tem como vc fazer uma VA
    ensinando como colocar esse efeito no botão "ir para o topo", estava vendo aqui
    ele desaparece quando chega ao topo,se poder fazer essa v.a agradeço! acho que
    estras pessoas também gostaria de saber..
    mais uma vez obrigadão!
    até mais...

    Responder
  • Wagner gilberto comentou em

    Gostei, também acessei o site com a dica do roberto, parece bom mas ainda não li todo o conteúdo.

    Responder
  • Roberto comentou em

    Programadores geralmente usam as ferramentas para formatar o código fonte da linguagem de programação de uma forma particular. A correcta formatação do código facilita a leitura e compreensão.Além disso, muitas vezes, os programadores têm diferentes estilos preferidos de formatação, tais como o uso de indentação de código, espaço em branco e posicionamento de chaves.
    Além do css in line, existem programas em php, javascript,c++, etc
    Segue abaixo uma lista com 19 dos melhores para salvar o seu tempo de desenvolvimento.:
    http://www.webdeveloperjuice.com/2010/08/17/19-code-beautifier-and-formatter-to-save-development-time/
    Parabens Ricardo por mais uma excelente video aula.

    Responder
    • Obrigado pela colaboração Roberto, e sobre as particularidades, vou fazer uma aula sobre isso, pois tem muito programador que nem sonha com o que é identação de código fonte por exemplo.

      Responder
  • Alan Silva de Albuquerque comentou em

    Valeu pela dica Ricardo, um CSS com poucas linhas, sim deixa mais rápido o carregamento do site. Você surpreende a todos com suas vídeo-aulas, eu vou pegar alguns estilos meus de alguns sites que fiz antigamente quando não tinha muita experiência. Hoje já escrevo meu CSS todo INLINE e percebo a diferença. Valeu.

    Responder
    • Muito obrigado Alan, na verdade não é somente esta ação ajuda a melhorar a performance do site, em breve teremos mais aulas sobre isso aqui, continue nos acompanhando.

      Responder

Deixe seu comentário