Меню

Как настроить кеш браузера



Как включить кэширование браузером, рецепт для htaccess

Многие веб-мастера пользуются таким инструментом, как Google Page Speed для проверки скорости своего сайта. После анализа он выдает ряд рекомендаций по оптимизации. И одной из таких рекомендация является использование кеша браузера.

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

Но у кэширования есть и минусы — если файл на сервере изменился, то у вас скорее всего отобразится не новая, а старая версия файла. К примеру, файл с именем img01.jpg содержал в себе изображение автомобиля. Вы зашли на сайт, почитали статью и вышли. Но администратор сайта почему-то решил, что картинка автомобиля там неуместна, и решил заменить ее на картинку с пейзажем. Но название файла осталось то же. Через пару дней вы решили еще раз прочитать ту статью. Когда вы зашли на сайт, картинка у вас осталась старая — автомобиль. Это потому, что браузер ее закэшировал с таким названием img01.jpg. И чтобы у вас отобразилась уже новая картинка с пейзажем, вам нужно сбросить кэш браузера комбинацией клавиш Ctrl+F5.

Настройка htaccess

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

После чего в нем прописываются следующие директивы:

Прописав данные правила, Google Page Speed пометит галочкой, что кэширование включено, и начислит вашему сайту дополнительных баллов.

Источник

Кэширование сайта и кэш браузера

Эффективная схема кэширования сайта в браузере обеспечивает высокую скорость загрузки веб-страниц при повторных обращениях к ним.

Содержание

Что такое кэш браузера и кэширование сайта?

Кэш браузера (Browser Cache) — временные файлы ресурсов веб-страниц сайта, сохраняемые браузером для последующего отображения в нём при повторном обращении к соответствующим страницам.

Процесс определения и сохранения кэша в браузере называется браузерным кэшированием (Browser Caching).

Браузерное кэширование можно представить следующим образом:

  1. клиент (браузер) формирует и отправляет запрос на сервер;
  2. сервер формирует ответ и отправляет веб-страницу и все файлы, с ней связанные, в браузер;
  3. браузер отображает веб-страницу, при этом кэширует определённые её ресурсы.

При повторных запросах этой веб-страницы браузер будет использовать файлы из кэша сайта. Срок кэширования определяется браузером согласно ответу сервера относительно каждого отдельного типа файла.

Как кэш браузера влияет на скорость загрузки сайта?

Правильная настройка кэширования веб-страниц позволяет значительно увеличить скорость загрузки сайта за счёт:

  • Уменьшение объёма загружаемых данных при повторных обращениях.
    Если настроить ответ сервера на кэширование всех типов данных, то объём передаваемой информации может быть снижен вплоть до 0 МБ: в таком случае веб-страница будет полностью формироваться из кэша.
  • Снижение нагрузки на сервер.
    Чем меньше данных обрабатывает и передаёт сервер, тем выше его производительность в текущий момент.

Кроме этого, браузерное кэширование значительно экономит веб-трафик клиента, исключая повторное скачивание файлов (картинок, скриптов, стилей) — они будут браться из кэша сайта.

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

Google Developers

Как проверить кэширование сайта в браузере?

Существует ряд способов проверки браузерного кэширования ресурсов сайта:

Проверка в браузере Chrome

Первый способ: обратиться к инструментам веб-разработчика, предоставляемым самим браузером. Рассмотрим на примере браузера Chrome:

  1. Откройте в браузере любую страницу сайта.
  2. Активируйте панель инструментов разработчика.
    Клавиши по умолчанию: Ctrl + Shift + I .
  3. Активируйте вкладку Network.
  4. Обновите страницу.
    Клавиши по умолчанию: Ctrl + F5 .

Если файл кэшируется, то в колонке Size вместо размера файла будет отображаться запись (from memory cache) или (from disk cache):

Обратите внимание, насколько уменьшился объём передаваемых данных из примера на картинках: 3.8 МБ при первичном обращении и 601 КБ при повторном. При этом скорость загрузки страницы сайта снизилась с 12.45 до 7.77 секунд.

Активируйте чекбокс Disable cache во вкладке Network в панели инструментов Chrome, чтобы просмотреть исходный размер и скорость загрузки ресурсов веб-страницы при первичном обращении к ней.

Сервис PageSpeed Insights

Сервис от Google при обнаружении проблем с кэшированием ресурсов проверяемой веб-страницы выдаёт рекомендацию «Используйте кеш браузера». При клике по ссылке «Как исправить?» развернется список файлов, для которых необходимо оптимизировать настройки кэширования в браузере:

Читайте также:  Рация оптим 270 как настроить дальность

Сервис Pingdom Website Speed Test

Pingdom Website Speed Test — качественный популярный сервис проверки скорости загрузки сайта. Подобно сервису PageSpeed Insights, он указывает на проблемы со скоростью загрузки и даёт свои рекомендации. Каждому фактору сервис присваивает определённый рейтинг (Grade).

Фактор кэширования файлов в браузере называется «Leverage browser caching»:

Какие файлы сайта должны кэшироваться?

Ресурсы веб-страниц делятся на 2 группы:

Динамические Эти ресурсы не хранятся на сервере, а генерируются его средствами при запросах веб-страниц. К таким ресурсам обычно относят HTML-код, который может генерироваться посредством PHP на серверах Apache. Статические Такие ресурсы хранятся на сервере. Как правило, к ним относится медиа-контент (картинки и видео), а также файлы стилей, скриптов и шрифтов

Для большинства сайтов подходит схема кэширования всех статических ресурсов.

Заголовки кеширования должны применяться ко всем кешируемым статическим ресурсам, а не только к некоторым из них (например, изображениям). Кешируемые ресурсы включают файлы JavaScript и CSS, графические и другие файлы (мультимедийное содержание, файлы PDF и т. д.). Обычно код HTML не является статическим ресурсом и по умолчанию не считается кешируемым.

Google Developers

Сроки кэширования файлов в браузере

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

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

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

Продолжительность хранения статических ресурсов в кеше должна составлять не менее недели. Внешние ресурсы (объявления, виджеты и др.) должны храниться не менее 1 дня.

Google Developers

Сроки кэширования файлов определяют значения специальных HTTP-заголовков:

Заголовок Expires

Кэширование по этой схеме происходит иначе: при первичном запросе сервер отдаёт каждый кэшируемый ресурс веб-страницы с HTTP-ответом Expires , в качестве значения которого указывается дата истечения срока его хранения в кэше. Например:

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

Заголовок Cache-Control

Браузерное кэширование по схеме HTTP-заголовка Cache-Control является наиболее гибким и актуальным.

Схема выглядит так: сервер передаёт HTTP-ответ Cache-Control , содержащий директиву max-age , в качестве значения которой указывается срок кэширования файла в секундах. Например:

Пока не пройдёт указанное время с момента получения файла, он будет браться из кэша браузера.

Директивы заголовка Cache-Control

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

Директива max-age

Как указывалось выше, с помощью этой директивы сервер даёт знать браузеру, на какой срок можно кэшировать файл. В качестве значения применяется цифра, обозначающая количество секунд.

Единицы времени в секундах

Единица времени Количество секунд
Секунда 1
Минута 60
Час 3600
Сутки 86400
Неделя 604800
Месяц 2592000
Год 31536000
Директива no-cache

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

Директива no-store

Эта директива запрещает сохранять файл браузеру и в других промежуточных кэшах (CDN, прокси-сервера).

Директива public

Эта директива разрешает кэшировать файл как в браузере пользователя, так и в промежуточных кэшах (CDN, прокси-сервера). Применяется по умолчанию.

Директива private

Директива private разрешает кэшировать файл только в браузере пользователя, но не в промежуточных кэшах (CDN, прокси-сервера). Обычно применяется для кэширования персональных данных, актуальных для конечного пользователя.

Сравнение версий файлов в кэше и на сервере

Схему кэширования могут определять HTTP-заголовки для сравнение версий файлов в кэше и на сервере:

Заголовки Last-Modified и If-Modified-Since

Данную схему кэширования можно представить следующим образом:

Браузер делает первичный запрос веб-страницы.

Сервер отдаёт ресурсы (файлы) страницы вместе с HTTP-заголовками Last-Modified , содержащими даты создания (изменения) соответствующих ресурсов. Например:

Читайте также:  Как настроить гитарные педали

Полученные файлы кэшируются браузером.

При последующих запросах данной страницы браузер для каждого кэшируемого файла посылает HTTP-запрос If-Modified-Since , в качестве значения которого указывается дата, которую содержал HTTP-ответ сервера Last-Modified при предыдущем обращении к нему. Например:

Если значения If-Modified-Since и Last-Modified совпадают, сервер отправляет браузеру ответ в виде значения 304 (Not Modified) : файл не претерпел изменений, и его можно брать из кэша. В ином случае сервер вновь передаёт файл в браузер.

К минусам данной схемы кэширования можно отнести постоянные проверяющие актуальность файлов HTTP-запросы If-Modified-Since к серверу.

Заголовки ETag и If-None-Match

Данная схема кэширования полностью идентична указанной выше схеме, но вместо HTTP-заголовков Last-Modified и If-Modified-Since , в качестве значений которых указывались даты создания (изменения) файлов, здесь соответственно применяются заголовки ETag и If-None-Match , содержащие произвольный набор символов, который меняется при изменении самого файла. Например:

Недостатком данной схемы также являются постоянные проверяющие запросы If-None-Match к серверу.

Правильная схема кэширования файлов в браузере

В идеале браузерное кэширование должно функционировать следующим образом:

  1. сервер отправляет файл клиенту при первичном запросе;
  2. клиент кэширует файл на срок, определённый в HTTP-заголовке ответа сервера;
  3. по истечении срока клиент делает запрос к серверу на проверку изменений файла;
  4. если файл не менялся, он вновь берётся из кэша.

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

Если применять только заголовки Last-Modified или ETag , то браузер каждый раз будет посылать серверу запросы на сравнение версий файлов.

Если применять только заголовки Expires или Cache-Control: max-age , то по окончании срока кэширования браузер будет запрашивать файл на скачивание не зависимо от того, претерпел ли он изменения.

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

  1. заголовок, определяющий срок кэширования ( Expires или Cache-Control: max-age );
  2. заголовок, определяющий изменение файла ( Last-Modified или ETag ).

Для всех кешируемых ресурсов нужно обязательно указывать один заголовок из пары Expires и Cache-Control max-age, а также один заголовок из пары Last-Modified и ETag.

Google Developers

Такой подход исключает лишние запросы к серверу за счет установленного срока кэширования (определённого с помощью заголовка Expires или Cache-control: max-age ), а также исключает повторное скачивание ресурса по окончании срока кэширования за счет его проверки на наличие изменений (с помощью заголовков Last-Modified или ETag ).

Включение и настройка кэширования сайта в браузере

Настройка браузерного кэширования осуществляется посредством редактирования конфигурационных файлов сервера (httpd.conf, .htaccess, nginx.conf).

Модуль mod_expires для сервера Apache

Для формирования HTTP-заголовков Expires , определяющих дату окончания срока кэширования ресурса, на серверах Apache применяется модуль mod_expires.

Не вдаваясь в подробности синтаксиса настройки данного модуля, приведем пример готовой конфигурации по включению браузерного кэширования на сайте с комментариями в коде:

Скопируйте данный код в файл .htaccess для включения кэширования файлов в браузере.

Подробности о синтаксисе и настройках модуля mod_expires можно узнать в официальной документации.

Модуль mod_headers для сервера Apache

Для формирования HTTP-заголовков Cache-Control на серверах Apache применяется модуль mod_headers.

Настройка модуля подразумевает использование регулярных выражений для определения типов файлов, для которых будут формироваться заголовки Cache-Control :

Указанный выше код можно скопировать в файл .htaccess для применения настроек кэширования файлов к конкретному сайту.

Если настройки не вступят в силу, неободимо обратиться в техническую поддержку хостинга: возможно, модуль mod_headers не активирован на сервере.

Подробности о синтаксисе и настройках модуля mod_headers можно узнать в официальной документации.

Модуль ngx_http_headers_module для сервера Nginx

Для определения схемы кэширования на сервере Nginx применяется модуль ngx_http_headers_module, позволяющий настраивать любые заголовки ответов сервера.

Настройка заголовков Expires на Nginx

Настройка заголовков Cache-Control на Nginx

Указанный выше код можно скопировать в файл nginx.conf для применения данных настроек к сайту.

Если настройки не вступят в силу, необходимо обратиться в техническую поддержку хостинга: возможно, модуль ngx_http_headers_module не активирован на сервере.

Подробности о синтаксисе и настройках модуля ngx_http_headers_module можно узнать в официальной документации.

Проверка HTTP-заголовков ответа сервера

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

Рассмотрим процесс проверки передаваемых сервером заголовков на примере Chrome:

  1. Откройте в браузере любую страницу сайта.
  2. Активируйте панель инструментов разработчика.
    Клавиши по умолчанию: Ctrl + Shift + I .
  3. Активируйте вкладку Network.
  4. Обновите страницу.
    Клавиши по умолчанию: Ctrl + F5 .
  5. Кликните по интересующему ресурсу из списка.
  6. Изучите HTTP-заголовки, отобразившиеся в правой колонке.
Читайте также:  Как настроить приоритет вайфая

Источник

Кэш браузера

Что такое кэш браузера?

  • htaccess кэширование сохраняет содержимое веб-страницы на локальном компьютере, когда пользователь посещает ее;
  • Использование кэша браузера – веб-мастер дает указания браузерам, как следует рассматривать ресурсы.

Когда браузер отображает веб-страницу, он должен загрузить логотип, CSS файл и другие ресурсы:

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

Как включить кэширование в браузере

  • Измените заголовки запроса ресурсов, чтобы использовать кэширование;
  • Оптимизируйте свою стратегию кэширования.

Изменение заголовков запроса

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

Файл .htaccess контролирует многие важные настройки для вашего сайта.

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

Приведенный ниже код указывает браузеру, что именно кэшировать и как долго это « запоминать «. Его следует добавить в начало файла .htaccess :

Сохраните файл .htaccess , а затем обновите веб-страницу.

Как установить время кэширования для различных типов файлов

В приведенном выше коде заданы промежутки времени. Например, 1 year ( 1 год ) или 1 month ( 1 месяц ). Они связаны с типами файлов. Приведенный выше код устанавливает, что .jpg файлы ( изображения ) следует кэшировать в течение года.

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

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

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

Возможно, что метод Expires не сработает на вашем сервере, в этом случае вы возможно захотите попробовать использовать Cache-Control .

Cache-Control

Этот метод позволяет получить больше контроля над кэшированием страниц в браузере, но многие считают, что проще прописать все настройки один раз.

Пример использования в файле .htaccess :

Приведенный выше код устанавливает заголовок Cache-Control в зависимости от типа файла.

Как работает Cache-Control

Рассмотрим упомянутую выше строку кода кэширования в браузере htaccess :

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

Упомянутая выше строка говорит, что, « если файл будет одним из этих типов, то мы сделаем что-то с ним… »

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

В упомянутой выше строке установлены фактические заголовки и значения:

  • Часть « 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 одновременно.

Источник