Sergio Álvarez (xergio)

Me ha recordado una barbaridad de conceptos que tenía olvidados, y voy a apuntarlos para que esto no vuelva a pasar. Muchas de las cosas que me ha contado las tiene ya apuntadas en su web como ¿Por qué y cómo crear un espacio web "cache friendly"?.

Lo primero que hicimos fue habilitar compresión Gzip en Apache. Yo uso apache2, así que usé el mod_deflate con la siguiente configuración:

<IfModule mod_deflate.c>
    # Insert filter
    SetOutputFilter DEFLATE

    # Netscape 4.x has some problems...
    BrowserMatch ^Mozilla/4 gzip-only-text/html

    # Netscape 4.06-4.08 have some more problems
    BrowserMatch ^Mozilla/4.0[678] no-gzip

    # MSIE masquerades as Netscape, but it is fine
    BrowserMatch bMSI[E] !no-gzip !gzip-only-text/html

    # Don't compress images and files that are already compressed
    AddOutputFilterByType DEFLATE text/html text/plain text/xml
    SetEnvIfNoCase Request_URI .(gif|jpeg|jpg|png)$ no-gzip dont-vary

    <IfModule mod_headers.c>
        Header append Vary User-Agent env=!dont-vary
        Header unset Expires
        Header unset Cache-Control
        Header unset Pragma
    </IfModule>
</IfModule>

Esto entre otras cosas lo que hace es comprimir documentos que no sean imágenes o similares, los cuales ya van en parte comprimidos por su formato correspondiente. También me he cargado cabeceras HTTP referentes a la caché de los navegadores para que estos actúen con libertad en ese aspecto. Hay que decir que esto no va del todo bien, pero bueno, al menos los documentos HTML por ejemplo ya ocupan 3/4 partes menos. Mismamente la portada de este blog pesaba unos 16KB y ahora solo son unos 4KB.

Una vez que los navegadores tienen libertad para cachear imágenes y demás, hemos modificado el script que muestra las fotos de este blog para que le diga al navegador la antigüedad del archivo y este pueda cachearla sin problema, evitando así que cada vez se carguen de nuevo las fotos y el consiguiente aumento de ancho de banda. Para ello no tendremos más que enviar la última fecha de modificación de la imágen. Si el navegador la ha cacheado en una visita anterior, al pedir de nuevo la foto enviará la fecha de la foto que él tiene retenida, y si es igual a la que yo tengo no hace falta que la vuelva a cargar, le digo que no la he cambiado y que use la suya:

// obtengo la fecha de modificación
$mtime = filemtime($this->path($tamano));
// si el navegador tiene una cacheada...
if (isset($_SERVER['HTTP_IF_MODIFIED_SINCE'])) {
    $ims = preg_replace('/;.*$/', '', $_SERVER['HTTP_IF_MODIFIED_SINCE']);
    $ims_unix = strtotime($ims);
    //
    // comparo la fecha de la suya con la de la mia
    if ($ims_unix == $mtime) {
        // y si coinciden le digo que nada, que use la suya
        header("HTTP/1.0 304 Not Modified");
        exit;
    }
}
// si no tiene la imágen cacheada le digo la fecha de la mia
header("Last-modified: " . gmdate("D, d M Y H:i:s", $mtime) . " GMT");

Esto me va a ahorrar la carga de muchas imágenes que antes lo hacían de forma innecesaria. Además será más cómodo para los visitantes, porque la primera carga será como siempre, lenta, pero luego irá como un tiro.

Por último he hecho algo similar en los documentos HTML. El resultado de lo que se supone que será la página lo guardo en memoria, genero un identificador único a partir de todo el código, y ese identificador lo mando en una cabecera llamada ETag. Con ese identificador, el navegador me lo devuelve en otra cabecera distinta al volver a pedir la página en otra ocasión, y si ese identificador es igual a la página que le voy a mostrar, le digo que no, que muestre la que tiene él y así no me hace consumir ancho de banda. En cambio si son diferentes ya le mando el código HTML nuevo y que el navegador haga con él lo que quiera, cachearlo, desecharlo, etc.:

// al principio del código pongo...
ob_start();
//
// por aquí html, cófigo php, lo que sea
//
// y al final ya obtengo lo que hay en memoria
$dochtml = ob_get_contents();
ob_end_clean();
//
// genero el identificador
$sha1dochtml = sha1($dochtml);
// y si el que me envia el cliente/navegador es igual al mio
if ($_SERVER['HTTP_IF_NONE_MATCH'] == '"' . $sha1dochtml . '"') {
    // le digo que muestre su documento directamente
    header("HTTP/1.0 304 Not Modified");
    exit;
//
// y sino pues nada, le mando el documento nuevo y el ETag nuevo
} else {
    header('ETag: "' . $sha1dochtml . '"', true);
    echo $dochtml;
}

Bueno, creo que se puede mejorar bastante el texto. jcea me dió permiso para colgar el log de la conversación pero eso ya con más tiempo, porque aunque no los creáis son las 8 de la tarde y yo aun no me he acostado :o (la noche anterior claro). Hoy fijo que no me acuesto tarde ni me despierto a las 3 como siempre :D

Una vez más, gracias jcea, hoy nos has sorprendido a más de uno :)