Статьи

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

  1. Модулі Apache: mod_headers і mod_expires
  2. Директиви кешування для модуля mod_headers
  3. Директиви кешування для модуля mod_expires

Всім привіт! сьогодні на seo-mayak.com я продовжу розбирати рекомендації PageSpeed щодо прискорення завантаження сайту і розповім, як включити кеш браузера на стороні відвідувача Вашого сайту.

Багато веб-майстри використовують для кешування даних різні кеш-плагіни. Найпопулярніші з них: W3 Total Cache, WP Super Cache і Hyper Cache.

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

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

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

htaccess, які вкажуть сервера, які файли і на який час треба кешувати

На різних форумах і блогах пропонувалося маса варіантів, як змусити браузер запам'ятовувати і зберігати дані або як включити gzip стиснення і т.д. Голова йшла обертом, я ніяк не міг зрозуміти принцип дії тих чи інших директив і мені нічого не залишалося, як почати проводити експерименти, благо для цих цілей є Денвер .

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

Я не переставав дивуватися, скільки знань повинен мати веб-майстер, щоб самостійно вести і обслуговувати свій проект. Всі звичайно знати неможливо, але до цього треба прагнути. Поїхали!

Модулі Apache: mod_headers і mod_expires

Перш за все треба з'ясувати, яке ПЗ використовується на Вашому хостингу. Як Ви напевно вже здогадалися, звернення до модулів mod_headers і mod_expires буде працювати тільки в тому випадку, якщо на серверах Вашого хостинг-провайдера встановлено ПО Apache.

Дані модулі не входять до стандартну збірку Apache і необхідно уточнити в службі підтримки хостингу, встановлені mod_headers і mod_expires на сервері. Якщо такі є, то можна приступати до написання директив.

Модулі mod_headers і mod_expires здатні вбудовувати в відповідь сервера спеціальні заголовки Cache-Control або Expires, які вкажуть браузеру на стороні відвідувача, які файли і на який час треба кешувати.

Важливо! Для того, щоб включити кеш браузера на стороні користувача досить написати директиви тільки для одного з модулів. Звернення до mod_headers і mod_expires одночасно, вважаю не доцільним!

Скажу більше. Тема Expires почав працювати з версією протоколу HTTP / 1.0, а заголовок Cache-Control був прийнятий на озброєння з виходом протоколу HTTP / 1.1.

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

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

Для початку давайте розберемося з директивами, призначеними для модуля mod_headers.

Директиви кешування для модуля mod_headers

Ось такий код треба вставити в файл .htaccess. Щоб уникнути зайвих питань, вставляємо перед рядком # END WordPress:

# Включаємо кеш в браузерах відвідувачів <ifModule mod_headers.c> # Все html і htm файли будуть зберігатися в кеші браузера один день <FilesMatch "\. (Html ​​| htm) $"> Header set Cache-Control "max-age = 43200" </ FilesMatch> # Все css, javascript і текстові файли будуть зберігатися в кеші браузера один тиждень <FilesMatch "\. (js | css | txt) $"> Header set Cache-Control "max-age = 604800" </ FilesMatch> # Все флеш файли і зображення будуть зберігатися в кеші браузера один місяць <FilesMatch "\. (flv | swf | ico | gif | jpg | jpeg | png) $"> Header set Cache-Control "max-age = 2592000" </ FilesMatch> # Відключаємо кешування php та інших службових файлів <FilesMatch "\. (pl | php | cgi | spl | scgi | fcgi) $"> Header unset Cache-Control </ FilesMatch> </ IfModule>

Тепер я трохи поясню, що означають ті чи інші директиви.

<ifModule ...> ... </ IfModule> - це свого роду контейнер, який містить в собі директиви, призначені для того чи іншого модуля Apache і заодно перевіряє наявність оного. Якщо модуль не знайдено, то директиви ігноруються.

В даному випадки ми звертаємося до модуля mod_headers, вихідний файл якого носить назву mod_headers.c, де «.з» - розширення файлу.

<FilesMatch «...»> ... </ FilesMatch> - блокова директива, яка вказує сервера на файли з конкретними розширеннями, на які будуть поширюватися зазначені в директиві правила. В лапках, прописуються регулярні вирази, наприклад «\. (Html ​​| htm) $», за допомогою яких можна згрупувати файли з необхідними розширеннями.

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

Header - директива, що впливає на відправку HTTP заголовка з боку сервера в мережу. Дана директива може прийняти такі аргументи: set, append, add, unset і echo. Всі аргументи я думаю описувати зовсім не обов'язково, хто хоче знати більше, читайте документацію. Розглянемо лише ті аргументи, які використовуються в нашому коді.

set - аргумент, який повідомляє браузеру або проміжного сервера (проксі-сервера), що будь-який попередній заголовок з тим же ім'ям повинен бути замінений. Якщо пояснити російською мовою - це команда браузеру, що при повторному запиті одного і того ж заголовка, діставати дані треба з власного кешу. Тобто, тим самим ми включаємо кеш браузера.

unset - аргумент повідомляє браузеру або проксі серверу, що будь-який заголовок з тим же ім'ям повинен бути отриманий з сервера. Напевно ви вже здогадалися, що даний аргумент - це ні що інше, як заборона кешування.

Cache-Control - заголовок, призначений для управління процесом кешування. Для заголовка Cache-Control може може бути прописано радий директив. Дуже докладний опис Cache-Control і його директив я знайшов тут, кому цікаво можете почитати.

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

Директиви кешування для модуля mod_expires

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

<IfModule mod_expires.c> ExpiresActive On # за умовчанням кеш в 5 секунд ExpiresDefault "access plus 5 seconds" # Включаємо кешування зображень і флеш на місяць ExpiresByType image / x-icon "access plus 1 month" ExpiresByType image / jpeg "access plus 4 weeks "ExpiresByType image / png" access plus 30 days "ExpiresByType image / gif" access plus 43829 minutes "ExpiresByType application / x-shockwave-flash" access plus 2592000 seconds "# Включаємо кешування css, javascript і текстових файлів на один тиждень ExpiresByType text / css "access plus 604800 seconds" ExpiresByType text / javascript "access plus 604800 seconds" ExpiresByType application / javascript "access plus 604800 seconds" ExpiresByType application / x-javascript "access plus 604800 seconds" # Включаємо кешування html і htm файлів на один день ExpiresByType text / html "access plus 43200 seconds" # Включаємо кешування xml файлів на десять хвилин ExpiresByType application / xhtml + xml "access plus 600 seconds" </ ifModule>

З контейнером ifModule я думаю повинно бути все зрозуміло.

ExpiresActive - дана директива активує або блокує кешування на стороні браузера користувача.

on - активувати

off - блокувати

ExpiresDefault - цікава директива, яка здатна ставити час зберігання кешу в браузері за замовчуванням. Тобто, браузер буде кешувати все підряд. В лапках вказується часовий інтервал.

У директивах для модуля mod_expires синтаксис тимчасового інтервалу набагато гнучкіше, ніж для модуля mod_headers, де час задається тільки в секундах.

Для модуля mod_expires час можна встановлювати в наступний обчисленнях:

years - років або year - один рік
months - місяців або month - одні місяць
weeks - тижнів або week - один тиждень
days - днів або day - один день
hours - годин або hour один годину
minutes - хвилин або minute - одна хвилина
seconds - секунд

Перед тимчасовим інтервалом прописується кілька додаткових слів, наприклад:

"Access plus 1 month"

access - основне слово (основа). У перекладі з англ. - доступ;

plus - ключове слово (ключ), після якого має слідувати числове значення.

Часовий інтервал і додаткові слова обов'язково полягає в лапки. У відрізку коду, який був наведений вище, я спеціально, для прикладу, вказав часовий інтервал в різних обчисленнях. Сподіваюся буде зрозуміло. Йдемо далі.

ExpiresByType - директива, що задає часовий інтервал кешування для певних типів файлів. Перевагою даної директиви є те, що вона скасовує час кешу за замовчуванням, для зазначених типів файлів, встановленого директивою ExpiresDefault.

Також обов'язково через слеш вказується тип файлів, наприклад: image / jpeg, text / html або application / x-javascript. Всі типи файлів можна подивитися тут.

На закінчення хочу сказати, що існують і інші способи кешування. Кеш об'єктів можна організувати за допомогою функцій WordPress або за допомогою сторонніх серверів Memcached, APC або Redis.

Звичайно в майбутньому я не обійду увагою і ці теми, так що підписуйтесь на, буде цікаво!

До зустрічі!

З повагою, Віталій Кирилов

«Оптимізація WordPress. Навантаження на сервер і як її знизити
«PageSpeed ​​- реальне прискорення сайту
«Як включити gzip стиск і кратно прискорити сайт
«Як скоротити CSS і прискорити завантаження сайту

Новости