una navegadores navegador los leer forzar evitar eliminar con como caché cache busting borrar archivos aplicación actualizar http browser caching http-headers

http - leer - Pedir a los navegadores que guarden en caché lo más agresivamente posible



evitar caché de los navegadores al actualizar una aplicación web (7)

Se trata de una aplicación web que sirve imágenes. Dado que la misma solicitud siempre devolverá la misma imagen, quiero que los navegadores accedan a la memoria caché de las imágenes de la forma más agresiva posible. Bastante quiero decirle al navegador

Aquí está tu imagen. Adelante y guárdalo; Realmente no va a cambiar en los próximos días. No es necesario volver. De Verdad. Lo prometo.

Lo hago, hasta ahora, establecer

Cache-Control: public, max-age=86400 Last-Modified: (some time ago) Expires: (two days from now)

y, por supuesto, devuelve un 304 not modified si la solicitud tiene el encabezado If-Modified-Since apropiado.

¿Hay algo más que pueda hacer (o algo que deba hacer diferente) para transmitir mi mensaje a los navegadores?

La aplicación está alojada en Google App Engine, en caso de que importe.


Algunos días la edad del caché es muy baja. Debe establecerlo en un año o incluso más. Por supuesto, esto puede generar problemas cuando la imagen realmente cambia, pero puede resolverlo agregando un número de versión a la imagen y cambiando la página que hace referencia a la imagen para incluir la ruta a la nueva imagen.

Escribí más sobre el almacenamiento en caché de aplicaciones web aquí: http://patchlog.com/web/7-methods-to-cache-web-applications/



No sé si ayudará más allá de las soluciones que otros han ofrecido, pero podría usar las instalaciones de aplicaciones web HTML5 sin conexión para pedirle al navegador que guarde una copia local.


Pruebe .htaccess como

<ifmodule mod_gzip.c> mod_gzip_on Yes mod_gzip_dechunk Yes mod_gzip_item_include file /.(html?|txt|css|js|php|pl)$ mod_gzip_item_include handler ^cgi-script$ mod_gzip_item_include mime ^text/.* mod_gzip_item_include mime ^application/x-javascript.* mod_gzip_item_exclude mime ^image/.* mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.* </ifmodule> <ifmodule mod_deflate.c> AddType application/x-compress .Z AddType application/x-gzip .gz .tgz AddType application/x-httpd-php .php AddType application/x-httpd-php .php3 AddOutputFilterByType DEFLATE text/html AddOutputFilterByType DEFLATE text/plain AddOutputFilterByType DEFLATE text/xml AddOutputFilterByType DEFLATE application/x-httpd-php AddOutputFilterByType DEFLATE application/x-javascript </ifmodule> <ifmodule mod_expires.c> ExpiresActive On ExpiresDefault "access plus 1 seconds" ExpiresByType text/html "access plus 1 seconds" ExpiresByType image/gif "access plus 2592000 seconds" ExpiresByType image/jpeg "access plus 2592000 seconds" ExpiresByType image/png "access plus 2592000 seconds" ExpiresByType text/css "access plus 604800 seconds" ExpiresByType text/javascript "access plus 216000 seconds" ExpiresByType application/x-javascript "access plus 216000 seconds" </ifmodule> <ifmodule mod_headers.c> <filesMatch "//.(ico|pdf|flv|jpg|jpeg|png|gif|swf)$"> Header set Cache-Control "max-age=2592000, public" </filesmatch> <filesMatch "//.(css)$"> Header set Cache-Control "max-age=604800, public" </filesmatch> <filesMatch "//.(js)$"> Header set Cache-Control "max-age=216000, private" </filesmatch> <filesMatch "//.(xml|txt)$"> Header set Cache-Control "max-age=216000, public, must-revalidate" </filesmatch> <filesMatch "//.(html|htm|php)$"> Header set Cache-Control "max-age=1, private, must-revalidate" </filesmatch> </ifmodule>


Puede agregar una representación ETag para cada imagen y luego compararla con el encabezado If-None-Match en las solicitudes entrantes (consulte " ¿Por qué no está el caché de imagen entregado personalizado en el navegador? "). Esto es redundante cuando se utiliza el encabezado Last-Modified preferido y es solo otra forma de decir 304 de todos modos. (Creo que GAE hace esto automáticamente para archivos estáticos, aunque no estoy seguro).

Gravatar establece fechas de Last-Modified muy antiguas: el valor predeterminado parece ser "Wed, 11 Ene 1984 08:00:00 GMT". El vencimiento de 5 minutos hace que los navegadores comprueben con frecuencia las imágenes actualizadas. En otras palabras, creo que están invitando a los 304, sin tratar de convencer a los navegadores de que solo usen el caché local. Sus encabezados se ven así:

Date: Sat, 20 Mar 2010 07:52:43 GMT Last-Modified: Wed, 11 Jan 1984 08:00:00 GMT Expires: Sat, 20 Mar 2010 07:57:43 GMT Cache-Control: max-age=300

La gran diferencia es el tiempo de vencimiento: quieres dos días, quieren cinco minutos. Por lo tanto, si desea que los navegadores solo utilicen la imagen en caché durante 48 horas, haga lo que está haciendo, solo configure Cache-Control: max-age=172800 (86400 es 24 horas).



Puedes hacerlo mejor. 304s siguen siendo una solicitud / respuesta HTTP. Aunque la imagen no se descarga nuevamente, la latencia puede estar matando.

Si puede incluir un identificador de versión en los nombres de sus imágenes, puede establecer la edad máxima en 2 años. De esa forma, evitas los 304. Si la imagen cambia alguna vez, actualice el identificador de la versión cambiando el nombre del archivo. Esto asegura que el navegador emitirá una nueva solicitud.

Necesita algunos cambios en la estructura de su proyecto. El identificador de versión puede ser el número de revisión SVN cuando la imagen se actualizó por última vez, y se puede generar automáticamente en tiempo de compilación. También necesitaría actualizar el html, por lo que si tiene una asignación lógica entre el nombre de la imagen y la ruta de la imagen, su trabajo sería más fácil.

Las imágenes rara vez se actualizan, por lo que también podría seguir un enfoque manual si no puede automatizar lo que describí anteriormente. El truco es solo agregar nuevas imágenes, nunca modificarlas.