anterior
Tweet about this on TwitterPin on PinterestShare on LinkedInShare on Google+Email this to someoneShare on Facebook
QR CODE

Aumentando o desempenho do seu site

Como aumentar o desempenho do seu site

A percepção humana é algo interessante. Como você deve imaginar, aquilo que vivenciamos varia incrivelmente de pessoa para pessoa, pois é reflexo de condições diversas. Na Web, isso é uma verdade absoluta, já que o tempo de carregamento de uma página reflete diretamente em como os usuários percebem a velocidade do site. Há estudos que mostram que a percepção de tempo de carregamento dos usuários é, em média, 15% pior que a real!

O número de segundos para carregar uma página é importante, mas não são tudo. Desempenho tem tudo a ver com usabilidade e é o usuário final quem vai perceber  o quão rápido está um Site. Existem diversas técnicas de otimização que tornam a percepção do usuário mais favorável a esse fator, dando a sensação de velocidade mesmo que o relógio diga o contrário.

A seguir, veremos algumas dicas úteis para que você possa alcançar esse objetivo:

Menos imagens, mais código

Acostume-se a fazer tudo o quanto puder em HTML e CSS, ainda que você perca um tempo maior fazendo isso, pois reduzir a carga de imagens da página vai fazer com que seu navegador respire mais aliviado. A quantidade de imagens influencia diretamente no tempo de carregamento, já que cada imagem gera uma requisição do HTTP ao servidor. Eu sei que provavelmente, se você é um estudante de web design, deve adorar criar várias imagens de elementos da sua página, como botões, menus, sidebars etc.  É compreensível, já que dá menos trabalho e o controle sobre o visual é mais amigável. Mas a internet não é mais como era há 10 anos! Hoje temos HTML5, CCS e JQuery entre outras alternativas para minimizar o uso de imagens utilizando mais códigos e tornando nossas páginas mais dinâmicas. Além disso, se uma única imagem der erro no carregamento, isso vai estragar o design da página causando uma péssima impressão.

Não encontrada

Calma, a imagem acima é assim mesmo, ela está aí somente para lembrar como a falha do carregamento das imagens pode frustar o usuário do site e acabar com o layout da página.

Use CSS

Outra dica com relação a imagens é nunca usar HTML puro para redimensionar suas imagens. Elas serão carregadas com o tamanho original e serão redimensionadas apenas no browser. Isso vai fazer com que o carregamento leve mais tempo, o que pode causar também distorções se você não tiver uma boa noção de escala. Use o CSS para isso. Essa prática tem um grande impacto visual para o usuário. Quando não especificamos o tamanho da imagem, o navegador não reserva um espaço na página para ela. O efeito é que, quando a imagem chega, ela é posicionada em seu lugar empurrando o restante do conteúdo. Isso dá a sensação de que os elementos da página estão se movendo e que ela ainda não está carregada. É uma péssima prática de usabilidade e dá a sensação de mais lerdeza.

Simplesmente especificar o tamanho correto da imagem no Width e Height do HTML ou CSS faz com que o browser já reserve o espaço para a imagem mesmo antes de seu download acabar. Quando ela chega, o navegador não precisa abrir espaço e empurrar os outros elementos, dando a sensação de que a página está sendo carregada mais rapidamente. Além disso, ao evitar o reposicionamento de elementos, evita-se reflows e repaints desnecessários.

Já com relação à própria imagem, devemos considerar dois fatores, o formato e o tamanho. Como sabemos, cada formato possui as suas características próprias. Os formatos de imagens usáveis na Web são PNG, JPEG e GIF. Mas qual usar e como escolher o formato correto? Há diversos fatores para levar em consideração:

Formatos de imagem

GIF suporta animações e transparências, no entanto, possui o limite de 256 cores. Sendo assim, não é indicado para fotografias ou para imagens com muitos detalhes.

PNG suporta transparência com canal alpha. De modo geral, PNGs hoje são superiores a GIFs e o único motivo para usar o último é quando há animações. Mas mesmo ao usar PNG, é possível escolher entre dois formatos diferentes: PNG8 e PNG24. O PNG clássico é o de 24bits que suporta milhões de cores e é exportado por padrão por todas as ferramentas gráficas. Mas o PNG8 diminui a palheta para 8bits, 256 cores no máximo, assim como os antigos GIFs. A vantagem do PNG8 é que tem um tamanho bem menor e é muito útil para imagens com poucas cores (logos, gráficos simples etc).

JPEG é indicado para fotografias ou imagens com muitos detalhes, pois suporta mais de 16 milhões de cores e podemos controlar suas perdas escolhendo a qualidade da imagem na hora de salvar. Infelizmente, como se sabe, ele não suporta transparência. É um formato “lossy” cuja compressão sempre causa perda de qualidade (aliás, é por isso que jamais se deve editar JPEGs diretamente; cada vez que se salva o arquivo, perde-se qualidade). Com isso, um PNG costuma ser mais interessante para gráficos quando fotos ficam com tamanhos menores em JPEGs.

Além de observar essa diferença entre formatos, é importante otimizar as imagens a serem utilizadas, diminuindo o tamanho e resolução destas. Nunca use as imagens diretamente sem redimensiona-las no tamanho correto no Photoshop e use sempre a opção “Salvar para a Web”. Se você não possui Photoshop em seu computador , pode usar alternativas gratuitas também. Há muitos otimizadores de imagem na web e eles são frequentemente muito úteis (e se você conhece uma boa ferramenta de otimização de imagem, não esqueça de postar nos comentários porque estamos todos na caça, ok? ). O “Online Image Optimizer“, por exemplo, é uma ferramenta criada pelo pessoal do Dynamic Drive. Com ele, você poderá reduzir o tamanho de suas imagens, inclusive mudando os formatos. Você acessa o site deles, decide se vai otimizar uma imagem que já está online, ou que está no seu PC, feito isso você escolhe o formato da imagem otimizada e pronto, basta clicar “Optimize“! É interessante, que você tenha marcado a caixa “Show All Results”, para que ele te mostre diversos imagens otimizadas e você possa escolher melhor aquela tenha uma boa relação de qualidade/tamanho.

Não abuse dos widgets e plug-ins

Plugins

Apesar da funcionalidade oferecida pelos plug-ins e widgets, é preciso selecionar quais destes serão realmente importantes para sua aplicação, usando-os o menos possível. Muitos plug-ins e widgets são desenvolvidos em flash ou Java, influenciando negativamente na velocidade de carregamento do seu site. Botões de redes Sociais são importantes, mas causam uma lentidão enorme. A melhor alternativa é usar um único plugin que carregue rápido e mostre botões de compartilhamento sociais na barra lateral, como o Sharebar, por exemplo.

Otimize o código-fonte

Mantenha o código do seu site limpo e sem erros. Lembrando que é importante assegurar que a estrutura do seu site não possua links quebrados, erros de conexão com banco de dados, linhas em branco, entre outros.

Você também pode comprimir os arquivos CSS e JavaScript, eliminando comentários desnecessários, espaços em branco e caracteres que não sejam úteis. Assim o arquivo fica menor, sendo carregado mais rapidamente.

Minimize os arquivos CSS

CSS

Para conseguirmos diminuir o tamanho do arquivo CSS do seu site precisamos basicamente retirar os caracteres desnecessários. Se você utiliza DreamWeaver você pode habilitar a opção “Hidden Characters”, assim fica muito mais fácil para deletar espaços, tabs e quebra de linhas extras. Outra maneira de reduzir o tamanho do seu CSS é mudar a maneira como você escreve seu código, como por exemplo:

  • Evite aninhar diversas classes, ID e tags; faça o uso somente se necessário.
  • Escreva seu código em uma única linha, evite múltiplas linhas para uma única regra.
  • Escreva seu CSS na forma resumida sempre que possível, ao invés de escrever:

exemplo css 01

Faça algo assim:

Exemplo Css

Reduza o número de requisições da página

Outro fator importante para que seu site carregue mais rápido é o número de requisições feitas no servidor. Inclua, se possível, todos os arquivos JavaScripts num mesmo arquivo externo; em vez de termos vários scripts carregando diferentes funções, podemos reduzi-los para um único arquivo. O mesmo vale também para as folhas de estilo, se possível,  junte todas elas em um único arquivo.

Outra dica importante e bastante útil para quem utiliza compartilhadores de notícias incorporados a página: sempre que possível verifique o código deles e veja se é realmente necessário utilizar todos. Veja se seus leitores ou clientes realmente os utilizam para divulgar suas informações, pois muito deles roubam bastante tempo de carregamento da página, principalmente aqueles que são instalados com uso de iframe.

Use ferramentas de diagnóstico

navegadores

Monitore suas páginas constantemente com ferramentas de diagnóstico. Há diversas disponíveis:

O painel de monitoramento dos próprios navegadores, como Firebug, Chrome Developer Tools, Opera Dragonfly, e IE Dev Toolbar já nos dão muitas informações. Fora isso, as clássicas extensões YSlow e PageSpeed (disponíveis para Chrome e Firefox) apresentam relatórios completos com dicas e problemas de performance. O PageSpeedem particular possui uma versão online muito fácil de usar. Outra ferramenta online fantástica é a WebPageTest.org, usada para gerar as estatísticas usadas nessa apresentação. Ela permite testar do IE6 ao IE10, além de Chrome e Firefox. Gera screenshots, gráficos, grava vídeos comparativos e provê uma análise com dicas de otimização. O Google Analytics pode ser configurado para guardar estatísticas da velocidade do site. O interessante é usar essa capacidade para cruzar dados com outras métricas para descobrir os impactos da performance sobre os usuários da sua aplicação. O Google Webmasters Tools mostra informações sobre o desempenho do site em comparação com os outros sites indexados pelo Google.

Com essas dicas (e ainda teremos muito a falar sobre o assunto no futuro), espero que você possa otimizar o conteúdo do seu site e tornar o carregamento mais dinâmico. Lembre-se que estas não são regras de ouro, você pode ou não utiliza-las ou mesmo não concordar com todas, mas é importante que leia sobre o assunto, teste suas próprias ferramentas e tire suas conclusões. E não se esqueça de dizer o que achou do assunto nos comentários do Blog. Um grande abraço e até o próximo post!

Próximo

Postado por

Web designer, Ilustrador e produtor visual gráfico, santista de nascimento e de coração, amo o que faço e estou muito feliz em fazer parte da equipe Microcamp.