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

Последнее обновление — 8 июля 2021 г.

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

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

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

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

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

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

Введите: Кэширование.

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

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

Вы можете использовать такие инструменты, как Google PageSpeed ​​Insights и GTmetrix , чтобы проверить, использует ли ваш веб-сайт кэширование браузера.

Просто вставьте URL своего веб-сайта в соответствующее поле и нажмите «Анализ». Инструмент предоставит вашему веб-сайту оценку от 0 до 100 в случае PageSpeed ​​и алфавитную оценку в случае GTmetrix.

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

Ручное использование кэширования браузера в WordPress

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

1. Добавить заголовки с истекающим сроком действия
2. Добавить заголовки Cache-Control
3. Отключить ETag

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

Затем вы найдете файл .htaccess в папке public_html. Щелкните файл правой кнопкой мыши и отредактируйте его, чтобы добавить приведенный ниже код.

1. Добавьте код кеширования браузера

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

 #Customize expires cache start - настройте период в соответствии с вашими потребностями
<IfModule mod_expires.c>
Размер FileETag MTime
AddOutputFilterByType DEFLATE текст/обычный текст/html текст/текст XML/приложение css/приложение xml/приложение xhtml+xml/приложение rss+xml/приложение javascript/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 application/x-javascript "доступ 1 месяц"
ExpiresByType application/x-shockwave-flash "доступ 1 месяц"
ExpiresByType application/pdf "доступ 1 месяц"
ExpiresByType image/x-icon "доступ 1 год"
ExpiresByType image/jpg "доступ 1 год"
ExpiresByType image/jpeg "доступ 1 год"
ExpiresByType image/png "доступ 1 год"
ExpiresByType image/gif "доступ 1 год"
ExpiresDefault "доступ 1 месяц"

</ЕслиМодуль>
#Истекает конец кэша

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

Настройки также включают следующие времена обновления/истечения срока действия:

• 600 секунд для HTML
• Один месяц CSS и JavaScript
• Один год для изображений

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

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

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

Скопируйте и вставьте следующий код:

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

<IfModule mod_expires.c>
<IfModule mod_headers.c>
<filesMatch "\.(ico|jpe?g|png|gif|swf)$">
Заголовок добавляет Cache-Control "public"
</filesMatch>
<filesMatch "\.(css)$">
Заголовок добавляет Cache-Control "public"
</filesMatch>
<filesMatch "\.(js)$">
Заголовок добавляет Cache-Control "private"
</filesMatch>
<filesMatch "\.(x?html?|php)$">
Заголовок добавляет Cache-Control "private, must-revalidate"
</filesMatch>
</ЕслиМодуль>
</ЕслиМодуль>

3. Отключите Etags

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

 <IfModule mod_headers.c>
ETag заголовка не установлен
</ЕслиМодуль>
FileETag Нет

Кэширование браузера для сервера NGINX

Вы не сможете найти файл .htaccess, если ваш сайт использует NGINX. В этом случае перейдите в /etc/nginx/sites-enabled/default и вставьте код ниже:

 сервер {
слушать 80;
имя_сервера локальный хост;
расположение / {
корень /usr/share/nginx/html;
индекс index.html index.htm;
}
расположение ~* \.(jpg|jpeg|png|gif|ico|css|js)$ {
истекает через 365 дней;
}
расположение ~* \.(pdf)$ {
истекает 30 дней;
}
}
Добавить заголовки управления кэшем (NGINX)
расположение ~* \.(jpg|jpeg|png|gif|ico|css|js)$ {
истекает через 90 дней;
add_header Cache-Control «общедоступный, без преобразования»;
}

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

Используйте кеширование браузера в WordPress с помощью плагинов

Редактирование файла .htaccess действительно может быть довольно рискованным, так как одна ошибка может сломать весь ваш сайт. Поэтому, если вы не хотите лишнего риска, вы можете использовать такие плагины, как W3 Total Cache и WP Fastest Cache .

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

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

Сохраните настройки, если вы вносили какие-либо изменения.

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

Если вы предпочитаете видеоверсию, посмотрите видео ниже:

Дальнейшее чтение:

• Лучшие бесплатные плагины для оптимизации баз данных WordPress в 2021 году
• Как включить сжатие GZIP на сайте WordPress?