Как использовать кэш браузера для сайта


Кэш браузера | .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» , подготовленной дружной командой проекта Интернет-технологии.ру

Руководство веб-разработчика по кэшированию в браузере - код от Амира

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

Cache-Control

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

Cache Behavior

 public 

public означает, что ресурс может кэшироваться любым кешем (браузером, CDN и т. Д.)

 private 

private означает, что ресурс может кэшироваться только браузером

 no-store 

Это указывает браузеру всегда запрашивать ресурс с сервера.

 no-cache 

Это на самом деле немного вводит в заблуждение.Это не значит «не кешировать».

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

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

Истечение срока

 max-age =  

Определяет продолжительность в секундах, в течение которой ресурс должен быть кэширован.Таким образом, max-age = 60 означает, что его следует кэшировать в течение 1 минуты. RFC 2616 рекомендует, чтобы максимальное значение для не превышало 1 года ( max-age = 31536000 ).

 s-max-age =  

Используется только промежуточными кешами, такими как CDN.

Validation

 must-revalidate 

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

Expires

Заголовок Expires взят из более старого HTTP 1.0 дней, но все еще используется на многих сайтах.

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

.

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


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

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

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

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

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

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

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

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

Измените заголовки запросов ваших ресурсов, чтобы использовать кеширование

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

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

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

Кеширование браузера для .htaccess

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

## EXPIRES CACHING ##

ExpiresActive On
ExpiresByType image / jpg "доступ 1 год"
ExpiresByType image / jpeg "доступ 1 год"
ExpiresByType image / gif2 "доступ 1 год"
ExpiresByType image / gif2 "доступ 1 год"
/ png "доступ 1 год"
ExpiresByType text / css "доступ 1 месяц"
ExpiresByType text / html "доступ 1 месяц"
Приложение ExpiresByType / pdf "доступ 1 месяц"
ExpiresByType text / x-javascript "доступ 1 месяц"
Приложение ExpiresByType / x-shockwave-flash "доступ 1 месяц"
ExpiresByType image / x-icon "доступ 1 год"
ExpiresDefault "доступ 1 месяц"

## EXPIRES CACHING ##

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

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

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

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

Альтернативный метод кеширования для .htaccess

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

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

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

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

Примечание. Здесь я сделал более полное руководство по Cache-Control.

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

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

# 1 месяц для большинства статических ресурсов

Заголовочный набор Cache-Control "max-age = 2592000, общедоступный"

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

Как работает контроль кеширования

Давайте рассмотрим приведенный выше код построчно.

# 1 месяц для большинства статических активов

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

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

Важная часть этой строки - обратить внимание на то, что в списке перечислены файлы разных типов (css, js, jpeg, png и т. Д.) И что следующие инструкции кэширования будут применяться к этим типам файлов. Например, если вы не хотите, чтобы ваши файлы jpg кэшировались в течение этого периода времени, вы можете удалить «jpg» из этой строки или, если вы хотите добавить к нему html, вы можете просто добавить «html» в эту строку.

Заголовочный набор Cache-Control "max-age = 2592000, общедоступный"

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

  • Часть "Header set Cache-Control" устанавливает заголовок.
  • Часть «max-age = 2592000» указывает, как долго он должен храниться в кэше (в секундах). В этом случае мы кэшируем один месяц, что составляет «2592000» секунд.
  • «Общедоступная» часть заявляет, что это общедоступный (что хорошо, если вы хотите, чтобы он был кэширован).

Вышеупомянутая строка закрывает оператор и завершает блок кода.

Общая проблема кеширования

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

Отпечатки URL-адресов

Получение нового (не кешированного) файлового ресурса возможно при наличии уникального имени. Например, если бы наш файл css был назван «main.css», мы могли бы вместо этого назвать его «main_1.css». В следующий раз, когда мы изменим его, мы можем назвать его main_2.css. Это полезно для файлов, которые периодически меняются.

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

Важно указать одно из значений Expires или Cache-Control max-age и одно из Last-Modified или ETag для всех кэшируемых ресурсов. Избыточно указывать и Expires, и Cache-Control: max-age, или указывать и Last-Modified, и ETag.


Патрик Секстон


.

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

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

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

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

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

Если у вас мало времени, это самый простой способ использовать кеширование браузера WordPress:

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

  1. Загрузите плагин, который можно найти здесь.
  2. Перейдите на панель управления вашего WordPress, затем зайдите на: Панель управления > Плагины> Добавить новый
  3. Найдите «Использовать кеширование браузера» или нажмите «Загрузить плагин», выберите файл, который вы скачали, и нажмите «Установить сейчас»
  4. Активировать плагин
  5. Еще раз проверьте свой сайт, чтобы убедиться, что новые настройки работают правильно, и предупреждение исчезло.

Внедрив эти минимальные изменения, вы увидите, что ваша оценка на таких сайтах, как GTMetrix, Pingdom Tools или Pagespeed Insights значительно увеличится.

На самом деле, это один из самых простых способов сделать ваш сайт WordPress быстрее.

Это требует минимальных усилий с вашей стороны и является одной из приоритетных задач, рекомендованных Google для ускорения загрузки вашего сайта. Его также рекомендуют такие сайты, как GTMetrix или Google Pagespeed Insights, чтобы ускорить загрузку.

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

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

Прежде чем мы на самом деле покажем вам, как это реализовать, мы сначала обсудим, что означает использование кеширования браузера в WordPress и как оно работает!

Когда мы объясним, как это работает, вы поймете, как это помогает ускорить загрузку ваших страниц.

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

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

Взгляните на эту забавную диаграмму, которая объясняет, как работает веб-кеширование:

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

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

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

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

Предупреждение о кешировании браузера

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

Итак, что это на самом деле означает?

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

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

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

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

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

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

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

Не готовы сейчас использовать плагин? Читайте дальше ...

Если вы заинтересованы в ускорении своего веб-сайта - мы настоятельно рекомендуем посетить нашу статью: [25 действий] Ускорьте WordPress: получите сверхбыстрый веб-сайт сегодня - полное руководство.

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

  1. Доступ к CPanel вашей учетной записи хостинга
  2. Перейдите в корневую папку веб-сайта
  3. Откройте файл .htaccess с помощью редактора файлов. Если вы не нашли файл, проверьте, можете ли вы просматривать скрытые файлы (файл .htaccess по умолчанию скрыт)
  4. Добавьте следующие правки в конец файла
  5. Добавить заголовки срока действия с длинным сроком действия
  6. Добавить заголовки Cache-Control
  7. Отключить заголовки ETag
  8. Не вносить никаких других изменений
  9. Сохраните файл
  10. Повторите тест

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

Установите эти значения, если это имеет смысл для вашего сайта - обычно достаточно 1 месяца.

 # Customize expires caching start - настройте период в соответствии с вашими потребностями  FileETag MTime Размер AddOutputFilterByType DEFLATE text / plain text / html text / xml text / css application / xml application / xhtml + xml application / rss + xml application / javascript application / x-javascript ExpiresActive On ExpiresByType text / html "доступ 600 секунд" ExpiresByType application / xhtml + xml "доступ 600 секунд" ExpiresByType text / css "доступ на 1 месяц" ExpiresByType text / javascript "доступ на 1 месяц" ExpiresByType text / x-javascript "доступ на 1 месяц" Приложение ExpiresByType / javascript "доступ 1 месяц" Приложение ExpiresByType / x-javascript "доступ на 1 месяц" Приложение ExpiresByType / x-shockwave-flash "доступ 1 месяц" Приложение ExpiresByType / pdf "доступ на 1 месяц" ExpiresByType изображение / значок x "доступ на 1 год" ExpiresByType image / jpg «доступ на 1 год» ExpiresByType image / jpeg "доступ на 1 год" ExpiresByType image / png "доступ на 1 год" ExpiresByType image / gif "доступ на 1 год" ExpiresDefault "доступ на 1 месяц" 
#Expires caching end

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

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

Это означает, что если ваш посетитель снова заходит на страницу в течение месяца, ему не нужно повторно загружать ваши ресурсы CSS и JS.Если вы знаете, что вы редко вносите такие изменения на своем сайте - вы можете установить значение выше, на 1 год, аналогично jpeg, png expires header.

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

Установить файлы изображений на длительный срок хранения

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

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

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

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

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

 # BEGIN Заголовки управления кешем 
Добавление заголовка Cache-Control "public" Добавление заголовка Cache-Control "public" Заголовок добавить Cache-Control "private" Заголовок добавить Cache-Control "частный, необходимо перепроверить"

Мы уже установили срок годности, поэтому нам не нужно устанавливать его здесь снова.

Последнее, что нам нужно сделать, это (отменить) установить настройку Etags.

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

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

По этой причине было бы лучше ОТМЕНИТЬ их, если вы используете несколько серверов или CDN для размещения своего веб-сайта. Это позволяет заголовкам Cache-control фактически управлять кешированием, а не ETags. Учитывая, что мы ввели настройки для управления кэшированием через заголовки Cache-Control, ETags больше не нужны, поэтому мы отключим их.

Добавьте это в свой файл .htaccess, чтобы отключить их.

  # Отключить ETags  Заголовок не установлен ETag  FileETag Нет  

Если вам нужно узнать больше о том, что делают Etags, вы можете найти более подробную информацию и прочитать о них в этой статье: https: // en.wikipedia.org/wiki/HTTP_ETag

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

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

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

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

Сюда входят плагины, такие как WPRocket, WP Fastest Cache и W3 Total Cache, а также плагины кэширования премиум-класса.

Давайте посмотрим на некоторые из этих плагинов.

Плагин от Ринку Ядава

Это самый простой из всех, он только исправляет кеширование браузера в WordPress.

  1. Загрузите плагин, который можно найти здесь.
  2. Перейдите в панель управления WordPress, затем перейдите по ссылке: Dashboard> Plugins> Add New .
  3. Выполните поиск по запросу «Использовать кеширование браузера» или нажмите «Загрузить подключаемый модуль» и найдите файл, который вы только что загрузили.
  4. Щелкните Установить сейчас.
  5. Активируйте плагин, и все готово!
  6. Теперь вам следует снова протестировать свой веб-сайт, чтобы убедиться, что новые настройки работают правильно и предупреждение исчезло.

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

WP Rocket

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

  • (GZip ) - чтобы уменьшить общий размер передаваемых данных (у нас есть полное руководство о том, как включить сжатие GZip в WordPress).
  • включает файловый кеш (включая предварительную загрузку кеша) - чтобы снизить нагрузку на сервер (получение предварительно отрисованной копии каждой страницы)
  • Оптимизация Google Fonts - для быстрой загрузки более тяжелых шрифтов),
  • отложенная загрузка - таким образом, что изображения загружаются только тогда, когда пользователь прокручивает вниз до раздела страницы, где требуется изображение
  • Минификация и комбинация - уменьшение размера и объединение текстовых ресурсов для более быстрой доставки их конечному пользователю
  • Отложить загрузку JS - чтобы страница отображалась быстро вместо того, чтобы ждать загрузки всех ресурсов.Это то, что мы рассмотрели на CollectiveRay.
  • Интегрирует и включает CDN - так что ваши тяжелые носители доставляются быстрее
  • Предварительная выборка DNS - для сокращения времени, необходимого для определения источника стороннего контента

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

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

Посетите WP Rocket сейчас

W3 Total Cache

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

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

Если вы ищете хороший способ использовать кеширование просмотра в WordPress с помощью плагина, мы настоятельно рекомендуем WPRocket выше, а не W3Total Cache.

Если ваш веб-сайт действительно использует Nginx в качестве сервера, вам понадобится другой код, потому что Nginx не имеет файла .htaccess. Однако реализовать это по-прежнему относительно легко, потому что вам просто нужно внести несколько изменений в файл conf сервера.

Вам необходимо добавить приведенный ниже код внутри существующего блока сервера в ваш файл conf.Обычно это / etc / nginx / sites-enabled / default

 server { слушать 80; server_name localhost; расположение / { корень / usr / share / nginx / html; index index.html index.htm; } расположение ~ * \. (jpg | jpeg | png | gif | ico | css | js) $ { истекает 365 дней; } расположение ~ * \. (pdf) $ { истекает 30 дней; } } 

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

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

Любые добавленные типы файлов будут соответственно кэшироваться.

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

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

К сожалению, вы не можете контролировать эти сценарии, поэтому мы настоятельно рекомендуем вам использовать МИНИМАЛЬНОЕ возможное количество сценариев сторонних производителей. Если вы можете жить без сценария, удалите его со своего сайта. Если вы выберете его включение, время загрузки ваших страниц будет уменьшаться.

Это еще одно предупреждение, часто показываемое GTMetrix, обычно исходящее от сторонних скриптов.По сути, это та же проблема, которую мы только что описали в предыдущем разделе, где в некоторых сценариях не указывается ни заголовок ETag, ни заголовок Last-Modified, как описано.

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

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

Часто задаваемые вопросы

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

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

Как включить кеширование в WordPress?

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

Как включить кеширование браузера для сторонних скриптов?

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

Заключение

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

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

Посетите WP Rocket, чтобы сделать ваш веб-сайт быстрее сегодня

Об авторе

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


.

HTTP-кеширование - веб-технологии для разработчиков

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

Тайники различных типов

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

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

Частный кеш браузера

Частный кеш предназначен для одного пользователя. Возможно, вы уже видели «кеширование» в настройках вашего браузера. Кэш браузера содержит все документы, загруженные пользователем по протоколу HTTP. Этот кеш используется, чтобы сделать посещенные документы доступными для навигации назад / вперед, сохранения, просмотра в качестве источника и т. Д. Без необходимости дополнительной поездки на сервер. Это также улучшает автономный просмотр кэшированного содержимого.

Общие кеши прокси

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

Цели операций кеширования

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

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

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

Управление кешированием

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

Нет кеширования

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

 Cache-Control: без магазина 
Кэш, но перепроверить

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

 Управление кешем: без кеширования 
Частные и публичные тайники

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

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

 Cache-Control: частный Cache-Control: общедоступный 
Срок действия

Самая важная директива здесь - " max-age = ", которая определяет максимальное время, в течение которого ресурс будет считаться свежим.В отличие от Expires , эта директива относится ко времени запроса. Для файлов в приложении, которые не изменятся, обычно можно добавить агрессивное кеширование. Сюда входят, например, статические файлы, такие как изображения, файлы CSS и файлы JavaScript.

Для получения дополнительной информации см. Также раздел «Свежесть» ниже.

 Cache-Control: max-age = 31536000 
Проверка

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

 Cache-Control: необходимо повторно проверить 

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

Свежесть

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

Вот пример этого процесса с прокси с общим кешем:

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

 expirationTime = responseTime + freshnessLifetime - currentAge 

, где responseTime - время получения ответа в соответствии с браузером.

Возобновленные ресурсы

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

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

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

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

Проверка кеша

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

Повторная проверка запускается, когда пользователь нажимает кнопку перезагрузки. Он также запускается при обычном просмотре, если кэшированный ответ включает заголовок « Cache-Control: must-revalidate ». Другой фактор - это настройки проверки кеша на панели настроек Advanced-> Cache . Существует возможность принудительно выполнять проверку каждый раз при загрузке документа.

ETags

Заголовок ответа ETag представляет собой значение , непрозрачное для агента-пользователя , которое может использоваться в качестве надежного валидатора. Это означает, что пользовательский агент HTTP, такой как браузер, не знает, что представляет эта строка, и не может предсказать, каким будет ее значение. Если заголовок 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 и другим поисковым системам обнаружить мобильную версию страницы, а также сообщить им, что маскировка не предназначена.

 Варьируется: User-Agent 

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

См. Также

.

Смотрите также

Поделиться в соц. сетях

Опубликовать в Facebook
Опубликовать в Одноклассники
Вы можете оставить комментарий, или ссылку на Ваш сайт.

Оставить комментарий