Главная страница » Кэширование файлов в браузере: Установка Expire headers

Кэширование файлов в браузере: Установка Expire headers

Что такое Expire headers

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

Ваш сайт состоит из множества файлов. Прошли те времена, когда весь сайт состоял из 5 html страничек, статически связанных между собой.

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

Вероятно, вы уже догадались, для чего нужны Expire headers:

  1. Они позволяют снизить нагрузку на сервер (уменьшая количество запросов)
  2. И, как правило, сайт начинает грузится быстрее. Потому что браузеру не нужно ждать скачивание этих файлов. Он использует копии из кэша!

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

Тестирование

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

Сервис показывает скорость загрузки по различным параметрам и предоставляет соответствующие рекомендации.

Нас интересуют первые две вкладки результатов: PageSpeed и YSlow

На вкладке PageSpeed мы смотрим значение: Leverage Browser Caching

Latest Performance Report for  http   wp best.ru    GTmetrix

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

Параметр на вкладке YSlow называется по-другому: Аdd Expires Headers. Понять можно уже из названия, что это нужный нам параметр.

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

Ручное добавление Expire Headers в файл .htaccess

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

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

Я взял наиболее универсальный пример из источника HTML5 Boilerplate.

Прямая ссылка на файл в репозитарии проекта — https://github.com/h5bp/html5-boilerplate/tree/master/dist/.htaccess

Найдите и скопируйте следующий участок код, включая всё, что находится между этими тегами:

<IfModule mod_expires.c>

</IfModule>

Код на самом деле очень простой. Давайте немного рассмотрим его.

ExpiresActive on
ExpiresDefault "access plus 1 month"

В первых двух строчках, активируется заголовки Expires, затем устанавливается срок хранения по умолчанию, — в данном случае, 1 месяц.

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

# CSS
ExpiresByType text/css "access plus 1 year"

Всё очень просто. Вам даже необязательно что-либо редактировать, но вы можете тестировать или менять значения на те, которые подходят для вас.

Обратите внимание: Допустим, вы хотите изменить сроки хранения картинок. Вы можете выставить год, и, в большинстве случаев, всё будет нормально. Но вы должны помнить, если вы обновите изображение со старым названием, пользователь получит имеющуюся у него копию из кэша. Будьте внимательны!
к содержанию ↑

Автоматический способ установки Expire Headers с помощью плагинов

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

Вместо этого, я использовал крутой плагин под названием autoptimize, который помимо прочих важных функций, также умеет добавлять заголовки Expire.

WordPress › Autoptimize « WordPress Plugins

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

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

Заключение

Устновка Expire Headers это лишь один шаг на пути комплексной оптимизации сайта.
Но шаг один из главных, и должен присутствовать на каждом сайте.

Теперь, когда у вас есть знания, и есть цель, выполните данную простую рекомендацию и получите хорошую выгоду по отношению к затраченному времени!

Всего хорошего! Развивайте и постоянно улучшайте ваш сайт, радуйте ваших пользователей и вызывайте зависть у других блоггеров!