Tags ‘otimização’
| « Otimizando seu site com a técnica CSS Sprite | Comunicado sobre falsas cobranças » |
Dicas para tornar seu site mais rápido
20 de novembro de 2009
Há diversos pontos que devem ser levados em consideração no desenvolvimento de um website. Um deles muito importante é o tempo de carregamento, ou seja, a rapidez do site ao carregar.
Abaixo a uma lista de dicas que contribuem para a otimização de seu site:
Reduza o tamanho do seu código removendo os espaços em branco
Remova-os manualmente ou utilize alguns programas específicos para compactação existentes na internet, como por exemplo, o CleanCSS que otimiza o seu código CSS e o YUI Compressor desenvolvido pela Yahoo! Developer Network para a redução do código javascript.
Defina as dimensões da imagem.
Coloque as dimensões de largura (width) e altura (height) de suas imagens no HTML para que o broswer identifique esta informação mais rapidamente.
Use CSS e JS externo
Se não houver outro jeito e precisar colocá-los na própria página, a melhor maneira é colocar o CSS no topo, entre as tags <head> … </head> e os scripts javascript no final da página.
Use tabelas apenas quando necessário
Utilize-as de forma consciente, ou seja, apenas para dados tabulares.
Especifique o Doctype.
Diferentes tipos de Doctype:
- XHTML 1.0 Strict
- XHTML 1.0 Transitional
- XHTML 1.0 Frameset
- XHTML 1.1 DTD
- HTML 4.01 Strict
- HTML 4.01 Transitional
- HTML 4.01 Frameset
Neste link há um maior detalhamento sobre os tipos de valores XHTML.
Otimize o tamanho das imagens.
Tente comprimí-las para que fiquem em uma qualidade considerável num tamanho acessível. Caso esteja utilizando o Photoshop para edição dessas imagens, opte pelo “Save for web” na hora de salvá-las e otimize-as. Há algumas ferramentas disponíveis na internet que fazem este tipo de serviço, como o Online Image Optimizer.
CSS Sprite em suas imagens
É uma interessante técnica em CSS onde é possível agrupar várias imagens do seu site em uma única imagem, e depois manipulá-la através do código. Isso faz com que a quantidade de requisições ao servidor seja pequena, tornando o site mais rápido.
Clique aqui e acesse nosso post sobre a técnica CSS Sprite.
Bom, estas dicas são de extrema importância no que diz respeito ao desempenho de seu site.
Além disso, outro ponto importante é a performance do servidor onde seu site vai ser hospedado, portanto para isso escolha um bom plano de hospedagem da RedeHost.
Tags: como criar um site, Dicas, otimização
Categoria: Dicas
1 Comentário »
Otimizando seu site com a técnica CSS Sprite
20 de novembro de 2009
Há diversas técnicas muito úteis em CSS que devem ser levadas em consideração no desenvolvimento de um website. Uma dessas técnicas é a famosa CSS Sprite, mas que alguns ainda não conhecem.
O que é?
Consiste em agrupar várias imagens do seu site em uma única imagem, e depois manipulá-la através do seu CSS. Isso faz com que a quantidade de requisições ao servidor seja pequena, tornando o site mais rápido.
Algumas vantagens
Sem dúvida a grande vantagem na sua utilização é a rapidez no qual as imagens do site serão carregadas.
Em sites pequenos talvez seu ganho em performance não seja tão evidente, já em sites mais extensos, esta simples técnica faz uma grande diferença.
Além disso, outra vantagem é na manutenção das imagens, onde estarão todas em apenas um arquivo, facilitando a edição do layout. Um site que pode servir como exemplo disso é o Youtube, que utiliza CSS Sprite.
Veja o exemplo abaixo:
IMAGEM
Vamos supor que temos um menu:
HTML
<li><a href=”#” id=”link1″>Link 1</a></li>
<li><a href=”#” id=”link2″>Link 2</a></li>
<li><a href=”#” id=”link3″>Link 3</a></li>
</ul>
Agora vamos estilizá-lo!
CSS
ul#menu li a { background-image: url(‘sprite.png’); background-repeat: no-repeat; color: #fff; display: block; font-weight: bold; height: 40px; text-decoration: none; width: 126px; }
ul#menu li a:hover#link1 { background-position: -378px 0; }
ul#menu li a:hover#link2 { background-position:-252px 0; }
ul#menu li a:hover#link3 { background-position:-126px 0; }
A propriedade CSS que faz a magia acontecer é a background-position, onde o primeiro valor é a posição X (horizontal) e o segundo valor a posição Y (vertical) da imagem que queira exibir.
Neste exemplo, foi necessário apenas uma requisição ao servidor, pois tinha apenas uma imagem utilizada para compor o menu.
Lembre-se que a rapidez de um site é um ponto muito importante atualmente na web, pois se o site demorar para carregar suas imagens o usuário irá desistir e procurar outro que atenda as suas expectativas.
Tags: como criar um site, CSS, Dicas, otimização, Tutoriais
Categoria: Tutoriais
1 Comentário »
| « Conhecendo o Joomla | Dicas para tornar seu site mais rápido » |
RedeHost em uma frase:
Uma das maiores empresa de hospedagem de sites e registro de domínio do Brasil, a única 100% em cloud computing, reconhecida pelo melhor atendimento e infraestrutura.