Web Sites de Alta Performance (Frontend)

Sabemos que bancos de dados relacionais costumam ser o gargalo das aplicações web, por isso quando falamos de performance é mais comum focar no processamento do servidor. Já escrevi um post sobre escalabilidade e performance. Porém, muitas vezes não nos preocupamos com o conteúdo que estamos escrevendo nas páginas e as vezes os dados estão prontos para ser exibidos ao usuário mas o browser está se matando para renderizar o conteúdo. Segundo Steve Souders, do Google e autor do livro “High Performance Web Sites“, na maioria das páginas web, o lado do servidor corresponde a menos que 10 a 20 % do tempo de resposta ao usuário. Portanto devemos nos focar nos outro 80 a 90 % de tempo de resposta, que é no lado do cliente (frontend).

Dentre os 80 a 90 % de tempo de resposta, o carregamento do HTML gasta somente 10% da demora. O restante do tempo fica a cargo de Imagens, CSS, Javascript e outros componentes. A maior parte do tempo é gasto fazendo download desses componentes quando ainda não estão cacheados no browser, e ainda tem um tempo para persear  HTML, scripts, e stylesheets.

O livro “High Performance Web Sitesimagem12” fala de 14 regras de performance a considerar ao desenvolver um web site. As regras são:

  • Faça pouco HTTP request
  • Use um CDN
  • Adicione um Expiramento no header
  • Compacte componentes
  • Coloque styles no topo
  • Mova scripts para o final
  • Evite Expressões CSS
  • Faça JS e CSS externos
  • Reduza DNS lookups
  • Minimize JavaScript
  • Evite redirects
  • Remova scripts duplicados
  • Configure ETags
  • Permitir que AJAX faça uso de cache

Configurações

Podem ser feitas configurações  no servidor passando parâmetros no header HTTP para fazer compressão, e manter conexões socket abertas, requisições condicionais e expiramento. Abaixo tem um exemplo de um request e response usando compactação e a mesma conexão para várias requisições (keep-alive)

Request

GET /us.js.yimg.com/lib/common/utils/2/yahoo_2.0.0-b2.js
HTTP/1.1
Host: us.js2.yimg.com
User-Agent:Mozilla/5.0(…)Gecko/20061206Firefox/1.5.0.9
Accept-Encoding: gzip,deflate
Connection: keep-alive

Response

HTTP/1.1 200 OK
Content-Type: application/x-javascript
Last-Modified: Wed, 22 Feb 2006 04:15:54 GMT
Connection: keep-alive

O Gzip reduz em aproximadamente 70% do tempo de resposta, porém evite compactar imagens e PDFs pois a compactação não será tão eficiente. O Apache 1.3 usa o mod_gzip. Já o Apache 2.X usa o mod_deflate. Essa compactação é muito boa, porém faça apenas para conteúdos estáticos, não para dinâmicos como por exemplo o JSP. Abaixo segue uma configuração no apache do mod_deflate para compactar tudo que é js e css.

imagem10

Faça Poucas Requisições HTTP

Cada imagem ou gif é uma requisição diferente ao servidor. Uma técnica interessante é chamada de Estampa CSS. Essa técnica consiste em combinar várias imagens em uma só e controlar a exibição por CSS. Considerando apenas 1 imagem contendo várias outras iamgens, será somente 1 requisição ao servidor.

imagerollover

<div style=”background-image: url(‘a_lot_of_sprites.gif’);

background-position: -260px -90px;

width: 26px; height: 24px;”>

</div>

Outro padrão é a combinação de Scripts e Estilos. Cada arquivo Javascript ou css chamado na página é uma requisição diferente. Combinar os arquivos js em apenas um, faz que haja apenas uma requisição no servidor.
imagem81
9 Requisições !
Porém, juntar tudo em um pode dificultar um pouco a manutenção desses arquivos, por isso existem frameworks que facilitam esse trabalho. No Rails, podemos usar:
<%= javascript_include_tag “prototype”, “cart”, “checkout”, :cache => “shop” %>
E fazer uma única camada usando:
<script type=”text/javascript” src=”/javascript/shop.js”></script>
Os estilos css devem ser chamados no início do arquivo para o browser já saber como renderizar a página. Essa forma não vai diminuir o tempo de carga dos arquivos nem a quantidade de requisições, porém diminui o tempo de resposta do usuário. Já os scripts devem ficar no final do arquivo pois o browser faz várias requisições em paralelo, porém os arquivos js não podem ser baixados simultaneamente. Se houver muitos js no início, o browser espera baixar esses arquivos e somente depois começa a renderizar outros componentes da tela, causando uma sensação de congelamento na página.
imagem11
Na imagem acima o browser começa a carregar simultaneamente um componente css e um componente js, porém o segundo componente js só vai ser carregado depois que o primeiro javascript terminar de carregar.
Faça Javascript e CSS arquivos externos, pois você pode aproveita-los em outras páginas, além de usufruir do recurso de cache do browser. Quando o javascript é carregado ele fica no que chamamos de Primed Cache, e se outra página fazer uso desse javascript ela vai pegar do cache e não do servidor.
AJAX

O AJAX é bastante usado nas páginas web hoje em dia, porém temos que nos preocupar em enviar as mesmas requisições repetidamente ao servidor. Podemos controlar essas requisições com parâmetros para verificar se a informação que estamos solicitando já não foi requisitada antes. Outro exemplo é o autocomplite. É recomendado que o usuário digite pelo menos umas 3 letras para fazer a requisição ajax, porém ele pode continuar digitando mais letras e para cada letra digitada será enviado uma requisição a mais ao servidor. Vai do bom senso alterar essa regra para evitar muitas requisições.
Tabelas
Muita gente gosta de usar tabelas, colocando borda invisível, para organizar os componentes na tela. Porém essa maneira gera elementos no DOM desnecessariamente. Tem um site que mostra uma maneira mais adequada para ter o mesmo efeito sem precisar carregar uma tabela inteira.
imagem7
ETag
Entity Tags (ETags) são um mecanismo que web servers e browsers usam para validar componentes cacheados. O Carlos Brando escreveu dois posts interessantes sobre o assunto, em Rails,  aqui e aqui.
Ferramentas
Existem ferramentas para compactação, como por exemplo: JSMin, ShrinkSafe, Packer, YUI Compressor. Sobre essa última o Paulo Siqueira escreveu um post muito interessante aqui.
Confiram uma palestra de Steve Souders na época que trabalhava no Yahoo.
Screencast
Para quem gostou do assunto tem um screencast muito interessante disponibilizado pela Treina Tom chamado “Otimização de Performance com uso de Padrões Web”
O Renato Elias escreveu um post muito interessante sobre Escalando para alguns milhares, páginas WEB.
Tem outra apresentação interessante aqui.  Apresentação é do pessoal de Stanford, descreve basicamente como medir o tempo de renderização das páginas web pelos browsers e mostra algumas estratégias para diminuir esse tempo.

4 Respostas to “Web Sites de Alta Performance (Frontend)”

  1. Renato Elias Says:

    Só um detalhe, Steve Souders, fez esse livro enquanto estava no yahoo, http://developer.yahoo.com/performance/rules.html, inclusive existe uma palestra no youtube, mostrando ao vivo, tudo isso =) recomendo assitir.

  2. André Faria Gomes Says:

    Grande Almeidão! Bom trabalho cara. Parabéns!
    São todas dicas realmente muito utéis.
    Abraço

  3. Paulo Siqueira Says:

    Legal o artigo =D

    Uma ferramenta que ajuda muito no trabalho de otimização é o plugin YSlow (e o FireBug, é claro!), para o Firefox – ele analiza a página carregada e mostra os problemas dela, usando inclusive o que está sendo explicado no link que o Renato Elias postou =)

    abraços!

  4. Paulo Siqueira Says:

    Esqueci de linkar as ferramentas…

    FireBug: https://addons.mozilla.org/en-US/firefox/addon/1843
    YSlow: http://developer.yahoo.com/yslow/

    Lembrando que o YSlow funciona como um complemento do FireBug, então você precisa do primeiro para utilizar o segundo.


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

%d blogueiros gostam disto: