SEOFAQ Telegram, маркетинг и SEO Канал SEOFAQT в мессенджере Telegram

Все чатыКэширование Нам нужно сообщить браузеру только две вещи

 167  


Кэширование

Нам нужно сообщить браузеру только две вещи:

1. [Как [долго]] я должен кэшировать этот файл?

2. Как узнать, изменился ли файл после этого? (Ключевой фразой здесь является "после этого").

В чем мы можем ошибаться?

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

Как только мы установили заголовок Cache-Control, мы должны считать, что отказались от контроля до истечения этого времени.

Сброс кэша (cache busting) в этом смысле является небольшим мифом - разработчики обычно не могут очистить HTTP-кэш конечного пользователя.

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

Это возможно на 100% ("Cache-Control: no-cache"), но не дает большого преимущества в производительности.

В этом сценарии каждый запрос к рассматриваемому ресурсу пропускает кэш, возвращается на сервер, проверяет наличие обновления, а затем либо возвращается с ответом 304 (используйте кэшированную версию), либо 200 (было обновление).

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

Если мы пытаемся кэшировать файл, но браузер проверяет обновления в промежутке, вероятно, что-то настроено неправильно.

Если мы сказали браузеру, что файл должен использоваться повторно в течение недели, зачем ему проверять обновления до этого?

Он не должен! Это полностью исключает смысл кэша.

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

Мы будем знать, проверяет ли браузер обновления, если при каждой загрузке страницы мы будем получать последовательные ответы 304.

Мы ожидаем (возможно) увидеть 304 только после выполнения условий "max-age", но не раньше.

Если мы пытаемся кэшировать файл, но продолжаем получать ответы 304, скорее всего, у нас есть другой заголовок, который противоречит нашему заголовку Cache-Control.

Например заголовок "Pragma: no-cache", установленный наряду с Cache-Control.

Pragma устарела, но она все еще противоречит.

Итак, для наших первых двух вопросов нам нужны только два ответа:

1. Cache-Control - [Как [долго]] я должен кэшировать этот файл?

2. ETag - Как узнать, изменился ли файл после этого?

Примените соответствующий заголовок Cache-Control к каждому ответу.

Применяйте заголовок ETag к каждому ответу, содержимое которого может измениться.

Неизменяемые файлы, такие как app.a068ec.css, никогда не меняются, поэтому им никогда не нужна ревалидация, поэтому им просто нужно супер агрессивный "cache-control: max-age=31536000, immutable" и никакого заголовка ETag.

Откажитесь от заголовков Last-Modified, Pragma, Expires.

Вам нужны только Cache-Control и ETag.

Для параметров Cache-Control: https://csswizardry.com/2019/03/cache-control-for-civilians/

@MikeBlazerX

Ссылки из поста:
https://twitter.com/csswizardry/status/16732878020...
https://developer.mozilla.org/en-US/docs/Web/HTTP/...
https://t.me/MikeBlazerX

Источник новости https://t.me/mikeblazerx/1861...