Uma ferramenta importante na otimização de sites é a utilização do cache no Browser. Vamos a um exemplo prático para implementação de cache em solicitações de imagens, que podem ser implementadas em um handler ou também estendidas para CSS, JS, etc.
Primeiro vamos entender o funcionamento do mecanismo de cache utilizado pelo browser (HTTP 1.1):
- Quando o cliente faz uma requisição pela primeira vez, o servidor envia o código de resposta "200 OK", que pode vir junto com o header If-None-Match. O If-None-Match contém uma assinatura utilizada para validar o recurso em futuras requisições, pode a data da última modificação ou um MD5.
- Em futuras requisiçõs ao mesmo recurso, o browser envia o header If-None-Match com o valor recebido anteriormete. Caso esta assinatura esteja válida, o servidor pode retornar o código de resposta "304 Not Modified", não precisando enviar novamente o recurso solicidado.
Depois desta explicação muito básica sobre HTTP vamos a um exemplo de código:
string fileName = Request.QueryString["picture"];
string folder = "/imagens";
FileInfo fi = new FileInfo(Server.MapPath(folder) + fileName);
if (fi.Exists)
{
string etag = "\"" + fi.CreationTimeUtc.GetHashCode() + "\"";
string etag = "\"" + fi.CreationTimeUtc.GetHashCode() + "\"";
Response.ContentType = "image/jpeg";
Response.Cache.SetCacheability(HttpCacheability.Public);
Response.Cache.SetExpires(DateTime.Now.AddYears(1));
Response.Cache.SetLastModified(fi.CreationTimeUtc);
Response.Cache.SetETag(etag);
if (String.Compare(incomingEtag, etag) == 0)
{
Response.StatusCode = (int)System.Net.HttpStatusCode.NotModified;
}
else
{
Response.TransmitFile(fi.FullName);
}
}
else
{
Response.Status = "404 Bad Request";
}
A aplicação de chaching pode poupar muita banda... imaginemos que uma página possua 20 imagens com um tamanho de 2K, teriamos uma econimia de aproximadamente 40K apartir do segundo acesso à página.