Optimización: Agregar Headers de Expiración

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 estaticos

ExpiresDefault "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 estaticos

ExpiresDefault 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

illi.pro
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.

unijimpe
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.

Toni
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!

Yadir Gomez
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

unijimpe
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.

Julio
Publicado: 06/05/2010 5:24 pm

Cuando copio el código al .htaccess me deja de funcionar el sitio

Soluciones?

Gracias!

yadir gomez
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

Luciano
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!

Luciano
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?

Julio
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

angelfqc
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?

Marc
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?

JoeCoolSv
Publicado: 16/06/2010 11:52 pm

Excelente info sobre los expires header, estuve buscando justo la solución para php.

Antonio Gallo
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

nudier mena
Publicado: 04/10/2010 4:59 pm

gracias por la informacion, me fue muy valiosa

Enrique
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

Roberto
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.

unijimpe
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.

Gabriel
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

Alberto
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?

NANDO
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.

David
Publicado: 15/01/2014 6:34 am

Y cuando se trata de elementos externos?

Yago
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¡¡¡¡

Jon
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!

 

Comentar

En este blog los comentarios están moderados, serán mostrados cuando el administrador los apruebe. Por favor, evita comentarios ofensivos u obscenos por que no serán aprobados.
Si deseas publicar código fuente debes hacerlo entre las etiquedas <code> y </code>, además debes reemplazar los carácteres < por &lt; y > por &gt;.

(Requerido)

(Requerido, no será publicado)

(Requerido)

(Tags aceptados: <a> <em> <strong> <code> <ul> <li>)