O titulo desse post poderia ser "Criando cache de imagens no browser". Mas eu queria também apresentar uma ferramenta bem legal. O nome dela é Page Speed.
Eu usei essa ferramenta pra avaliar algumas partes de um site do qual eu não participei do desenvolvimento desde o começo. E ela foi bem eficiente em me mostrar os pontos onde eu podia melhorar o desempenho. Então foi só aplicar algumas correções rápidas e pronto. A pagina ficou um foguete.
Essa ferramenta é do próprio google e é um plugin para firebug. Ela esta com certeza na minha lista de must have de ferramentas de desenvolvimento. Você pode conseguir o Page Speed aqui.
O problema que ela identificou, era que algumas imagens não estavam sendo colocadas no cache do navegador. Porque eram redimensionadas on the fly pelo php e o header não era setado apropriadamente. Eu falei sobre cache em outro post, mas nesse caso especifico eu deixei faltando algum exemplo de código de como implementar o uso do cache do navegador. Então tá ai:
$etag = md5_file($foto);
$lastModified = gmdate("D, d M Y H:i:s", filemtime($foto)) . " GMT";
$expires = 604800;
header("Cache-Control: max-age= $expires, private");
header("Expires: $expires");
header("Pragma: cache");
header('Content-type: image/jpeg');
header("Last-Modified: $lastModified");
header("Etag: $etag");
if (@strtotime($_SERVER['HTTP_IF_MODIFIED_SINCE']) == $lastModified ||
trim($_SERVER['HTTP_IF_NONE_MATCH']) == $etag) {
header("HTTP/1.1 304 Not Modified");
exit;
}Com esse script o browser vai fazer cache da imagem o que vai evitar requisições desnecessárias. Em vez de baixar toda imagem a cada request, ele vai baixar apenas HTTP/1.1 304 Not Modified. Além disso vai evitar o resample que é feito a cada request da imagem, que era o meu caso. Pra resolver o resample é mais indicado fazer o cache no próprio servidor, mas isso é só gravar a img em uma pasta já redimensionada.
