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

velocidad

Desde que Google incluyó en su algoritmo la velocidad de carga de la web, activar la caché del navegador sirve para mejorar la velocidad de carga, sobre todo si tus visitantes son recurrentes y, en todo caso, el posicionamiento de tu web.

¿Para qué sirve la caché?

La caché de imágenes del navegador sirve, como vimos anteriormente, para mejorar el rendimiento de las páginas web, reduciendo el tiempo de carga, el ancho de banda y los costes de alojamiento.

¿Cómo especificar cuándo expiran las imágenes?

En servidores Apache es muy fácil determinar el tiempo que los archivos deben permanecer en la caché. Tienes que editar el archivo .htaccess del directorio de imágenes y añadir el siguiente código:

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

Este código indica que los archivos de imagen y los archivos css deben caducar a los 7 días. Como las imágenes que utilizamos en el diseño de un sitio web no se cambian a menudo, podemos usar un vencimiento de 30 días o más, Google recomienda 31.

Si usas Firebug con PageSpeed…

Si te ayudas de Firebug, junto con PageSpeed, para optimizar tus páginas web es muy posible que te hayas encontrado con esto:

Cache navegador

Te suena ¿verdad? dentro está el listado de los archivos cacheables que contiene la página y en paréntesis si se ha especificado o no un tiempo de caché para cada uno de ellos.

Imágenes en caché

Después de añadir ese código a Todotutoriales, PageSpeed nos ha subido dos puntos y nos devuelve este listado:

Caducidad cachéComo ves, ya solo alerta del favicon.ico, el resto de los archivos que aparecen son los de Youtube y los de Facebook, pero sobre esos no tenemos control, ya que están en servidores ajenos a los que no tenemos acceso. Pero no te preocupes, porque al cabo de unas horas/días ya cachea bien el favicon:

Cache

22 comentarios en “Cómo especificar la expiración de imágenes en caché

  1. Saludos e intentado implementar vuestro codigo en una web echa con joomla y con servior Apache y no me a sido posible me devuelve una fallo de servidor 500

    ¿alguna idea sobre lo que podria hacer con esto?
    gracias por las posibles respuestas

    1. Hola Carlos, se me ocurre que podría ser un problema con las comillas (“). Saldrás de dudas si pruebas editando en texto plano (ASCII) y reescribiendo las comillas después de copiar-pegar el código. ¡Suerte!

  2. Efectivamente tal como dice zanguanga reescribiendo las comillas no da el error, pero no tiene efecto sobre la expiración de la cache pues me sigue saliendo expiration not specified) en todas las imagenes

  3. Ok gracias todotuto
    Creo que debe ser porque tengo la web sin hojas de estilo o algo mas que influye porque también me da error Enable Keep-Alive la herrameinta de google pagespped en todas las imagenes. y despúes de poner vuestro código resulta curioso que el score me baja del 50% al 49. es decir que lo complico mas

    1. Hola wus. Puedes añadir el tipo de archivo que quieras en la segunda línea, por ejemplo:
      |flv|js|mp4
      y así con todos los archivos cacheables incluidos htm, php, etc.

      Como advertencia solo decir que cada cual lo haga bajo su responsabilidad, ya que quizá esto aumente el consumo de recursos del servidor.

  4. Yo tengo una duda:

    Resulta que pongo el código y tal y como dices aumenta dos puntos. Al ponerlo digamos que desaparece del listado todo lo que se encuentra en la carpeta del .htaccess. El problema viene cuando veo que del listado no han desaparecido imágenes del listado, correspondientes a subcarpetas del directorio raíz. ¿con el tiempo serán quitadas del listado o hay que hacer alguna otra modificación?

  5. Respecto a la duda que puse hace dos días, parece ser que google va metiendo en sus sistema las imágenes que se encuentran en las subcarpetas del directorio raíz, por lo que pasadas unas horas / días se van incluyendo todas

  6. hola! estoy usando el page speed con firebug en firefox y busque esto porque no entoendo… osea el cache ya tengo ideao ok pero osas configuraciones donde las hago? en la plantilla del blogger? o es algo que el blogger debe traer por defecto? oo es algo q se hace en un servidor propio?… estoy confundido si me puedes sacar de la duda gracias amigo.. hey y te invito que conoscas mi blog http://yoenmimoto.blogspot.com estoy nuevito pero me ayudarian mucho tus consejos, gracias!

    1. Los cambios que se explican en este tutorial se hacen en el archivo .htaccess. Este archivo funciona en servidores Apache, pero ignoro si los usuarios de blogspot.com tienen acceso al mismo.

  7. Hola, tengo una duda, eh puesto el codigo y no em da resultados, tengo un blog wordpress, es debido a eso o sera algo del hosting? porfavor agradesco sus opiniones de antemando
    Gracias
    José

  8. Que tal gracias por el tip, lo use y mejore casi un 20% mi pagespeed, al principio no me funcionaba por el tema de las comillas, lo pase a traves del bloc de notas y tampoco me andaba. termine usando este codigo con una comilla simple y anduvo:

    ExpiresActive on
    ExpiresDefault ‘access plus 31 day’

    Tengo un blog en wordpress y use el editor html de hostgator

  9. Muchá­simas Gracias ! !

    He añadido el siguiente código en mi .htaccess:

    ifmodule mod_expires.c >
    ExpiresActive On
    ExpiresDefault A604800
    filesmatch ".(jpg|JPG|gif|GIF|png|PNG|css|CSS|ico|ICO|js|JS)$" >
    ExpiresDefault "access plus 7 day"
    /filesmatch >
    /ifmodule >

    Funciona 100% y me ha subido al instante la “Page Speed Score” de 80 a 87/100 )

    Si todos siguiésemos consejos como el que comentas en este Post, creo que Internet funcionará­a 3 veces más rápido porque por las Redes no viajará­an una y otra vez los mismos datos una y otra vez. Creo que una semana de expiración de imágenes y scripts en caché para cualquier página Web estándard deberí­a ser la configuración má­nima obligatoria de serie en todos los navegadores.

    Un Saludo y de nuevo Gracias por vuestro Trabajo ! !

  10. Hola, en el ejemplo veo que determinas diferentes tiempos de expiración para determinados archivos. ¿Como logro eso?

    Tengo varios archivos png (tiempo de expiración 1 mes) y quisiera que sólo 1 en concreto, calendario.png, expirase pasado unas horas (que es el archivo que cambia cada día)

    ¿Hay alguna forma de hacerlo?

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *