Cómo especificar la expiración de imágenes en la caché del navegador

Ya es sabido que la velocidad de carga de la web es uno más de los parámetros de posicionamiento y en consecuencia a tener en cuenta para SEO. Por ello activar la cache del navegador es muy importante parte del SEO para mejorar la experiencia de los visitantes recurrentes. El navegador al cachear las imágenes, css o js (scripts javascript) o cualquier otro elementos como flv o swf lo que esta haciendo es descargarlas en su ordenador físicamente, añadiendo una cabecera con el tiempo de vida TTL o fecha de expiración, de manera que el usurio cuando vuelve a ésta determinada página, los elementos que hemos especificado que se cachen se tomaran del pc del cliente y no de la web, mejorando la carga de la página, reduciendo el consumo de ancho de banda del servidor, y en definitiva mejorando la experiencia del usuario, haciendo que el proceso de carga sea mas rápido.

Como especificar cuando expiran las imágenes, css o javascript

Los servidores apache suelen traen el mod_expires instalado y activo, de manera que no habrá que tocar nada en este sentido. Tan sólo indicar las directivas de expiración en el archivo .htaccess de la siguiente manera

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

O se puede complicar un poco más especificando diferentes caducidad para cada grupo de archivos

<ifmodule mod_expires.c>
 ExpiresActive On
 ExpiresDefault A3600
 <FilesMatch ".(gif|jpg|jpeg|png|swf)$">
 # 2 weeks
 ExpiresDefault A604800
 Header append Cache-Control "public"
 </FilesMatch>
 <FilesMatch ".(xml|txt|html)$">
 # 2 hours
 ExpiresDefault A604800
 Header append Cache-Control "public"
 </FilesMatch>
 <FilesMatch ".(js|css)$">
 # 3 days
 ExpiresDefault A604800
 Header append Cache-Control "public"
 </FilesMatch>
</ifmodule>

En caso de que no tengamos configurado el mod_expires en nuestro apache, no nos dará ningún error, aunque no conseguiremos especificar una fecha de cacheo.

En la directiva ExpiresDefault he añadido varios tipos de tiempo:

• ExpiresDefault A3600 una hora

• ExpiresDefault A604800 para una semana

Para aquellos que usen el firebug y el modulo pagespeed de Google podrán comprobar que la opción “Leverage browser caching” aparece con un tic verde, éste significa que el resultado es positivo y se han seguido las recomendaciones indicadas. Muchos de nuestros elementos se han cacheado a nivel de navegador. En mi caso no he hecho nada de cache a nivel navegador para los archivos php, a pesar de que uso un sistema de cache de base de datos y html pero este es otro tipo de cacheo.

[caption id=”attachment_1816” align=”alignnone” width=”300” caption=”Pulsar para ver a mayor tamaño”][/caption]

habilitar mod_rewrite apache

En caso de que el mod_expires no este activo en el apache habrá que ir al archivo de configurar de apache: /etc/httpd/conf/httpd.conf y descomentar o introducir la siguiente linea: LoadModule expires_module /usr/lib/httpd/modules/mod_expires.so (revisar que el path en vuestra maquina sea este)

En distribuciones Debian o Ubuntu tambien se pude hacer con este simple comando

sudo a2enmod rewrite

Reinicar el servidor apache

Para distribuciones tipo CentOS

/etc/init.d/httpd restart

Debian o Ubuntu

/etc/init.d/apache2 restart