Кращі практики налаштування кеш-керування для вашого веб-сайту

Можливо, ви помітили, що іноді, коли вдруге відвідуєте сайт, це виглядає не так, як очікувалося, і деякі стилі порушуються, завдяки чому все виглядає дивно. Зазвичай причиною цієї проблеми є погано визначені політики кеш-керування, які не дозволяють отримувати останні зміни після останнього розгортання. У цій статті я покажу правильні налаштування кеш-пам'яті та методи, які допоможуть вам оновлювати веб-сайт для всіх користувачів після кожного розгортання.

Для тих із вас, хто просто хоче отримати кращі практики та почати їх використовувати, перейдіть за посиланням тут до кінця статті.

Як кеш працює за лаштунками?

Ваш браузер при кожному запиті на веб-сайт / ресурс намагається завантажити якомога менше даних, читаючи кешовану інформацію з локальної пам'яті. Це можливо лише в тому, що ми надаємо достатню кількість інструкцій для браузера, щоб пояснити, які ресурси він повинен зберігати і на скільки часу.

Ці інструкції функціонують як директиви; щоб повідомити про них свій браузер, потрібно додати їх до інформації HTTP-заголовка відповіді. Найпоширеніші директиви, що беруть участь у процесі кешування, - це "кеш-контроль", "закінчується", "позначка" та "остання зміна".

Майже на кожному веб-сервері за замовчуванням є деякі налаштування кешу у відповідях заголовка, але не зрозуміло, що ми отримаємо, якщо не існує політики кешування.

Без налаштувань кеш-керування браузер переходить на веб-сервер для кожного запиту ресурсів і зчитує з нього інформацію. Це збільшує час завантаження постраждалого сайту, додає додаткове навантаження на ваш веб-сервер під час передачі інформації та збільшує кількість дзвінків у ваш сервер.

Запити надходять без налаштувань кешу

Веб-браузер вирішує, що робити і як кешувати інформацію без інструкцій із сервера. В даний час Chrome і Safari завантажують дані з бекенда кожного разу без інструкцій кешу. Однак це може змінити та призвести до різної поведінки, особливо на інших платформах.

Щоб чітко визначити, що робити з певними файлами, давайте глибоко зануримось у директиви щодо кешування кешу, додавши їх покроково до заголовків відповідей та спостерігаючи за результатом.

Етаг (тег Entity)

Etag - це одне з налаштувань кешу. Основна ідея цього заголовка HTTP полягає в тому, щоб ваш браузер знав про зміни відповідних ресурсів без завантаження повних файлів. Сервер може обчислити щось подібне з хеш-сумою кожного файлу, а потім надіслати цю хеш-суму клієнту. Наступного разу, коли клієнт спробує отримати доступ до цього ресурсу, замість завантаження файлу, браузер надішле щось подібне у заголовку HTTP: If-None-Match: W / “1d2e7–1648e509289”. Потім сервер перевірить цю хеш-суму на хеш-суму поточного файлу і, якщо є різниця, змусить клієнта завантажити новий файл. В іншому випадку клієнт буде повідомлений, що він повинен використовувати кешовану версію.

Запити надходять з Etag - 1-е завантаженняЗапити надходять з Etag - 2-е завантаження

З увімкненою політикою кешу Etag ми завжди йдемо на сервер, щоб перевірити хеш-суму файлу, і лише після цього браузер вирішить взяти його з кеша або завантажити його повністю. Коли ресурс не змінено, для перевірки потрібен лише 80–100 байт, незалежно від того, що ви запитуєте, чи 1010 КБ або 10 МБ.

Остання зміна

Інший параметр кешування кеша - HTTP-заголовок "Останній змінений". Основна ідея дуже схожа на Etag, але поведінка браузера дещо інша. Сервери мають часову позначку останньої модифікованої дати для кожного файлу; після першого завантаження файлу клієнт має можливість запитувати сервер, чи ресурс був змінений з моменту, коли клієнт останній раз отримував доступ до файлів. Для цього браузер надсилає If-Modified-Since: Пт, 13 липня 2018 10:49:23 GMT у заголовку HTTP. Якщо ресурс був змінений, браузер повинен завантажити новий файл, інакше він використовує кешовану версію.

Дійсність полягає в тому, що браузери мають свою внутрішню політику кешування і можуть самостійно вирішити, чи брати ресурс з кешу чи завантажити нову копію.

Last-Modified - це слабкий заголовок кешування, оскільки веб-переглядач застосовує евристику, щоб визначити, вибирати елемент із кешу чи ні. Евристика змінюється між браузерами.
Посібник з найкращих практик кешування Google
Запити надходять із останнім зміненим - 1-м завантаженнямПотік запитів із останньою зміною - 2-е завантаження (Ідеальний сценарій)Потік запитів із останньою зміною - 2-е завантаження (звичайний випадок)

В результаті ми не можемо покладатися лише на Last-Modified, тому я вважаю за краще повністю видалити його з налаштувань сервера, щоб зменшити трафік, навіть якщо це лише кілька байт.

Кеш-контроль максимального віку

Ця директива дозволяє нам повідомити браузеру, як довго він повинен зберігати файл у кеші з моменту першого завантаження. Час, у якому браузер повинен зберігати файл у кеші, повинен визначатися в секундах, як правило, подається як кеш-керування: max-age = 31536000. За допомогою цієї політики браузер повністю пропускає процес подання запитів на ваш сервер і дуже швидко відкриває файли. Але як ми можемо бути впевнені, що файл не буде змінюватися так довго? Ми не робимо

Отже, щоб змусити браузер завантажити нову версію потрібного файлу, ми використовуємо техніку, реалізовану багатьма інструментами для створення активів, такими як Webpack або Gulp. Кожен файл буде попередньо скомпільований на сервері, а до назв файлів додаються хеш-суми, наприклад "app-72420c47cc.css". Навіть невеликі зміни у файлі відображаються в хеш-сумі, що гарантує, що він буде визнаний різним. Отже, після наступного розгортання ви отримаєте нову версію файлу. Це стосується всіх наших файлів css, js та зображень (max-age = 31536000); після того як ми щось змінимо, браузер просто запитає новий файл з новою хеш-сумою, який він буде кешувати.

без кешу

Складна частина вищевказаної методики полягає в тому, що ви не можете забути про свої HTML-файли; якщо застосувати це налаштування і до них, ви ніколи не отримаєте нових посилань на свої файли css, js або зображення, поки не змусите перезавантажити.

Я рекомендую застосувати кеш-контроль: без кешу до файлів html. Застосування "без кешу" зовсім не означає, що кешу взагалі немає, воно просто повідомляє браузеру перевірити ресурси на сервері перед тим, як використовувати його з кеша. Ось чому нам потрібно використовувати його з Etag, тому браузери надішлють простий запит і завантажте зайві 80 байт, щоб перевірити стан файлу.

Остаточні налаштування

  • Використовуйте Gulp, Webpack чи подібні файли, щоб додати унікальні хеш-цифри до файлів css, js та зображень (наприклад, app-67ce7f3483.css);
  • Для файлів js, css та зображень встановіть Cache-Control: public, max-age = 31536000, без позначки Etag, без останніх змін.
  • Для файлів html використовуйте Cache-Control: no-cache та Etag.

Як ми бачимо, навіть очевидні і звичайні речі, такі як кешування статичних файлів, можуть бути не очевидні, якщо ми зануримося глибше. Хороші дослідження можуть завадити вам помилитися та зменшити трафік на вашому сервері, скоротивши швидкість завантаження сайту.

Торкніться кнопки if, якщо ви вважаєте цю статтю корисною!

Будь-які запитання чи відгуки? Підключіться через Pixel Point