Los Header de expiración son utilizados para indicar cuando expira un determinado archivo, en cuyo caso el mismo no es cargado nuevamente si es que aun no ha expirado. Entonces para archivos que no cambian comúnmente como las imágenes, vídeos, javascript, hojas de estilo podríamos agregarle headers de expiración con lo cual solo se cargarán la primera vez que accedemos a la pagina.
Para ello se pueden utilizar los headers: Expires que contiene la fecha en la cual expira el archivo y Cache-Control, se pueden agregar estos dos headers por separado pero si agregamos el Expires este agregará también el header Cache-Control.
Expiración Utilizando htaccess
Los servidores web Apache son muy versátiles y permiten configurar de forma sencilla los headers de expiración, para ello debes incluir las directivas en el archivo .htaccess. Para el caso de la expiración se puede utilizar ExpiresDefault, para ello tenemos las siguientes directivas de tiempo: years, months, weeks, days, hours, minutes, seconds.
Lo recomendables es colocar una expiración de 30 días para los archivos estaticos (jpg, png, gif, swf, js, css), entonces podríamos agregar el siguiente código:
ExpiresActive On ExpiresDefault A0 # expiracion de 1 mes para archivos estaticosExpiresDefault "access plus 1 months"
Además de ello la expiración también se puede expresar en segundos, entonces modificando el ejemplo anterior tendríamos (30 dias = 60*60*24*30 = 2592000):
ExpiresActive On ExpiresDefault A0 # expiracion de 1 mes para archivos estaticosExpiresDefault A2592000
Otra forma para agregar la expiración es el uso de la directiva ExpiresByType mediante la cual se le puede asignar tiempos diferentes dependiendo del tipo de archivo. Con esta directiva tendríamos el ejemplo anterior transformado en:
ExpiresActive On ExpiresDefault A0 ExpiresByType image/gif A2592000 ExpiresByType image/png A2592000 ExpiresByType image/jpg A2592000 ExpiresByType image/jpeg A2592000 ExpiresByType text/css A2592000 ExpiresByType text/javascript A2592000
Pueden ver el ejemplo funcionando en http://samples.unijimpe.net/optimization/expiration/, si utilizanFirebug para ver el trafico de red observarán como se cargan las imágenes la primera vez, las siguientes estas se leen del cache del browser. Les dejo los archivos de ejemplo con el .htaccess para cada ejemplo con el cual pueden hacer sus pruebas.
[download id=»32″ autop=»false»]
Expiración Utilizando PHP
PHP también es otra solución para agregar los headers de expiración. Para ello haremos uso de la función header. El formato del header de expiración en:
header("Expires: Mon, 26 Jul 2010 05:00:00 GMT");
Creando dinámicamente la expiración, utilizando las funciones de fecha tendríamos un ejemplo con la expiración de 30 dias (60*60*24*30 = 30 dias expresados en segundos)
header("Cache-Control: must-revalidate"); header("Expires: ".gmdate ("D, d M Y H:i:s", time() + 60*60*24*30)." GMT");
Mas Información
Hemos presentado una breve explicación utilizando .htaccess y PHP, pueden tener mas información y conceptos mas desarrollados en:
Comentarios Total 25 comentarios
Publicado: 02/02/2010 1:33 pm
¿Hay alguna diferencia entre usar el .htaccess y el PHP? ¿cuál es para ti el mejor? el que sea más rápido y efectivo.
Publicado: 02/02/2010 2:14 pm
Si agregas los headers de expiración con .htaccess estos se agregaran a todos los archivos que indiques, mientras que si utilizas PHP esto deberás hacerlo en cada archivo, debes utilizar PHP solo cuando no tengas posibilidad de cambiar el archivo .htaccess.
Publicado: 13/04/2010 5:53 am
Perfecto! muchas gracias, por fin un sitio donde lo expican bien y funciona! pagespeed me ha dado un 95 ¡yuju!
Publicado: 22/04/2010 6:04 pm
Buena verdad de .htaccess nose nada, pero me gustaría saber donde coloco este archivo? lo coloco en el directorio de mi web verdad? por otra parte no se puede visualizar este archivo como vizualiso un pag html o php o css con esto me refiero que no lo puedo visualizar en filezilla verdad?, gracias
Publicado: 23/04/2010 12:06 am
El archivo .htaccess es un archivo que se coloca en la carpeta raíz de tu servidor web. Este archivo contiene las directivas para configurar las opciones del servidor Apache.
Este archivo es un archivo oculto por eso no lo puedes ver directamente desde tu gestor de archivos FTP. Debés habilitar la opción para visualizar los archivos ocultos para ver el archivo .htaccess.
Publicado: 06/05/2010 5:24 pm
Cuando copio el código al .htaccess me deja de funcionar el sitio
Soluciones?
Gracias!
Publicado: 21/05/2010 11:40 pm
Gracias por la info unijimpe, busque más información y ahora comprendo mucho mejor, gracias.
Julio, yo tuve problemas, si lo estas subiendo a tu servidor con FILEZILLA el problema son los permisos, yo le puse este número de permiso: 775 y me funciona bien.
Saludos
Publicado: 24/05/2010 12:27 pm
Sinceramente, este blog no tiene desperdicio. Siempre escribes artículos muy útiles, y sobre todo fáciles de comprender. ¡Gracias! ¡Y siga para adelante, nomás! Después de los halagos, una pregunta: ¿El .htaccess SIEMPRE va en el directorio raíz? ¿O puede ser que se coloque en directorios internos también, para realizar alguna tarea especial?
¡Saludos!
Publicado: 24/05/2010 12:31 pm
Me compliqué con la pregunta, ahora trato de ser más claro: ¿Colocando este código en el .htaccess dentro del directorio raíz, tomarán los archivos dentro de la carpeta «images» o cualquier otra, estos datos de expiración? ¿o debo colocar un .htaccess por cada directorio que quieran tener la expiración?
Publicado: 27/05/2010 12:23 am
Cuando copio el siguiente codigo:
ExpiresActive On
ExpiresDefault A0
# expiracion de 1 mes para archivos estaticos
FilesMatch «\.(gif|jpg|jpeg|png|swf|js|css)$»>
ExpiresDefault «access plus 1 months»
al archivo .htaccess me deja de funcionar el sitio.
probe de cambiar los permisos a 775 como me dijiste, pero es lo mismo.
puede ser que me falte activar algo en el servidor? como haria eso?
saludos
Publicado: 27/05/2010 9:19 pm
Hola
cuando agrego el codigo al .htaccess me deja de funcionar el servidor y no veo las paginas
¿que puedo hacer?
en el .htaccess tambien tengo reglas para url enriquecidas
esto afecta?
Publicado: 01/06/2010 12:41 pm
Primero de todo, felicidades por el Post, muy buena la información.
Tengo una duda referente al funcionamiento del Expires.
Supongamos que lo tengo implantado en mi Site y al cabo de unos días, realizo un cambio sobre este .js, entonces que ocurrirá con un usuario que me ha visitado hace 5 días y vuelve a entrar después del cambio? Me equivoco cuando digo que el .js que tiene en su cache será el que se utilice, y por lo tanto, al no haber pasado los 30 días, no descargará el nuevo .js y no tendrá la última versión del mismo? Si es así, como se puede solucionar este tema?
Publicado: 16/06/2010 11:52 pm
Excelente info sobre los expires header, estuve buscando justo la solución para php.
Publicado: 12/08/2010 8:01 am
IMPORTANT: for PHP you need to output the header with the content lenght of the current page otherwise caching will not work 100% with most browser and/or proxies
Publicado: 04/10/2010 4:59 pm
gracias por la informacion, me fue muy valiosa
Publicado: 11/12/2010 4:04 pm
tanto buscarle en internet y no hayaba la informacion, muchas gracias por ello que Dios te bendiga.
te recomiendo que la misma entrada la pongas para las palabras clave
Leverage browser caching como titulo y tendrias muchos muchos visitantes
Publicado: 28/01/2011 9:37 am
El problema que tengo es que cuando modificó una función en archivo jquery la misma no se refleja al ejecutar la aplicación; para lograr que se vean los cambios tengo que cambiar el nombre del archivo jquery. ¿cómo puedo solucionar este problema?. De antemano muchas gracias.
Publicado: 29/01/2011 12:45 am
Roberto, eso sucede por que el navegador tiene una fecha de expiración futura por lo que no revisa en el servidor si hay una nueva versión.
Si estas en proceso de desarrollo, te recomiendo desactivar los headers de expiración. Si ya agregaste los headers, puedes eliminar todos los archivos temporales de tu navegador o como haz echo renombrar el archivo.
Publicado: 02/04/2011 6:34 pm
Hola, necesito ayuda con los etags:
Tengo este código:
» $etag = md5($_SERVER[‘REQUEST_URI’].time() + $expires);
header(«Etag: \»».$etag.»\»»);
if (trim($_SERVER[‘HTTP_IF_NONE_MATCH’]) == $etag){
header(«HTTP/1.1 304 Not Modified»);
exit;
}
»
Haciendo pruebas, el código jamás ingresa al condicional IF.
Y si dejo el «header(«HTTP/1.1 304 Not Modified»);» para probar, no abre la web sino que forza a descargar un archivo .gz.
En teoría lo que estoy buscando es usar las etags para comprobar si hay un cambio en el archivo. Si no lo hay entonces lo que hace es enviar el código 304 para indicar que no hay cambio y ahorrar ancho de banda y agilizar la web.
Gracias por las ayudas
Publicado: 25/09/2012 4:11 am
Tengo un problema, las imagenes jpg, gif, png etc.. me las cachea perfectamente y me las reconoce, pero con el js y css no me lo cachea. ¿A que se debería?
Publicado: 17/10/2012 11:28 am
Sois Dios!!. me acabáis de salvar el unic punto devil de mi profecto fin de grado.
eternametne agradecido.
Nando.
Publicado: 15/01/2014 6:34 am
Y cuando se trata de elementos externos?
Publicado: 31/01/2014 3:29 am
[…] http://blog.unijimpe.net/optimizacion-agregar-headers-de-expiracion/ […]
Publicado: 17/03/2014 9:37 am
Brother,
post como este te alegran el día. ;)
Tenía 3 problemas con el PageSpeed Insights de Google:
1.- Habilitar Gzip para los .js y los .css
2.- Eliminar los .js que impiden mostrar la mitad superior de la web
3.- Especificar cache de los .js, .css e imágenes.
Acabo de solucionar el 3º.
Voy a seguir con los otros 2.
nota: uso Joomla
MUCHAS GRACIASSSSS¡¡¡¡
Publicado: 13/03/2015 1:25 am
Gracias por ayudarme con estos hacks, estaba teniendo problemas con el cache de uno de mis sitios
Saludos!