Performance Is a Feature

A criação de aplicativos rápidos e responsivos não é importante apenas para seus usuários, mas também para o cumprimento de sua meta. Por exemplo, o Google agora incorpora a velocidade do site no ranking da página (link em inglês). A Amazon constatou que cada aumento de 100 ms no tempo de carregamento de uma página diminuia as vendas em 1% (link em inglês). Além disso, a Microsoft descobriu que reduzir o carregamento de uma página em dois segundos diminuia os cliques em anúncios em 4% (link em inglês).

A otimização de um aplicativo da web passa por todos os aspectos do desenvolvimento: do servidor e da rede ao cliente. Manter o foco no desempenho é fundamental para seu sucesso.

Themes

• Armazenar localmente. Dados armazenados no cliente são mais rápidos de serem acessados do que os armazenados no servidor. Dados armazenados próximos ao cálculo também são mais fáceis de serem acessados.
• Processar em segundo plano. É necessário que todo procedimento que não ajude o usuário a obter uma resposta para sua ação seja executado em segundo plano.
• Minimizar conexões. Cada conexão requer trabalho para a instalação e desmontagem.
• Diminuir largura de banda. Uma largura de banda menor representa respostas mais rápidas.

Technologies

• Armazenamento em cache HTTP Permitir que clientes e servidores reduzam conexões e largura de banda.
• Servidores de cache HTTP Servidores como Varnish (página em inglês) e Squid (página em inglês) podem armazenar seu conteúdo em cache.
• Memcache Armazenamento eficiente do lado do servidor e recuperação de dados de chave/valor
• Serviços da web: Executar JavaScript em segundo plano, em paralelo com a janela principal
• empty data Comunicação bidirecional de transmissão eficiente
• Armazenamento local Armazenamento de dados chave/valor no lado do cliente
• Banco de dados indexado Armazenamento de objetos simples do lado do cliente
• Cache do aplicativo Armazenando ativos de aplicativos da web localmente em cache para uso off-line
• transições e animações em CSS3 Mudanças de propriedades para elementos nativos (e possivelmente acelerados por hardware)
• CSS sprites Combinando várias pequenas imagens em uma imagem, reduz downloads
• Efetuando pré-busca de link Solicite ao navegador que faça o download de outras páginas em segundo plano
• Cliente nativo Executar código nativo (C/C++) na sandbox do navegador
• Conexões HTTP persistentes enviar vários recursos através da mesma conexão
• Fontes da web processar texto em ambiente nativo em vez de fazer o download de imagens
• URI de Dados Incorporar dados binários como imagens em HTML, reduzindo as solicitações HTTP

Techniques

• Cache HTTP Utilize "If-Modified-Since" e ETags para reduzir o conteúdo de transferência eletrônica.
• Cache de dados Utilize sistemas como Memcache para dados acessados ​​com frequência.
• Armazenamento em cache de dados locais Envie os dados para o cliente para acesso mais rápido.
• Redes de fornecimento de conteúdo Facilite a disponibilização de conteúdo para seu cliente com um CDN.
• Recuperação eficiente dos dados Minimizar chamadas SQL, reduzir junções, recuperar através de um índice.
• Pré-cálculo de resultados Desnormalizar ou pré-calcular dados frequentemente recuperados.
• Minification Reduza seus arquivos JavaScript, CSS, e até mesmo HTML.
• compressão Comprimir seus ativos através da Codificação de Aceitação do HTTP.
• Retornos de chamada assíncronos Adie o trabalho e seja notificado quando estiver pronto.
• Aceleração de hardware Navegadores agora estão usando a unidade de processamento gráfico para ferramentas como canvas e transforms.
• Aproximar cálculos aos dados Dados são mais importantes que algoritmos. Ajuste o código, não os dados.
• Criação de perfil Utilize ferramentas para coletar e compreender dados da vida real. Não suponha, meça.
• Sprites Posicione muitas imagens em um único arquivo, minimizando as solicitações HTTP.
• Otimização de imagem Comprimir suas imagens. Escolha o melhor formato para a tarefa.
• Especificar largura e altura da imagem Faça o navegador renderizar o contorno das imagens antes de fazer o download delas.
• Posicione o JavaScript na parte inferior de seu HTML Deixe o download da página ser feito e inicie o render.
• Processamento no cliente Em vez de fazer o download de ativos, utilize canvas para desenhar imagens e fontes para processar texto.
• Leia "Sites de alto desempenho" e "Sites ainda mais rápidos" Aborda em detalhes o desempenho de aplicativos da web

Tools

• Ferramentas de desenvolvedor para o Google Chrome e Safari (links em inglês) Visualize detalhes de solicitações, caminhe pelo DOM, defina pontos de quebra do JavaScript, saiba o que acontece nos bastidores
• Dragonfly (link em inglês) para o Opera Similar a Ferramentas de Desenvolvedor Webkit, mas para o Opera
• Firebug (link em inglês) para o Firefox Semelhante ao Opera Dragonfly, mas para o Firefox.
• Painel de Auditoria (página em inglês) nas ferramentas de desenvolvedor. Obter sugestões para acelerar seu aplicativo da web
• Speedtracer (link em inglês) - não apenas para GWT. Veja o plug-in Ruby (link em inglês) Identificar e corrigir problemas de desempenho em seu aplicativo da web
• YSlow (página em inglês) para Firebug Como o Painel de auditoria das ferramentas de desenvolvedor, mas para o Firefox
• Closure JavaScript Compiler (link em inglês) Minify, reduzir e obstruir seu JavaScript
• Texto da mensagem Compressor YUI (conteúdo em inglês) Minify e obstruir seu JavaScript e CSS
• WebPageTest (link em inglês) Uma colaboração do mercado fornecendo a infra-estrutura de testes para a execução de testes em todo o mundo

Further Reading

• Let's make the web faster
• High Performance Web Sites
• Even Faster Web Sites
• The psychology of web performance
• Practical guide to controller experiments on the Web