Publicidad

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.

Pulsar para ver a mayor tamaño

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

Tags de búsquedas:

Especificar caché de navegador,cache navegador time,mod_expires caducidad para javascript,imagenes que especifique la vida,imagenes cache con,especificar cache navegador joomla,especificar caché de navegador joomla,especificar cache de navegacion,especificar cache browser,como especificar la cache de navegador para las fotos

Publicidad

49 comentario/s

  1. lucas dice:

    UNA DUDA QUE TENGO ES QUE SI YO PONGO QUE GUARDE EL CACHE POR UNA SEMANA.. QUE PASA AL PASAR ESA SEMANA? SE RENUEVA POR UNA SEMANA MAS? O TENGO QUE MODIFICAR ALGO YO? ESPERO TUS RESPUESTAS.. MUCHAS GRACIAS
    LUCAS MARTINEZ

    • Pedro Ventura dice:

      No tienes que hacer nada más.
      El navegador controla las cabeceras y todo el tiempo transcurrido.
      Si ya ha pasado una semana, el objeto se refresca (porque puede haber cambiado, ya sea por ejemplo un archivo .js que metes más código) y se vuelve a cachear el objeto por una semana más.
      Si no ha pasado una semana la cabecera que te devolverá será 304 Not Modified

      • lucas dice:

        Muchas Gracias Pedro!! Muy atento en responderme la consulta y compartir lo que sabes.. por ahi tengo varias dudas para programar y me gustaria tenerte de contacto.

        • Pedro Ventura dice:

          De nada!
          bueno pues ya sabes, si quieres suscribete al feed o al newsletter y cuando vaya publicando cosillas las lees si te interesa y estás mas enterado.

          Un saludo!

          • Marisa dice:

            Hola Pedro, interesantísimo todo lo que cuentas pero yo tengo puesto lo siguiente en mi .htacces:
            Options -Indexes +ExecCGI
            AddHandler cgi-script .pl
            DirectoryIndex awstats.pl

            RewriteEngine On
            RewriteCond %{HTTP_HOST} ^www.caricaturasmontenegro.es$ [NC]
            RewriteRule ^(.*)$ http://caricaturasmontenegro.es/awstats/$1 [R=301,L]
            SetOutputFilter DEFLATE
            AddEncoding x-compress .Z
            AddEncoding x-gzip .gz .tgz
            AddType application/x-compress .Z
            AddType application/x-gzip .gz .tgz
            AddType ‘text/html; charset=UTF-8′ html
            AddOutputFilterByType DEFLATE text/php text/hTML text/txt text/xml text/css style/css

            ExpiresActive On
            ExpiresDefault A604800

            Header set Cache-Control “public, max-age=29030400″

            Pues con todo eso sigue diciendome tanto el Page-speed de google como con el gtmetrix.com me sigue diciendome lo mismo en el test sigue. Estoy desesperada ya no sé que hacer, si me pudieras ayudar, te lo agradecesía. Gracias por tu maravilloso blog.

  2. Julian Lasso dice:

    Por casualidad conoces otro método efectivo? lo que pasa es que la verdad eso que dices no me ha servido :(
    Pues tengo el apache con el modulo indicado e instalado, pero aún así en el test sigue saliendo lo mismo, y borro la caché del navegador y cargo de nuevo todo y nada sigue saliendo lo mismo :(

  3. Foxxx dice:

    Pues yo he instalado y activado el mod_expires y he añadido esas lineas a mi htaccess y parece que no cachea las imagenes. EL firbug me sigue indicando el estado 200 en vez del 304.

    ¿Hay alguna manera de saber si el mod_expires está activado correctamente?

    • Pedro Ventura dice:

      Tambien te puede funcionar si tienes el mod_deflate instalado y metido como módulo del php.
      Usa la función

      phpinfo();

      para ver que módulos tienes instalados.

  4. Javi dice:

    Hola Pedro!

    He hecho lo que indicas y me ha funcionado en parte. He copiado el .htacces tal cual lo indicas y cuando reviso con firebug acepta los datos y muestra la expiracion, lo que no muestra son las imagenes!!

    Que debo hacer para mostrar las imagenes? podrías darme una ayuda?

    Gracias!

    • Pedro Ventura dice:

      Buenas Javi,

      Intenta meter este código

      <ifmodule mod_expires.c>
          ExpiresActive On
          #ExpiresDefault A3600
          <filesmatch ".(jpg|JPG|gif|GIF|png|css|ico|js)$">
              ExpiresDefault A604800
          </filesmatch> 
      </ifmodule>
      
      <ifmodule mod_deflate.c>
          AddOutputFilterByType DEFLATE text/text text/html text/plain text/xml text/css application/x-javascript application/javascript
          <FilesMatch ".(ico|pdf|jpg|jpeg|png|gif)$">
          SetOutputFilter DEFLATE
          </FilesMatch>
      </ifmodule>
      

      Si tienes un wordpress metelo antes que las redirecciones de WP,ok?

      Ya me cuentas..

      Un saludo!

  5. Jesus Ortega dice:

    Qué tal Pedro?
    Siguiendo tus indicaciones y viendo un documento de configuración de apache (http://httpd.apache.org/docs/2.2/mod/mod_expires.html#expiresdefault)
    en el que indican la sintaxis del modulo: mod_expires.c
    he cambiado los tiempos en hexadecimal por las siguientes…
    ¿Crees que son correctas ? o es mejor poner los hexadecimales que indicas en tu post??
    Mi instalación es un wordpress, hosteado en Bluehost
    My web es
    http://neurorgs.net

    Muchas gracias por el post. Jesús
    —–
    cambios en el .htaccess
    ——–

    ExpiresActive On
    ExpiresDefault “access plus 1 month”

    # 3 meses
    ExpiresDefault “access plus 3 month”
    Header append Cache-Control “public”

    # 1 days
    ExpiresDefault “access plus 1 days”
    Header append Cache-Control “public”

    # 1 days
    ExpiresDefault “access plus 1 days”
    Header append Cache-Control “public”

    • Pedro Ventura dice:

      Hola Jesus!

      Si también he configurado htacess definiendo el tiempo como indicas y como vienen en la documentación de apache. Creo que si estuviera mal te debería de dar algún error el apache tipo error 500 o similar.

      Gracias por tu comentario!

  6. Yeison dice:

    Hola Pedro

    Por casualidad sabes hacer esto para un servidor IIS, paginas aspx.

    Gracias.

  7. martin dice:

    excelente explicacion! habra que ponerla en practica ahora :D

  8. Hugo dice:

    Hola. Me podrias decir donde coloco el archivo? entiendo que es en el .htaccess de public_html, pero si lo pongo ahi me da error 500. Se pone arriba o abajo de los que ya hay escrito ahí? muchas gracias

  9. Yeison dice:

    Hola tengo una pregunta, resulta que con la pagina de page speed me sale que debo “Especificar caché de navegador” para una imagen, esta imagen es un background. Si yo miro por firebug la imagen me sale con un estado 304 Not Modified, pero si yo miro las cabeceras no me aparece fecha de Expiración, Cómo hago para que las imagenes de bacground que uso tengan una fecha de expiración?.

    Gracias

  10. Sergio dice:

    Hola Pedro, leyendo tu artículo, lo estuve poniendo en práctica, corregí mi .htaccess con el código adjunto y me mi page speed me sigue diciendo este texto:

    “El período de validez de los siguientes recursos que se pueden almacenar en caché es muy breve. En el futuro, especifique un período de caducidad de al menos una semana para los siguientes recursos:”

    # Caché de archivos

    ExpiresActive On
    ExpiresDefault A3600

    ExpiresDefault “access plus 7 day”

    Corrijo el día y pasa lo mismo. Como puedo resolver este problema? Gracias.

    • Pedro Ventura dice:

      En vez de ExpiresDefault A3600 o poner ExpiresDefault “access plus 7 day”

      tienes que poner lo siguiente:

      ExpiresDefault A604800
      

      3600 son los segundos de una hora, por lo que el tiempo de cache es muy breve. En cambio 604800 son los segundos de una semana completa, que es un tiempo de cacheo mayor y más óptimo para éstos elementos.

      Un saludo!!

  11. Angela dice:

    ¿y si en tu servidor no funcionan los .htaccess que se hace entonces?
    ¿alguna forma de hacerlo solamente mediante php?

    • Pedro Ventura dice:

      Hola,

      No se puede hacer con php, porque esto que comento se hace a nivel de apache.

      Para cachear con php prueba con el siguiente código

      <?php
      // seconds, minutes, hours, days
      $expires = 60*60*24*14;
      header("Pragma: public");
      header("Cache-Control: maxage=".$expires);
      header('Expires: ' . gmdate('D, d M Y H:i:s', time()+$expires) . ' GMT');
      ?>
      
  12. Hector dice:

    Hola Pedro,

    Por casualidad te he encontrado vía google dado que estoy intentando optimizar al máximo un nuevo theme de WP, y al hilo de este post me surgen un par de preguntas…

    La primera es como saber que el codigo que se ha incrustado en .htacces funciona correctamente? Yo he introducido dicho código en el fichero en primer lugar y en el Speed test de google me sigue indicando que especifique la cache… Lo curioso es que son 5 imagenes de post diferentes las que reciben en tiron deorejas y el resto son urls externas y ahi va la segunda de la noche…

    Como narices puedo cachear el cdn.api.twitter (es el botoncito tipico que se pone en los posts) o FB… incluso algunos banners publicitarios de Adsense….. Estoy en un 87/100 pero no es suficiente esta este maldito error y estoy atascado!!!

    Un saludo y felicidades por el blog dad o que facilita a gente poco experta como yo ir por la buena senda!!

    • Pedro Ventura dice:

      Hola Hector,

      En primer lugar para comprobar que se esta cacheando las imágenes, .css, .js y demás tienes que ver que en las cabeceras de apache para esos elementos viene con una cabecera 304 Not Modified. Esto lo puede comprobar con este plugin de firefox https://addons.mozilla.org/en-US/firefox/addon/live-http-headers/ o te descargas un proxy debuger para esto que esta muy bien http://www.fiddler2.com/fiddler2/

      En segundo lugar, es una putada pero no puedes cachear los elementos de twitter o lo más paradójico es cuando incluyes el botón +1 de google que luego el plugin de google de page speed te dice que optimices el .js cuando es suyo. No puedes cachearlo porque el servidor que devuelve esos archivos js o lo que sea son externos y sino tienen puesto directivas de cacheo el navegador no los va a cachear y page speed siempre te dirá que los caches.

      Por otro lado, mi blog tambien está en 87/100 en el ranking de page speed, cuando lo tengo todo super cacheado, uso el servicio S3 de Amazon web services para todos los archivos de imágenes, js, css, etc, tengo cacheo en disco todos los html, etc.. y tengo el blog muy optimizado, aun así todavía no tengo el 100% de page speed

      Un saludo!

      • Hector dice:

        Hola Pedro,

        En primer lugar darte las gracias por tu pronta respuesta!!

        Me lo estaba temiendo pero mejor preguntar a un experto en la materia… Esta gente son la leche dado qeu te dan el error y resulta que es suyo!! hehe

        Bueno pues no me voy a romper mas el coco con este tema, ahora voy a pasarme por tu post de Amazon 3s + W3c plugin para rematarlo todo y a ver si se nota alguna mejora o queda todo igual….

        Aunque el otro dia probando probando al intalar el plugin me pedia desactivar el modo safe del servidor, cosa que no me hace mucha gracia… Entiendo que es solo para la instalacion qeu luego se puede volver a poner en modo ON…

        Bueno no me enrollo mas!! Mil gracias por la aclaración que me has dado, espero que igual que a mi le sirva al resto de los lectores.

        Saludos

        • Pedro Ventura dice:

          Cualquier duda que te vuelva a surgir me preguntas, ánimo! y si pruebas el S3 de Amazon esta muy bien, y es super barato, lo máximo que he llegado a pagar es 1€ el mes que más tráfico he tenido.

          un saludo!!

  13. Marisa dice:

    Perdona Pedro soy yo otra vez, es que no se ha pegado todo lo que tengo en el .htacces, te lo pongo:

    ExpiresActive On
    ExpiresDefault A604800

    Header set Cache-Control “public, max-age=29030400″

    • Pedro Ventura dice:

      Vale, vamos a ver primero comprueba que tienes el módulo cargado desde php

      Tienes que crear un php y meter este código

      <?php
      
      // Muestra toda la información, por defecto INFO_ALL
      phpinfo();
      ?>
      
      

      Ejecútalo en el navegador. Tienes que ver que se ha cargado el mod_deflate, como te indico en la siguiente imgen
      Mod deflate php

  14. edgar dice:

    A ver si respondes esta : ¿ como lo hago en blogger gratuito?

    • Pedro Ventura dice:

      Si el servidor no es tuyo o no lo puedes administrar no puedes. Porque primero necesitas que esté instalado el mod_deflate o similares. A parte si no tienes acceso por FTP, ni modificar o subir archivos, obviamente no vas a poder. Contrata un servidor.

  15. Gracias artista. Añadido en el htaccess y funcionando a la perfección. Score de 85 a 92 Perfecto. Y todo esto a las 6 de la mañana ;-)

    Se agradece tu ayuda

  16. snake dice:

    Para los que usan w3 cache es igual? yo uso la cdn en un subdominio pero alojado en mi host. Lo que quiero es que el style.css no dure mucho ya que cuando hago alguna modificación nadie podrá ver el cambio hasta que eliminen la cache del navegador.

    Quisiera que cuado haga el cambio la css dure 20 miutos por ejemplo , lo dejo un dia y el siguiente dia que este normal con la confi de w3cache. No se si me explique bien si no fui claro disculpen.

    • Pedro Ventura dice:

      Efectivamente, para los que usan w3 caches es lo mismo, porque el plugin sobreescribe el .htaccess.

      A ver, lo normal es que no se hagan muchos cambios de maquetación y diseño. El css tiene que estar cacheado por 1 semana, sin duda. No puedes poner que la cache de ese css sea de 20 minutos. Lo que se suele hacer en estos casos es renombrar el archivo css o bien lo mejor es meterle parámetros por ejemplo style.css?v=1.0 y si vuelves a cambiar metes en el código style.css?v=1.1 así el navegador detecta que es un archivo diferente y lo vuelve a solicitar.

  17. Muchísimas Gracias Pedro ! !

    He añadido el código que comentas en el htaccess y funciona 100%

    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 tu Trabajo ! !

  18. Matias dice:

    Hola resulta que yo no tengo acivado el mod expires o sea mi servidor usa apache pero no tiene este mod disponible para mi pan ¿Como puedo hacer en este caso para lograr el mismo resultado?

  19. Mario dice:

    Hola, tengo un problema a la hora de realizar la optimización de mi web, esta hecha en joomla y no se como hacer para que me detecte el codigo de expiración. No encuentro ninguno de esos archivos que mencionáis anteriormente. Necesitaria que me hechárais una mano. GRACIAS!

  20. Jorge dice:

    Hola eh visto que muchas webs usan el alojamiento de amazon para alojar imágenes eh incluso eh visto que hasta enlazan archivos .css, esos servidores supongo que si son muchos para alojar imágenes deben ser muy potentes, ahora mi hosting esta en un servidor compartido, si yo enlazo imágenes, y los archivos .css desde amazon habrá un menor tiempo de carga como para pagar 2 usd mensuales?

    El tiempo de carga de mi web es de 1.1 Segundo y pesa la pagina principal 1.1MB esta por encima de un 86% de tiempo de carga que las de la competencia y quiero minimizar el tiempo de carga lo mas posible. Esta construida en Joomla! 2.5 que mas me recomiendan.

  21. Steven dice:

    Hola Pedro,

    Por favor, me podrias indicar como debo hacer este cambio en Prestashop? Cuando entré al archivo htaccess encontre una advertencia en mayusculas indicando no tocar manualmente el archivo.
    Hay un campo libre en Back Office > Herramientas > Generadores llamado “Confuguración específica” (si, con error ortografico :) ) donde imagino puedo poner esto? Es posible?

    Desde ya MUCHISIMAS gracias por tu ayuda,

    Steven

    • Pedro Ventura dice:

      Hola Steve,

      Nunca he usado Prestashop, no se que tal de difícil será configurar, pero imagino que ese mensaje que te pone de no tocar manualmente es porque el archivo .htaccess se puede generar automáticamente.

      No se, si desde esa opción del Backoffice que me estas contando puedes cambiar parámetros del htaccess, aunque puede ser. Pero sin lugar a duda mi consejo que te puede servir para infinidad de ocasiones es que hagas un backup de tu código. No se si se puede tocar el htacces desde el backoffice, pero haz un backup del código y haz la prueba, en caso de que salga mal siempre puedes volver a poner la versión de código que funciona. Incluso puedes cambiar manualmente el htacces a pesar de la advertencia que te da, y lo mismo, si algo sale mal puedes recuperar la versión de código que funciona.

      Si consigues hacerlo, no dudes en comentarlo en el blog.

      Un saludo

      • Steven dice:

        Hola Pedro,

        Gracias por tu respuesta.
        Investigando el htaccess generado automaticamente por prestashop (version 1.4.x), ví que las directivas ya estaban alli:

        ExpiresActive On
        ExpiresByType image/gif “access plus 1 month”
        ExpiresByType image/jpg “access plus 1 month”
        ExpiresByType image/jpeg “access plus 1 month”
        ExpiresByType image/png “access plus 1 month”
        ExpiresByType text/css “access plus 1 week”
        ExpiresByType text/javascript “access plus 1 week”
        ExpiresByType application/javascript “access plus 1 week”
        ExpiresByType application/x-javascript “access plus 1 week”
        ExpiresByType image/x-icon “access plus 1 year”

        Tengo que investigar otros modos de mejorar la performance de mi pagina, que esta muy baja (load time entre 4 y 8 segundos) :(

        Gracias por tu interes!

        Steven

  22. David Q dice:

    Saludos

    Use el primer codigo el que solo especifica el de las imagenes pero cuando entro a mi pag uso wordpress no me sale las nuevas entradas (post) tengo que presionar f5 para que recargue la imagen , sabes que podría estar pasando??

  23. Mabel dice:

    Cuando puse el codigo que sugieres en mi HTACCES a poco infarto, mira el error que me ha quedado en la pagina y no se como solucionarlo, ni eliminando el codigo. Me ayudas??? Pleaseeee…

    Internal Server Error

    The server encountered an internal error or misconfiguration and was unable to complete your request.

    Please contact the server administrator, radiorebelde@icrt.cu and inform them of the time the error occurred, and anything you might have done that may have caused the error.

    More information about this error may be available in the server error log.
    Apache/2.2.14 (Ubuntu) Server at http://www.radiorebelde.cu Port 80

  24. Sonia dice:

    Hola Pedro. (Te llamas como mi padre) A mi en los resultados de pagespeed de google me aparece lo siguiente: –El período de validez de los siguientes recursos que se pueden almacenar en caché es muy breve. En el futuro, especifique un período de caducidad de al menos una semana para los siguientes recursos– No se mucho del tema, pero me podras facilitar un codigo para introducir en el html. Mi pagina la hago con frontpage. Gracias. Sos muy amable. Saludos!

    • pedroventura dice:

      Hola Sonia,

      Pero a pesar que te da ese mensaje, la valoración de este punto por Page Speed es positiva y te aparece el tick en verde.
      Los elementos que tiene un tiempo de cache breve son externos a tu web, por lo que no puedes hacer nada.

      La valoración de Page Speed en tu web es de 96/100 que es estupenda, no te preocupes.

      Un saludo!

  25. Antonio dice:

    Hola Pedro,

    tengo el módulo deflate activo en el servidor. En mí .htaccess tengo este código:

    ExpiresActive On
    ExpiresDefault A3600

    # 2 weeks
    ExpiresDefault A604800
    Header append Cache-Control “public”

    # 2 hours
    ExpiresDefault A604800
    Header append Cache-Control “public”

    # 3 days
    ExpiresDefault A604800
    Header append Cache-Control “public”

    Es decir, el código que arriba pusiste. En pageSpedd me dicen:
    “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”.

    Lo de he mirado también en firebug, Y para las imagenes me dice: 304 Not Modified, pero para los js, css, y la propia página me dice: 200 Ok.

    Qué puedo hacer, cómo lo soluciono? Gracias

  26. Nacho dice:

    Gracias Pedro!! Estoy con un Joomla 3.x peleándome con apache ‘in’ y me ha venido dpm para sumar unos cuantos Page Speed points!

Deja tu comentario

Leer entrada anterior
Google wave pasa a Apache

La fundación Apache ha retomado el proyecto de Google Wave, que bueno ya no se llama así porque al liberalizar...

Cerrar