При изменении сайта грузит старый кэш из браузера
Обновлено: 02.07.2024
В предыдущих статьях мы сформировали форму поиска, предназначенную для ввода запросов. И теперь можно заняться размещением на сайте и результатов поиска.
Однако, прежде чем к этому перейти, необходимо решить вопрос обновления статических файлов в кэше браузера.
Дело в том, что отображать результаты Яндекс.Поиска можно только на сайте, размещенном в интернете. Использования для этих целей ранее рассматриваемого варианта "newsite.local", установленного на локальном веб-сервере, невозможно.
Это связано с тем, что Яндекс.Поиск после каждого выполнения запроса свои результаты выводит на определенную страницу реального сайта. В нашем случае была определена страница тестового сайта с адресом "https://avtobezugona.ru/poisk.html".
Поэтому для этих целей будем работать на действующем ресурсе avtobezugona.ru, полностью соответствующим создаваемому сайту "newsite.local", размещенному на локальном веб-сервере, с которым обычно мы проводимые различные мероприятия по его доработке.
А в связи с тем, что формирование внешнего вида страницы результатов поиска будет выполняться с помощью стилей CSS на реальном сайте, расположенных в отдельном файле "main.css", необходимо предусмотреть обновление кэша браузера (буфер памяти браузера с высокой скоростью обмена, используемый для временных файлов).
В противном случае, при отображении страниц возможно, что браузер не будет воспринимать изменения стилей CSS. В таких случаях при загрузке страниц будет использоваться последняя (до изменений) хранящаяся в его кэше версия файла "main.css".
И в этой статье мы рассмотрим некоторые способы обновления буфера браузера в случае изменения содержимого кэшируемых статических файлов. В данном случае, нас интересует "main.css" с выделенной таблицей стилей CSS. Хотя аналогичные преобразования для упрощения обновлений сайта полезно сделать и для других ресурсов, например, содержащих скрипты "JavaScript".
При этом следует отметить, что эта статья не предназначена для подробного разбора вопросов, относящихся непосредственно к кэшированию. Это тема довольно обширная, которая требует отдельного рассмотрения.
Здесь же будет решаться лишь конкретный вопрос - обновление кэша браузера при изменении статического файла "main.css". Для того, чтобы в следующей статье мы смогли перейти к размещению результатов Яндекс.Поиск, оформив соответствующую страницу под дизайн сайта с помощью стилей CSS.
Как известно для ускорения загрузки сайта используется кэширование статических редко изменяемых файлов. При котором браузер при первом открытии страницы сайта загружает определенные типы файлов в локальный кэш (буфер памяти с высокой скоростью обмена, используемый для временного хранения данных).
А далее при последующих загрузках такие данные используются браузером не с сервера, а из сохраненного ранее кэша. Что и приводит при повторных посещениях сайта к существенному уменьшению времени загрузки страниц.
Необходимо отметить, что если даже соответствующие HTTP-заголовки, предназначенные для кэширования, в файле ".htaccess" не установлены, то все равно следует учесть этот механизм при работе сайта. Так как, по крайней мере один из модулей с настройками кэширования обычно стоит на сервере у провайдера по умолчанию.
Ниже показан скриншот ответа сервера, полученный с помощью сервиса Яндекс.Вебмастер по запросу к "main.css" сайта "avtobezugona.ru".
Рис.1 Ответ сервера на обращение к файлу main.css
Как видно, в нашем случае при отсутствии каких-либо настроек кэширования в ".htaccess", в ответе сервера мы имеем заголовки "Last-Modified", "Cache-Control" и "Expires". А значит браузерное кэширование включено, причем с временем жизни кэша в 604800 секунд, соответствующее одной недели.
Проверяем отображение страницы при изменении файла main.css до преобразований
Если же сейчас попытаться изменить файл "main.css", то может получиться так, что браузер будет отображать страницы не учитывая сделанные изменения в стилях CSS. Так как в таком случае будет использовать ранее его сохраненную версию в своем кэше.
Сейчас проверим, как будет вести себя браузер в нашем случае. Для этого сделаем некоторые изменения в "main.css", например, изменим цвет подзаголовков статей с темно-красного на зеленый, как показано в следующем фрагменте кода.
main h1, main h2
font-size : 1.1875em;
font-style : italic;
font-weight : bold;
Рис.2 Замена цвета подзаголовков статей в файле "main.css"
А затем откроем одну из страниц сайта и посмотрим, воспринял ли браузер такое изменение, или он при загрузке будет использовать ранее сохраненный ресурс "main.css".
Ниже показан результат отображения главной страницы сайта "avtobezugona.ru" в Яндекс браузере после выполненных изменений.
Рис.2 Результат отображения страницы при изменении файла "main.css" до преобразования
Как видно, цвет подзаголовков не изменился, что означает - браузер в данном случае при загрузке использует ранее сохраненную версию файла "main.css".
И понятно, что в таком состоянии сложно будет заниматься стилями CSS, так как просто невозможно будет оценить их изменения на отображаемых страницах сайта.
А для того, чтобы устранить этот недостаток, сделаем некоторые преобразования.
Суть способа автоматического обновления кэша браузера
Конечно, решить вопрос отключения кэширование можно различными методами. Но мы здесь не будем рассматривать все возможные варианты, а остановимся на некоторых из них. Используя которые можно единожды выполнив соответствующие преобразования навсегда забыть об этой проблеме.
При чем, это относится не только к файлам ".css", но и весьма полезно использовать такой метод и в отношении других ресурсов, скажем для ресурсов со скриптами "JavaScript". После чего можно будет не волноваться, что при очередном обновлении таблицы стилей CSS, либо JS-скриптов, у пользователей во внешнем виде страницы или в работе функционала может что-то исказиться.
Суть данных преобразований состоит в том, что в теге <link>, в котором подключается таблица стилей CSS к веб-странице (далее будем рассматривать преобразования только для файла CSS), в конце имени файла добавляется псевдопараметр, меняющийся при каждом изменении содержимого файла.
И таким образом, в случае измененного псевдопараметра браузер будет понимать, что необходимо загрузить новый файл и обновить его в своем кэше. При последующих же загрузках, если псевдопараметр не изменится, браузер при формировании страницы будет использовать последний сохраненный в своем буфере ресурс.
Если посмотреть в интернете, то можно увидеть, что при таком способе нередко предлагается изменять псевдопараметр, используя для этого отдельный файл, либо просто вручную меняя его в теге <link>.
Понятно, что это не совсем удобно. Поэтому мы поступим по другому - псевдопараметр будем менять автоматически, даже при незначительном изменении содержимого файла. И в его качестве будем использовать хеширование (преобразование массива данных в выходную строку фиксированной длины), либо время последнего изменения файла.
Выполняем преобразование имени файла main.css
Сначала рассмотрим вариант с расчетом хеш-суммы содержимого файла, например CRC16, CRC32, SHA-1, SHA-2 и т.п. Допустим, для определения контрольной суммы применим алгоритм MD5 - специальную PHP-функцию "md5_file(), возвращаемую хеш в виде 32-символьного шестнадцатеричного числа.
Исходя из этого составим PHP-скрипт для подсчета хеш-суммы "main.css". При этом разместим его в шаблоне главной страницы "index.php", где также находится тег <link>, предназначенный для подключения таблицы стилей CSS.
$xesh = md5_file ($url_css);
Рис.3 Скрипт для получения MD5-хеша файла "main.css"
Здесь в строке 2 переменной $url_css присваивается значение имени файла, к которому будет применена функция md5_file(). Причем используемое в значении переменной имя хоста определяется с помощью массива $_SERVER с индексом "SERVER_NAME". В результате чего получается абсолютный адрес файла "main.css". Но можно использовать и относительный адрес. Для данного файла он будет "styles/main.css".
А в 3-ей строке вычисляется сама хеш-сумма содержимого "main.css", которая обозначается переменной $xesh .
Далее через переменную $xesh добавим полученный результат MD5-хеша в тег <link> следующим образом:
<link rel = "stylesheet" type = "text/css" href = "/styles/main.css? <?php echo $xesh; ?> " >
Рис.4 Добавление псевдопараметра в тег <link>
И теперь в случае изменения содержимого файла "main.css" в соответствующем теге <link> будет заменяться псевдопараметр.
В результате чего, при первой загрузки страницы браузер будет использовать новую версию файла с обновлением своего кэша.
Другой вариант применения псевдопараметра, который мы здесь рассмотрим - это использование времени последнего изменения файла. Особенность его в том, что в отличие от предыдущего, при таком способе, практически, будет отсутствовать какая-либо дополнительно вносимая в работу скрипта задержка, связанная с выполнением этого фрагмента кода. По крайней мере ей можно пренебречь.
Обусловлено это тем, что при таком варианте не требуется производить какие-либо вычисления, а просто, с помощью специальной функции "filemtime() отслеживать время последнего изменения содержания файла. В таком случае предыдущий код можно представить несколько в ином виде.
$lasttime = filemtime ($filename);
Рис.5 Скрипт для получения времени последнего изменения файла "main.css"
<link rel = "stylesheet" type = "text/css" href = "/styles/main.css? <?php echo $lasttime; ?> " >
Рис.6 Добавление псевдопараметра времени последнего изменения файла в тег <link>
Проверяем обновление кэша браузера измененного файла main.css после преобразований
Теперь, после выполненных преобразований тем, или иным способом (в данном случае воспользуемся первым вариантом), можно проверить, как будет отображаться страница при изменениях файла "main.css".
Для этого достаточно лишь обновить страницу, так как тестовая замена цвета подзаголовков в таблице стилей была сделана ранее во втором разделе статьи.
Рис.5 Результат отображения страницы при изменении файла "main.css" после преобразования
Как видно, результат налицо. Теперь браузер отобразил страницу в соответствии с последней версией "main.css", а именно изменил цвет подзаголовков с темно-красного на зеленый. При этом кэш браузера тоже обновился новым файлом.
Можем также посмотреть, как теперь будет выглядеть имя файла в теге <link>, в котором подключается таблица стилей CSS.
Для этого воспользуемся дополнительными инструментами браузера, в данном случае Яндекс браузера, и посмотрим на HTML-код отображаемой страницы.
Рис.6 HTML-код веб-страницы после преобразований
Видно, что теперь в соответствующем теге <link> добавился псевдопараметр с хеш-суммой, соответствующей содержимому последней версии файла "main.css".
Теперь, если отменить ранее сделанные изменения стилей CSS, то можно будет убедиться, что браузер вернет цвет подзаголовков в прежнее состояние. И при этом в кэше будет сохранена предыдущая версия "main.css", но уже с другим псевдопараметром.
Рис.7 Возвращение цвета подзаголовков в прежнее состояние
А кроме этого, посмотрим, какое теперь значение принял псевдопараметр в теге <link> после возвращения цвета в прежнее состояние.
Рис.8 HTML-код веб-страницы после замены цвета подзаголовков
Как видно, псевдопараметр изменил значение, соответствующее теперь хеш-сумме новой версии файла "main.css".
В итоге мы выполнили поставленную задачу, и теперь при каждом изменении стилей CSS страницы сайта будут отображаться должным образом с одновременным обновлением кэша браузера.
Если же таких изменений не будет, то в части использования кэша, браузер будет работать обычным образом, т.е использоваться ранее сохраненные ресурсы.
Таким образом мы подготовили сайт для размещения результатов Яндекс.Поиск и оформления соответствующей страницы по дизайн сайта. Что мы и сделаем в следующей статье.
Исходные файлы сайта
Исходные файлы сайта с обновлениями, которые были сделаны в данной статье, можно скачать из прилагаемых дополнительных материалов:
- Файлы каталога www
- Таблицы базы данных MySQL
Для скачивания исходных файлов необходимо авторизоваться под своим аккаунтом через соответствующую форму.
Эффективная схема кэширования сайта в браузере обеспечивает высокую скорость загрузки веб-страниц при повторных обращениях к ним.
Содержание
Что такое кэш браузера и кэширование сайта?
Кэш браузера (Browser Cache) — временные файлы ресурсов веб-страниц сайта, сохраняемые браузером для последующего отображения в нём при повторном обращении к соответствующим страницам.
Процесс определения и сохранения кэша в браузере называется браузерным кэшированием (Browser Caching).
Браузерное кэширование можно представить следующим образом:
- клиент (браузер) формирует и отправляет запрос на сервер;
- сервер формирует ответ и отправляет веб-страницу и все файлы, с ней связанные, в браузер;
- браузер отображает веб-страницу, при этом кэширует определённые её ресурсы.
При повторных запросах этой веб-страницы браузер будет использовать файлы из кэша сайта. Срок кэширования определяется браузером согласно ответу сервера относительно каждого отдельного типа файла.
Как кэш браузера влияет на скорость загрузки сайта?
Правильная настройка кэширования веб-страниц позволяет значительно увеличить скорость загрузки сайта за счёт:
- Уменьшение объёма загружаемых данных при повторных обращениях.
Если настроить ответ сервера на кэширование всех типов данных, то объём передаваемой информации может быть снижен вплоть до 0 МБ: в таком случае веб-страница будет полностью формироваться из кэша. - Снижение нагрузки на сервер.
Чем меньше данных обрабатывает и передаёт сервер, тем выше его производительность в текущий момент.
Кроме этого, браузерное кэширование значительно экономит веб-трафик клиента, исключая повторное скачивание файлов (картинок, скриптов, стилей) — они будут браться из кэша сайта.
Благодаря кешированию пользователи, повторно посещающие ваш сайт, тратят меньше времени на загрузку страниц.
Google Developers
Как проверить кэширование сайта в браузере?
Существует ряд способов проверки браузерного кэширования ресурсов сайта:
Проверка в браузере Chrome
Первый способ: обратиться к инструментам веб-разработчика, предоставляемым самим браузером. Рассмотрим на примере браузера Chrome:
- Откройте в браузере любую страницу сайта.
- Активируйте панель инструментов разработчика.
Клавиши по умолчанию: Ctrl + Shift + I . - Активируйте вкладку Network.
- Обновите страницу.
Клавиши по умолчанию: Ctrl + F5 .
Если файл кэшируется, то в колонке Size вместо размера файла будет отображаться запись (from memory cache) или (from disk cache):
Обратите внимание, насколько уменьшился объём передаваемых данных из примера на картинках: 3.8 МБ при первичном обращении и 601 КБ при повторном. При этом скорость загрузки страницы сайта снизилась с 12.45 до 7.77 секунд.
Активируйте чекбокс Disable cache во вкладке Network в панели инструментов Chrome, чтобы просмотреть исходный размер и скорость загрузки ресурсов веб-страницы при первичном обращении к ней.
Сервис PageSpeed Insights
Сервис Pingdom Website Speed Test
Pingdom Website Speed Test — качественный популярный сервис проверки скорости загрузки сайта. Подобно сервису PageSpeed Insights, он указывает на проблемы со скоростью загрузки и даёт свои рекомендации. Каждому фактору сервис присваивает определённый рейтинг (Grade).
Фактор кэширования файлов в браузере называется «Leverage browser caching»:
Какие файлы сайта должны кэшироваться?
Ресурсы веб-страниц делятся на 2 группы:
Динамические Эти ресурсы не хранятся на сервере, а генерируются его средствами при запросах веб-страниц. К таким ресурсам обычно относят HTML-код, который может генерироваться посредством PHP на серверах Apache. Статические Такие ресурсы хранятся на сервере. Как правило, к ним относится медиа-контент (картинки и видео), а также файлы стилей, скриптов и шрифтов
Для большинства сайтов подходит схема кэширования всех статических ресурсов.
Заголовки кеширования должны применяться ко всем кешируемым статическим ресурсам, а не только к некоторым из них (например, изображениям). Кешируемые ресурсы включают файлы JavaScript и CSS, графические и другие файлы (мультимедийное содержание, файлы PDF и т. д.). Обычно код HTML не является статическим ресурсом и по умолчанию не считается кешируемым.
Google Developers
Сроки кэширования файлов в браузере
Возможной проблемой может быть обновление на сайте статических ресурсов, для которых установлен большой срок хранения в кэше.
Например, разработчик может обновить CSS-свойства в файлах стилей и HTML-код, но в кэше браузера пользователей могут храниться старые CSS-файлы. В результате пользователи при обращении к веб-странице могут видеть искаженный дизайн, т. к. HTML-код будет обновлен, но потерявший актуальность файл стилей будет загружаться из кэша сайта, ведь для него установлен большой срок хранения.
Чтобы избежать подобных проблем, необходимо настроить браузерное кэширование, правильно определив сроки хранения типов файлов.
Продолжительность хранения статических ресурсов в кеше должна составлять не менее недели. Внешние ресурсы (объявления, виджеты и др.) должны храниться не менее 1 дня.
Google Developers
Заголовок Expires
До момента наступления этой даты файл будет браться из кэша сайта в браузере. Такая схема исключает лишние запросы к серверу, сравнивающие кэшированный файл с файлом на сервере, но неудобство может быть вызвано привязкой к определённой дате, ведь файл может быть обновлён на сервере до её наступления.
Заголовок Cache-Control
Пока не пройдёт указанное время с момента получения файла, он будет браться из кэша браузера.
Директивы заголовка Cache-Control
Заголовок Cache-Control может содержать одну или несколько директив, перечисленных через запятую. Это позволяет управлять кэшированием файлов более гибко.
Директива max-age
Как указывалось выше, с помощью этой директивы сервер даёт знать браузеру, на какой срок можно кэшировать файл. В качестве значения применяется цифра, обозначающая количество секунд.
| Единица времени | Количество секунд |
|---|---|
| Секунда | 1 |
| Минута | 60 |
| Час | 3600 |
| Сутки | 86400 |
| Неделя | 604800 |
| Месяц | 2592000 |
| Год | 31536000 |
Директива no-cache
Вопреки названию, браузер будет кэшировать файл, переданный сервером с данным заголовком. Однако прежде, чем в дальнейшем брать его из кэша, браузер должен делать запрос к серверу на проверку его изменений. Если файл на сервере не изменился, браузер заберёт его из кэша, в ином случае сервер передаст обновлённую версию файла.
Директива no-store
Эта директива запрещает сохранять файл браузеру и в других промежуточных кэшах (CDN, прокси-сервера).
Директива public
Эта директива разрешает кэшировать файл как в браузере пользователя, так и в промежуточных кэшах (CDN, прокси-сервера). Применяется по умолчанию.
Директива private
Директива private разрешает кэшировать файл только в браузере пользователя, но не в промежуточных кэшах (CDN, прокси-сервера). Обычно применяется для кэширования персональных данных, актуальных для конечного пользователя.
Сравнение версий файлов в кэше и на сервере
Заголовки Last-Modified и If-Modified-Since
Данную схему кэширования можно представить следующим образом:
Браузер делает первичный запрос веб-страницы.
Полученные файлы кэшируются браузером.
Если значения If-Modified-Since и Last-Modified совпадают, сервер отправляет браузеру ответ в виде значения 304 (Not Modified) : файл не претерпел изменений, и его можно брать из кэша. В ином случае сервер вновь передаёт файл в браузер.
Заголовки ETag и If-None-Match
Недостатком данной схемы также являются постоянные проверяющие запросы If-None-Match к серверу.
Правильная схема кэширования файлов в браузере
В идеале браузерное кэширование должно функционировать следующим образом:
Если применять только заголовки Last-Modified или ETag , то браузер каждый раз будет посылать серверу запросы на сравнение версий файлов.
Если применять только заголовки Expires или Cache-Control: max-age , то по окончании срока кэширования браузер будет запрашивать файл на скачивание не зависимо от того, претерпел ли он изменения.
Поэтому ответ сервера для кэшируемого файла должен содержать два заголовка, определяющих эффективную схему кэширования:
- заголовок, определяющий срок кэширования ( Expires или Cache-Control: max-age );
- заголовок, определяющий изменение файла ( Last-Modified или ETag ).
Для всех кешируемых ресурсов нужно обязательно указывать один заголовок из пары Expires и Cache-Control max-age, а также один заголовок из пары Last-Modified и ETag.
Google Developers
Такой подход исключает лишние запросы к серверу за счет установленного срока кэширования (определённого с помощью заголовка Expires или Cache-control: max-age ), а также исключает повторное скачивание ресурса по окончании срока кэширования за счет его проверки на наличие изменений (с помощью заголовков Last-Modified или ETag ).
Включение и настройка кэширования сайта в браузере
Модуль mod_expires для сервера Apache
Не вдаваясь в подробности синтаксиса настройки данного модуля, приведем пример готовой конфигурации по включению браузерного кэширования на сайте с комментариями в коде:
Скопируйте данный код в файл .htaccess для включения кэширования файлов в браузере.
Если настройки не вступят в силу, необходимо обратиться в техническую поддержку хостинга : возможно, модуль mod_expires не активирован на сервере.
Подробности о синтаксисе и настройках модуля mod_expires можно узнать в официальной документации.
Модуль mod_headers для сервера Apache
Настройка модуля подразумевает использование регулярных выражений для определения типов файлов, для которых будут формироваться заголовки Cache-Control :
Указанный выше код можно скопировать в файл .htaccess для применения настроек кэширования файлов к конкретному сайту.
Если настройки не вступят в силу, неободимо обратиться в техническую поддержку хостинга: возможно, модуль mod_headers не активирован на сервере.
Подробности о синтаксисе и настройках модуля mod_headers можно узнать в официальной документации.
Настройка заголовков Expires на Nginx
Настройка заголовков Cache-Control на Nginx
Указанный выше код можно скопировать в файл nginx.conf для применения данных настроек к сайту.
Проверить заголовки ответа сервера после (или до) включения кэширования в .htaccess (или другом конфигурационном файле) позволяют стандартные средства современных браузеров: установка дополнительных плагинов не требуется.
Рассмотрим процесс проверки передаваемых сервером заголовков на примере Chrome:
Различные виды кеширования
Техника кеширования заключается в сохранении копии полученного ресурса для возврата этой копии в ответ на дальнейшие запросы. Запрос на ресурс, уже имеющийся в веб-кеше, перехватывается, и вместо обращения к исходному серверу выполняется загрузка копии из кеша. Таким образом снижается нагрузка на сервер, которому не приходится самому обслуживать всех клиентов, и повышается производительность — кеш ближе к клиенту и ресурс передаётся быстрее. Кеширование является основным источником повышения производительности веб-сайтов. Однако, кеш надо правильно сконфигурировать: ресурсы редко остаются неизменными, так что копию требуется хранить только до того момента, как ресурс изменился, но не дольше.
Существует несколько видов кешей, которые можно разделить на две основные категории: приватные кеши и кеши совместного использования. В кешах совместного использования (shared cache) хранятся копии, которые могут направляться разным пользователям. Приватный кеш (private cache) предназначен для отдельного пользователя. Здесь будет говориться в основном о кешах браузеров и прокси, но существуют также кеши шлюзов, CDN, реверсные прокси кеши и балансировщики нагрузки, разворачиваемые на серверах для повышения надёжности, производительности и масштабируемости веб-сайтов и веб-приложений.
Приватный (private) кеш браузера
Общий (shared) прокси-кеш
Кеш совместного использования — это кеш, который сохраняет ответы, чтобы их потом могли использовать разные пользователи. Например, в локальной сети вашего провайдера или компании, может быть установлен прокси, обслуживающий множество пользователей, чтобы можно было повторно использовать популярные ресурсы, сокращая тем самым сетевой трафик и время ожидания.
Цели кеширования
Первичный ключ состоит из метода запроса и запрашиваемого URI (зачастую используется только URI, поскольку целью кеширования являются только GET-запросы). Вот примеры того, что обычно записывается в кеш:
Ответы на запросы отличные от GET , если есть что-либо, подходящее для использования в качестве ключа кеша.
Управление кеш ированием
Заголовок Cache-control
Полное отсутствие кеширования
В кеше не должно сохраняться ничего — ни по запросам клиента, ни по ответам сервера. Запрос всегда отправляется на сервер, ответ всегда загружается полностью.
Кешировать, но проверять актуальность
Перед тем, как выдать копию, кеш запрашивает исходный сервер на предмет актуальности ресурса.
Приватные (private) и общие (public) кеши
Директива "public" указывает, что ответ можно сохранять в любом кеше. Это бывает полезно, если возникает потребность сохранить страницы с HTTP-аутентификацией, или такими кодами ответа, которые обычно не кешируются. Директива же "private" указывает, что ответ предназначен отдельному пользователю и не должен храниться в кеше совместного использования. В этом случае ответ может сохраняться приватным кешем браузера.
Срок действия (Expiration)
Самой важной здесь является директива "max-age=<seconds>" — максимальное время, в течение которого ресурс считается "свежим". В отличие от директивы Expires , она привязана к моменту запроса. К неизменяющимся файлам приложения обычно можно применять "агрессивное" кеширование. Примером таких статических файлов могут быть изображения, файлы стилей (CSS) или скриптов (JavaScript).
Подробнее об этом рассказывается в разделе Свежесть ресурса.
Проверка актуальности
При использовании директивы "must-revalidate" кеш обязан проверять статус ресурсов с истёкшим сроком действия. Те копии, что утратили актуальность, использоваться не должны. Подробнее об этом рассказано ниже, в разделе Валидация кеша.
Заголовок Pragma
Свежесть сохранённой копии
Однажды попав в кеш, ресурс, теоретически, может храниться там вечно. Однако, поскольку объем хранилища конечен, записи периодически приходится оттуда удалять. Этот процесс называют вытеснением данных из кеша (cache eviction). Кроме того, ресурсы могут изменяться на сервере, поэтому кеш требуется обновлять. Поскольку HTTP является клиент-серверным протоколом, сервера не могут сами обращаться к кешам и клиентам при изменении ресурса; им необходимо договориться о сроке действия сохранённой копии. До его истечения ресурс считается свежим (fresh), после — устаревшим (stale). Алгоритмы вытеснения отдают предпочтение "свежим" ресурсам. Тем не менее, копия ресурса не удаляется из кеша сразу же по истечении её срока действия; при получении запроса на устаревший ресурс кеш передаёт его дальше с заголовком If-None-Match (en-US) на случай, если копия все ещё актуальна. Если это так, сервер возвращает заголовок 304 Not Modified («не изменялось»), а тело ресурса не посылает, экономя тем самым трафик.
Вот пример того, как протекает этот процесс при использовании совместного кеша прокси:
Срок действия (freshnessLifetime) вычисляется на основании нескольких заголовков. Если задан заголовок "Cache-control: max-age=N", то срок действия равен N. Если его нет, а это бывает очень часто, проверяется заголовок Expires , и, если он есть, то срок действия берётся равным значению заголовка Expires минус значение заголовка Date. Наконец, если нет ни того ни другого, смотрят заголовок Last-Modified. Если он есть, то срок действия равен значению заголовка Date минус значение заголовка Last-modified разделить на 10.
Время устаревания (expirationTime) вычисляется следующим образом:
где responseTime — это время получения ответа по часам браузера, а currentAge — текущий возраст кеша.
Обновление статических ресурсов (Revved resources)
Чем больше ресурсов может быть взято из кеша, тем быстрее сайт реагирует на запросы и тем выше его производительность. Из этих соображений их "срок годности" имеет смысл делать как можно большим. Однако, возникает проблема с ресурсами, которые обновляются редко и нерегулярно. Как раз их кеширование даёт больше всего выгоды, но сильно затрудняет обновление. Такие ресурсы можно найти на любой веб-странице: файлы скриптов (JavaScript) и стилей (CSS) изменяются редко, но уж если это произошло, обновление надо произвести как можно быстрее.
Этот метод имеет дополнительное достоинство: одновременное обновление двух кешированных ресурсов не приводит к ситуации, при которой устаревшая версия одного ресурса используется вместе с новой версией другого. Это очень важно для сайтов с взаимосвязанными файлами стилей CSS или JS-скриптов — связь может возникнуть, например, из-за ссылок на одни и те же элементы HTML-страницы.
Номер версии, добавляемый к статическому ресурсу, не обязательно записывать в виде стандартного номера версии наподобие 1.1.3, или другого возрастающего числового значения. Это может быть что угодно, позволяющее избежать совпадений — например, дата.
Валидация кеша
Валидация кеша запускается при нажатии пользователем кнопки перезагрузки. Кроме того, она может выполняться в ходе обычного просмотра страниц, если кешированный ответ включает заголовок "Cache-control: must-revalidate". Другим фактором являются настройки кеширования браузера — можно потребовать принудительной валидации при каждой загрузке документа.
При истечении срока годности документа он либо проходит валидацию, либо повторно доставляется с сервера. Валидация может выполняться только если на сервере реализован сильный валидатор или слабый валидатор.
Заголовки ETag
Заголовок ответа ETag является непрозрачным для клиентского приложения (агента) значением, которое можно использовать в качестве сильного валидатора. Суть в том, что клиент, например, браузер, не знает, что представляет эта строка и не может предсказать, каким будет её значение. Если в ответе присутствует заголовок ETag , клиент может транслировать его значение через заголовок If-None-Match (en-US) будущих запросов для валидации кешированного ресурса.
Заголовок ответа Last-Modified можно использовать в качестве слабого валидатора. Слабым он считается из-за того, что имеет 1-секундное разрешение. Если в ответе присутствует заголовок Last-Modified , то для валидации кешированного документа клиент может выводить в запросах заголовок If-Modified-Since .
При запросе на валидацию сервер может либо проигнорировать валидацию и послать стандартный ответ 200 OK , либо вернуть ответ 304 Not Modified (с пустым телом), тем самым указывая браузеру взять копию из кеша. В последнем случае в ответ могут входить также заголовки для обновления срока действия кешированного ресурса.
Изменяющиеся ответы
Если кеш получает запрос, который можно удовлетворить сохранённым в кеше ответом с заголовком Vary , то использовать этот ответ можно только при совпадении всех указанных в Vary полей заголовка исходного (сохранённого в кеше) запроса и нового запроса.
Это может быть полезно, например, при динамическом предоставлении контента. При использовании заголовка Vary: User-Agent кеширующие сервера, принимая решение об использовании страницы из кеша, должны учитывать агент пользователя. Так можно избежать ситуации, когда пользователи мобильных устройств по ошибке получат десктопную версию вашего сайта. Вдобавок, это может помочь Google и другим поисковым системам обнаружить мобильную версию страницы, и может также указать им на то, что здесь нет никакой подмены контента с целью поисковой оптимизации (Cloaking).
Поскольку значение заголовка User-Agent (en-US) различается ("varies") у мобильных и десктопных клиентов, закешированный мобильный контент не будет по ошибке отсылаться пользователям десктопов и наоборот.
Что такое кэш сайта?
Ответить на вопрос, что такое кэш сайта довольно просто. Это наиболее используемые элементы в работе: изображения, html-шаблонов, файлов js, css и т.д. Суть заключается в том, что с помощью сохраненной информации вэб-ресурс, программы, сервисы значительно ускоряются в работе.
Скорость обуславливается тем, что извлечение обработанных данных из кэша гораздо проще и занимает меньше времени, чем запрос из основного хранилища. Стоит отметить, что показатель CR сможет Вас порадовать, если решитесь на данную процедуру для своего сайта.
Существует четкая схема взаимодействия приложений с кэшом:
- Во время первого запроса все данные заносятся в кэш;
- При повторном запросе материалы берутся из кэша;
- Когда кэш пуст или его информация устарела, то алгоритм перезапускается;
- Настройки хранения находятся в файлах конфигурации вэб-ресурсов и самого сервера.
Данный термин очень универсален и встретить его можно в различных сферах жизнедеятельности. Например, в мобильных дэкстопных приложениях, аппаратном обеспечении и т.д. Даже на сайтах, посвященных тому, что такое сторителлинг можно увидеть успешное использование кэширования.
Как очистить кэш сайта Google?
Многие пользователи интернета могут столкнуться с различными проблемами работ браузеров или сайтов. Тогда и возникает вопрос, как очистить кэш сайта Google. Большинство информации посещенных ранее ресурсов обрабатывается и сохраняется в кэш-памяти и файлах cookie.
Для произведения очистки необходимо открыть поисковую систему. В левом углу сверху будет значок с тремя точками. После нажатия необходимо выбрать «Дополнительные инструменты» далее «Удаление данных о просмотренных страницах».
Удалить все данные можно выбрав временной диапазон. Выберите "Файлы cookie и другие данные сайтов" и "Изображения и другие файлы, сохраненные в кеше" и нажмите «Удалить данные». На практике сделать это очень просто, как войти в Яндекс.Почту с закрытыми глазами современному человеку.
После очистки будут стерты настройки сайтов, например пароли и имена учетных записей. Ресурсы могут медленно работать из-за того, что контент будет загружаться заново.
Как удалить кэш сайта?
Полезно будет знать, как удалить кэш сайта определенного ресурса. Зачастую нет нужды в очистки всего кэша, ведь в нем сохраняется полезная информация нужная для удобства пользования. Например, авторизация в различных сайтах, истории поисковых запросов и т.д.
Для того чтобы выполнить данную процедуру, нужно открыть инструменты разработчика командой «Ctrl+Shift+I». Кликните ЛКМ на кнопку «Обновить» и удерживайте кнопку. Далее Вы должны увидеть выпадающее окно, в котором будет пункт «Очистка кэша и аппаратная перезагрузка».
Перезагрузку страницы можно осуществить без использования файлов кэша. Достаточно будет вызвать команду с помощью комбинации клавиш Ctrl+F5 или Ctrl+Shift+R. Также, если Вы работаете в сфере предпринимательства важно знать, что такое отказы в Метрике и как это связано с кэшированием интернет-ресурсов.
Как посмотреть кэш сайта?
Не лишним будет узнать, как посмотреть кэш сайта. Иногда случается так, что нужный в данный момент сайт заблокирован или не отвечает на запрос. Не нужно сразу пугаться и бить тревогу, если требуемая информация находится только там.
Попробуйте найти информацию через поисковую систему. Мы будем смотреть результаты по ключу «кэширование». Потом необходимо навести курсор на результат поисковой выдачи, но не кликать на него. Справа от результата всплывет стрелка вправо. Смело кликайте не нее.
Далее появится миниатюра сайта, в нашем случае это Википедия, и перейдите по ссылке «Cached» сверху над миниатюрой. Так Вы окажитесь на кэшированной версии сайта с актуальными данными. Порой помочь может и технический аудит сайта, что это в современном мире известно даже ученикам средних классов школы.
Как сбросить кэш сайта?
Теперь самое интересное, как сбросить кэш сайта. Нужно открыть сам сайт и требуемую страницу. Нажимаем кнопку «Обновить» в окне браузера или делаем это с помощью кнопки F5. В случае, когда этого недостаточно для сброса кэша, то есть ещё несколько вариантов проведения этой процедуры.
В момент нахождения на странице сайта зажмите клавиши «Ctrl+F5». Команда предназначена для абсолютного сброса кэша и полной перезагрузки сайта вновь. Данный способ универсален и его используют в случае проблем с кэшем проектов.
Для специальных плагинов и модулей для CMS требуется в целом скидывать кэш проектов из админ-панели сайта. Все это происходит в индивидуальном порядке, так что не стесняйтесь обращаться за помощью к разработчику. Конечно, если Вы знаете, что такое KPI, то это уже совершенно другое дело, играющее в Вашу пользу.
Как обновить кэш сайта?
Довольно часто у пользователей возникает вопрос, как обновить кэш сайта. Сделать это можно через команду сочетания клавишCtrl+F5. Тогда все материалы по данному ресурсу будут принудительно обновлены заново с удаленного сервера.
В случае не происходящего обновления кэша требуется произвести очистку кэша браузера. Сделать это под силу даже ребенку. Просто зайдите в настройки и выберите нужный для этого пункт.
Как очистить кэш сайта страницы?
Время от времени все мы задумываемся над тем, как очистить кэш сайта, поскольку память на жестком диске не безгранична. Вдобавок бывает и устаревшее отображение ресурса и необходимо его обновить.Сделать это можно через настройках используемого Вами браузера.
Если говорить о GoogleChrome, то нужно нажать«Дополнительные инструменты»>«Удаление данных о просмотренных страницах». Далее уже интуитивно можно кликать на требуемые задачи. Это будет «Настройка и управление» и т.д. Кстати, сейчас в стоимость контекстной рекламы включается помощь кэширования данных.
Как очистить кэш сайта в Яндекс Браузере?
Напоследок давайте рассмотрим, как очистить кэш сайта в Яндекс Браузере. Для этого кликните в левом верхнем углу на кнопку с тремя полосками и выберите «Дополнительно», «Очистить историю». В списке удалить записи за требуемый период.
Оптимизируйте опцию «Файлы» сохраненные в кэше и выключите остальные. Затем кликните «Очистить» в всплывающем меню. Зачастую такое нехитрое дело можно провернуть с помощью цены создания и настройки Яндекс Директ, поскольку зачастую такая услуга включает в себя данную процедуру.
Кэширование данных интрернет-ресурсов просто находка, позволяющая сделать процесс поиска в разы быстрее и производительнее. Для сайтов же это замечательное средство для увеличения конверсии. Что думаете Вы на этот счет?
Читайте также: