Используйте кэш браузера для следующих ресурсов wordpress: WordPress Super Cache — используем кеш браузера для ускорения сайта

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Как включить кэш браузера | SEO Маяк

Всем привет! Сегодня на seo-mayak.com я продолжу разбирать рекомендации PageSpeed по ускорению загрузки сайта и расскажу, как включить кэш браузера на стороне посетителя Вашего сайта.

Многие веб-мастера используют для кэширования данных различные кэш-плагины. Самые популярные из них: W3 Total Cache, WP Super Cache и Hyper Cache.

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

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

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

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

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

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

Модули Apache: mod_headers и mod_expires

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

Данные модули не входят в стандартную сборку Apache и необходимо уточнить в службе поддержки хостинга, установлены ли mod_headers и mod_expires на сервере. Если таковые имеются, то можно приступать к написанию директив.

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

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

Скажу больше. Заголовок Expires начал работать с версии протокола HTTP/1.0, а заголовок Cache-Control был принят на вооружение с выходом протокола HTTP/1.1.

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

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

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

Директивы кэширования для модуля mod_headers

Вот такой код надо вставить в файл .htaccess. Во избежание лишних вопросов, вставляем перед строчкой # END WordPress:

# Включаем кэш в браузерах посетителей
<ifModule mod_headers.c>
    # Все html и htm файлы будут храниться в кэше браузера один день
    <FilesMatch "\.(html|htm)$">
        Header set Cache-Control "max-age=43200"
    </FilesMatch>
    # Все css, javascript и текстовые файлы будут храниться в кэше браузера одну неделю
    <FilesMatch "\.(js|css|txt)$">
        Header set Cache-Control "max-age=604800"
    </FilesMatch>
    # Все флэш файлы и изображения будут храниться в кэше браузера один месяц
    <FilesMatch "\.(flv|swf|ico|gif|jpg|jpeg|png)$">
        Header set Cache-Control "max-age=2592000"
    </FilesMatch>
    # Отключаем кеширование php и других служебных файлов
    <FilesMatch "\.(pl|php|cgi|spl|scgi|fcgi)$">
        Header unset Cache-Control
    </FilesMatch>
</IfModule>

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

<ifModule …>…</IfModule> — это своего рода контейнер, который заключает в себя директивы, предназначенные для того или иного модуля Apache и заодно проверяет наличие оного. Если модуль не найден, то директивы игнорируются.

В данном случаи мы обращаемся к модулю mod_headers, исходный файл которого носит название mod_headers.c, где «.с» — расширение файла.

<FilesMatch «…»>…</FilesMatch> — блочная директива, указывающая серверу на файлы с конкретными расширениями, на которые будут распространятся указанные в директиве правила. В кавычках, прописываются регулярные выражения, например «\.(html|htm)$», с помощью которых можно сгруппировать файлы с необходимыми расширениями.

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

Header — директива, влияющая на отправку HTTP заголовка со стороны сервера в сеть. Данная директива может принять следующие аргументы: set, append, add, unset и echo. Все аргументы я думаю описывать вовсе не обязательно, кто хочет знать больше, читайте документацию. Рассмотрим лишь те аргументы, которые используются в нашем коде.

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

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

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

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

Директивы кэширования для модуля mod_expires

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

<ifModule mod_expires.c>
    ExpiresActive On
    #по умолчанию кеш в 5 секунд
    ExpiresDefault "access plus 5 seconds"
    # Включаем кэширование изображений и флэш на месяц
    ExpiresByType image/x-icon "access plus 1 month"
    ExpiresByType image/jpeg "access plus 4 weeks"
    ExpiresByType image/png "access plus 30 days"
    ExpiresByType image/gif "access plus 43829 minutes"
    ExpiresByType application/x-shockwave-flash "access plus 2592000 seconds"
    # Включаем кэширование css, javascript и текстовых файлов на одну неделю
    ExpiresByType text/css "access plus 604800 seconds"
    ExpiresByType text/javascript "access plus 604800 seconds"
    ExpiresByType application/javascript "access plus 604800 seconds"
    ExpiresByType application/x-javascript "access plus 604800 seconds"
    # Включаем кэширование html и htm файлов на один день
    ExpiresByType text/html "access plus 43200 seconds"
    # Включаем кэширование xml файлов на десять минут
    ExpiresByType application/xhtml+xml "access plus 600 seconds"
</ifModule>

С контейнером ifModule я думаю должно быть все понятно.

ExpiresActive — данная директива активирует или блокирует кэширование на стороне браузера пользователя.

on — активировать

off — блокировать

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

В директивах для модуля mod_expires синтаксис временного интервала гораздо гибче, чем для модуля mod_headers, где время задается только в секундах.

Для модуля mod_expires время можно устанавливать в следующий исчислениях:

years — лет или year — один год
months — месяцев или month — одни месяц
weeks — недель или week — одна неделя
days — дней или day — один день
hours — часов или hour один час
minutes — минут или minute — одна минута
seconds — секунд

Перед временным интервалом прописывается несколько дополнительных слов, например:

"access plus 1 month"

access — основное слово (основа). В переводе с англ. — доступ;

plus — ключевое слово (ключ), после которого должно следовать числовое значение.

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

ExpiresByType — директива, задающая временной интервал кэширования для определенных типов файлов. Достоинством данной директивы является то, что она отменяет время кэша по умолчанию, для указанных типов файлов, установленного директивой ExpiresDefault.

Также обязательно через слеш указывается тип файлов, например: image/jpeg, text/html или application/x-javascript. Все типы файлов можно посмотреть здесь.

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

Конечно в  будущем я не обойду вниманием и эти темы, так что подписывайтесь на обновления блога, будет интересно!

До встречи!

С уважением, Виталий Кириллов

« Оптимизация WordPress. Нагрузка на сервер и как ее снизить
« PageSpeed — реальное ускорение сайта
« Как включить gzip сжатие и кратно ускорить сайт
« Как сократить CSS и ускорить загрузку сайта

Как настроить Leverage Browser Caching в Вордпресс

Вы проверяли сайт на скорость в тесте Google PageSpeed Tools, GTmetrix или Pingdom, и получили предупреждение «Leverage browser caching» или «Leverage browser caching for the following cacheable resources».

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

Содержание:

Что такое Leverage Browser Caching

Что такое Leverage Browser Caching

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

Leverage Browser Caching — это правило, которое определяет, как долго браузер хранит контент, картинки, css или js в браузере посетителя. Когда время хранения этих файлов истечет, браузер посетителя очистит кеш.

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

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

Это увеличивает скорость загрузки страниц и уменьшает нагрузку на сервер.

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

Вы можете сделать это вручную или при помощи плагинов.

Вручную:

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

Добавьте в него этот код:

Вы можете изменить время хранения файлов по своему усмотрению. Если какой-то тип файлов вы хотите обновлять чаще, установите другой интервал. Google и Pingdom рекомендуют установить срок хранения для этих файлов не менее 1 недели и до 1 года. Обычно используют 1-2 недели.

Сохраните и загрузите на сервер. Удалите кеш из браузера и из плагина кеширования, если вы его используете.

При помощи плагина W3 Total Cache:

Вы можете изменить настройки Leverage browser caching для CSS и JS файлов в разделе Browser Cache, секция CSS & JS. В этом случае время хранения JS файлов установлено 691.200 секунд (8 дней).

Настройки HTML & XML и Media & Other Files находятся в следующих секциях и настраиваются так же.

При помощи плагина Hummingbird:

Эти настройки находятся в разделе Caching, секция Browser Caching:

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

Сохраните настройки, обновите кеш.

Как изменить время хранения файла analytics.js Гугл Аналитикс

Файл https://www.google-analytics.com/analytics.js является JS файлом и может быть кеширован в браузере посетителя на заданное количество времени, но Гугл не позволяет это сделать, так как время от времени они меняют этот файл для улучшения отслеживания поведения посетителей сайта.

Главная страница панели вебмастера Гугл получает рекомендацию изменить время хранения этого файла. Результат тестирования:

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

Как изменить Leverage Browser Caching для файла Google Analytics вручную

Чтобы изменить время хранения файла analytics.js, вам нужно хранить этот файл на своем сервере и загружать этот файл на сайт со своего сервера.

1. Откройте файл https://www.google-analytics.com/analytics.js в новой вкладке и скопируйте весь код. 
2. Создайте папку на сервере и назовите ее google-analytics.
3. В это папке создайте текстовый файл и вставьте в него код, который вы скопировали ранее.
4. Переименуйте файл в ga-local.js
5. Замените URL в коде Google Analytics на адрес созданного файла. Должно получиться http://my-site.ru/google-analytics/ga-local.js
6. Перенесите ваш новый код Google Analytics в футер сайта.

Проверьте ваш сайт на скорость в тесте Гугл, это предупреждение должно пропасть. Минус этого способа в том, что вам нужно будет время от времени обновлять этот файл вручную.

Как изменить Leverage Browser Caching для файла Google Analytics при помощи плагина

Чтобы изменить время хранения файла analytics.js, установите этот плагин:

Настройки плагина находятся в меню Настройки -> Optimize Analytics.

1. Введите ваш код Гугл Аналитикс.
2. Выберите место для вставки кода.
3. Нажмите Save Settings.

Этот плагин создает файл analytics.js на вашем сервере и использует его для сервиса Гугл Аналитикс. Плагин автоматически обновляет файл analytics.js на вашем сервере с сервера Гугл через определенные промежутки времен по cron-расписанию.

Заключение:

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

Устранение предупреждения Leverage browser caching — https://www.google-analytics.com/analytics.js (2 hours) добавит вам 1 балл в тесте Гугл.

Надеюсь, статья была полезной. Оставляйте комментарии.

Использовать кэш браузера для отдельных файлов. WordPress Super Cache плагин, используем кэш браузера. Плагин для кэширования граватаров NIX Gravatar Cache

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

ExpiresActive On
ExpiresDefault “access 7 days”
ExpiresByType application/javascript “access plus 1 year”
ExpiresByType text/javascript “access plus 1 year”
ExpiresByType text/css “access plus 1 year”
ExpiresByType text/html “access plus 7 day”
ExpiresByType text/x-javascript “access 1 year”
ExpiresByType image/gif “access plus 1 year”
ExpiresByType image/jpeg “access plus 1 year”
ExpiresByType image/png “access plus 1 year”
ExpiresByType image/jpg “access plus 1 year”
ExpiresByType image/x-icon “access 1 year”
ExpiresByType application/x-shockwave-flash “access 1 year”

Header set Cache-Control “max-age=2592000, public”


Header set Cache-Control “max-age=172800, public, must-revalidate”


Header set Cache-Control “max-age=172800, private, must-revalidate”


BrowserMatch “MSIE” force-no-vary
BrowserMatch “Mozilla/4.{2}” force-no-vary

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

С помощью плагина

Если вы боитесь лезть в код или у вас нет файла.htaccess, то можно сделать кэш на стороне браузера с помощью простого плагина – Zendy Speed: Browser Caching . Всё, что вам нужно сделать, это установить и активировать данный плагин, больше ничего делать не надо. После активации плагина код добавиться автоматически.

«», чтобы оптимизировать сайт по совету инструмента от Google PageSpeed Insights. Каждый владелец сайта сталкивался с проблемой сложности закешировать js скрипты сторонних сайтов.

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

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

Кеш браузера своих элементов

Делаем кеш для разных скриптов, пример взят с блога Devaka ru (на момент написания статьи)
К примеру:

/assets/copyright.min.js (не указан срок действия)
/assets/i/566.jpg (не указан срок действия)
/assets/i/icons.png (не указан срок действия)
/i/postcomm-left.png (не указан срок действия)
/i/postcomm-right.png (не указан срок действия)

Исправляем первую проблему, заходим в файл.htaccess, что находится к корне сайта и вставить в самый низ этот код:

# сжатие text, html, javascript, css, xml: AddOutputFilterByType DEFLATE text/html text/plain text/xml application/xml application/xhtml+xml text/css text/javascript application/javascript application/x-javascript # кеш браузера ExpiresActive On #по умолчанию кеш в 5 секунд ExpiresDefault «access plus 1 days» # Включаем кэширование изображений и флэш на месяц ExpiresByType image/x-icon «access plus 1 month» ExpiresByType image/jpeg «access plus 4 weeks» ExpiresByType image/png «access plus 30 days» ExpiresByType image/gif «access plus 43829 minutes» ExpiresByType application/x-shockwave-flash «access plus 2592000 seconds» # Включаем кэширование css, javascript и текстовых файлов на одну неделю ExpiresByType text/css «access plus 604800 seconds» ExpiresByType text/javascript «access plus 604800 seconds» ExpiresByType application/javascript «access plus 604800 seconds» ExpiresByType application/x-javascript «access plus 604800 seconds» # Включаем кэширование html и htm файлов на один день ExpiresByType text/html «access plus 43200 seconds» # Включаем кэширование xml файлов на десять минут ExpiresByType application/xhtml+xml «access plus 600 seconds» # Нестандартные шрифты сайта ExpiresByType application/x-font-ttf «access plus 1 month» ExpiresByType font/opentype «access plus 1 month» ExpiresByType application/x-font-woff «access plus 1 month» ExpiresByType image/svg+xml «access plus 1 month» ExpiresByType application/vnd.ms-fontobject «access plus 1 month»

Примеры сторонних скриптов

Если в первом шаге, все сделали верно, должны увидеть примерно такой список:

Используйте кеш браузера для следующих ресурсов

Кеш сторонних элементов

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

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

Давайте теперь по порядку!
Шаг 1. Скопируем список всех скриптов на которые указывает Google PageSpeed в блокнот или прямо с браузера.
Шаг 2. Создайте файл на хостинге с расширением php и вставляем в него следующий код:

Внимание! У вас нет прав для просмотра скрытого текста.

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

Внимание! У вас нет прав для просмотра скрытого текста.

2. Путь куда сохранять файл:

Realpath(«./js»)

В этом примере это папка js, т.е. точный путь будет www.сайт/js/ (папку нужно создавать самим и выставить для неё права CHMOD для записи)

3. Имя скрипта, если с расширением.js, то пишем вместе с ним, если без него или с другим, то делаем все так как в примере выше. Обращайте внимание, чтобы не было файлов с одинаковыми названиями.

Шаг 3. Заливаем отредактированный файл на сервер

Шаг 4. Ставим файл на крон для автоматического обновления файлов

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

Заходите к себе в хостинг панель и выбираете вкладку CRON и прописываете команду, а также указываем время раз в час/сутки или любое другое время.

Wget -q -O — /dev/null http://www..php >/dev/null 2>&1

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

Шаг 5. Меняем путь к JS в счетчике или скрипте

Если был путь в счетчике https://mc.yandex.ru/metrika/watch.js, то заменяем его на путь внутри сайта, например http://www..js

Вот и все, теперь в списке PageSpeed Insights у вас не должно быть сообщений о настройке кеша браузера.

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

👁9 325 просм.

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

Зачем включать кеш браузера на стороне пользователя

Зачастую при создании нового сайта программисты не особо уделяют внимание скорости загрузки сайта браузером. Особенно если на этот пункт не было сконцентрировано внимание в Техническом Задании для разработки сайта. И после выхода нового творения в свет, веб-специалист, который занимается развитием и продвижением данного проекта может наблюдать очень печальную картину, просканировав сайт на скорость загрузки в PageSpeed Insights от Google.

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

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

А причины для этого как минимум две:

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

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

Если ваш проект разработан на популярной CMS WordPress, то есть множество плагинов, позволяющих решить проблему кеширования. Самые популярные из них W3 Total Cache, WP Super Cache, Hyper Cache. Но в этой статье я предлагаю рассмотреть более надежный, по моему мнению, способ включения кеширования через файл.htaccess непосредственно на хостинге.

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

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

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

Включение кеширования в браузере на стороне пользователя при помощи модуля mod_headers

Для включения функции кеширования приведенный ниже код надо вставить в файл.htaccess, который расположен в корневом каталоге вашего сайта. Во избежание появления ошибок, вставлять код нужно перед строчкой # END WordPress:

# Все html и htm файлы будут храниться в кеше браузера 12 часов Header set Cache-Control «max-age=43200» # Все css, javascript и текстовые файлы будут храниться в кеше браузера 7 дней Header set Cache-Control «max-age=604800» # Все флеш файлы и изображения будут храниться в кеше браузера 31 день Header set Cache-Control «max-age=2592000» # Отключаем кеширование php и других служебных файлов Header unset Cache-Control

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

Включение кеширования в браузере на стороне пользователя при помощи модуля mod_expires

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

ExpiresActive On #по умолчанию кеш в 30 секунд ExpiresDefault «access plus 30 seconds» # Включаем кеширование изображений и флеш на 1 месяц ExpiresByType image/x-icon «access plus 1 month» ExpiresByType image/jpeg «access plus 4 weeks» ExpiresByType image/png «access plus 30 days» ExpiresByType image/gif «access plus 43829 minutes» ExpiresByType application/x-shockwave-flash «access plus 2592000 seconds» # Включаем кеширование css, javascript и текстовых файлов на 7 дней ExpiresByType text/css «access plus 604800 seconds» ExpiresByType text/javascript «access plus 604800 seconds» ExpiresByType application/javascript «access plus 604800 seconds» ExpiresByType application/x-javascript «access plus 604800 seconds» # Включаем кеширование html и htm файлов на 12 часов ExpiresByType text/html «access plus 43200 seconds» # Включаем кеширование xml файлов на 10 минут ExpiresByType application/xhtml+xml «access plus 600 seconds»

img class=»aligncenter wp-image-2458 size-full» title=»Как включить кэширование браузером страниц сайта» src=»http://about-windows.ru/wp-content/uploads/2014/07/Как-включить-кэширование-браузером-страниц-сайта.jpg» alt=»Как включить кэширование браузером страниц сайта» width=»600″ height=»450″ />

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

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

Как включить кэширование браузером ресурсов сайта на сервере Apache?

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

1. CSS файлы.
2. JS файлы.
3. Изображения.
4. Видео.
5. Музыка.

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

ExpiresActive On
ExpiresDefault «access 7 days»
ExpiresByType application/javascript «access plus 1 year»
ExpiresByType text/javascript «access plus 1 year»
ExpiresByType text/css «access plus 1 year»
ExpiresByType text/html «access plus 7 day»
ExpiresByType text/x-javascript «access 1 year»
ExpiresByType image/gif «access plus 1 year»
ExpiresByType image/jpeg «access plus 1 year»
ExpiresByType image/png «access plus 1 year»
ExpiresByType image/jpg «access plus 1 year»
ExpiresByType image/x-icon «access 1 year»
ExpiresByType application/x-shockwave-flash «access 1 year»

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

Инструкция работает только в том случае, если apache обрабатывает статические файлы (установлен как фронтэнд). Если перед ним стоит nginx — те же действия нужно выполнять совсем по другому.

Сначала пара слов на тему — зачем вообще нужно кеширование ресурсов сайта (изображений, css, html-файлов, архивов и прочих статических файлов).

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

К примеру, популярный сервис проверки сайтов от Google PageSpeed Insights по этому поводу всегда пишет предупреждение:

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

//— список проблемных файлов —//

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

Для решения поставленной задачи — создайте в папке сайта файл с именем .htaccess (именно с точкой в начале. Это важно!) и добавьте в него вот эти правила. Если файл уже есть — добавьте в конец существующего:

# кеширование в браузере на стороне пользователя ExpiresActive On ExpiresDefault «access 7 days» ExpiresByType application/javascript «access plus 1 year» ExpiresByType text/javascript «access plus 1 year» ExpiresByType text/css «access plus 1 year» ExpiresByType text/html «access plus 7 day» ExpiresByType text/x-javascript «access 1 year» ExpiresByType image/gif «access plus 1 year» ExpiresByType image/jpeg «access plus 1 year» ExpiresByType image/png «access plus 1 year» ExpiresByType image/jpg «access plus 1 year» ExpiresByType image/x-icon «access 1 year» ExpiresByType application/x-shockwave-flash «access 1 year» # Cache-Control # 30 дней # 30 дней Header set Cache-Control «max-age=2592000, public» # 2 дня Header set Cache-Control «max-age=172800, public, must-revalidate» # 1 день Header set Cache-Control «max-age=172800, private, must-revalidate» #Запрет отдачи HTTP-заголовков Vary браузерам семейства MSIE BrowserMatch «MSIE» force-no-vary BrowserMatch «Mozilla/4.{2}» force-no-vary

После этого проверить результат можно на странице Google PageSpeed Insights (если всё правильно — сообщение «Используйте кеш браузера » будет помечено зелёным и размещено в секции «Выполнено правил: (подробнее)»)

Не работает, что делать?

Если кеширование не работает, то нужно проверить, установлены ли модули. Для этого нужно создать в папке сайта файл test.php c кодом:

Если в списке нет mod_expires или mod_headers — выполните в консоли сервера (подключившись ) по очереди следующие команды (это установит/включит mod_expires, mod_headers ):

A2enmod headers a2enmod expires service apache2 restart

Если же сайт на обычном хостинге — тут всё сложнее. Обращайтесь в техподдержку и уточняйте — почему не установлены модули и как можно обойти эту неурядицу. Так как причин по которой хостер не поставил модули — может быть достаточно много.

Как очистить кеш WordPress как профессионал

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

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

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

Во-первых, давайте подготовим почву.

Что такое кеш?

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

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

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

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

Типы кеша WordPress

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

Кэш браузера

Чтобы обеспечить лучший пользовательский интерфейс во время просмотра, современные браузеры оснащены функциями кэширования. Независимо от того, используете ли вы Chrome, Mozilla Firefox, Edge или Safari, ваш браузер автоматически кэширует контент с посещаемых вами веб-сайтов.

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

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

Плагин Cache

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

Существует множество плагинов кеширования, но два самых популярных – это W3 Total Cache и WP Super Cache. Оба плагина отлично подходят для кеширования сайтов WordPress и могут значительно сократить время, необходимое для загрузки ваших страниц. Какой плагин кеширования вы используете на своем сайте WordPress? Дайте нам знать в комментариях 🙂

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

Кэш сервера

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

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

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

3 – й партии Cache

На кой сторонний кеш? Хороший вопрос. Если вы используете веб-приложение, такое как CloudFlare, StackPath или Sucuri, обратите внимание, что одним из первых способов повышения производительности вашего сайта WordPress является кеш сборки.

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

Где мы во всем этом?

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

Зачем очищать кеш WordPress?

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

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

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

Как очистить кеш WordPress за доли секунды

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

Начнем с самого простого.

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

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

Гугл Хром

Мой личный фаворит, Chrome, несомненно, быстрый благодаря легкому дизайну и отличному кэшированию. Простой дизайн упрощает очистку кеша WordPress. Просто щелкните значок меню и перейдите к Дополнительные инструменты – > Очистить данные просмотра…, как показано ниже:

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

И вы сделали!

Mozilla Firefox

Точно так же очистка кеша в Firefox – дело четвероклассников. Просто щелкните значок меню, а затем щелкните вкладку «История», как показано ниже:

При нажатии на вкладку «История» открывается другая панель, как показано ниже. На этой панели нажмите на пункт меню «Очистить недавнюю историю»:

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

Microsoft Edge

Ранее известный как Internet Explorer, Edge – это попытка Microsoft вернуть себе рынок, на котором они когда-то доминировали. Edge – это значительное улучшение того, что большинство людей называют матерью всех веб-браузеров. Хотя я всегда выбираю Chrome, у Edge дела обстоят неплохо. Как очистить кеш?

Щелкните значок меню и выберите «Настройки»:

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

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

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

После очистки кеша браузера перезагрузите сайт WordPress. Решили ли вы проблему, связанную с кешем, после очистки кеша браузера? Если проблема не исчезнет, ​​другой, скорее всего, виноват ваш плагин кеширования.

Как очистить кеш плагина

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

W3 Общий кэш

W3 Total Cache – один из самых популярных плагинов кеширования WordPress. С более чем 1 миллионом активных установок, включая такие, как AT&T и MakeUseOf, среди прочих, этот плагин кеширования – это нечто иное. Он поставляется с отличным набором функций, которые обещают лучшую производительность и конверсию.

Чтобы очистить кеш WordPress в W3 Total Cache, просто перейдите в «Производительность»> «Панель управления» в админке WordPress. На панели инструментов W3 Total Cache нажмите кнопку «очистить все кеши», как показано ниже:

WP супер кэш

Созданный Automattic, теми же ребятами, которые предоставили нам множество других замечательных продуктов, таких как Jetpack, Akismet и WooCommerce, среди прочих, WP Super Cache – замечательный инструмент оптимизации производительности WordPress.

Чтобы очистить кеш WordPress в WP Super Cache, просто перейдите в Настройки в меню администратора WordPress. Затем нажмите WP Super Cache,  а затем кнопку «Удалить кеш», как показано на изображении ниже:

Как очистить сервер и сторонний кеш

Если вы используете 3 в й партии веб – приложение или хост, который поддерживает кэширование может быть немного другим способом. Например, WP Engine имеет настраиваемую панель хостинга, встроенную в панель управления WordPress. Все, что вам нужно сделать, это щелкнуть по нему, чтобы получить доступ к параметрам очистки кеша или сброса прав доступа к файлам. Здесь есть несколько полезных ссылок на ресурсы, в которых показано, как очистить кеш WordPress в нескольких распространенных сценариях:

Заключение

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

Источник записи: https://www.wpexplorer.com

Лучший плагин кеширования WordPress — W3 Total Cache

С момента появления моего блога я использовал плагин кеширования WP Super Cache, который меня полностью устраивал…до вчерашнего дня. Не смотря на свою изначальную неповоротливость, WordPress начинает быстро работать после включения кеширования (это и решал плагин WP Super Cache), но со временем поисковики выдвигают все новые требования, и вот у меня появились следующие проблемы:

• Устраните ресурсы, блокирующие отображение,
• Используйте современные форматы изображений,
• Удалите неиспользуемый код CSS,
• Настройте показ всего текста во время загрузки веб-шрифтов,
• Минимизируйте работу в основном потоке,
• Сократите время выполнения кода JavaScript,
• Отложите загрузку скрытых изображений,
• Задайте правила эффективного использования кеша для статических объектов,
• Уменьшите размер кода CSS,
• Уменьшите размер кода JavaScript,
• Включите сжатие текста.

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

В процессе поиска я наткнулся на классную статью на Хабре, где ребята подробно разобрали вопрос оптимизации скорости загрузки сайта на WordPress, а главное, представили большую итоговую таблицу с оценками:

В поле Role указано, какой спектр задач покрывает плагин или связка для обеспечения качественного кеширования (Full – значит плагин умеет все, что касается кеширования):

• Server cache (кеш на стороне сервера):
  • Page load time (время загрузки страницы) – один из самых важных параметров. Чем меньше время, тем быстрее клиент получает ответ.
  • Caching method (способ хранения) – максимальное сохранение всех подготовленных объектов HTML, JS, CSS, желательно еще и в сжатом состоянии для экономии времени обработки на сервере и увеличения скорости выдачи результата.
• Client cache (кеш на стороне клиента):
  • Возможность управлять кешем браузера клиента. При его активации повторный запрос на сервер даже не придет, что благоприятно влияет на его производительность.
• Optimize (оптимизация):
  • Combine (слияние) – загрузка одного общего JS (или CSS) вместо нескольких.
  • Inline (включение) – содержимое CSS вставляется в HTML, что уменьшает число обращений к серверу.
  • Postpone (отложенная загрузка) – отложенная загрузка JS скриптов, не влияющих на начальное отображение страницы. Важнейшая метрика, влияющая на скорость загрузки страницы пользователю. JS лучше отложить, чем включать напрямую в HTML, т.к. это приведет к существенному увеличению объема HTML.
  • Minify (минификация) – в содержимом HTML, JS и CSS зачастую есть лишние части, такие как пробелы, переносы строк, комментарии. Их лучше убирать, чтобы еще больше снизить размер объектов.
  • Compress (сжатие) – сжатие данных алгоритмом GZip (Deflate) для уменьшения объема передаваемых данных. Т.к. HTML, JS и CSS, по сути, текстовые форматы, то они хорошо сжимаются.
• Manage (управление):
  • Refresh (обновление) – когда запрашиваемый объект изменился (например, добавилась новая статья), объект в кеше нужно пересоздать, иначе пользователям будет отправляться неактуальная информация. Хорошие плагины настроены на авто обновление кеша при наиболее очевидных событиях. И всегда должна быть возможность сбросить кеш целиком вручную.
  • Exclude (добавление исключений) – иногда нужно исключать некоторые объекты и страницы из кеширования для устранения проблем, необходимо управление этим.

По каждому из этих параметров плагины получали оценки.

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

Этим решением оказался плагин W3 Total Cache. Я про него слышал ранее, и то, что плагин существует давно и до сих пор активно развивается – весомый аргумент. Очевидное преимущество W3 Total Cache против моего любимого WP Super Cache – он не только обеспечивает кэширование на стороне сервера, но оптимизирует ресурсы и кеширует на стороне клиента (браузера) – короче, это целый фреймворк.

Я решил попробовать: отключил старый плагин и активировал W3 Total Cache.

Настройка W3 Total Cache

Бывают простые и понятные плагины, которые позволяют в несколько кликов все настроить и забыть. Среди просмотренных мною в процессе поиска были и такие, но W3 Total Cache другой. Он не имеет привлекательного интерфейса и выглядит аскетично в духе старых версий WordPress, в нем хренова гора настроек, галочек, селектов – просто глаза разбегаются. Вот уж точно не разобраться с первого подхода, особенно, если вы не искушенный администратор. Но я уже принял вызов и был обязан его победить.

Именно по этой причине я решил подробно рассказать, как правильно настроить плагин W3 Total Cache для WordPress.

У W3 Total Cache существует PRO версия и премиум-поддержка, но сразу скажу, что нам это не пригодится – необходимый нам функционал доступен бесплатно. Настроить я вам его помогу, а красивые графики скорости загрузки вам вряд ли пригодятся в повседневной жизни.

Перед установкой и активацией W3 Total Cache обязательно деактивируйте свой текущий кэширующий плагин, если он есть. Только после этого можно переходить к настройке. Вот так выглядит главный экран (обратите внимание на множество пунктов в сайдбаре слева):

Сразу рекомендую проверить совместимость плагина и настроек сервера «Compatibility Check» (слева вверху). Допустимо, если какие-то пункты там будут в статусе «Not installed», по этому поводу всегда можно написать хостеру и попросить установить/активировать расширения. Главное, чтобы зелеными были следующие пункты: zlib extension, Opcode cache, Memcached extension, Memcache extension, а также все пункты (кроме последнего) под заголовком WordPress Resources.

Теперь можно переходить непосредственно к настройкам.

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

General Settings (Основные настройки)

Небольшое отступление, которое повлияет на ваши дальнейшие настройки. Я буду рекомендовать выбрать метод кеширования Memcached, вместо Disk. Но есть несколько условий, когда это уместно и выгодно. Разница заключается в том, что при выборе Memcached кеш будет храниться в оперативной памяти сервера, а при Disk – на винчестере. Если у вас выделенный сервер, а на них обычно всегда много оперативки, Memcached оправдан, но, если у вас обычный шаред хостинг (образно говоря, недорогой тарифный план, где выделяется пара гигов оперативки), лучше выбирать Disk, иначе кеш забьет всю память. Если у вас SSD дисковая подсистема, то разницы между хранением на диске или в памяти вы не увидите (я экспериментировал). Итого: если у вас выделенный дорогой сервер – Memcached, если недорогой обычный хостинг – Disk.

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

• Page Cache: Enable
• Page Cache Method: Memcached
• Minify: Enable
• Minify mode: Auto
• Minify Cache Method: Memcached
• HTML minifier: Minify (default)
• JS minifier: JSMin (default)
• CSS minifier: Minify (default)
• Opcode Cache: Opcode: Zend Opcache
• Validate timestamps: Enable (активируется сами, при выборе предыдущего пункта)
• Database Cache: Enable
• Database Cache Method: Memcached
• Object Cache: Enable
• Object Cache Method: Memcached
• Browser Cache: Enable
• CDN: я не использую CDN, потому данные настройки не активировал. Но если вы будете использовать, ставьте галку «CDN: Enable» и «CDN Type: StackPath (recommended)»
• Fragment Cache Method: Memcached (хотя это не будет работать без PRO подписки).
• Здесь все, нажимайте «Save all settings».

Page Cache (Кеш страниц)

Ставим галки для следующих пунктов:

• Cache posts page
• Cache feeds: site, categories, tags, comments
• Cache SSL (HTTPS) requests
• Cache URIs with query string variables
• Cache 404 (not found) pages
• Don’t cache pages for logged in users
• Memcached hostname:port / IP:port: будет заполнено по умолчанию «127.0.0.1:11211», ваша задача нажать на «Test» и на зеленом фоне увидеть «Test passed»
• Use persistent connection

Отдельно выделю пункт «Rejected user agents». Если вы используете какой-либо плагин, создающий мобильную версию сайта, надо заполнить это поле следующими юзерагентами, иначе у вас закешируется десктопная версия сайта и всем мобильным пользователям будет показываться именно она вместо мобильной:

iPhone
iPod
Android
BB10
BlackBerry
webOS
IEMobile/7.0
IEMobile/9.0
IEMobile/10.0
MSIE 10.0
iPad
PlayBook
Xoom
P160U
SCH-I800
Nexus 7
Touch

Но если у вас шаблон с адаптивной версткой, не заполняйте это поле.

Тут все, нажимайте «Save all settings».

Minify (Минификация HTML, CSS и JS)

Ставим галки для следующих пунктов:

• Rewrite URL structure
• HTML minify settings: Enable
  
• JS minify settings: Enable
  

  Обратите внимание! После минификации JS-скриптов может что-то сломаться (перестанет работать какая-то функция сайта, например, раскрываться меню, работать всплывающие лайтбоксы или еще что), поэтому после завершения всех настроек, обязательно пробегитесь по разным страницам сайта, нажмите все кнопки, отправьте формы, раскройте меню и т.д. Если что-то не работает, вместо Minify выберите Combine only и уберите галку Preserved comment removal.

• CSS minify settings: Enable
  
• Memcached hostname:port / IP:port: проверьте, появляется сообщение «Test passed» в зеленом поле.
• Use persistent connection – ставим галку
• Rejected user agents: данное после надо оставить пустым, даже если вы используете мобильную тему для сайта.
• Жмем «Save all settings» и переходим к следующему пункту.

Database Cache (Кеширование запросов к базе данных)

• Don’t cache queries for logged in users – ставим галку
• Memcached hostname:port / IP:port: нажмите Test, чтобы получить « Test passed.» в зеленом поле.
• Use persistent connection – ставим галку
• Жмем «Save all settings»

Object Cache (Объектный кеш)

• Memcached hostname:port / IP:port: нажмите Test, чтобы получить « Test passed.» в зеленом поле.
• Use persistent connection – ставим галку
• Enable caching for wp-admin requests – ставим галку
• Store transients in database – ставим галку
• Жмем «Save all settings»

Browser Cache (Кеш браузера)

Ставим галки для следующих пунктов:

• Set Last-Modified header
• Set expires header ИЛИ Set cache control header – эти пункты нельзя включать одновременно, надо выбрать или первый, или второй. Особой разницы я не заметил в производительности, но все же при выборе Set cache control header сервисы проверки скорости дают чуть больше баллов 🙂
• Set entity tag (ETag)
• Set W3 Total Cache header
• Enable HTTP (gzip) compression
• Don’t set cookies for static files
• Rewrite URL structure of objects

Ниже есть еще 3 блока настроек: CSS & JS, HTML & XML, Media & Other Files и Security Headers – первые три дублируют настройки из главного блока, а настройки безопасности и так в порядке. Так что нажимайте «Save all settings».

Разделы User Agent Groups, Referrer Groups, Cookie Groups можно пропустить, они не пригодятся.

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

Раздел Fragment Cache тоже можно игнорировать, потому что он доступен только по подписке в PRO версии.

Последний раздел, который может нас заинтересовать – Extensions. Например, если вы используете плагин Yoast SEO, можно активировать расширение для совместимости с ним.

Очистить кеш WordPress

Теперь осталось последнее действие, чтобы настройки вступили в силу – удалить весь кеш WordPress вручную и создать новый с актуальными настройками. В верхней менюшке найдите пункт «Purge All Caches» (Очистить весь кеш).

После очистки кеша все статичные файлы, минификации, объединенные CSS и JS файлы будут удалены и вместо них созданы новые, согласно новым настройкам.

Плагин Native Lazyload от Google

С чего все началось-то – как раз с плагина для lazy-load технологии. Так как W3 Total Cache не имеет такой возможности, чтобы получить еще более высокую оценку, стоит установить плагин Native Lazyload от Google. Зайдите в админке в раздел плагинов, ищете по точному названию и жмите «Установить»:

У плагина даже нет меню настройки, его надо просто активировать, все начнет работать автоматически. Ко всем изображениям на сайте на лету будет добавляться атрибут loading=»lazy». Как ни странно, но в Хроме проверить работу этого плагина не получится, там почему-то не работает эта функция, но можете запустить Firefox или даже EDGE, открыть страницу с большим числом картинок и быстро прокручивать, вы увидите, как изображения подгружаются по мере прокрутки.

Измерение скорости работы сайта

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

Проверка ответа сервера в Яндекс Вебмастере

Ссылка на инструмент: https://webmaster.yandex.ru/site/tools/server-response/.

У меня главная страница не такая большая, потому отвечает очень быстро – 52мс.

Для больших постов с картинками это время чуть больше, например, для страницы размером 170,54 КБ время ответа сервера составило 90 мс. Если у вас время около 100 мс +\-20%, считайте, что все отлично!

Google PageSpeed Insights

Ссылка на инструмент: https://developers.google.com/speed/pagespeed/insights/.

Собственно, инструмент, которым все измеряют свои писюны. Не дал мне 100 баллов, потому что у меня изображения большего размера, чем они вставлены на сайте (например, исходная картинка размером 500×500 пикселей, а на сайте она вставлена с параметрами width=”250” и height=”250”. Но я делаю это намеренно, чтобы на телефонах и ноутбуках с дисплеями HDPI 4k изображения выглядели качественными и четкими, а не размазанными, для меня это важнее, чем +1 балл в оценках от гугла!)

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

GTmetrix

Ссылка на инструмент: https://gtmetrix.com/.

Еще один популярный инструмент оценки скорости работы сайта.

Обратите внимание, что в пункте Serve scaled images мне занизили оценку до 11 (вместо 100) по аналогичной причине, что у меня размер изображения в оригинале больше, чем вставленное на сайте (в PageSpeed за это отняли 1 балл). Leverage browser caching понижен за отсутствие кеширования для внешних объектов – это тоже не исправить, потому что в эту категорию попадают все внешние скрипты, например, js-код Метрики и Google Analytics, скрипты соцсетей и прочее.

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

DevTools – Audits – Chrome

Хотел завершить описание инструментов проверки скорости сайта на прошлом пункте, но вспомнил, что в Хроме есть встроенный инструмент оценки, основанный на Google PageSpeed Insights. Чтобы найти его, надо нажать на F12, откроется консоль DevTools, выбираем там последнюю вкладку Audits:

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

Думаю, на этом стоит завершить обзор инструментов и весь пост. Надеюсь, у вас получится все настроить и добиться отличного быстродействия своего сайта на WordPress благодаря плагину W3 Total Cache. А если что-то у вас не получится, пишите в комментариях, задавайте вопросы, я постараюсь вам помочь.

До связи, друзья.

Не отображаются изменения в WordPress: вот как исправить проблему?

На чтение 12 мин Просмотров 426 Опубликовано 08.02.2021

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

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

Сколько времени требуется WordPress, чтобы обновить изменения?

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

Вот что должно произойти.

Но поскольку вы читаете этот пост, вы, вероятно, поняли, что не всегда всё идёт по плану.

Почему мой сайт WordPress не обновляется?

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

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

1. Кэширование браузера- сохраняет определённые статические файлы на локальных компьютерах посетителей в кеше веб-браузера.
2. Кэширование страниц- сохраняет статическую HTML-версию вашего сайта, а не использует PHP для её генерации «на лету» при каждом посещении.
3. А также кэширование CDN- ускоряет глобальную загрузку за счёт кеширования статического контента вашего сайта в сети серверов по всему миру.

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

Таким образом, даже если вы обновили версию на своём сервере WordPress, посетители (и вы) могут по-прежнему видеть старую и кэшированную версию вашего сайта, скрывая изменения, которые вы недавно внесли в эфир.

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

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

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

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

Как исправить проблемы с обновлением сайта WordPress

Мы разделим эти шаги по устранению неполадок на четыре основных раздела:

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

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

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

Вот несколько способов добиться этого.

Аппаратное обновление вашего веб-браузера

Самое простое решение для устранения проблем с кешированием в браузере на одной странице — это жёстко обновить браузер.

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

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

• CTRL + F5 в Windows
• Cmd + R на Mac

Очистите кеш браузера

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

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

Используйте методы «очистки кеша»

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

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

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

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

Например, вместо загрузки logo.png и замены старого файла вы можете загрузить logo-v2.png. Поскольку это новое имя файла, вы сможете обойти проблемы с тем, что изменения вашего сайта не отображаются из-за кеширования браузера.

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

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

• Оригинал : yoursite.com/style.css
• Имя файла — yoursite.com/stylev2.css
• Путь к файлу — yoursite.com/v2/style.css
• Строки запроса — yoursite.com/style.css?ver=2

Как исправить проблемы с кешированием WordPress

Хотя существуют разные типы кеширования WordPress, наиболее вероятной причиной является кеширование страниц.

Обычно ваш сервер «строит» готовый HTML-код вашего сайта с нуля для каждого посещения с использованием PHP. Затем ваш сервер отправляет готовый HTML-код браузеру посетителя для отображения вашей веб-страницы.

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

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

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

Исправление здесь — очистить кеш вашего сайта вручную.

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

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

1. Очистка кеша, если вы размещаете на Kinsta.
2. Очистка кеша в некоторых популярных плагинах кеширования.

Как очистить кеш для клиентов Kinsta

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

Во-первых, вы можете сделать это из панели управления вашего сайта WordPress через вкладку Kinsta Cache на левой боковой панели и кнопку Очистить кеш:

Во-вторых, вы также можете очистить кеш своего сайта через панель управления MyKinsta. Откройте свой сайт в MyKinsta. Затем перейдите на вкладку Инструменты и нажмите кнопку Очистить кеш под Кешем сайта:

Как очистить кеш в плагинах

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

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

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

WP супер кэш

Вы можете выбрать опцию Удалить кеш на панели инструментов WordPress или в настройках плагина:

WP Самый быстрый кеш

Чтобы удалить весь кеш, вы можете нажать кнопку «Удалить кеш» на панели инструментов WordPress.

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

1. Откройте список постов / страниц / произвольных типов постов.
2. Наведите указатель мыши на часть содержимого, в которой не отображаются изменения.
3. Щёлкните ссылку Очистить кеш.

WP Rocket

Чтобы очистить кеш всего сайта, наведите указатель мыши на опцию WP Rocket на панели инструментов WordPress и выберите Очистить кеш:

Чтобы очистить отдельный фрагмент содержимого, наведите на него курсор в списке содержимого и нажмите Очистить этот кеш:

Как исправить проблемы с кешированием CDN

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

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

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

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

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

Как очистить кеш Kinsta CDN

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

В MyKinsta откройте область панели инструментов для сайта WordPress, на котором у вас возникли проблемы. Затем перейдите на вкладку Kinsta CDN и нажмите кнопку Очистить кеш CDN:

Как исправить проблему с ролями / возможностями пользователей

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

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

Это может стать ещё более сложным, если у вас есть членский сайт с несколькими разными уровнями членства.

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

Чтобы упростить отладку этих проблем и быстро переключаться между разными учётными записями WordPress, вы можете использовать бесплатный плагин User Switching.

Заключение

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

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

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

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

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

Эта деталь очень важна для людей, столкнувшихся с этой проблемой. К счастью, есть такие инструменты, как Google PageSpeed ​​Insights или GT matrix. Они могут сказать вам, что именно вы хотите знать об эффективности своего веб-сайта, что вам нужно изменить, включено ли кеширование в браузере или нет, и многое другое.

Хорошо, хорошо. Итак, в чем дело? Зачем вам нужно использовать кеширование браузера в WordPress?

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

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

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

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

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

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

Давайте копаться.

• Использовать кеширование браузера? Что это?
• Как работает кеширование браузера в WordPress?
• Различия между кешированием сервера и кешированием браузера
• Использование кеширования браузера в WordPress
• Кэширование сервера и браузера NGINX
• Используйте кеширование браузера в WordPress с помощью плагинов
• Используйте Yoast SEO для редактирования файла .htaccess
• Кеширование сторонних ресурсов

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

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

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

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

1. Посетитель вводит URL-адрес в своем браузере
2. Браузер генерирует запрос к серверу, на котором размещен ваш веб-сайт (HTTP-запрос)
3. Сервер объединяет все данные и отправляет их пользователю.Это шаг, на котором пользователи замечают замедление. Чтобы предотвратить это замедление, люди могут уменьшить размер скриптов, оптимизировать размеры изображений и так далее.
4. После передачи данных браузер, наконец, может отображать веб-сайт. Процесс повторяется, когда посетители заходят на другие страницы. Запросов к серверу может быть очень много одновременно, что может привести к снижению производительности. Вот почему людям нужно оптимизировать свой веб-сайт, чтобы он оставался быстрым.

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

Чтобы проверить, правильно ли ваш веб-сайт WordPress использует кеширование браузера, вам необходимо использовать специальный инструмент. Самым популярным из них является Google PageSpeed ​​Insights. Узнайте, все ли работает правильно, введя URL своего сайта.

Затем нажмите «Анализировать» и позвольте инструменту творить чудеса.PageSpeed ​​должен сказать вам, какой балл имеет ваш сайт с точки зрения оптимизации для мобильных устройств и компьютеров. Оценка варьируется от 0 до 100, и после этого вы также получите предложения о том, как улучшить свой сайт. Одним из наиболее распространенных предложений является использование кеширования браузера в WordPress.

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

Есть несколько способов улучшить систему кэширования сервера. Наиболее рекомендуемый вариант — обновление заголовков на Apache. Следующим шагом будет использование плагинов WordPress, и за ним следует добавление CDN.

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

Вам просто нужно добраться до файла .htaccess, добавить заданный фрагмент кода и все. Использование кеширования браузера с файлом Htaccess — самый простой и эффективный метод, о котором вам следует узнать.

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

Используйте кеширование браузера в WordPress вручную, выполнив следующие действия:

1. Добавить заголовки с истекшим сроком действия
2. Добавить заголовки управления кешем
3. Отключить ETags

Для этого вам необходимо выполнить следующие шаги:

1. Доступ к файлам веб-сайта

Начните с входа в свою учетную запись хостинга / cPanel.Перейдите в файловый менеджер. Здесь вы найдете настройки веб-сайта, где вам нужно включить параметр «Скрытый файл». Затем перейдите в корневой каталог веб-сайта и откройте файл .htaccess.

Обычно он находится в /public_html/.htaccess. Если домен вашего веб-сайта индивидуальный, вы найдете его в доменном имени / public_html / .htaccess. Щелкните файл правой кнопкой мыши и отредактируйте его, следуя полученным инструкциям.

2. Добавьте код кеширования браузера в файл .htaccess

Следующий шаг самый простой.Скопируйте приведенный ниже код и вставьте его в конец содержимого файла .htaccess. Не вносите никаких других изменений в файл.

 # Customize expires cache 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 cache end 

Параметры, включенные в приведенный выше код, включают время обновления / истечения срока действия 600 секунд для HTML и один месяц для CSS и JavaScript.

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

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

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

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

3. Добавить заголовки управления кешем через Apache

Скопируйте код ниже:

 # BEGIN Заголовки управления кешем


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

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

4. Отключить Etags

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

 
 Заголовок не установлен ETag

FileETag Нет 

Сохраните файл .htaccess, и все готово!

Если ваш веб-сайт использует NGINX, вам нужно будет использовать другие фрагменты кода, потому что вы не сможете найти.htaccess файл. Опять же, это очень простой процесс, не требующий особых технических знаний. Перейдите в / etc / nginx / sites-enabled / default и вставьте туда этот код:

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

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

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

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

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

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

вручную. Установить плагин можно так:

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

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

W3 Total Cache — плагин для WordPress

Исправление кеширования браузера в WordPress с помощью W3 Total Cache можно выполнить, выполнив следующие шаги:

1. Загрузите и установите плагин W3 Total Cache для WordPress
2. Перейдите в Общие настройки и выберите Включить кэш браузера.
3. Нажмите «Сохранить» и перейдите к настройкам кэша браузера (вверху страницы)
4. Выберите доступные заголовки кеша
5. Установить истекающие заголовки, управление кешем и заголовки ETag (на основе настроек, сделанных ранее)
6. Сохраните все настройки и обновите свой сайт

WP Самый быстрый кэш

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

1. Загрузите и установите WP Fastest Cache.
2. Перейти к настройкам плагина
3. Выберите кеширование браузера, установив флажок
4. Нажмите «Отправить», чтобы применить изменения, и все.

Cache Enabler — кэш WordPress

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

1. Установите плагин и активируйте его
2. Перейти в настройки
3. Нажмите Включить кеширование браузера

Вы также можете редактировать файл .htaccess более безопасным способом, используя плагин Yoast SEO. Наиболее часто используемый плагин WordPress — это SEO от Yoast. Используя этот плагин, вы можете легко редактировать файл .htaccess. Если у вас еще нет Yoast, вам необходимо установить его и активировать заранее.После этого вам необходимо:

1. Откройте SEO, затем Инструменты.
2. Перейдите в редактор файлов
3. Файл .htaccess откроется в текстовом редакторе, куда вы можете вставить фрагменты кода, перечисленные выше.
4. Сохранить изменения

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

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

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

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

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

В конце концов, метод, который вы выбираете для использования кеширования браузера, не имеет значения.Единственное, что имеет значение, — это увидеть это в действии. Пока использование кеширования браузера в WordPress работает должным образом, способ, которым вы его достигли, не имеет значения. Вы можете выбрать тот метод, который вам удобен, и результат будет таким же. Либо вы решите изменить файл .htaccess, либо использовать плагин, вы сможете улучшить время загрузки, активировав кеширование браузера.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Если вы предпочитаете смотреть это как видео, мы недавно загрузили эту статью как видео на YouTube, поэтому посмотрите ее ниже:

BBp1yKrUcTA

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

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

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

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

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

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

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

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

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

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

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

, но на самом деле это было предупреждение, отображаемое в более старой версии Pagespeed Insights.Новое предупреждение выглядит примерно так:

Обслуживайте статические ресурсы с помощью эффективной политики кеширования

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

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

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

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

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

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

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

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

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

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

1.Использование файла .htaccess

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

1. Доступ к CPanel вашей учетной записи хостинга
2. Заходим в корневую папку сайта
3. Откройте файл .htaccess в редакторе файлов. Если вы не нашли файл, проверьте, можете ли вы просматривать скрытые файлы (файл .htaccess по умолчанию скрыт)
4. Добавьте следующие правки в конец файла
5. Добавить заголовки Expire с длительным сроком действия
6. Добавить заголовки управления кешем
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.

Найдите лучшие концерты по оптимизации скорости веб-сайта на Fiverr

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

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

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

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

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

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

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

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

 # BEGIN Cache-Control Headers 
 
  
    
      Добавление заголовка 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

2. Использование плагинов

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

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

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

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

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

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

от Rinku Yadav

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

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

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

Ракета WP

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

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

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

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

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

W3 Общий кэш

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

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

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

3. Используйте кеширование браузера в Nginx

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

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

 server {
    слушать 80;
    имя_сервера 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 дней. Вы можете добавить больше расширений файлов, чтобы настроить срок действия, чтобы он отличался для других типов файлов.

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

4. Как кэшировать сторонние ресурсы

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

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

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

5. Укажите средство проверки кеша

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

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

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

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

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

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

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

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

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

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

Заключение

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

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

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

Об авторе

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Хотите узнать, как мы увеличили трафик более чем на 1000%?

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    расположение ~ * \. (pdf | css | html | js | swf) $ {
        истекает 2d;
    }  

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

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

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

 
https://nami-house-anglet.fr/wp-content/plugins/sitepress-multilingual-cms/res/flags/en.png (срок действия не указан)
https: // нами-дом-угол.fr / wp-content / plugins / sitepress-Multilingual-cms / res / flags / es.png (срок действия не указан)
https://nami-house-anglet.fr/wp-content/plugins/sitepress-multilingual-cms/res/flags/fr.png (срок действия не указан)
https://nami-house-anglet.fr/wp-content/plugins/sitepress-multilingual-cms/res/flags/ja.png (срок действия не указан)
https://nami-house-anglet.fr/wp-content/themes/Divi/includes/builder/styles/images/preloader.gif (срок действия не указан)
https://nami-house-anglet.fr/wp-content/uploads/2016/10/nami-house-anglet-breakfast-fruit-vw-cup.jpg (срок действия не указан)
https://nami-house-anglet.fr/wp-content/uploads/2016/10/nami-house-anglet-lounge-table-george-clooney-napkins-box.jpg (срок действия не указан)
https://nami-house-anglet.fr/wp-content/uploads/2016/10/nami-house-anglet-shared-kitchen.jpg (срок действия не указан)
https://nami-house-anglet.fr/wp-content/uploads/2016/10/vue-mer-montagne-anglet-e1477321356611.jpg (срок действия не указан)
https://nami-house-anglet.fr/wp-content/uploads/2016/11/nami-house-anglet-amami-room-japan-tatami-futon-closet-side.jpg (срок действия не указан)
https://nami-house-anglet.fr/wp-content/uploads/2016/11/nami-house-anglet-long-board-fire-rock-rooms.jpg (срок действия не указан)
https://nami-house-anglet.fr/wp-content/uploads/2017/01/cropped-namihouse-logo-32x32.jpg (срок действия не указан)
https://nami-house-anglet.fr/wp-content/uploads/2017/01/namihouse-logo-gris.jpg (срок действия не указан)
https://nami-house-anglet.fr/wp-content/uploads/2017/05/nami-house-anglet-bikes.jpg (срок действия не указан)
https: // нами-дом-угол.fr / wp-content / uploads / 2017/07 / plage-vvf-anglet-vue-phare-biarritz.jpg (срок действия не указан)
https://nami-house-anglet.fr/wp-content/uploads/2018/03/alex-hike-basque-country-autumn.jpg (срок действия не указан)
https://nami-house-anglet.fr/wp-content/uploads/2018/03/biarritz-la-grande-plage-beach-drone-view.jpg (срок действия не указан)
https://nami-house-anglet.fr/wp-content/uploads/2019/06/surf-class-anglet1.jpg (срок действия не указан)
https://nami-house-anglet.fr/wp-content/uploads/2020/02/nami-house-anglet-video.mp4 (срок действия не указан)
https://nami-house-anglet.fr/wp-content/uploads/2020/02/yoga-class-outdoor-nami-house-anglet.jpg (срок действия не указан)
https://nami-house-anglet.fr/wp-content/uploads/2020/03/surf-bike-anglet.jpg (срок действия не указан)
https://nami-house-anglet.fr/wp-content/uploads/2020/04/yoga-class-garden-nami-house-hostel.jpg (срок действия не указан)
https://static.agkn.com/spacer.gif (срок действия не указан)
https://www.googletagmanager.com/gtm.js?id=GTM-MDDBH6H (15 минут)
https: // www.google-analytics.com/plugins/ua/ec.js (1 час)
https://www.google-analytics.com/analytics.js (2 часа)
  

  # BEGIN WP-Optimize Browser Cache

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




Заголовочный набор Cache-Control "public"


Заголовочный набор Cache-Control "public"


Заголовок установлен Cache-Control "private"


Заголовочный набор Cache-Control "частный, необходимо перепроверить"



# Отключить ETag
FileETag Нет
# END WP-Optimize Browser Cache  

  минимизируйте JavaScript для следующих ресурсов, чтобы уменьшить их размер на 1,4 КБ (2%).

Сокращение https://domain.com/wp-content/cache/minify/5bbf7.js может сэкономить 911 Б (2%) после сжатия.См. Оптимизированную версию.
Сокращение https://domain.com/wp-content/cache/minify/6360f.js может сэкономить 235 Б (4%) после сжатия. См. Оптимизированную версию.
Сокращение https://domain.com/wp-content/cache/minify/dc06c.js может сэкономить 114 Б (6%) после сжатия. См. Оптимизированную версию.
Сокращение https://domain.com/wp-content/cache/minify/df983.js может сэкономить 110 Б (1%) после сжатия. См. Оптимизированную версию.
Сокращение https://domain.com/wp-content/cache/minify/f5317.js может сэкономить 59 Б (уменьшение на 1%) после сжатия.См. Оптимизированную версию.
Сокращение https://domain.com/wp-content/plugins/w3-total-cache/pub/js/lazyload.min.js может сэкономить 3 Б (уменьшение 1%) после сжатия. См. Оптимизированную версию.