Как обновить кэш сайта

Здравствуйте. Столкнулся с такой проблемой. Вношу изменения в стили на каких-либо страницах сайта, обновляю страницу. Изменения не вступают в силу до тех пор, пока не обновлю страницу через ctrl+f5 либо не почищу плагином (WP Super cache) кэш сайта.

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

Нужно сделать так, что бы при заходе на обновленные страницы сайта, без ctrl+f5 юзер сразу видел обновленную версию страницы.

Вот то, что я попробовал:

1) На стороне хостинга через службу поддержки отключил кэширование css файлов — не помогло (видимо старый кэш остался у пользователей)

2) Тысячу раз удалил кэш с помощью плагина WP Super Catche — не помогло

3) В php файле WP, в котором подключается основной файл стилей, добавил этому файлу "?ver=123" — не помогло.
Вот как это выглядело:

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

Есть подозрение, что 3ий способ не помогает решить проблему, из-за вот этой строчки:
mp_emmet_get_theme_version(), ‘all’);

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

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

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

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

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

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

Как просто обновить страницу

Самый просто вариант, который подходит в 95% случаев — обычное обновление текущей страницы. Для того, что бы это сделать, в любом современном браузере по умолчанию есть кнопка "Обновить страницу" или "Refresh", если вы не скрывали её в настройках вашего обозревателя.

Находится она рядом (или внутри) с адресной строкой и везде выглядит примерно одинаково.

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

Но иногда функциональные клавиши F1-F12 могут быть переназначены производителем компьютера на другие функции (изменение яркости экрана, громкости звука и т.д.), и в таком случае для обновления страницы используйте сочетание двух клавиш Fn+F5.

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

Читайте также:  Как зарегистрировать сообщество в контакте

Как обновить страницу с очисткой кэша

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

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

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

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

Здравствуйте уважаемый посетитель!

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

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

Дело в том, что отображать результаты Яндекс.Поиска можно только на сайте, размещенном в интернете. Использования для этих целей ранее рассматриваемого варианта "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-заголовков механизма кэширования
  • Проверяем отображение страницы при изменении файла main.css до преобразований
  • Суть способа автоматического обновления кэша браузера
  • Выполняем преобразование имени файла main.css
  • Проверяем обновление кэша браузера измененного файла main.css после преобразований
  • Исходные файлы сайта

Проверяем фактические настройки HTTP-заголовков механизма кэширования

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

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

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

Читайте также:  Как перевести из двоичной в шестеричную

Так например, на данный момент в файле ".htaccess" сайта "avtobezugona.ru", размещенном на хостинге Хостия, отсутствует какой-либо код, относящийся к браузерному кэшированию. Однако, если сейчас посмотреть на ответ сервера при обращении к "main.css", то можно увидеть в нем наличие соответствующих кэшированию HTTP-заголовков.

Ниже показан скриншот ответа сервера, полученный с помощью сервиса Яндекс.Вебмастер по запросу к "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 <

Рис.2 Замена цвета подзаголовков статей в файле "main.css"

А затем откроем одну из страниц сайта и посмотрим, воспринял ли браузер такое изменение, или он при загрузке будет использовать ранее сохраненный ресурс "main.css".

Ниже показан результат отображения главной страницы сайта "avtobezugona.ru" в Яндекс браузере после выполненных изменений.

Рис.2 Результат отображения страницы при изменении файла "main.css" до преобразования

Как видно, цвет подзаголовков не изменился, что означает — браузер в данном случае при загрузке использует ранее сохраненную версию файла "main.css".

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

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

Суть способа автоматического обновления кэша браузера

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

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

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

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

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

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

Выполняем преобразование имени файла main.css

Сначала рассмотрим вариант с расчетом хеш-суммы содержимого файла, например CRC16, CRC32, SHA-1, SHA-2 и т.п. Допустим, для определения контрольной суммы применим алгоритм MD5 — специальную PHP-функцию "md5_file(), возвращаемую хеш в виде 32-символьного шестнадцатеричного числа.

Исходя из этого составим PHP-скрипт для подсчета хеш-суммы "main.css". При этом разместим его в шаблоне главной страницы "index.php", где также находится тег
, предназначенный для подключения таблицы стилей CSS.

Читайте также:  Как на ноутбуке узнать модель ноутбука

$url_css = ‘http://’ .$_SERVER[ ‘SERVER_NAME’ ]. ‘/styles/main.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-хеша в тег
следующим образом:

rel = "stylesheet" type = "text/css" href = "/styles/main.css?echo $xesh; ?>" >

Рис.4 Добавление псевдопараметра в тег

И теперь в случае изменения содержимого файла "main.css" в соответствующем теге
будет заменяться псевдопараметр.

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

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

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

$lasttime = filemtime ($filename);

Рис.5 Скрипт для получения времени последнего изменения файла "main.css"

rel = "stylesheet" type = "text/css" href = "/styles/main.css?echo $lasttime; ?>" >

Рис.6 Добавление псевдопараметра времени последнего изменения файла в тег

Проверяем обновление кэша браузера измененного файла main.css после преобразований

Теперь, после выполненных преобразований тем, или иным способом (в данном случае воспользуемся первым вариантом), можно проверить, как будет отображаться страница при изменениях файла "main.css".

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

Рис.5 Результат отображения страницы при изменении файла "main.css" после преобразования

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

Можем также посмотреть, как теперь будет выглядеть имя файла в теге
, в котором подключается таблица стилей CSS.

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

Рис.6 HTML-код веб-страницы после преобразований

Видно, что теперь в соответствующем теге
добавился псевдопараметр с хеш-суммой, соответствующей содержимому последней версии файла "main.css".

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

Рис.7 Возвращение цвета подзаголовков в прежнее состояние

А кроме этого, посмотрим, какое теперь значение принял псевдопараметр в теге
после возвращения цвета в прежнее состояние.

Рис.8 HTML-код веб-страницы после замены цвета подзаголовков

Как видно, псевдопараметр изменил значение, соответствующее теперь хеш-сумме новой версии файла "main.css".

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

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

Таким образом мы подготовили сайт для размещения результатов Яндекс.Поиск и оформления соответствующей страницы по дизайн сайта. Что мы и сделаем в следующей статье.

Исходные файлы сайта

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

  • Файлы каталога www
  • Таблицы базы данных MySQL

Дополнительные материалы бесплатно предоставляются только зарегистрированным пользователям.

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

Для тех кто не зарегистрирован, можно это сделать на вкладке Регистрация.

Adblock
detector