Jonathas Scott ¬¬ UI/UX Designer

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…)

Yuhuu

Foi muito gratificante minha primeira apresentação pública sobre usabilidade em um evento de design, e estou muito orgulhoso disso.

Quero agradecer todos os participantes que esperaram pacientemente até as 21:00 de uma sexta-feira minha apresentação na “6ª Outubro Design”, que aconteceu no campus rio comprido da UniCarioca.

Ótimas pessoas interagindo, construindo e perguntando bastante. Espero ter respondido todas as perguntas que pude. Foi uma experiência e tanto.

Como prometi, colocarei aqui está a apresentação assim que eu ‘uplodar‘ para o slideshare.

Muito obrigado, e fiquem a vontade para conversarmos aqui também.

Vai começar a semana do “Outubro Design” na Unicarioca do rio comprido.

O evento será realizado do dia 06 a 10 de Outubro, ou seja uma semana inteira para trocas e compartilhamento de idéias de profissionais de diversos segmentos do design.

Diogo Reis está organizando o evento, e eu tive o prazer de ser chamado para uma apresentação sobre Usabilidade com o tema de minha monografia: “Second-Life e Experiência do usuário em sistemas inovadores para a Educação a Distância.“

Inscrevam-se aqui, nos encontramos lá !