Especificar caché de navegador

Google nos proporciona muchas herramientas que nos ayudan a optimizar nuestra web. Una de de ellas es https://developers.google.com/speed/pagespeed/insights que de un vistazo nos proporciona el estado actual de una URL dada y nos proporciona algunos consejos y recomendaciones para mejorar su score o ratio.

En esta ocasión voy a hablar de una de las facetas que mide y cómo aplicar la solución para mejorarla.

Una de las posibles recomendaciones que te encontrarás, estará bajo el apartado:

Especificar caché de navegador

Establecer una fecha de caducidad o una edad máxima en las cabeceras HTTP de los recursos estáticos indica al navegador que cargue los recursos descargados previamente del disco local en lugar de hacerlo a través de la red.

Con esta recomendación lo que google nos dice que tendríamos que especificarle al navegador (Chrome, Firefox, IExplorer…)  la caducidad de los ficheros estáticos, tipo imágenes, CSS, Javascript ….

Con esto lo que se pretende es que si ya habíamos accedido a una Web para consultar una información, y otro día accedemos a la misma Web para consultar otra vez la misma información, pues que nuestro navegador sepa si tiene que descargar esas imágenes o en su lugar utilizar la versión que ya había descargado en la primera vez que accedimos al sitio y así evitar el consumo excesivo de la red, y de paso hacer más ágil y rápida la apertura de la web.

Vamos a suponer que tienes una instalación de WordPress, y tienes activada la funcionalidad de caché a través de algún plugin tipo WP Super Caché o W3 Total Cache, y que tu servidor es Apache y tiene activado el módulo mod_expires.c. La forma más facil y directa de conseguir especificar la edad máxima en las cabeceras HTTP es mediante el fichero .htaccess , añadiendo las siguientes líneas:

<ifmodule mod_expires.c>
ExpiresActive On
ExpiresDefault A3600
<filesmatch ".(jpg|JPG|gif|GIF|png|css|ico|js)$">
ExpiresDefault "access plus 7 day"
</filesmatch>
</ifmodule>

Una versión más ampliada y completa (y que normalmente viene con la instalación por defecto del plugin W3TC, sería la siguiente:

 

<ifmodule mod_expires.c>
    ExpiresActive On
    ExpiresByType text/css A31536000
    ExpiresByType text/x-component A31536000
    ExpiresByType application/x-javascript A31536000
    ExpiresByType application/javascript A31536000
    ExpiresByType text/javascript A31536000
    ExpiresByType text/x-js A31536000
    ExpiresByType text/html A3600
    ExpiresByType text/richtext A3600
    ExpiresByType image/svg+xml A3600
    ExpiresByType text/plain A3600
    ExpiresByType text/xsd A3600
    ExpiresByType text/xsl A3600
    ExpiresByType text/xml A3600
    ExpiresByType video/asf A31536000
    ExpiresByType video/avi A31536000
    ExpiresByType image/bmp A31536000
    ExpiresByType application/java A31536000
    ExpiresByType video/divx A31536000
    ExpiresByType application/msword A31536000
    ExpiresByType application/vnd.ms-fontobject A31536000
    ExpiresByType application/x-msdownload A31536000
    ExpiresByType image/gif A31536000
    ExpiresByType application/x-gzip A31536000
    ExpiresByType image/x-icon A31536000
    ExpiresByType image/jpeg A31536000
    ExpiresByType application/json A31536000
    ExpiresByType application/vnd.ms-access A31536000
    ExpiresByType audio/midi A31536000
    ExpiresByType video/quicktime A31536000
    ExpiresByType audio/mpeg A31536000
    ExpiresByType video/mp4 A31536000
    ExpiresByType video/mpeg A31536000
    ExpiresByType application/vnd.ms-project A31536000
    ExpiresByType application/x-font-otf A31536000
    ExpiresByType application/vnd.oasis.opendocument.database A31536000
    ExpiresByType application/vnd.oasis.opendocument.chart A31536000
    ExpiresByType application/vnd.oasis.opendocument.formula A31536000
    ExpiresByType application/vnd.oasis.opendocument.graphics A31536000
    ExpiresByType application/vnd.oasis.opendocument.presentation A31536000
    ExpiresByType application/vnd.oasis.opendocument.spreadsheet A31536000
    ExpiresByType application/vnd.oasis.opendocument.text A31536000
    ExpiresByType audio/ogg A31536000
    ExpiresByType application/pdf A31536000
    ExpiresByType image/png A31536000
    ExpiresByType application/vnd.ms-powerpoint A31536000
    ExpiresByType audio/x-realaudio A31536000
    ExpiresByType image/svg+xml A31536000
    ExpiresByType application/x-shockwave-flash A31536000
    ExpiresByType application/x-tar A31536000
    ExpiresByType image/tiff A31536000
    ExpiresByType application/x-font-ttf A31536000
    ExpiresByType audio/wav A31536000
    ExpiresByType audio/wma A31536000
    ExpiresByType application/vnd.ms-write A31536000
    ExpiresByType application/vnd.ms-excel A31536000
    ExpiresByType application/zip A31536000
</ifmodule>