Що таке кеш браузера?

  • htaccess кешування зберігає вміст веб-сторінки на локальному комп’ютері, коли користувач відвідує її;
  • Використання кешу браузера – веб-майстер дає вказівки браузерам, як слід розглядати ресурси.

Коли браузер відображає веб-сторінку, він повинен завантажити логотип, CSS файл та інші ресурси:

Кеш браузера «запам’ятовує» ресурси, які браузер вже завантажив. Коли відвідувач переходить на іншу сторінку сайту, логотип, CSS файли і т. д. не повинні завантажуватися знову, тому що браузер вже «запам’ятав» їх (зберіг). У цьому полягає причина того, чому під час першого відвідування завантаження веб-сторінки займає більше часу, ніж при повторних.

Коли ви використовуєте кешування, файли веб-сторінки будуть збережені в кеші браузера. Сторінки будуть завантажуватися швидше при повторних відвідуваннях. Також буде з іншими сторінками, які використовують одні ресурси.

Як включити кешування в браузері

  • Змініть заголовки запиту ресурсів, щоб використовувати кешування;
  • Оптимізуйте свою стратегію кешування.

Зміна заголовків запиту

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

Файл .htaccess контролює багато важливі настройки для вашого сайту.

Кешування браузера через файл .htaccess

Наведений нижче код вказує браузеру, що саме кешувати і як довго це «запам’ятовувати«. Його слід додати в початок файлу .htaccess:

## EXPIRES CACHING ##
ExpiresActive On
ExpiresByType image/jpg «access 1 year»
ExpiresByType image/jpeg «access 1 year»
ExpiresByType image/gif «access 1 year»
ExpiresByType image/png «access 1 year»
ExpiresByType text/css «access 1 month»
ExpiresByType text/html «access 1 month»
ExpiresByType application/pdf, access 1 month»
ExpiresByType text/x-javascript «access 1 month»
ExpiresByType application/x-shockwave-flash «access 1 month»
ExpiresByType image/x-icon «access 1 year»
ExpiresDefault «access 1 month»
## EXPIRES CACHING ##

Збережіть файл .htaccess, а потім оновіть сторінку.

Як встановити час кешування для різних типів файлів

У наведеному вище коді задані проміжки часу. Наприклад, 1 year (1 рік) або 1 month (1 місяць). Вони пов’язані з типами файлів. Наведений вище код встановлює, що .jpg файли (зображення) слід кешувати протягом року.

Якщо б ви хотіли змінити це, щоб і JPG зображення кэшировались протягом місяця, то ви б просто замінили «1 рік» на «1 місяць«. Зазначені вище значення кешування через htaccess оптимальні для більшості веб-сторінок.

Метод альтернативного кешування .htaccess

Описаний вище метод називається «Expires«, він допомагає з кешуванням більшості новачків. Після того, як вам стане простіше працювати з кешуванням, можете спробувати інший метод кешування Cache-Control, який дає більше можливостей.

Можливо, що метод Expires не спрацює на вашому сервері, в цьому випадку ви можливо захочете спробувати використовувати Cache-Control.

Cache-Control

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

Приклад використання в файлі .htaccess:

# 1 Month for most static assets
Header set Cache-Control «max-age=2592000, public»

Наведений вище код встановлює заголовок Cache-Control в залежності від типу файлу.

Як працює Cache-Control

Розглянемо згадану вище рядок коду кешу в браузері htaccess:

# 1 Month for most static assets

Дана рядок — просто примітка. Файл .htaccess ігнорує рядки, що починаються з символу #. Примітка рекомендується, так як у вас може бути кілька різних наборів даних як рішення для кешування файлів:

Згадана вище рядок говорить, що, «якщо файл буде одним з цих типів, то ми зробимо щось з ним… »

Найважливіше в цій рядку те, що в ній наведені різні типи файлів (CSS, JS, JPEG, PNG і т. д.) і що інструкції кешування слід застосовувати до цих типів файлів. Наприклад, якщо ви не хочете, щоб JPG файли кэшировались протягом зазначеного періоду часу, можете видалити «JPG«. Якщо ви хочете додати HTML, то потрібно в цьому рядку вказати «HTML«:

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

У згаданій вище рядку встановлені фактичні заголовки і значення:

  • Частина «Header set Cache-Control» — встановлює заголовок;
  • Зміннаmax-age=2592000» – вказує, скільки часу займе процес кешування (в секундах). У цьому випадку ми здійснюємо кешування протягом одного місяця (2592000) секунд;
  • Частина «public» повідомляє про те, що це загальнодоступно.

Ця рядок кешування через htaccess закриває оператор і закінчує блок коду.

Загальна проблема кешування

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

Цифровий відбиток URL

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

Методи кешування

При кешуванні файлів htaccess необхідно вказати один заголовок з пари Expires або Cache-Control max-age, а також один із заголовків Last-Modified або ETag для всіх кешованих ресурсів. Використовувати і Expires, і Cache-Control: max-age надмірно, як і Last-Modified і ETag одночасно.

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