A alguns meses fiz um artigo sobre como otimizar o carregamento do seu site no qual eu falava sobre headers, compactação de resposta HTTP dentre outros.
Hoje vou falar sobre algumas outras dicas que fazem muito efeito tanto no carregamento do site quanto do bandwidth mensal que você vai usar.
Alguns sites por ai dizem que o tempo ideal de carregamento de um site é quatro segundos, mas isso depende muito da Internet da pessoa e, claro, do tipo de conteúdo que estamos falando. Eu acredito que um site que carregue em até 10 segundos seja de ótimo tamanho e, se for por volta disso, não vai prejudicar o número de visitantes.
1. Tag
Muita gente ainda usa o CSS todo dentro de uma tag style ou - não menos errado - usa style-in-line, que significa usar a propriedade style=”” do elemento para mudar o estilo dele. O CSS foi lançado na década de 90 gente! Ele foi feito pra ser usado!
Além de deixar o seu código fonte muito mais limpo, o uso de CSS em folhas de estilos separadas otimiza o carregamento do site e permite uma melhor separação entre a estrutura (HTML) e a aparência (CSS) do mesmo.
Imagine que você vai fazer o papel de uma peça de teatro e lá pela terceira página, entre uma linha e outra, você encontra uma observação que diz que o seu personagem tem cabelo vermelho… Não seria melhor que isso viesse logo depois da capa, pra você já se preparar?
2. Arquivos JavaScript, uni-vos!
Falei sobre isso no outro artigo mas vale repetir: muita gente usa um site que, por exemplo, chama o jQuery mais três plugins e um script criado com os efeitos do site.. Isso dá um total de cinco arquivos, cinco requisições diferentes que o seu servidor recebe, organiza, manipula e redireciona só pra inserir o JavaScript do seu site.
Una (junte) todos os códigos JavaScript do seu site em um arquivo só, e sé isso for te dar muita dor-de-cabeça, veja sobre o Google Minify
3. Acabe com o Flash
Antes que você, designer, levante uma tocha e inicie uma caçada contra mim, essa dica vale para a exibição de conteúdo… Não daquele topo fofinho que você fez pro seu site.
Flash pesa? Sim, pesa. Evite usar objects espalhados pelo site… O Flash é mal lido pelo Google, não segue nenhum padrão de organização de código (já que trabalhamos apenas com imagens e efeitos visuais) e é muito mais dificil de alterar do que um simples (X)HTML… Tente usar efeitos com JavaScript (leia-se jQuery), que pesa muito menos que o Flash e você não precisa do .fla para editar… Qualquer problema é só entrar no FTP e mudar.
4. As futilidades da Web
Achou um chat cheio de códigos prontos de chats, sandbox, mural de recados, previsão do tempo e tudo mais? Pode sair dele agora. Não saia enfiando códigos prontos e iframes e scripts no seu site só pra tentar deixar ele mais legal… Isso é coisa de principiante e isso não traz vantagem nenhuma pro seu site! A não ser, claro, que vantagem pra você signifique coisas que ninguém vai usar.
5. Galeria de fotos
Seu site é uma galeria de fotos super transada e cheia de efeitos em JavaScript? Legal… Mas precisa mesmo carregar todas aquelas 80 fotos de uma só vez em escala real?
Crie thumbnails (miniaturas) das suas fotos e imagens que pesam muito (mais que 50Kb), isso vai economizar MUITO bandwidth (tráfego mensal) pro seu site.
6. Livro do autor
Você é um autor de livros super renomado e quer disponibilizar toda as 841 páginas do seu livro de bolso no seu site pessoal? Então, por favor, não coloque tudo em uma página só. Separe as páginas do livro em páginas do site… Várias! Quanto menor o conteúdo, melhor pro visitante, melhor pro Google, melhor pra velocidade do seu site, e melhor pro seu bolso (se você trabalhar com publicidade online). Menos é mais!
7. Meu site é HD!
Bom… Você já diviu seu site em páginas, sua galeria de fotos usa thumbnails e.. peraí… As fotos (grandes) estão com 100% de qualidade?! Pra que? O cérebro humano quase nunca conseguiu reparar a diferença entre uma imagem com 80% e outra com 100% de qualidade. Reduza a qualidade das suas fotos, vale a pena.
8. E o tamanho da minha imagem é…
Quando você usar o atributo <img … /> defina a largura e altura da imagem, isso vai economizar trabalho pro navegador do visitante que não vai ter que carregar toda a imagem antes pra descobrir o tamanho de exibição.
9. O que você vê é o que você tem, mas não é o que você precisa!
Sabe aquele seu editor de sites com suporte ao WYSIWYG (What You See Is What You Get)? Acha legal ele fazer todo o trabalho pra você de criar o HTML e o CSS sem que você precise se preocupar? Pois vá até o código fonte criado por ele e comece a fazer uma limpeza geral. Na maioria dos casos eles acabam criando códigos além do necessário, seja no HTML, seja no CSS.
Aprenda a criar sites usando um editor de texto que não te mostra uma representação visual, como o Notepad++, EditPlus, NetBeans e vários outros… Até o próprio Notepad serve!
10. Seu site não é um Centro de Convenções!
Não precisa ficar chamando um arquivo de cada site… jQuery do Google, CSS da Globo.com e por ai vai.. Quanto mais arquivos você chamar de servidores que não são o seu site, mais lento vai ser o carregamento dele pois o visitante vai precisar “resolver” vários DNSs, não só o seu.
–
Espero que tenham gostado! :D