Jonathas Scott ¬¬ UI/UX Designer

Chegará o dia em que a maioria da empresas (pequenas a grandes) levarão a sério a criação de sites e apps web. A Volkswagen parece que já começou.

Vídeo muto divertido e interessante.

Performance é uma questão de Usabilidade e portanto listo aqui alguns pontos que podem melhorar a experiência dos usuários no seu site ou Aplicação Web.

Abaixo fiz uma síntese do artigo originalmente escrito por Steve Souders que já foi ‘Chief of Performance’ na Yahoo! e hoje trabalha no Google com web performance e iniciativas open source.

Solicitações HTTP: Minimize-as

80% do tempo de resposta do usuário é gasto no front-end, 100% destes 80% são gastos no download dos componentes (html, imagens, estilos, scripts, videos, flash, etc) Reduzindo o número de componentes reduz o número de solicitações HTTP necessárias para a renderização da página.

Rede para Distribuição do Conteúdo

Mesmo no virtual, a proximidade física de um usuário com o servidor pode ser um fator impactante no tempo de resposta. Distribuindo o conteúdo de uma aplicação web através de múltiplos servidores dispersos geograficamente, trará velocidade significante.

Utilize Regras de Expiração ou Controle de Chache nas Headers

Sites e Aplicações web estão ficando cada vez mais ricas, o que significa scripts, estilos, plugins, e etc. Um usuário que visita sua página a primeira vez com certeza precisará fazer o download de muitas coisas e realizar várias solicitações HTTP, mas utilizando regras de expiração e controle de cache evitará que o seu usuário fiel precise realizar estes downloads novamente, evitando assim solicitações HTTP desnecessárias ao servidor em novas visitas ou páginas subsequentes.

Gzip Components

Desde a versão html/1.1 os browsers indicam suporte a compressão com o Accept-Encoding header. Existe problemas que já conhecemos com browsers e proxies que podem causar diferenças entre o que o browser espera e o que ele realmente recebe. Mas para nossa felicidade estes problemas estão diminuindo conforme os browsers antigos perdem mercado.

Coloque os estilos no topo

Esta dica é básica para qualquer desenvolvedor. Em pesquisas feitas na Yahoo!, foi descoberto que colocando os estilos na head do documento as páginas carregam mais rápido. Isso devido ao download progressivo.

Coloque os scripts no final

Um problema causado pelos scripts e o bloqueio de downloads paralelos. Na especificação 1.1/HTTP sugere que os browsers fazem download no limite de até 2 componentes simultâneos por domínio. Se você distribuir os componentes da sua aplicação em um(1) ou mais domínios, você consegue obter número de downloads simultâneos maior, no entanto, enquanto o browser está baixando seu script o browser não iniciará nenhum outro download paralelo, inclusive se instalado em domínios diferentes.

Evite expressões CSS

Esta é para os amantes do Internet Explorer. A utilização proprietária de expressões javascript dentro do css é ignorada por outros browsers. Se você precisa muito utilizar expressões CSS lembre-se: “elas precisam ser validadas continuamente e podem afetar a performance de sua aplicação”.

Mantenha seus estilos e scripts externamente

Porque? Simplementes pelo fato de que quando temos os arquivos externamente páginas mais rápidas são produzidas uma vez que os estilos e os scripts ficam no cache do browser. Enquanto que estilos e scripts que ficam no decorrer dos documentos HTML são lidos toda vez que existir uma requisição.

Escolha link ao invés de @import

Para todo desenvolvedor antenado, esta dica é velha. É melhor não usar o @import, pelo fato do Internet Explorer interpretar o @import como se fosse o , porém com um agravante, carregando-o no final do documento html, e como sabemos que o melhor é colocar os estilos no topo de nossas aplicações para um download progressivo.

Minimize seu JavaScript e CSS

Remover partes ‘desnecessárias’ do código para reduzir o tamanho de seus estilos e scripts, todos os comentários e espaços em branco linhas e tabs, e com isso, melhorar o tempo de download. Isso melhora muito quando aplicado nos scripts.

Evite Redirecionamentos

Sem entrarnos detalhes dos headers 3xx, o importante aqui é que o redirecionamento retarda a experiência do usuário. Utilizando um redirecionamento entre a requisição do usuário e o documento a ser renderizado, deixa tudo mais lento, uma vez que não existirá página a ser exibida durante um tempo.

Remova Scripts Duplicados

Esta parece óbvia. Lembre-se tempo de download é precioso para sua aplicaçã, se por descuido você possui solicitações duplicadas para scripts idênticos, sua aplicação ou website estará disperdiçando o tempo e a conexão do seu usuário.

Configure o AJAX para utilizar Cache

Um dos benefícios do Ajax é o feedback instantâneo para o usuário, pelo fato de suas requisições acontecerem de forma assíncrona no servidor web. No entanto isto não é garantia de que o usuário não ficará esperando pela informação assíncrona dos Javascripts e XMLs.

É preciso melhorar a performance otimizando as respostas do Ajax. E a melhor maneira de se fazer isto é rotnando a resposta das requisições Ajax Cacheadas.

(continua no próximo post…)

We can find a lot of Firefox extensions and addons nowadays, but not everyone can be considered ‘definitive’. Far from pointing those definitive extensions that probably will never exist, here comes a list of really usefull development extensions, to help every designer and programmer on his way.

Web Developer Extension

https://addons.mozilla.org/en-US/firefox/addon/60

Fire Bug

This is just awesome to debug Javascript, Html, CSS.

https://addons.mozilla.org/en-US/firefox/addon/1843

Codtech

Get the ‘dreamweaver’ editing spirit on the fly

https://addons.mozilla.org/en-US/firefox/addon/1002

That’s it a few but useful extensions. If you want to add anyother you feel is missing here, feel free to leave a comment.