Що таке cache-control?

Cache-Control — це HTTP-заголовок, який визначає кількість часу і спосіб htaccess кешування файлу:

У цій статті ми розповімо, як використовувати Cache-Control. Більшість сучасних сайтів використовують Cache-Control для управління кешуванням браузерів.

Основні принципи використання заголовка Cache-Control

Заголовок Cache-Control визначає кількість часу, який файл повинен знаходитися в кеші, і метод кешування:

Cache-Control: max-age=2592000, public

При зверненні до файлу через браузер також витягуються HTTP-заголовки. Коли заголовок Cache-Control включений, браузер буде його враховувати.

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

Cache-Control

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

Що таке max-age?

max-age визначає час, протягом якого файл повинен зберігатися в кеші.

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

Застосування max-age

Частина заголовка max-age виглядає наступним чином:

max-age=2592000

Значення max-age задається в секундах.

Часто використовувані значення для max-age:

  • Одна хвилина: max-age=60;
  • Одна година: max-age=3600;
  • Один день: max-age=86400;
  • Одна тиждень: max-age=604800;
  • Один місяць: max-age=2628000;
  • Один рік: max-age=31536000.

При застосуванні max-age для визначення часу, який файл повинен зберігатися в кеші, слід враховувати тип файлу і те, як він використовується.

Директиви кешування

Частина директиви кешу в браузері htaccess наведеного вище заголовка виглядає наступним чином:

public

Директива наведеного вище заголовка Cache-Control оголошує «public«. Це означає, що файл може кешуватися публічно (на відміну від випадку, якщо б це був private файл).

За замовчуванням, більшість елементів вважаються публічно кешованими (можуть кешуватися), але існують випадки, коли це небажано: для конфіденційних документів, для контенту, призначеного для конкретного користувача, і т. д.

Ми розглянемо три основні директиви Cache-Control:

  • public;
  • private;
  • no-store.

public

Директива «public» означає, що будь-яка людина може здійснювати кешування файлів htaccess на будь-якому рівні.

Офіційна специфікація визначає її наступним чином:

Директива «public» вказує на те, що відповідь може зберігатися де завгодно в кеші, навіть якщо він є некэшируемым або кэшируемым тільки в приватному кеші.

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

private

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

Офіційна специфікація визначає її наступним чином:

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

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

no-store

Директива no-store є найбільш категоричною забороною на кешування. Офіційна специфікація визначає її наступним чином:

Директива «no-store» вказує на те, що в кеші не повинні зберігатися частині жодного запиту, ні відповіді. Ця директива застосовується як для приватного, так і публічного кеша.

Ще раз зазначу, що саме по собі це нічого не гарантує.

Типи файлів

Два питання, які повинен задати собі веб-майстер:

  • Які типи файлів потрібно зберігати з допомогою кешування файлів htaccess?
  • Як довго їх потрібно зберігати в кеші?

Які типи файлів повинні зберігатися в кеші?

Я хотів би відзначити наступні типи файлів:

  • ЗображенняPNG, JPG, GIF і інші. Зображення практично не змінюються, тому вони можуть зберігатися в кеші тривалий час (рік);
  • CSS файли — змінюються частіше, ніж інші файли, для їх зберігання може знадобитися більш короткий період часу (тиждень або місяць);
  • ICO (Favicon) — рідко змінюються (рік);
  • JSкод JavaScript не змінюються надто часто, тому для них можна визначити середній період зберігання (місяць).

Що слід врахувати

Тільки ви можете визначити, які інструкції найбільше підходять для вашого сайту. Якщо ви збираєтеся змінити який-небудь ресурс (наприклад, файл CSS), і цей ресурс кешується в браузері htaccess, то варто подумати над тим, щоб змінити ім’я файлу. Тоді оновлений файл CSS буде переглянутий всіма користувачами. Це називається URL-дактилоскопією.

Завдяки унікальному імені користувачі будуть завантажувати новий (не кешовані) варіант ресурсу. Наприклад, якщо ваш файл CSS має ім’я «main.css«, замість цього можна назвати його «main_1.css«. Наступного разу, коли знову змініть його, назвіть «main_2.css«. Це корисно для файлів, які змінюються через певні періоди часу.

Як додати Cache-Control на сайт

Cache -Control додається до файлів точно так само, як будь-який інший заголовок на вашому сервері. У цій статті ми говоримо про заголовку Cache-Control. Так як його додати? Це залежить від вашого веб-сервера. Ми розглянемо найбільш поширені сценарії.

Файл .htaccess

Більшість використовує для додавання заголовків файл .htaccess.

Приклад коду файлу .htaccess

Загальний код для установки заголовка Cache-Control за допомогою файлу .htaccess:

Header set Cache-Control «max-age=2628000, public»

Але наведений вище код не дозволяє задавати різні інструкції кешування сайту htaccess для різних типів файлів.

Щоб застосувати різні заголовки Cache-Control до різних типів файлів, ми будемо використовувати:

# One month for most static assets
Header set Cache-Control «max-age=2628000, public»

Наведений вище код означає наступне:

«Якщо тип файлу CSS, JPEG, JPG, PNG, GIF, JS або ICO, застосувати до нього наступний заголовок«.

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

Ми можемо додати в файл .htaccess наступний код:

# One year for image files
Header set Cache-Control «max-age=31536000, public»
# One month for css and js
Header set Cache-Control «max-age=2628000, public»

Наведений вище код складається з двох блоків: один для зображень і один для CSS і JS-файлів. У нас може бути кілька блоків у файлі .htaccess.

Конфігурація Apache http.conf

Більш швидким і кращим способом є установка заголовків з допомогою конфігураційного файлу. Приклади коду, наведені вище для htaccess кешування, будуть працювати і тут.

Використовуйте поєднання filesMatch і Header, щоб створити окремі інструкції для конкретних типів файлів (приклади коду для файлу .htaccess підходять).

NGINX

Використовуючи директиви expires, можна додати інструкції кешування в блоки сервера або розташування:

location ~* .(jpg|jpeg|png|gif|ico|css|js)$ {
expires 365d;
}

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

Litespeed

Якщо є ліцензія на кілька процесорів, то ви повинні мати доступ до розширеним директивам кешування через онлайн-конфігурацію.

Якщо у вас немає ліцензії, то необхідно буде використовувати кешування сайту htaccess. Наведені вище інструкції для використання .htaccess підходять також і для серверів Litespeed.

Переклад статті «Cache-Control» був підготовлений дружною командою проекту Сайтостроение від А до Я.

ОСТАВЬТЕ ОТВЕТ

Please enter your comment!
Please enter your name here