Как использовать кэш браузера: Кэш браузера | .htaccess

Содержание

Кэш браузера | .htaccess

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

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


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

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

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

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

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

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

## EXPIRES CACHING ##
<IfModule mod_expires.c>
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"
</IfModule>
## EXPIRES CACHING ##

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

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

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

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

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

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

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

# 1 Month for most static assets
<filesMatch ".(css|jpg|jpeg|png|gif|js|ico)$">
Header set Cache-Control "max-age=2592000, public"
</filesMatch>

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

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

# 1 Month for most static assets

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

<FilesMatch ". (CSS | JPG | JPEG | PNG | GIF | JS | ICO) $">

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

Самое важное в этой строке то, что в ней перечислены различные типы файлов (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.

Получение нового (некэшируемого) файлового ресурса возможно при наличии уникального имени. Например, если файл 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» , подготовленная редакцией проекта.

Кэш браузера | .htaccess

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

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


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

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

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

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

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

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

## EXPIRES CACHING ##
<IfModule mod_expires.c>
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"
</IfModule>
## EXPIRES CACHING ##

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

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

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

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

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

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

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

# 1 Month for most static assets
<filesMatch ".(css|jpg|jpeg|png|gif|js|ico)$">
Header set Cache-Control "max-age=2592000, public"
</filesMatch>

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

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

# 1 Month for most static assets

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

<FilesMatch ". (CSS | JPG | JPEG | PNG | GIF | JS | ICO) $">

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

Самое важное в этой строке то, что в ней перечислены различные типы файлов (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.

Получение нового (некэшируемого) файлового ресурса возможно при наличии уникального имени. Например, если файл 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» , подготовленная редакцией проекта.

HTTP-кеширование — HTTP | MDN

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

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

Существует несколько видов кешей, которые можно разделить на две основные категории: приватные кеши и кеши совместного использования. В кешах совместного использования (shared cache) хранятся копии, которые могут направляться разным пользователям. Приватный кеш (private cache) предназначен для отдельного пользователя. Здесь будет говориться в основном о кешах браузеров и прокси, но существуют также кеши шлюзов, CDN, реверсные прокси кеши и балансировщики нагрузки, разворачиваемые на серверах для повышения надежности, производительности и масштабируемости веб-сайтов и веб-приложений.

 

Приватный (private) кеш браузера

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

Общий (shared) прокси-кеш

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

Кеширование в HTTP не является обязательным, однако в большинстве случаев бывает полезно повторно использовать ранее сохраненные ресурсы. Тем не менее, стандартные кеши HTTP обычно способны кешировать только ответы на запросы методом GET, а другие отклоняют.

Первичный ключ состоит из метода запроса и запрашиваемого URI (зачастую используется только URI, поскольку целью кеширования являются только GET-запросы). Вот примеры того, что обычно записывается в кеш:

  • Успешно загруженные ресурсы: ответ 200 OK на запрос методом GET HTML-документов, изображений или файлов.
  • Постоянные перенаправления: ответ 301 Moved Permanently («перемещено навсегда»).
  • Сообщения об ошибках: ответ 404 Not Found («не найдено»).
  • Неполные результаты: ответ 206 Partial Content («частичное содержимое»).
  • Ответы на запросы отличные от GET, если есть что-либо, подходящее для использования в качестве ключа кеша.

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

Заголовок

Cache-control

Поле Cache-Control общего заголовка HTTP/1.1 используется для задания инструкций по механизму кеширования как в запросах, так и в ответах. Применяется для задания политик кеширования.

Полное отсутствие кеширования

В кеше не должно сохраняться ничего — ни по запросам клиента, ни по ответам сервера. Запрос всегда отправляется на сервер, ответ всегда загружается полностью.

Cache-Control: no-store
Cache-Control: no-cache, no-store, must-revalidate
Кешировать, но проверять актуальность

Перед тем, как выдать копию, кеш запрашивает исходный сервер на предмет актуальности ресурса.

Cache-Control: no-cache
Приватные (private) и общие (public) кеши

Директива «public» указывает, что ответ можно сохранять в любом кеше. Это бывает полезно, если возникает потребность сохранить страницы с HTTP-аутентификацией, или такими кодами ответа, которые обычно не кешируются. Директива же «private» указывает, что ответ предназначен отдельному пользователю и не должен храниться в кеше совместного использования. В этом случае ответ может сохраняться приватным кешем браузера.

Cache-Control: private
Cache-Control: public
Срок действия (Expiration)

Самой важной здесь является директива «max-age=<seconds>» — максимальное время, в течение которого ресурс считается «свежим». В отличие от директивы Expires, она привязана к моменту запроса. К неизменяющимся файлам приложения обычно можно применять «агрессивное» кеширование. Примером таких статических файлов могут быть изображения, файлы стилей (CSS) или скриптов (JavaScript).

Подробнее об этом рассказывается в разделе Свежесть ресурса.

Cache-Control: max-age=31536000
Проверка актуальности

При использовании директивы «must-revalidate» кеш обязан проверять статус ресурсов с истекшим сроком действия. Те копии, что утратили актуальность, использоваться не должны. Подробнее об этом рассказано ниже, в разделе Валидация кеша.

Cache-Control: must-revalidate

Заголовок

Pragma

Pragma является заголовком HTTP/1.0. Он не описан для HTTP-ответов и, таким образом, не может служить надежной заменой общему заголовку Cache-Control протокола HTTP/1.1, хотя его поведение аналогично «Cache-Control: no-cache» когда поле заголовка Cache-Control опущено в запросе. Использовать его следует только для совместимости с клиентами HTTP/1.0.

Однажды попав в кеш, ресурс, теоретически, может храниться там вечно. Однако, поскольку объем хранилища конечен, записи периодически приходится оттуда удалять.  Этот процесс называют вытеснением данных из кеша (cache eviction). Кроме того, ресурсы могут изменяться на сервере, поэтому кеш требуется обновлять. Поскольку HTTP является клиент-серверным протоколом, сервера не могут сами обращаться к кешам и клиентам при изменении ресурса; им необходимо договориться о сроке действия сохраненной копии. До его истечения ресурс считается свежим (fresh), после — устаревшим (stale). Алгоритмы вытеснения отдают предпочтение «свежим» ресурсам. Тем не менее, копия ресурса не удаляется из кеша сразу же по истечении ее срока действия; при получении запроса на устаревший ресурс кеш передаёт его дальше с заголовком If-None-Match на случай, если копия все еще актуальна. Если это так, сервер возвращает заголовок 304 Not Modified («не изменялось»), а тело ресурса не посылает, экономя тем самым траффик.

Вот пример того, как протекает этот процесс при использовании совместного кеша прокси:

Срок действия (freshnessLifetime) вычисляется на основании нескольких заголовков. Если задан заголовок «Cache-control: max-age=N», то срок действия равен N. Если его нет, а это бывает очень часто, проверяется заголовок Expires, и, если он есть, то срок действия берется равным значению заголовка Expires минус значение заголовка Date. Наконец, если нет ни того ни другого, смотрят заголовок Last-Modified.  Если он есть, то срок действия равен значению заголовка Date минус значение заголовка Last-modified разделить на 10.
Время устаревания (expirationTime) вычисляется следующим образом:

expirationTime = responseTime + freshnessLifetime - currentAge

где responseTime — это время получения ответа по часам браузера, а currentAge — текущий возраст кеша.

Обновление статических ресурсов (Revved resources)

Чем больше ресурсов может быть взято из кеша, тем быстрее сайт реагирует на запросы и тем выше его производительность. Из этих соображений их «срок годности» имеет смысл делать как можно большим. Однако, возникает проблема с ресурсами, которые обновляются редко и нерегулярно. Как раз их кеширование дает больше всего выгоды, но сильно затрудняет обновление. Такие ресурсы можно найти на любой веб-странице: файлы скриптов (JavaScript) и стилей (CSS) изменяются редко, но уж если это произошло, обновление надо произвести как можно быстрее.

Веб-разработчики разработали метод, который Стив Сандерс (Steve Sounders) назвал revving[1], что можно перевести как «оборачиваемость». Для редко обновляемых файлов используют особый способ именования: в их URL, обычно в имя файла, добавляют номер релиза или версии. Таким образом, каждая новая версия считается отдельным ресурсом, срок устаревания которого отодвинут далеко в будущее, как правило, на год, или больше. Недостатком этого метода является то, что для получения новых версий ресурса приходится обновлять все ссылки на него — это некоторое усложнение, справиться с которым разработчику помогает цепочка инструментов. Обновление статических ресурсов влечет за собой обновление и часто изменяемых ресурсов. Когда считываются первые, считываются и новые версии вторых.

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

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

Валидация кеша запускается при нажатии пользователем кнопки перезагрузки. Кроме того, она может выполняться в ходе обычного просмотра страниц, если кешированный ответ включает заголовок «Cache-control: must-revalidate». Другим фактором являются настройки кеширования браузера — можно потребовать принудительной валидации при каждой загрузке документа.

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

Заголовки ETag

Заголовок ответа ETag является непрозрачным для клиентского приложения (агента) значением, которое можно использовать в качестве сильного валидатора. Суть в том, что клиент, например, браузер, не знает, что представляет эта строка и не может предсказать, каким будет ее значение. Если в ответе присутствует заголовок ETag, клиент может транслировать его значение через заголовок If-None-Match будущих запросов для валидации кешированного ресурса.

Заголовок ответа Last-Modified можно использовать в качестве слабого валидатора. Слабым он считается из-за того, что имеет 1-секундное разрешение. Если в ответе присутствует заголовок Last-Modified, то для валидации кешированного документа клиент может выводить в запросах заголовок  If-Modified-Since.

При запросе на валидацию сервер может либо проигнорировать валидацию и послать стандартный ответ 200 OK, либо вернуть ответ 304 Not Modified (с пустым телом), тем самым указывая браузеру взять копию из кеша. В последнем случае в ответ могут входить также заголовки для обновления срока действия кешированного ресурса.

Заголовок HTTP-ответа Vary определяет, как по заголовкам будущих запросов понять, может ли быть использована копия из кеша, или нужно запросить новые данные у сервера.

Если кеш получает запрос, который можно удовлетворить сохраненным в кеше ответом с заголовком Vary, то использовать этот ответ можно только при совпадении всех указанных в Vary полей заголовка исходного (сохраненного в кеше) запроса и нового запроса.

Это может быть полезно, например, при динамическом предоставлении контента. При использовании заголовка Vary: User-Agent кеширующие сервера, принимая решение об использовании страницы из кеша, должны учитывать агент пользователя. Так можно избежать ситуации, когда пользователи мобильных устройств по ошибке получат десктопную версию вашего сайта. Вдобавок, это может помочь Google и другим поисковым системам обнаружить мобильную версию страницы, и может также указать им на то, что здесь нет никакой подмены контента с целью поисковой оптимизации (Cloaking).

Vary: User-Agent

Поскольку значение заголовка User-Agent различается («varies») у мобильных и десктопных клиентов, закешированный мобильный контент не будет по ошибке отсылаться пользователям десктопов и наоборот.

WordPress Super Cache — используем кеш браузера для ускорения сайта


Зачем использовать кэш браузера?

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

Описание и возможности плагина

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

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

Что еще умеет делать WordPress Super Cache плагин:

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

Установка плагина WP Super Cache

Плагин можно найти в репозитории WordPress. Для этого войдите в админ-панель под своим логином и паролем.

  • Выберите меню «Плагины» (1) и нажмите «Добавить новый» (2).
  • В строке поиска напечатайте название плагина WP Super Cache (3).
  • Найдите в появившемся списке нужный вариант и нажмите кнопку «Установить» (4).
  • После установки активируйте плагин, нажав соответствующую кнопку.

Даже после активации плагин WP Super Cache по умолчанию отключен, поэтому вверху экрана вы увидите соответствующее предупреждение.

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

На странице с настройками вы можете увидеть еще одно уведомление об изменении файла wp-config.php, после обновления страницы оно исчезнет.

Чтобы заставить плагин работать:

  1. Выберите опцию «Кэширование включено»
  2. Нажмите кнопку «Обновить».
  3. Затем выполните проверку правильности подключения плагина, используя кнопку «Проверить».

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

В противном случае сообщение выводится красным цветом и необходимо будет искать причину неполадки.

Настройки плагина WordPress Super Cache — как включить и настроить кеширование

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

Убедитесь, что кэширование включено, и выберите один из трех режимов обслуживания кэша:

  1. mod_rewrite – это самый быстрый вариант, который позволяет WordPress обслуживать статические страницы из кэша без обращения к PHP интерпретатору на сервере;
  2. режим PHP используется по умолчанию и потребляет больше ресурсов, что может оказаться невыгодным в случае большой загруженности сервера;
  3. упрощенное кэширование менее производительное, чем предыдущие варианты, но и ресурсов затребует минимум.

Следующие параметры требуют настройки в разделе «Разное».

  1. Опция «Сжимать файлы кэша» может конфликтовать с другими алгоритмами сжатия. Если к сайту подключены еще плагины, обеспечивающие сжатие, не устанавливайте этот флажок.
  2. Кэширование страниц не требуется для авторизованных пользователей или тех, кто оставляет комментарии на сайте. Включите эту опцию, чтобы разрешить таким посетителям просмотр страницы в ее текущем виде.
  3. Автоматическая перестройка кэша не нужна, если на сайте имеется часто обновляемая информация. В противном случае посетители увидят устаревшие страницы.
  4. Ошибка 304 возникает, когда сервер сообщает браузеру, что со времени последнего визита содержимое страницы не изменилось. В этом случае загрузка происходит из кэша браузера, что дополнительно ускоряет работу сайта.
  5. На странице с параметром GET присутствует поиск по определенным критериям (даты, цена), специфичным при каждом посещении. Такие страницы кэшировать не нужно.
  6. Если зарегистрированные пользователи считаются анонимными, кэшированые страницы будут выдаваться всем без исключения.
  7. Последняя опция в этом разделе – это реклама плагина со встроенной в футере ссылкой на автора.

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

  1. Если на сайте присутствуют динамические элементы, при кэшировании некоторые из них могут работать неправильно. В этом случае потребуется режим упрощенного или PHP-кэширования и включенная опция динамического кэширования.
  2. Для сайтов, разработанных специально для мобильных устройств, потребуется включить поддержку, если шаблон не является адаптивным.
  3. Опция «Убрать поддержку UTF-8» не требуется, если все символы на сайте отображаются нормально.
  4. Очистку файлов кэша при новых публикациях можно включить, если сайт часто обновляется.
  5. Дополнительная сверка понадобится, если возникают проблемы с кэшированием какой-либо страницы.
  6. Если посетитель оставил комментарий на странице, после его модерации кэш обновится.
  7. Посмотреть кэшированные страницы можно на владке «Состояние кэша», поэтому опция необязательна.
  8. Опция замедляет работу файлов, предупреждая возможную проблему на сервере при кэшировании страниц.
  9. Опция для разработчиков загружает кэш только после загрузки WordPress.

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

Если вы выбрали способ кэширования страниц методом mod-rewrite, плагин запросит обновление прав на запись. Для этого прокрутите страницу вниз до кнопки «Обновить правила Mod-Rewrite» и нажмите ее.

Затем установите время и период, в течение которого кэшированные данные на сервере будут действительны. Начните со значения 3600 секунд (1 час). Если на вашем сайте большое количество статей, возможно, понадобится задать большее время вплоть до нескольких суток, после чего кэш будет считаться устаревшим. Там же можно запланировать очистку кэша по расписанию, настраивая таймер и интервал обновления. Для неменяющихся сайтов сборку мусора можно отменить совсем, устанавливая значение таймаута, равное нулю.

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

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

На вкладке «Настройка CDN» подключается платный сервис для эффективного распределения информации при выдаче из кэша. Вкладка «Состояние кэша» покажет, какие страницы кэшируются, их можно вручную удалять из списка.

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

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

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

Вкладка «Плагины» понадобится, только если вы собираетесь подключить другие плагины, не влияющие на кэширование файлов.

Имейте в виду, некоторые из них работают только в режиме PHP-кэширования. Для специалистов на вкладке «Обслуживание» включается режим отладки и опция сохранения логов.

Использование кеша браузера, как почистить кеш ВордПресс

Через некоторое время работы плагина WP Super Cache вы заметите формирование кэша для сайта. Правильная настройка плагина значительно улучшит время загрузки сайта. Кэшированные страницы хранятся в виде HTML или PHP файлов на сервере вашего хостинга. Обычно сервер знает, какие страницы были обновлены, и выдает пользователю свежую версию. Однако, если возникают проблемы с отображением обновленной информации, можно вручную очистить кэш. Удалите кэшированные страницы с сервера, используя команду на панели управления «Удалить весь кэш» или нажав на такую же кнопку в настройках плагина.

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

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

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

iPipe – надёжный хостинг-провайдер с опытом работы более 15 лет.

Мы предлагаем:

Браузерное или клиентское кеширование

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

Чеще всего на стороне браузера кешируются файлы изображений, JS и CSS файлы. Чуть реже имеет смысл кэшировать страницы и бинарные файлы (медиа-файлы, PDF, скачиваемые документы и архивы и т.д.).

Статические ресурсы должны иметь хотя бы недельное время жизни кэша, а лучше кешировать их сразу на год. Таким образом, эти ресурсы будут только один раз скачиваться с сервера, а затем браузер будет либо сразу использовать локальную копию (если указан заголовок Expires или Cache-Control), либо после проверки на неизменность (если указан заголовок Last-Modifed или ETag).

Заголовки Expires и Cache-Control: max-age

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

Заголовки Last-Modifed и ETag

В качестве значения заголовка Last-Modifed используется дата, а для заголовка ETag — произвольная строка. Если используются эти заголовки, то браузер, прежде чем использовать закешированный ресурс, получит с сервера текущее значение заголовка и сравнит его с заголовком закешированной версии — если данные совпадут, то будет использоваться локальная версия, а если нет — произойдёт повторная загрузка. Запросы проверки происходят быстрее, чем полная загрузка ресурсов, что даёт прирост производительности сайта при повторном использовании ресурсов.

Оптимальная стратегия клиентского кеширования

Для редко меняющихся файлов стоит поставить Expires на дату, которая наступит через год, а в момент изменения этих ресурсов использовать метод «отпечатков пальцев» (fingerprinting)— добавлять к имени файла небольшую часть хеша, которая фомируется на основе его содержания. Таким образом, вся статика всегда закеширована на клиенте, а при изменении этой самой статики меняются имена файлов и они автоматически перезагружаются браузером.

Собственно техника fingerprinting активно используется для статичных ресурсов (стилей и скриптов) во многих фреймворках (в частности, в Ruby on Rails). А массовую простановку для всех типов статичных файлов заголовка Expires можно реализовать на стороне веб-сервера (в nginx, например).

Использование кэша карт клиентами—ArcGIS Server

Когда клиенты отправляют запросы к ArcGIS Server для отображения картографического сервиса, ответ сервера обычно кэшируется браузером и повторно используется в течение некоторого периода времени. Это помогает ArcGIS Server добиться максимально возможной скорости отображения картографического сервиса. Однако в зависимости от использования картографического сервиса и связанных с ним данных в приложении, может потребоваться изменить время использования кэшированного ответа. Это можно сделать с помощью добавления свойства cacheControlMaxAge к JavaScript Object Notation (JSON) вашего сервиса.

Как используется свойство cacheControlMaxAge

Ответы картографического сервиса ArcGIS Server содержат тег объекта (ETag) и заголовок Cache-Control. Значение ETag является уникальным идентификатором ответа. Заголовок Cache-Control имеет значение максимальной длительности, который сообщает браузеру максимальный период времени, в течение которого можно повторно использовать кэш. Это значение управляется свойством cacheControlMaxAge.

При повторе запроса, когда максимальное время действия кэша еще не прошло, браузер будет использовать кэшированный ответ, не отправляя запрос к серверу. Если максимальное время действия кэша уже превышено, браузер должен отправить на сервер запрос и присвоить ответу в кэше заголовок IF-NONE-MATCH с соответствующим значением ETag. ArcGIS Server оценивает запрос и использует значение ETag для определения изменения запроса. Если ответ сервера отличается от копии в браузере, сервер отправит браузеру полностью новый ответ. Если ответ сервера идентичен копии в браузере, сервер сообщает браузеру, что можно продолжать использовать ответ в кэше.

Задание значения свойства cacheControlMaxAge

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

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

Для кэшированных картографических сервисов, которые разрешают клиентам локальное кэширование листов, по умолчанию используется значение 86400 секунд (1 день). Это означает, что если запрос повторяется в течение 1 дня, браузер будет использовать ответ из кэша.

Более подробно о локальном хранилище кэша

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

Чтобы добавить свойство cacheControlMaxAge к сервису и задать для него значение по умолчанию, сделайте следующее:

  1. В веб-браузере откройте директорию ArcGIS Server Administrator и войдите под именем пользователя с правами администратора. Адрес URL в формате https://gisserver.domain.com:6443/arcgis/admin.
  2. Щелкните services и выберите картографический сервис, который вы хотите изменить, в списке Сервисы. Если сервис не отображается в списке, он может располагаться в папке в Корневой папке.
  3. Прокрутите вниз страницу Сервис – <service name> (<service type>) и щелкните редактировать.
  4. В диалоговом окне Свойства сервиса найдите раздел свойств сервиса JSON.
  5. Добавьте свойство cacheControlMaxAge в раздел и задайте для него значение (в секундах), например:
    "properties": {
      "cacheControlMaxAge": "2592000",
  6. Щелкните Сохранить изменения.
  7. На странице Service – <service name> (<service type>) проверьте, что свойство cacheControlMaxAge и указанное для него значение отображаются в разделе Свойства.

Кэш — Help Mail.ru. Atom

Кэш (cache) браузера — это папка с копиями данных с веб-страниц, которые вы посещали ранее. Обычно в кэше сохраняются изображения, видео, музыка, стили, скрипты, то есть те данные, которые с минимальной вероятностью могут измениться за время между двумя запросами. При повторном заходе на сайт браузер извлечет данные из кэша, а не будет загружать их из интернета. Применение кэша снижает нагрузку на сеть и повышает скорость загрузки страниц.

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

Что нужно знать о приватности при сохранении данных в кэше:

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

Чтобы очистить кэш браузера:

  • Нажмите  в правом верхнем углу браузера → «Дополнительные инструменты» → «Удаление данных о просмотренных страницах»;
  • Укажите временной диапазон, например за прошедший час или за все время;
  • Снимите флажки напротив всех типов данных, кроме пункта «Изображения и другие файлы, сохраненные в кэше», если не хотите удалять ничего, кроме кэша браузера;
  • Нажмите кнопку «Удалить данные».

Также вы можете удалять другие данные о работе в браузере, например, историю просмотров, файлы cookie и другие данные сайтов.

If-None-Match — HTTP | MDN

Заголовок HTTP-запроса If-None-Match делает запрос условным. Для методов GET и HEAD сервер отправит обратно запрошенный ресурс со статусом 200 , только если у него нет ETag , соответствующего данным. Для других методов запрос будет обработан только в том случае, если существующий в конечном итоге ресурс ETag не соответствует ни одному из перечисленных значений.

Когда условие не выполняется для методов GET и HEAD , сервер должен вернуть код состояния HTTP 304 (не изменено). Для методов, которые применяют изменения на стороне сервера, используется код состояния 412 (Ошибка предварительного условия). Обратите внимание, что сервер, генерирующий ответ 304, ДОЛЖЕН сгенерировать любое из следующих полей заголовка, которые были бы отправлены в ответе 200 (OK) на тот же запрос: Cache-Control, Content-Location, Date, ETag, Expires и Vary.

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

При использовании в сочетании с If-Modified-Since , If-None-Match имеет приоритет (если сервер поддерживает это).

Есть два распространенных варианта использования:

  • Для методов GET и HEAD , чтобы обновить кэшированный объект, который имеет связанный ETag .
  • Для других методов, и в частности для PUT , If-None-Match , используемого со значением * , может использоваться для сохранения файла, о существовании которого не известно, гарантируя, что другая загрузка не произошла раньше, потеря данные предыдущего пути; эта проблема является разновидностью проблемы с утерянным обновлением.
  Если-None-Match: ""
If-None-Match: "", "",…
Если-None-Match: *  
Теги объектов, однозначно представляющие запрошенные ресурсы. Они представляют собой строку символов ASCII, помещенных в двойные кавычки (например, "675af34563dc-tr34" ), и могут иметь префикс W / , чтобы указать, что следует использовать алгоритм слабого сравнения (это бесполезно с If-None- Соответствует , поскольку он использует только этот алгоритм).
*
Звездочка — это специальное значение, представляющее любой ресурс. Они полезны только при загрузке ресурса, обычно с PUT , чтобы проверить, был ли ранее загружен другой ресурс с идентификатором.
 Если-None-Match: "bfc13a64729c4290ef5b2c2730249c88ca92d82d"

Если-None-Match: W / "67ab43", "54ed21", "7892dd"

Если-None-Match: *
 

Таблицы BCD загружаются только в браузере

Что такое кеш браузера и почему он важен?

Вы слышали слово «кэш» раньше, но не знаете точно, что оно означает в контексте Интернета.Говоря простым языком, кеширование означает размещение чего-либо в хранилище (обычно в секрете) на случай, если это может пригодиться позже (например, кеш оружия). Браузер или веб-кеш делают именно это, за исключением программ и ресурсов веб-сайта. Когда вы посещаете веб-сайт, ваш браузер берет части страницы и сохраняет их на жестком диске вашего компьютера. Некоторые из ресурсов, которые хранит ваш браузер:

  • Изображения — логотипы, изображения, фоны и т. Д.
  • HTML
  • CSS
  • JavaScript

Короче говоря, браузеры обычно кэшируют так называемые «статические ресурсы» — части веб-сайта, которые не изменяются при посещении. посетить.

Что и на какой срок кэшировать, определяет сайт. Некоторые активы удаляются с вашего компьютера через несколько дней, а другие могут оставаться в кэше до года.

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

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

Преимущества кэширования

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

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

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

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

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

Наряду с большими изображениями, сложные сайты используют большие файлы JavaScript, необходимые для таких приложений, как тележки для покупок, интерактивные изображения и списки желаний. Представьте, как это отрицательно повлияет на коэффициент конверсии, если пользователю придется ждать пять-десять секунд, пока под продуктом не появится кнопка «Купить сейчас». ВНИМАНИЕ !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! Быстрый и плавный просмотр страниц важен для того, чтобы клиенты чувствовали себя комфортно и стимулировали конверсии. Кроме того, в следующий раз, когда вы посетите кэшированный сайт электронной торговли, эти активы по-прежнему будут доступны на вашем устройстве для более быстрой загрузки.

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

Некоторые подводные камни

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

Если вы правильно выполнили замену образа, проблема обычно в кэшировании.

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

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

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

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

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

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

← Документы ServerPilot

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

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

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

Например, заголовок ответа, такой как:

 Истекает: Thu, 05 Apr 2063 12:00:00 GMT 

сообщает браузеру не запрашивать файл повторно до апреля 2063 года.

Риски кеширования браузера

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

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

Когда вы используете кеширование браузера, единственный способ гарантировать, что пользователь видит больше всего последняя версия измененного файла предназначена для изменения имени файлов. Будьте осторожны с кешированием браузера!

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

Вы можете добавить следующее в свое приложение .htaccess в, для Например, установите срок действия кеша браузера по умолчанию на 300 секунд и более 3600 секунд для файлов CSS:

 Истекает Действует
Истекает По умолчанию A300
Текст ExpiresByType / CSS A3600 

Используя указанный выше синтаксис, веб-сервер вычислит правильную дату для Заголовок Expires и добавит этот заголовок Expires в ответ.

Для получения дополнительной информации о доступных параметрах для заголовков с истекшим сроком действия см. Apache документация по mod_expires.

Как просмотреть кэшированные страницы и файлы из вашего браузера

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

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

Что такое файлы cookie и кеш браузера?

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

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

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

Файлы cookie записывают такую ​​информацию, как ваше последнее посещение веб-сайта или данные для входа.Вот почему вам часто приходится заново заходить на каждый сайт после удаления файлов cookie.

Как работает кеширование браузера?

Когда вы посещаете веб-сайт в первый раз, браузер загружает с сервера все данные и мультимедиа.

При повторном посещении того же сайта позже браузер получает с веб-сервера только информацию о HTML-странице.

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

Как просматривать кэшированные страницы и файлы

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

Инструкции для Mac

На Mac файлы хранятся в папке Caches библиотеки на вашем компьютере.

Один из способов найти папку кэшей:

  1. Откройте Finder и выберите Go в меню ленты.
  2. Удерживайте нажатой клавишу Alt (опция) . В раскрывающемся меню появится папка библиотеки.
  3. Найдите папку Caches , а затем папку вашего браузера, чтобы увидеть все кэшированные файлы, хранящиеся на вашем компьютере.

Более быстрый способ сделать это:

  1. Открыть Finder
  2. Удерживать Cmd + Shift + G
  3. Введите / Users / USERNAME / Library / Caches / like / Users / Anya / Library / Caches /
  4. Press Введите ключ .
  1. Найдите папку своего браузера, чтобы просмотреть кэшированные файлы.

Кэшированные файлы Google Chrome будут находиться в папке Google > Chrome > Default > Cache . Для Firefox и Opera поищите папки Firefox и Opera cache соответственно.

Для кеша Safari используйте другой ярлык:

  /Users/USERNAME/Library/Containers/com.apple.Safari / Data / Library / Caches / . 
Инструкции для Windows

В Windows путь к кешу браузера немного отличается. Например, для Google Chrome это выглядит так:

  C: \ Users \ USERNAME \ AppData \ Local \ Google \ Chrome \ User Data \ Default \ Cache . 

Вы также можете найти папку кэша Chrome с помощью команды Выполнить .

Доступ к команде «Выполнить» через меню Пуск или с помощью сочетания клавиш Windows + R .Затем скопируйте и вставьте в командную строку следующее:

  \ AppData \ Local \ Google \ Chrome \ User Data \ Default \ Cache . 

Поскольку все интернет-браузеры по умолчанию установлены на системном диске C, вы можете легко просматривать кэшированные страницы и файлы из любого браузера, следуя аналогичному пути. Просто найдите имя своего браузера по пути \ AppData \ Local , например \ AppData \ Local \ Mozilla \ Firefox \ или \ AppData \ Local \ Microsoft \ Edge \ .

Как читать кэшированные файлы

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

Вы можете щелкнуть каждый файл, чтобы открыть его, или декодировать кэшированные файлы с помощью специального программного обеспечения или расширения браузера. Один из лучших вариантов — использовать один из инструментов веб-браузера от Nirsoft.Для Google Chrome это ChromeCacheView.

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

Помимо имени файла, вы увидите URL, тип и размер файла, а также другие свойства. Вы можете экспортировать отдельный файл или полный список, скопировать URL-адреса ваших кэшированных файлов и извлечь файлы из кеша, если вы хотите сохранить их в другой папке.

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

Как просматривать файлы cookie в браузере

Поскольку файлы cookie несут ответственность за раскрытие ваших личных данных в Интернете, в большинстве браузеров вы можете найти их в разделе Privacy раздела Settings .

Например, если вы хотите просматривать файлы cookie в Google Chrome, перейдите в меню ленты Chrome и выберите Настройки .Оттуда перейдите по пути Конфиденциальность и безопасность > Файлы cookie и другие данные сайта .

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

Тогда вам решать, сохранять или удалять эти отслеживающие файлы cookie.

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

Пора очистить кеш браузера

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

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

Использовать кеширование браузера | GTmetrix

Обзор

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

  • Сокращает время загрузки страницы для повторных посетителей
  • Особенно эффективен на веб-сайтах, где пользователи регулярно посещают одни и те же области веб-сайта.
  • Соотношение прибыли и затрат: высокое
  • Требуется доступ
Общие рекомендации по установке срока действия:
  • Истинно статический контент (глобальные стили CSS, логотипы и т. Д.) — доступа плюс 1 год
  • Все остальное — доступ плюс 1 неделя
Какова оценка вашего сайта по этой рекомендации?

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

Каждый раз, когда браузер загружает веб-страницу, он должен загружать все веб-файлы для правильного отображения. страница. Это включает в себя весь HTML, CSS, JavaScript и изображения.

Некоторые страницы могут состоять только из нескольких файлов и быть небольшими по размеру — может быть, несколько килобайты.Однако для других файлов может быть много, а их может быть несколько. мегабайты большие. Twitter.com, например, составляет 3 МБ +.

Проблема двоякая.

  1. Эти большие файлы загружаются дольше и могут быть особенно болезненными, если у вас медленное интернет-соединение (или мобильное устройство).
  2. Каждый файл отправляет отдельный запрос к серверу. Чем больше запросов получает ваш сервер одновременно тем больше работы ему нужно сделать, только еще больше снижая скорость вашей страницы.

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

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

Как это работает?

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

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

Почему это важно?

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

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

Прочтите нашу документацию Lighthouse, чтобы узнать больше о включении кеширования браузера.

Как исправить предупреждение о кешировании браузера в WordPress

Google PageSpeed ​​Insights — один из нескольких полезных инструментов для измерения производительности веб-сайта.Однако некоторые из его предложений — например, предупреждение «Используйте кеширование браузера» — могут ввести в заблуждение неопытных владельцев сайтов.

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

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

Давайте начнем!

Предпочитаете видеоверсию?

Что такое предупреждение о кешировании браузера?

Чтобы понять предупреждение о кешировании браузера, сначала нужно немного узнать о Google PageSpeed ​​Insights. Если вы новичок в этой платформе, мы рекомендуем прочитать полное руководство Google PageSpeed ​​Insights: оценка 100/100 с помощью WordPress.

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

Предупреждение об использовании кеширования браузера в Google PageSpeed ​​Insights

В версии 5 Google PageSpeed ​​Insights это сообщение было заменено предупреждением «Обслуживать статические ресурсы с эффективной политикой кеширования»:

Обслуживайте статические ресурсы с предупреждением об эффективной политике кеширования в Google PageSpeed ​​Insights

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

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

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

Если вы видите предупреждение «Используйте кеширование браузера» в результатах теста производительности, это, вероятно, означает одно из двух:

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

Решения этого предупреждения включают устранение одной или обеих этих проблем.

🚨Внимание! Используйте кеширование в браузере🚨 Если чтение этих слов заставляет ваше сердце биться чаще, вам стоит ознакомиться с этим руководством по исправлению этого ужасного сообщения⚡️Нажмите, чтобы твитнуть

Как исправить предупреждение о кешировании браузера в WordPress (3 метода)

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

1. Добавьте заголовки Cache-Control и Expires

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

Простой способ определить, является ли это причиной появления предупреждения о кешировании браузера, — это просмотреть сведения, приведенные для каждого ресурса.В Google PageSpeed ​​Insights версии 5 вместо TTL кэша вы увидите «Нет»:

.

Кэшировать списки TTL в Google PageSpeed ​​Insights

В качестве удобного справочника предыдущие версии Google PageSpeed ​​Insights показывали сообщение «срок действия не указан» при отсутствии заголовков:

Подпишитесь на информационный бюллетень

Мы увеличили наш трафик на 1187% с помощью WordPress.

Мы покажем вам, как это сделать.

Присоединяйтесь к 20 000+ другим, кто получает нашу еженедельную рассылку с инсайдерскими советами по WordPress!

Подпишись сейчас

Ресурсы, перечисленные в предупреждении об использовании кеширования браузера

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

Необязательно добавлять оба , поскольку это может быть избыточным. Cache-Control новее и обычно является рекомендуемым методом. Однако некоторые инструменты веб-производительности, такие как GTmetrix, по-прежнему проверяют наличие заголовков Expires.

Если вы размещаете на Kinsta, вам не нужно беспокоиться об установке этих заголовков. Все наши серверы Nginx уже включают их. Те, кто использует сеть доставки контента (CDN), также должны иметь эти заголовки.

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

Как добавить заголовки управления кешем
в Nginx

Чтобы добавить заголовки Cache-Control в Nginx, вы можете добавить следующее в файл конфигурации вашего сервера:

  расположение ~ * \. (Js | css | png | jpg | jpeg | gif | svg | ico) $ {
 истекает 30 дней;
 add_header Cache-Control «общедоступный, без преобразования»;
}
  

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

Как добавить заголовки управления кешем в Apache

Если вместо этого у вас есть сервер Apache, вы можете добавить следующий код в файл .htaccess :

  
        Заголовочный набор Cache-Control "max-age = 84600, public"
 

Этот фрагмент следует добавить перед «#BEGIN WordPress» или после «#END WordPress».В этом случае срок действия кеша истекает через 84600 секунд.

Как добавить заголовки Expires в Nginx

Вы можете добавить заголовки Expires в Nginx, добавив следующее в свой серверный блок. В этом примере вы можете увидеть, как указать разное время истечения срока действия в зависимости от типов файлов:

  расположение ~ * \. (Jpg | jpeg | gif | png | svg) $ {
        истекает 365 дней;
    }

    расположение ~ * \. (pdf | css | html | js | swf) $ {
        истекает 2d;
    }  
Как добавить заголовки Expires в Apache

Вы можете добавить заголовки Expires в Apache, добавив в файл .htaccess файл:

  ## ИСКЛЮЧАЕТ КЭШЕР ЗАГОЛОВКИ ##

ExpiresActive On
ExpiresByType image / jpg «доступ на 1 год»
ExpiresByType image / jpeg "доступ на 1 год"
ExpiresByType image / gif "доступ на 1 год"
ExpiresByType image / png "доступ на 1 год"
ExpiresByType image / svg "доступ на 1 год"
ExpiresByType text / css "доступ на 1 месяц"
Приложение ExpiresByType / pdf "доступ на 1 месяц"
Приложение ExpiresByType / javascript "доступ на 1 месяц"
Приложение ExpiresByType / x-javascript "доступ на 1 месяц"
Приложение ExpiresByType / x-shockwave-flash "доступ 1 месяц"
ExpiresByType изображение / значок x "доступ на 1 год"
ExpiresDefault "доступ 2 дня"

## СРОК КЭШИНГА ЗАГОЛОВКИ ##  

Затем вы можете проверить заголовки, снова запустив свой сайт через Google PageSpeed ​​Insights и проверив, сохраняется ли предупреждение.

2. Используйте кеширование браузера для Google Analytics

По иронии судьбы, Google Analytics иногда является причиной предупреждения о кешировании браузера и неправильной оценки PageSpeed. Это связано с тем, что у него небольшое время истечения срока действия кеша - всего два часа. Раньше это было старое предупреждение:

Предупреждение о кешировании браузера для скрипта Google Analytics

В PageSpeed ​​Insights версии 5 эта проблема больше не приводит к предупреждению, но Google Analytics все еще может быть указан как неоптимизированный ресурс:

Google PageSpeed ​​Insights прошел аудит со списком скриптов Google Analytics

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

Имейте в виду, что этот метод не поддерживается Google.

Используйте кеширование браузера для Google Analytics с помощью Complete Analytics Optimization Suite

Если вы хотите решить указанную выше проблему, есть бесплатный плагин под названием Complete Analytics Optimization Suite (CAOS), разработанный Дааном ван ден Бергом, который вы можете использовать:

Плагин CAOS для WordPress

Вы можете загрузить CAOS из каталога подключаемых модулей WordPress или выполнив поиск в разделе Plugins> Add New на панели управления WordPress.

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

Для начала установите плагин и введите свой идентификатор отслеживания Google Analytics. Плагин добавляет необходимый код отслеживания для Google Analytics на ваш сайт WordPress, загружает и сохраняет аналитику .js на ваш сервер и обновляет его с помощью запланированного сценария в wp_cron () .

Рекомендуем также установить его для загрузки в нижнем колонтитуле:

Настройки размещения кода отслеживания CAOS

Имейте в виду, что CAOS не будет работать с другими плагинами Google Analytics для WordPress.

Используйте кеширование браузера для Google Analytics с помощью WP-Rocket

В качестве альтернативы вы можете использовать плагин кеширования WordPress WP-Rocket для достижения той же цели:

Плагин WP-Rocket для WordPress

Надстройка Google Tracking этого подключаемого модуля позволяет размещать аналитический скрипт локально одним нажатием кнопки.Просто переключите статус в WP-Rocket> Дополнения .

WP-Rocket и его надстройка совместимы с другими плагинами Google Analytics. Как инструмент премиум-класса, он продается по цене от 49 долларов в год.

3. Сведите к минимуму использование сторонних скриптов

Иногда скрипт Google Analytics может вызвать проблемы с оценкой Google PageSpeed ​​Insights, потому что он размещен на сервере Google, поэтому вы не контролируете кеш.

То же самое и для других сторонних скриптов. Если вы управляете бизнесом через свой веб-сайт WordPress, скорее всего, у вас есть дополнительные сторонние скрипты, работающие для отслеживания конверсий, A / B-тестов и т. Д.

Сюда могут входить такие скрипты, как пиксели преобразования Facebook, Crazy Egg, Hotjar и другие. К сожалению, если вы не найдете способ разместить эти сценарии локально, вы ничего не сможете сделать, чтобы получить над ними контроль.

Один из вариантов для пользователей Facebook Pixel - использовать еще одно дополнение WP-Rocket.В идеале вам следует свести к минимуму использование сторонних скриптов, если вы хотите улучшить свой показатель Google PageSpeed. Поэтому, возможно, стоит провести аудит вашего сайта и удалить все скрипты, которые не нужны для его работы.

Если вы когда-либо измеряли производительность сайта, есть большая вероятность, что предупреждение о кешировании браузера не ново для вас. Но как это исправить, чтобы ваш сайт стал быстрее? Узнайте, как это сделать, с помощью этого подробного руководства! 🚀🗿Нажмите, чтобы написать твит

Сводка

Хотя Google PageSpeed ​​Insights и не является исчерпывающим показателем эффективности вашего сайта, он все же является хорошим индикатором его работы.Повышение вашей оценки за счет устранения предупреждений, отображаемых в разделе «Обслуживать статические ресурсы с помощью эффективной политики кеширования», может помочь сделать ваш веб-сайт более быстрым и более удобным для посетителей.

Если вы видите это предупреждение в Google PageSpeed ​​Insights, вы можете устранить его с помощью:

  1. Добавление заголовков Cache-Control или Expires.
  2. Использование кеширования браузера для Google Analytics.
  3. Сведение к минимуму использования сторонних скриптов.

Есть еще какие-нибудь советы по исправлению кеширования в браузере? Дайте нам знать в комментариях ниже!


Если вам понравилась эта статья, то вам понравится хостинговая платформа Kinsta WordPress.Ускорьте свой сайт и получите круглосуточную поддержку от нашей опытной команды WordPress. Наша инфраструктура на базе Google Cloud ориентирована на автоматическое масштабирование, производительность и безопасность. Позвольте нам показать вам разницу в Kinsta! Ознакомьтесь с нашими планами

Повышение производительности приложений с помощью заголовков кэша HTTP

Последнее обновление 27 мая 2020 г.

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

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

Обзор

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

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

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

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

Имеется два основных заголовка кэша: Cache-Control и Expires .

Кэш-контроль

Без набора заголовков cache-control никакие другие заголовки кэширования не дадут никаких результатов.

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

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

  Cache-Control: общедоступный
  

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

  Cache-Control: частный
  

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

  Cache-Control: общедоступный, max-age = 31536000
  

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

Срок действия истекает

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

Если установлены Expires и max-age , приоритет будет иметь max-age .

  Cache-Control: общедоступный
Истекает: Mon, 25 Jun 2012 21:31:12 GMT
  

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

Условные запросы

Условные запросы - это запросы, при которых браузер может запросить сервер, есть ли у него обновленная копия ресурса. Браузер отправит некоторую информацию о кешированном ресурсе, который он содержит, и сервер определит, следует ли возвращать обновленное содержимое или копия браузера является самой последней. В последнем случае возвращается статус HTTP 304 (не изменен).

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

По времени

Условный запрос на основе времени гарантирует, что содержимое будет передано только в том случае, если запрошенный ресурс изменился с момента кэширования копии браузера. Если кэшированная копия является самой последней, сервер возвращает код ответа 304.

Чтобы включить условные запросы, приложение указывает время последнего изменения ресурса через заголовок ответа Last-Modified .

  Cache-Control: общедоступный, max-age = 31536000
Последнее изменение: пн, 3 января 2011 г., 17:45:57 GMT
  

В следующий раз, когда браузер запросит этот ресурс, он запросит содержимое ресурса только в том случае, если оно не изменилось с этой даты, используя If-Modified-Since request header

  If-Modified-Since: понедельник, 03 января 2011 г., 17:45:57 GMT
  

Если ресурс не изменялся с понедельник, 3 января 2011 г. 17:45:57 GMT , сервер вернется с пустым телом с кодом ответа 304 .

На основе содержимого

ETag (или Entity Tag) работает аналогично заголовку Last-Modified , за исключением того, что его значение представляет собой дайджест содержимого ресурсов (например, хэш MD5). Это позволяет серверу определять, отличается ли кэшированное содержимое ресурса от самой последней версии.

Этот тег полезен, когда трудно определить дату последнего изменения.

  Cache-Control: общедоступный, max-age = 31536000
ETag: "15f0fff99ed5aae4edffdd6496d7131f"
  

При последующих запросах браузера отправляется заголовок If-None-Match запроса со значением ETag последней запрошенной версии ресурса.

  Если-None-Match: "15f0fff99ed5aae4edffdd6496d7131f"
  

Как и в случае с заголовком If-Modified-Since , если текущая версия имеет то же значение ETag, что указывает на то, что ее значение совпадает с кэшированной копией браузера, то возвращается статус HTTP 304.

Видимость

Большинство современных браузеров включают надежные инструменты визуализации запросов / ответов и самоанализа. Веб-инспектор, доступный как в Chrome, так и в Safari, показывает заголовки ответа и запроса на вкладке Network .

Первоначальный запрос к http://http-caching-demo.herokuapp.com/ показывает набор заголовков по умолчанию, возвращаемых приложением (без директив кеширования).

Добавив параметр запроса cached , http://http-caching-demo.herokuapp.com/?cache=true, приложение включает кэширование с заголовками Cache-Control и Expires (оба из которых установлены на 30 секунд в будущем).

Добавление в запрос параметра etag http: // http-caching-demo.herokuapp.com/?etag=true, заставляет пример приложения указывать дайджест ETag содержимого JSON.

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

Однако при последующих запросах вы можете увидеть, что сервер отвечает на проверку ETag браузеров с HTTP-статусом 304 (не изменен), что заставляет браузер использовать свою собственную кэшированную копию:

Сценарии использования

Статические активы

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

В этих случаях вы должны установить заголовок Cache-Control со значением max-age, равным году в будущем с момента запроса. Рекомендуется установить для Expires аналогичное значение.

1 год - 31536000 секунд

  Cache-Control: общедоступный; макс-возраст = 31536000
Истекает: Mon, 25 Jun 2013 21:31:12 GMT
  

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

Динамический контент

Динамический контент имеет гораздо больше нюансов. Для каждого ресурса разработчик должен оценить, насколько сильно он может быть кэширован и каковы могут быть последствия предоставления пользователю устаревшего контента. Двумя примерами могут быть содержимое RSS-канала блога (которое не будет меняться чаще одного раза в несколько часов) и пакеты JSON, которые управляют временной шкалой Twitter пользователя (обновляются каждые несколько секунд). В этих случаях было бы разумно кэшировать ресурсы столько, сколько вы считаете возможным, не вызывая проблем у конечного пользователя.

Частное содержание

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

Если кэширование конечного клиента все еще желательно, вы можете запросить кэширование ресурсов только в частном порядке (т.е.e только в кеше браузера конечного пользователя):

  Cache-Control: частный, max-age = 31536000
  

Предотвращение кеширования

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

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

Требуются оба значения, поскольку IE использует без кеширования , а Firefox использует без хранения .

  Cache-Control: без кеширования, без хранения
  

Реализация

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

.

Leave a Reply