10 Dicas de Como Criar Sites Que Carregam Rapidamente
Não importa o quanto o design do seu site tenha uma boa aparência, se ele carregar lentamente os visitantes provavelmente irão embora.
1. Use poucas imagens
O número de imagens e gráficos em um site tem uma influência direta em seu tempo de carregamento. Uma página que contém apenas texto carregará mais rápido. Considere a possibilidade de eliminar as figuras desnecessárias que não adicionam muito valor ao seu site. Lembre-se de que fotos não são as únicas imagens em um site, cabeçalhos e logos freqüentemente usam imagens para se tornarem mais atrativos.
2. Reduza o tamanho da imagem e/ou a sua resolução
Uma vez que você tenha determinado que imagens são necessárias para as suas páginas, diminua as suas dimensões e a sua resolução, de uma forma tal que não prejudique a qualidade delas. Programas de edição como Photoshop e Paint Shop Pro permitirá que você atinja esses dois objetivos facilmente, você pode também reduzir a resolução e manter as mesmas dimensões.
3. Evite Animações
De um modo geral, as animações são desnessárias para o design e aparência do site, portanto pese os prós e contras de inclui-las pois elas dificultam bastante o carregamento do site.
4. Converta arquivos JPG para GIF
As imagens JPG contêm mais cores e tem resoluções maiores do que os GIFs. Images usadas em cabeçalhos e logomarcas podem. na maioria dos casos, ser salvas em formato GIF sem prejudicar a sua qualidade, porém as fotos devem continuar como JPG. Contudo, há casos em que a conversão de JPG para GIF, produzirá o resultado contrário, ao invés de diminuir o tamanho do arquivo, a conversão o aumenta. Portanto, fique atento.
5. Use códigos HTML e CSS válidos
Ao validar o seu código você estár certo de que ele está otimizado para o navegador. Códigos inválidos nem sempre retardam o carregamento da página mas ao usar códigos válidos você terá certeza de que erros no código não causarão problemas de velocidade. A W3C fornece ferramentas para validação de código HTML e CSS.
6. Evite códigos desnecessários
Usar programas que não são exclusivamente direcionados à criação de sites, pode deixar a sua página com códigos extra desnecessários. Embora a página possa ter a mesma aparência que a criada com o mínimo de código, o navegador levará mais tempo para ler todo o conteúdo. Codificar manualmente ou usar programas como o Dreamweaver produzirão melhores resultados.
Mesmo ao usar um programa WYSIWYG para criar sites, revise o código para saber se há algum desnecessário, muitas vezes esses programas costumam deixar muitos comentários e tags vazias, remova essas linhas desnecessárias para melhorar a performance do seu site.
Convém também lembrar que deixar linhas em branco entre as tags aumentará o tempo de carregamento da página. Para remover esses espaços desnecessários, você pode usar a ferramenta Free HTML Optmizer.
7. Crie um design baseado em CSS ao invés de tabelas.
Designs baseados em tabelas possuem muito mais código do que os designs baseados em CSS. O CSS permite que o designer separe o conteúdo da página do modo como ele será exibido e dessa forma a quantidade de código necessária para atingir a mesma aparência será bem menor.
Se você for usar tabelas para o design, evite aninhá-las. Usar tabelas menores facilita o trabalho do navegador pois ele não terá que esperar que toda a tabela seja carregada antes de exibir na tela. Ao usar múltiplas tabelas, cada uma será exibida o mais rápido possível.
8. Use arquivos de CSS separados ao invés de colocar CSS dentro do código HTML
O código CSS pode estar localizado dentro da etiqueta <HEAD> ou pode estar em um documento externo devidamente ligado a páginas específicas. Manter o código CSS no cabeçalho da página fará com que o navegador tenha que ler mais código antes de exibir a página, e isso se refletirá em seu tempo de carregamento. Além disso, colocar código CSS no cabeçalho do código HTML dificultará bastante a manutenção da página. Quando for necessário modificar o layout do site, você terá que revisar página por página enquanto que se você tiver um arquivo de CSS externo você só terá um arquivo para revisar.
9. Evite o uso excessivo de JavaScript e Flash
Use esses recursos com moderação, mantenha apenas os que forem realmente necessários.
10. Verifique se a sua página está lenta
No site SelfSEO você poderá testar se a sua página está lenta.
Artigos Relacionados
21 Fatores Que Influenciam a Primeira Impressão de um Site
21 Questões Que Se Deve Levar em Consideração Antes de Fazer o Redesign de um Site
Arquivado em: CSS, HTML, web design | Tagged: CSS, HTML, usabilidade, web design
Importante essas dicas, especialmente para quem está a criar um blog/site. Se conseguir segui-las será ótimo.
Abraço
Muito boas as dicas de como criara sites que carregam rapidamente! Só gostaria de fazer uma resalva quanto a “4. Converta arquivos JPG para GIF”.
Na verdade, não é TODA imagem convertida de JPG para GIF que terá seu tamanho reduzido. Deve-se analisar bem quanto o propósito da imagem, seu número de cores e o objetivo do carregamento que se deseja.
Dependendo da imagem, quando for convertida para GIF terá seu tamanho AUMENTADO!
Bem, fora isso, como disse, muito bom! Parabéns! Já virei assinante do feed!
Abraços!
Tárcio, foi ótima a sua ressalva!! Vou corrigir imediatamente o meu post.
Abraços!!
oi estou começando agora a fazer site e fiz este http://www.coberturafest.com.br, mim diseram que tiam muita imagens e tava demorando pra abrir se vc pode da uma olha e mim da uma dica pra ter um visual legal com imagens e leve eu agradeceria ta uma abraço
Raylton, seu site realmente está com problemas. Na minha máquina demorou muito tempo para carregar e olha que eu tenho conexão ADSL, 1,5Gb de memória RAM e um processador Dual Core de 3Gigas.
Algumas coisas estão deixando seu site lento
-Uso de JavaScript
- Fotos em excesso
-Layout baseado em tabelas
As fotos que você usou para dar layout ao seu site podem ser conseguidas com CSS.
Além disso, eu achei o visual meio poluído com tantos gifs animados. Enfim, tem muitos elementos “piscando” e isso torna a visualização bastante desconfortável.
Eu se fosse vc começava o site do zero antes que se torne inviável mantê-lo.
Considere as dicas que eu coloquei na postagem, vai melhorar bastante o seu trabalho.
Ah, e não se esqueça de visitar o meu novo site:
http://www.tutoriaisedicas.com