Кэширование браузера WordPress: настройка max-age и Cache‑Control за 5 шагов

Почему кэширование браузера важно для WordPress

Браузерное кэширование позволяет хранить статические ресурсы (CSS, JS, изображения) на стороне клиента. При повторных визитах браузер получает файлы из локального кеша, а не запрашивает их у сервера. Это сокращает time‑to‑first‑byte, уменьшает количество запросов и, как показывают тесты, ускоряет загрузку страниц в среднем на 20‑30%. Для сайтов на WordPress, где часто используется множество плагинов и тем, правильная настройка кэширования – один из самых простых способов оптимизации.

Основные заголовки HTTP для кэширования

Cache‑Control

Заголовок Cache‑Control управляет политикой кэширования. Параметр max-age указывает, сколько секунд ресурс считается «свежим». Пример: Cache‑Control: public, max-age=31536000 – кешировать в течение года.

Expires

Заголовок Expires задаёт абсолютную дату истечения кеша. Он используется старыми браузерами, но в сочетании с Cache‑Control повышает совместимость.

Last‑Modified и ETag

Эти заголовки позволяют выполнить conditional GET. Если ресурс не изменился, сервер отвечает 304 Not Modified, и браузер использует локальную копию. ETag – уникальный хеш файла, а Last‑Modified – дата последнего изменения.

Настройка max-age в .htaccess (Apache)

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

# BEGIN Browser Caching
<IfModule mod_expires.c>
    ExpiresActive On
    # CSS и JavaScript – 1 год
    ExpiresByType text/css "access plus 1 year"
    ExpiresByType application/javascript "access plus 1 year"
    ExpiresByType text/javascript "access plus 1 year"
    # Изображения – 1 год
    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"
    # Шрифты – 1 год
    ExpiresByType font/ttf "access plus 1 year"
    ExpiresByType font/woff "access plus 1 year"
    ExpiresByType font/woff2 "access plus 1 year"
</IfModule>

<IfModule mod_headers.c>
    # Общий заголовок Cache‑Control
    
        Header set Cache-Control "public, max-age=31536000, immutable"
    
</IfModule>
# END Browser Caching

После правки не забудьте очистить кеш плагинов (WP Super Cache, W3 Total Cache) и проверить заголовки через Chrome DevTools.

Настройка кэширования в Nginx

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

# static file caching
location ~* .(css|js|jpg|jpeg|png|gif|webp|ttf|woff|woff2)$ {
    expires 1y;
    add_header Cache-Control "public, max-age=31536000, immutable";
    # optional – уменьшить нагрузку на диск
    access_log off;
}

# отключаем ETag, если используем Brotli (см. статья)
# https://wpbox.by/brotli-wordpress-kak-vklyuchit-i-dobitsya-luchshego-szhatiya-v-5-shagov/
if ($brotli) {
    add_header ETag "";
}

После изменения конфигурации выполните nginx -t && systemctl reload nginx и проверьте результат.

Тестирование и отладка заголовков

Самый быстрый способ – открыть страницу в Chrome DevTools, перейти на вкладку Network**, выбрать любой статический файл и посмотреть раздел Headers**. Вы должны увидеть:

• Cache-Control: public, max-age=31536000, immutable
• Expires: Thu, 31 Dec 2025 23:59:59 GMT
• ETag: "5d3c1e6b-1a2b3c" (если включено)

Для автоматизации проверки можно использовать cURL или онлайн‑сервис Web Vitals. Если заголовки не появляются, проверьте, что модули mod_expires и mod_headers включены (Apache) или что блок location не переопределяется другими правилами (Nginx).

Лучшие практики и типичные ошибки

1. Не кэшировать HTML. Для динамических страниц ставьте Cache‑Control: no‑cache, must‑revalidate или используйте плагины типа WP Rocket для отдельного кэширования страниц.

2. Устанавливайте «immutable» только для truly static файлов. Если файл часто меняется (например, CSS‑файл с версией в имени), добавляйте параметр версии ?v=20230607 и сохраняйте max-age высоким.

3. Согласуйте кэширование с CDN. Если вы используете Cloudflare, настройте правила Page Rules так, чтобы они не конфликтовали с вашими заголовками.

4. Автоматизируйте конфигурацию. При развёртывании новых серверов используйте Ansible‑скрипты для применения одинаковых правил кэширования.

5. Проверяйте совместимость с PHP. Новые версии PHP (8.3, 8.4) ускоряют генерацию заголовков, но убедитесь, что ваш код не полагается на устаревшие функции (см. сравнение PHP‑версий).

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