Acelere seu site com CSS Sprite

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.

Este é um guest post enviado por Alexandre H Jodai para o RBtech Developer.

Nesta aula nosso colega Alexandre irá mostrar como usar o chamado CSS Sprite para dar uma boa aceleradas em seu site. Esta técnica se resume em carregar somente uma imagem contendo todos os elemento necessários para a estrutura do site e depois exibir a parte correspondente via CSS.

Ok, mas e como isso ajudar a melhorar a velocidade do meu site? Simples, um servidor web consegue responder a 2 requisições HTTP por vez, ou seja se você tiver 60 imagens pequenas para carregar o servidor vai levar uma média de 30 segundos (levando em conta que cada requisição leve 1 segundo) para carregar todas as imagens. Usando CSS Sprite o servidor terá que responder apenas a uma requisição, pois há somente uma imagem para ser carregada.

Apesar desta única imagem levar um pouco mais de tempo para carregar por ser maior não chegaria nem perto dos 30 segundos do exemplo anterior. Basta planejar e otimizar bem a imagem para que ela fique com um tamanho menor.

Depois que você aprender a usar esta técnica estará apto a desenvolver projetos mais profissionais e com um tempo de manutenção menor.

Conteúdo relacionado

Sobre o autor

Alexandre H Jodai

Este autor é um voluntário, que além de acompanhar o blog participa enviando conteúdos para serem publicados. Participe você também!

Comentários

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

Deixe seu comentário

Pesquisar no site
Central do assinante

Esqueceu sua senha?

Hospedagem de sites

© 2008-2017 - RBTech.info | Todos os direitos reservados

É proibida a reprodução total ou parcial de qualquer conteúdo deste site.