Fazer menos requisições HTTP
Baseado em um ótimo livro entitulado “Alta perfomace em sites web” do autor Steve Souders, vou tentar resumir alguns passos importantes para tornar os sites da web mais rápidos.
Começando hoje 11 de junho de 2010 uma série bem interessante!
1. Primeiro Passo (pessoalmente o mais importante passo para tornar seu site mais rápido).
Fazer menos requisições HTTP.
Antes de comerçamos a etapa de códificação, vamos primeiro entender alguns pontos do protocolo HTTP (Hypertext Transfer Protocol). O HTTP é um protocolo cliente/servidor que realiza requisições e respostas. Um browser envia uma requisição HTTP para uma url específica, e o servidor, hospedado aquela URL envia de volta uma resposta HTTP. Dos vários protocolos existentes o protocolo GET é o mais usado no serviços para web, mais também é utilizado o POST(envia), GET(recebe), HEAD(cabeçalho), PUT(colocar), DELETE(apagar), OPTIONS(opções) e TRACE(depuração).
Como esse artigo é baseado no livro que foi citado no inicio no artigo vamos nos concentrar no protocolo GET(pelo menos por enquanto).
GET /hugohenrique.com/common/js/jquery.js
HTTP/1.1
Host: hugohenrique.com.br
User-Agent: Mozilla/6.0 (…) Gecko/20101106 Firefox/3.0.6
*Compactar
Para reduzir o tamanho da resposta entre servidor e cliente os browser dispoe do cabeçalho Accept-Encondig (codificação para conteúdo).
GET /hugohenrique.com/common/js/jquery.js
HTTP/1.1
Host: hugohenrique.com.br
User-Agent: Mozilla/6.0 (…) Gecko/20101106 Firefox/3.0.6
Accept-Encoding: gzip,deflate
*Expires
Estando que as requisições GET ajudam o carregamento das paginas com mais velocidade, mais aindam precisam fazer uma ida e volta com o cliente e servidor para checar a validade do seu conteúdo. O cabeçalho expires remova a necessidade, permitindo que o browser use uma cópia do compoente.
*Keep-Alive
Também conhecida como conexões persistentes o mesmo foi introduzido para resolver o problema que gerava ineficiência de abrir e fechar múltiplos soquetes de conexão. como alguns browser’s ainda não aceitam o tunelamento essa é ainda a melhor forma que os browsers e servidores podem se tornar mais eficiente para usar sockets de conexão HTTP, sendo que isso é ainda mais usado/importante para HTTP(conexão segura).
GET /hugohenrique.com/common/js/jquery.js
HTTP/1.1
Host: hugohenrique.com.br
User-Agent: Mozilla/6.0 (…) Gecko/20101106 Firefox/3.0.6
Accept-Encoding: gzip,deflate
Connection: keep-alive
Então vamos para 1ª regra da nossa série que o livro aborda como “Regra de outro”.
- Estampas CSS (CSS sprites)
Hoje bastante utilizado o css sprites permite que você combine imagens tornando técnicamente muito mais flexível.
Como usavamos por exemplo:
.barra-meio { background:url(barra-meio.jpg) no-repeat; }
.barra-bottom { background:url(barra-bottom.jpg) no-repeat; }
(usamos dois arquivos sendo eles: barra-meio.jpg e barra-bottom.jpg)
Ae obtemos duas requisições aos arquivos de imagem a técnica CSS Sprites vem justamente para tornar em várias requisições em apenas uma, você deve está se perguntando mais como isso… eu te repondo desta forma:
.barra-meio { background-image:url(barras.jpg); background-position:-200px -50px; }
.barra-bottom { background-image:url(barras.jpg); background-position:110px 80px; }
(usamos apenas uma requisição implicando em apenas 1 requisição)
- Scripts e Folhas de Estilo combinados.
Sendo bastante usados hoje em dia o srº Javascript e o CSS devem ser usados como arquivos externos, como sabemos que já foi comprovado que o uso de arquivos externos traz redução no carregamento da sua página, sendo que queremos reduizir as requisições.. por exemplo..
requisitamos vários arquivos como:
/** CSS */
global.css
style.css
/** JS */
jquery.js
utils.js
bottom.js
tool.js
por mais que tentamos reduzir nossas funções sempre precisamos criar vários arquivos claro que isso depende muito projeto que você esteja infrentando.. de modo a proposta que iremos vê será…
se infelizmente precisamos fazer tantas requisições e precisamos deixar nosso site mais rápido para ser carregado… pensamos… não é possível..
Calma.. calma.. vamos pensar..
Hum.. uma solução unificar seus arquivos js em apenas 1 ou seja existem várias ferramentas que minimizam os scripts conheço e utilizo esse http://code.google.com/p/minify/ no site você encontra como utiliza-lo então voltando a questão da unificação dos arquivos… nos fizemos no exemplo acima fizemos 4 requisições então utilizando a tecnica da unificação seria apenas 1 requisição para os js.
desse modo podemos concluir que quantos menas requisições mais rápido, será o carregamento do nosso site. (FAÇA MENAS REQUSIÇÃO HTTP)