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

Опубликовано: 2020-08-02

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

Оглавление

Введение

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

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

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

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

leverage-browser-caching-wp

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

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

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

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

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

Требуется ли кеширование браузера?

Leverage-Browser-Caching-In-WordPress

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

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

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

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

Устранение предупреждения об использовании кэширования браузера в WordPress без плагинов

How-To-Leverage-Browser-Cache-In-WordPress

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

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

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

  1. Добавление заголовков Expires: эти заголовки сообщают браузеру, когда запрашивать новую версию ресурса с сервера.
  2. Изменить заголовки проверки кеша: эти заголовки можно использовать для установки критериев кеша.
  3. Настройка заголовков сущностных тегов (ETags): можно определить, изменился ли ресурс на сервере по сравнению с локальным файлом.

Исправлено использование кеширования браузера в Apache.

1. Создайте или отредактируйте файл .htaccess.

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

Подробнее: Контрольный список SEO на странице: 10 действенных советов по оптимизации для повышения рейтинга

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

How-to-Fix-Leverage-Browser-Caching-in-WordPress-900x568

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

В качестве альтернативы, если вы используете файловый менеджер cPanel, перейдите в нужное место и создайте файл .htaccess .

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

2. Добавьте заголовки с истекающим сроком действия

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

ExpiresActive On

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

ExpiresByType text/CSS «доступ 1 месяц»

ExpiresByType text/HTML «доступ 1 месяц»

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

ExpiresByType image/jpeg «доступ 1 месяц»

ExpiresByType image / svg «доступ 1 месяц»

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

Заявление ExpiresByType / pdf «доступ 1 месяц»

Для всех остальных файлов, на которые не распространяется какой-либо конкретный параметр, используйте определение ExpiresDefault:

ExpiresDefault «доступ 1 месяц».

3. Определите политику кэширования

Далее вам необходимо определить критерии кэширования с помощью настроек проверки кэша.

Политика кэширования состоит из трех основных частей:

  • как кэшируется ресурс
  • место для кеширования
  • время до истечения ресурса

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

How-to-Fix-Leverage-Browser-Caching-in-WordPress-900x568

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

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

<IfModule mod_headers.c>

Набор заголовков Public Cache-Control

</ ЕслиМодуль>

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

<ifModule mod_headers.c>

<соответствие файлов «\. (ico | jpeg | jpg | png) $”>

Набор заголовков Public Cache-Control

</ FilesMatch>

<соответствие файлов «\. (php) $”>

Набор заголовков Private Cache-Control

</ FilesMatch>

</ ЕслиМодуль>

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

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

Набор заголовков Истекает 0

4. Отключить теги сущностей в Apache

Наконец, необходимо отключить Entity Tags, используя следующий код:

FileETag Нет

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

Сохраните файл .htaccess и перезапустите Apache, чтобы изменения вступили в силу.

Решить проблему кэширования браузера Leverage в Nginx

В Nginx вы можете найти файл конфигурации nginx.conf в папке /etc/nginx/site-enabled/default.

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

местоположение ~ * \. (ико | jpeg | jpg | png) $ {

истекает 30 дней;

}

Вы также можете добавить заголовок Cache-Control в тот же блок кода:

местоположение ~ * \. (ико | jpeg | jpg | png) $ {

истекает 30 дней;

add_header Cache-Control «общедоступный»;

}

Сохраните файл конфигурации и перезапустите Nginx, чтобы изменения вступили в силу.

Решите Leverage Browser Cache с помощью плагина

leverage-browser-caching

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

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

1. Ракета WP

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

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

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

Мы настоятельно рекомендуем прочитать наш обзор WP Rocket,

2. Кэш LiteSpeed

LiteSpeed ​​Cache — это плагин для кэширования, который позволяет решить проблему использования кэширования в браузере, просто включив эту функцию. Установите и активируйте плагин и зайдите в настройки кеша. Перейдите на вкладку « Браузер » и включите опцию «Кэш браузера» .

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

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

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

4. Общий кэш W3

W3 Total Cache — еще один широко используемый плагин кэширования браузера. Он позволяет настраивать широкий спектр параметров кэширования. После установки перейдите в раздел Cache Browser на странице настроек.

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

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

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

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

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

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

Требуется ли кеширование браузера?

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

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

Использование .htaccess
1. Перейдите к файлу .htaccess
2. Добавьте следующий код в конец файла
ExpiresActive On
ExpiresByType text/CSS «доступ 1 месяц»
ExpiresByType text/HTML «доступ 1 месяц»
ExpiresDefault «доступ 1 месяц».
4. Сохраните файл .htaccess и обновите сайт.

Вывод

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