Performance no seu site

brad-frost-front-end

Ultimamente estou ficando maníaco por performance em website, pois reconheço que um site rápido aumenta a credibilidade, aumenta a percepção de qualidade e o site passa a ser visto como mais atraente (The Psychology of Web Performance e Response Times: The 3 Important Limits).

Nos últimos projetos venho demonstrando como é importante apresentar conteúdo adaptável a qualquer resolução, não quero dizer sobre mobile design (Palestra Responsive Design Front in Sampa 2012). Com isso você pode perguntar, por que devemos nos preocupar com a web móvel?

Se você possui um smarthphone (Android, IPhone e etc) com acesso a internet decerto você o utiliza por mais tempo comparado ao seu PC. Com frequência você assiste TV e ver seus tweets no seu smarthphone, antes de dormir você gosta de verificar a timeline do seu Facebook, quando acorda gosta de ver as novidades nos seus sites preferidos. Percebemos que o tempo todo você busca informação na internet pelo celular e quando você nota que a mesma vem rapidamente, com legibilidade e acessibilidade, você se torna “amiga” deste tipo de informação. O contexto de acesso a internet mudou.

O designer Krystofer Layon criou uma teoria sobre motivação humana móvel, baseado na teoria de Maslow, como você pode ver abaixo:

Na sua pirâmide percebe-se uma nova estratégia de desenvolvimento, onde ele já apresenta as prioridades em que devemos nos orientar.

Na construção devemos nos preocupar em iniciar na perspectiva mobile assim podemos focar melhor no conteúdo e o design nos ajudará a priorizar, classificar e apresentar a informação de acordo com a página.

Outro desafio imposto para esta implementação é a complexidade dos itens a serem observados, onde a imagem abaixo reflete bem isto:

Isto demonstra que devemos nos preocupar com vários itens, incluindo a performance. É importante ressaltar que 71% dos usuários mundiais esperam que seu site mobile seja quase tão rapidamente ou mais rápido em seu celular em comparação com o computador que eles usam em casa, e 74% só estão dispostos a esperar cinco segundos ou menos para uma única página carregar antes de deixar o site.

Foi realizado uma pesquisa onde o peso médio de uma página é de 1 MB, para um site mobile esse peso é bastante alto levando em consideração nossos planos de internet para celular e nosso péssimo sinal de internet. Com este peso é ruim tanto para os proprietários de site com para os usuários móveis.

Acredito que performance é invisível ao mesmo tempo que performance é design e para analisarmos a performance vou citar alguns sites e ferramentas que utilizo.

Análise de Performance

PingDom: http://tools.pingdom.com/fpt/

WebPageTest: http://www.webpagetest.org/

Google Analytics > Contéudo > Velocidade do Site

PageSpeed Insights: https://developers.google.com/speed/pagespeed/insights

MobiTest (Performance para celular): http://mobitest.akamai.com/m/index.cgi

Yslow: http://developer.yahoo.com/yslow/

Testar a flexibilidade

Responsive : http://responsive.is

Responsive Web Tool: http://mattkersley.com/responsive/

ProtoFluid: http://protofluid.com/

Fontes de ícones

IcoMoon: http://icomoon.io

Entypo: http://www.entypo.com/

Pictos: http://pictos.cc/

Font Awesome: http://fortawesome.github.com/Font-Awesome/

Otimização de imagem

JPEGMini: http://www.jpegmini.com

Sprite CSS

SpritePad: http://wearekiss.com/spritepad

SpriteBox: http://www.spritebox.net/

SpriteCow: http://www.spritecow.com/

Compressor CSS e JS

YUI Compressor: http://refresh-sf.com/yui/

Apresentações

https://speakerdeck.com/nebraskajs/performance-and-responsive-web-design

Observações

  • Verifique o servidor onde seu site está hospedado possui os módulos necessários (Apache) para que seu htaccess seja performático, como exemplo: mod_expire, mod_rewrite e entre outros;

Por favor, comentem este post e apresente blogs ou referências com sugestões de performance para web mobile. Fico bastante grato com o feedback =]

Fontes: http://kristoferlayon.files.wordpress.com/2012/03/klayonsxsw2012.pdf

http://www.slideshare.net/bradfrostweb/beyond-media-queries-an-anatomy-of-an-adaptive-web-design-at-smashing-conference

http://www.slideshare.net/bradfrostweb/for-a-futurefriendly-web-mobilism-2012

http://www.compuware.com/d/release/592528

http://gigaom.com/2012/05/23/the-growing-epidemic-of-page-bloat/

http://www.guypo.com/mobile/performance-implications-of-responsive-design-book-contribution/

Deixe uma resposta

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s