WPExperts

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

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

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

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

Сначала стоит убедиться, что речь именно о статике. Если тормозит админка, запросы к базе или генерация страниц, кеш заголовками Cache-Control это не исправит. Но если в отчете Lighthouse или PageSpeed видно, что CSS, JS, шрифты и изображения каждый раз загружаются с сервера заново, настройка браузерного кеша даст ощутимый эффект на повторных визитах.

Типичные признаки проблемы

  • в DevTools у файлов статики статус 200 вместо 304 или from disk cache;
  • в ответах сервера нет заголовков Cache-Control и Expires;
  • файлы темы и плагинов меняются редко, но браузер все равно скачивает их при каждом переходе;
  • в отчете по производительности много повторных загрузок одних и тех же ресурсов;
  • после очистки кэша страницы все равно долго открываются у возвращающихся пользователей.

Диагностика: что проверить до изменений

Перед правкой конфигурации посмотрите, как сервер отвечает на конкретный файл. Удобнее всего взять URL из вкладки Network в браузере и проверить заголовки через curl.

curl -I https://example.com/wp-content/themes/your-theme/style.css

В ответе ищите такие вещи:

  • Cache-Control с разумным сроком хранения;
  • Expires для старых конфигураций;
  • ETag или Last-Modified как механизм валидации;
  • отсутствие случайного no-cache для CSS и JS, если это не задумано специально.

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

Какой вариант настройки выбрать

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

ПодходКогда подходитМинусы
Конфиг Apache/NginxЕсть доступ к настройкам сервера или .htaccessНужно понимать, какие файлы и на какой срок кешировать
Плагин кешированияНет доступа к серверу, нужен быстрый стартМожет конфликтовать с CDN или правилами хостинга
Комбинированный вариантНужен контроль и удобствоВажно не задублировать заголовки

Пошаговая настройка для Apache через .htaccess

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

<IfModule mod_expires.c>
  ExpiresActive On
  ExpiresByType image/jpeg "access plus 1 year"
  ExpiresByType image/png "access plus 1 year"
  ExpiresByType image/gif "access plus 1 year"
  ExpiresByType image/webp "access plus 1 year"
  ExpiresByType image/svg+xml "access plus 1 year"
  ExpiresByType text/css "access plus 1 month"
  ExpiresByType application/javascript "access plus 1 month"
  ExpiresByType text/javascript "access plus 1 month"
  ExpiresByType font/woff2 "access plus 1 year"
</IfModule>

<IfModule mod_headers.c>
  <FilesMatch "\.(css|js|jpg|jpeg|png|gif|webp|svg|woff|woff2)$">
    Header set Cache-Control "public, max-age=2592000"
  </FilesMatch>
</IfModule>

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

Настройка для Nginx

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

location ~* \.(css|js|jpg|jpeg|png|gif|webp|svg|woff|woff2)$ {
    expires 30d;
    add_header Cache-Control "public, max-age=2592000";
    access_log off;
    log_not_found off;
}

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

Как не сломать обновление CSS и JS

Самая частая ошибка — поставить долгий срок кеширования и забыть про версионирование файлов. Тогда браузер будет хранить старый style.css или app.js до истечения срока, а пользователь увидит старую верстку или сломанный скрипт.

В WordPress правильнее подключать файлы с версией, завязанной на дату изменения или версию темы/плагина. Это можно сделать через wp_enqueue_style() и wp_enqueue_script().

add_action('wp_enqueue_scripts', function () {
    wp_enqueue_style(
        'theme-style',
        get_stylesheet_uri(),
        array(),
        filemtime(get_stylesheet_directory() . '/style.css')
    );

    wp_enqueue_script(
        'theme-scripts',
        get_stylesheet_directory_uri() . '/assets/js/app.js',
        array('jquery'),
        filemtime(get_stylesheet_directory() . '/assets/js/app.js'),
        true
    );
});

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

Проверка результата после внедрения

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

  1. Откройте страницу в режиме инкогнито и зафиксируйте загрузку CSS и JS в DevTools.
  2. Обновите страницу второй раз и посмотрите, стали ли файлы браться из кеша.
  3. Проверьте заголовки через curl -I или в Network.
  4. Убедитесь, что после изменения файла меняется его версия или query string.

Признаки, что все работает:

  • в Network у части файлов появляется from disk cache или 304 Not Modified;
  • в ответе есть Cache-Control с нужным сроком;
  • после правки CSS/JS обновленная версия действительно подхватывается без ручной очистки всего сайта;
  • страница повторно открывается с меньшим количеством скачиваемых ресурсов.

Частые ошибки и как их исправить

Слишком длинный кеш без версионирования

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

Одинаковые правила для всего подряд

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

Дублирующие заголовки от сервера, плагина и CDN

Иногда Apache/Nginx, плагин кеширования и CDN одновременно добавляют свои значения. В итоге браузер получает конфликтующие инструкции. Проверьте итоговые заголовки именно на публичном URL, а не только в локальной конфигурации.

Кеширование HTML вместо статики

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

Что делать, если доступа к серверу нет

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

Если нужен более широкий набор технических правок для WordPress — очистка дублей, настройка служебных файлов, базовая оптимизация и часть SEO-настроек — иногда удобнее делать это через один инструмент, чем собирать несколько плагинов с пересекающимся функционалом. В таких сценариях часто смотрят в сторону Clearfy Pro: https://wpshop.ru/plugins/clearfy?utm_source=wpexperts.ru&utm_medium=article&utm_campaign=kak-nastroit-brauzernoe-keshirovanie-v-wordpress-dlya-staticheskih-faylov

Мини-чек-лист перед публикацией

  • проверены заголовки Cache-Control и Expires у CSS, JS, изображений и шрифтов;
  • для обновляемых файлов есть версионирование;
  • не задублированы правила в сервере, плагине и CDN;
  • после изменения файла браузер получает новую версию;
  • HTML не переведен в агрессивный браузерный кеш без отдельной проверки динамики.

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

×
до 3225₽

Продавай темы и плагины WordPress!

Лови с каждой продажи

Начать ⋙