Просить браузеры кэшировать как можно более агрессивно

Question

Это веб-приложение, которое обслуживает изображения. Поскольку один и тот же запрос всегда будет возвращать одно и то же изображение, я хочу, чтобы браузеры, выполняющие доступ, кэшировали изображения настолько агрессивно, насколько это возможно. Я очень хочу сказать браузеру

Вот ваше изображение. Продолжай и держи это; это действительно не изменится в течение следующих нескольких дней. Не нужно возвращаться. В самом деле. Я обещаю.

Я пока что установил

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

и, конечно, вернуть 304 not modified, если запрос имеет соответствующий заголовок If-Modified-Since.

Могу ли я что-то еще сделать (или сделать что-то по-другому), чтобы донести свое сообщение до браузеров?

Приложение размещено на Google App Engine, если это имеет значение.

Answer 1

Вы можете быть заинтересованы в ознакомлении со следующей статьей Google Code:

• Оптимизация кэширования: использование кэширования в браузере

В двух словах, все современные браузеры должны иметь возможность кэшировать ваши изображения в соответствии с инструкциями с этими заголовками HTTP.

Answer 2

Вы можете сделать лучше. 304 все еще являются HTTP-запросом / ответом. Хотя изображение не загружается снова, задержка может убивать.

Если вы можете включить идентификатор версии в имена изображений, вы можете установить максимальный возраст 2 года. Таким образом, вы предотвращаете 304-е годы. Если изображение когда-либо изменится, вы обновите идентификатор версии, тем самым изменив имя файла. Это гарантирует, что браузер выдаст новый запрос.

Требуются некоторые изменения в структуре вашего проекта. Идентификатор версии может быть номером редакции SVN, когда изображение обновлялось в последний раз, и может создаваться автоматически во время сборки. Вам также необходимо обновить html, так что если у вас есть логическое отображение между именем изображения и путем к изображению, ваша работа будет проще.

Изображения редко обновляются, поэтому вы также можете использовать ручной подход, если не можете автоматизировать то, что я описал выше. Хитрость заключается в том, чтобы только добавлять новые изображения, а не изменять их.

Answer 3

Я не знаю, что это поможет выйти за рамки того, что предлагали другие, но вы могли бы использовать автономные веб-приложения HTML5 , чтобы более явно попросить браузер сохранить локальную копию. *

Answer 4

В заголовке кэша есть очень важное значение, о котором вы здесь не упомянули:

"пост-проверка = 900, предварительная проверка = 3600"

Прочтите эту статью по этой теме (и найдите больше):

http://www.rdlt.com/cache-control-post-check-pre-check.html

Answer 5

Срок хранения кэша в течение нескольких дней очень низок. Вы должны установить его на один год или даже больше. Конечно, это может вызвать проблемы, когда изображение действительно изменяется, но вы можете решить это, добавив номер версии к изображению и изменив страницу, которая ссылается на изображение, чтобы включить путь к новому изображению.

Я написал больше о кешировании веб-приложений здесь: http://patchlog.com/web/7-methods-to-cache-web-applications/

Answer 6

Вы можете добавить представление ETag для каждого изображения, а затем сравнить его с заголовком If-None-Match для входящих запросов (см. " Почему в моем браузер"). Это избыточно при использовании предпочтительного заголовка Last-Modified, и это в любом случае просто еще один способ сказать 304. (Я думаю, что GAE делает это автоматически для статических файлов, хотя не уверен.)

Gravatar устанавливает очень старые Last-Modified даты - по умолчанию, кажется, «ср, 11 января 1984 г. 08:00:00 по Гринвичу». По истечении 5 минут браузеры часто проверяют наличие обновленных изображений. Другими словами, я думаю, что они приглашают 304, не пытаясь убедить браузеры просто использовать локальный кеш. Их заголовки выглядят так:

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

Большая разница заключается в сроке истечения - вы хотите два дня, они хотят пять минут. Поэтому, если вы хотите, чтобы браузеры просто использовали кэшированное изображение в течение 48 часов, делайте то, что вы делаете, только установите Cache-Control: max-age=172800 (86400 - это 24 часа).

Answer 7

Попробуйте .htaccess, как

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