Настройка заголовков Cache-Control для WordPress на Apache и Nginx

Что такое заголовки Cache-Control и зачем они нужны в WordPress

Заголовки HTTP Cache-Control управляют поведением браузеров и промежуточных прокси относительно кэширования ресурсов сайта. В WordPress правильная настройка этих заголовков позволяет значительно снизить нагрузку на сервер и ускорить загрузку страниц за счет кеширования статики (CSS, JS, изображения) и даже HTML там, где это возможно.

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

Диагностика проблемы с кэшированием через заголовки

Чтобы проверить, как настроены заголовки Cache-Control, используйте инструменты разработчика в браузере (вкладка Network) или команду curl:

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

Обратите внимание на строки:

• Cache-Control — контролирует время и тип кеширования
• Expires — устаревший, но еще поддерживаемый заголовок
• Last-Modified и ETag — для валидации кеша

Если Cache-Control отсутствует или выставлен как no-cache, браузер не будет кэшировать ресурс эффективно.

Пошаговое решение для Apache

1. Убедитесь, что у вас активирован модуль mod_expires и mod_headers. Проверить можно командой в терминале:

apachectl -M | grep expires
apachectl -M | grep headers

2. Добавьте в .htaccess в корне WordPress следующие правила для статики:

<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 text/css "access plus 1 month"
  ExpiresByType application/javascript "access plus 1 month"
</IfModule>

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

3. Для HTML страниц обычно ставят:

Header set Cache-Control "no-cache, must-revalidate"

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

Пошаговое решение для Nginx

1. Откройте конфигурацию сайта, обычно /etc/nginx/sites-available/your-site.conf.

2. В блоке server или location добавьте:

location ~* \.(jpg|jpeg|png|gif|ico|css|js)$ {
    expires 30d;
    add_header Cache-Control "public";
}

location / {
    add_header Cache-Control "no-cache, must-revalidate";
}

3. Перезапустите Nginx:

sudo systemctl reload nginx

Как проверить, что заголовки Cache-Control работают

1. В браузере откройте инструменты разработчика (F12) на вкладке Network.

2. Обновите страницу с зажатым Shift (чтобы загрузить заново).

3. Выберите любой CSS/JS/картинку и проверьте в разделе Headers наличие Cache-Control с правильными параметрами.

4. Используйте команду curl, чтобы проверить заголовки из командной строки:

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

Частые ошибки при настройке Cache-Control и как их исправить

• Нет модуля mod_expires или mod_headers в Apache — проверьте и активируйте модули через a2enmod expires и a2enmod headers, затем перезапустите сервер.
• Конфликты с плагинами кэширования — некоторые плагины выставляют собственные заголовки, отключите их или настройте совместимость.
• Неверные пути в правилах — убедитесь, что правила .htaccess или Nginx применяются к нужным типам файлов и директориям.
• Длительное кэширование HTML — может привести к показу устаревшего содержимого, используйте no-cache, must-revalidate для страниц.

Практические советы по безопасности и производительности

• Для динамического контента (страниц с пользовательскими данными, корзина WooCommerce) не ставьте длительный кэш.
• Используйте Vary: Cookie заголовок для страниц с разным содержимым в зависимости от сессии.
• Компрессируйте статические файлы с помощью gzip или brotli для ускорения передачи.
• Регулярно очищайте кэш браузера и сервера при обновлениях шаблонов или скриптов.

Сравнение подходов к настройке кэширования статики