При оптимизации производительности WordPress сайтов часто основное внимание уделяется кэшированию страниц и базы данных, но редко рассматривается кэширование статических ресурсов — CSS и JavaScript файлов. Между тем, правильное кэширование этих ресурсов значительно ускоряет загрузку страниц, снижает нагрузку на сервер и улучшает пользовательский опыт.
Почему важно кэшировать CSS и JS в WordPress
Когда браузер загружает страницу, он делает множество запросов к серверу за стилями и скриптами. Если каждый запрос требует загрузки файла заново, это увеличивает время загрузки и расход трафика. Браузеры умеют кэшировать ресурсы, если сервер настроен правильно, но в WordPress это часто работает не идеально из-за особенностей динамической генерации URL или версионирования файлов.
Правильное кэширование позволяет браузеру использовать локальную копию файла при повторных посещениях, что заметно уменьшает количество запросов и ускоряет отображение страниц.
Кроме того, многие плагины и темы добавляют свои CSS и JS с параметрами версии, которые иногда мешают корректному кэшированию. Разберёмся, как это исправить и настроить.
Настройка кэширования CSS и JS через .htaccess для Apache
Если ваш сайт на WordPress работает на сервере Apache, самый простой способ — добавить правила для кэширования в файл .htaccess. Это позволит указать браузеру, как долго хранить копии файлов.
# BEGIN WP Super Cache
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType text/css "access plus 1 month"
ExpiresByType application/javascript "access plus 1 month"
ExpiresByType application/x-javascript "access plus 1 month"
</IfModule>
# END WP Super Cache
Эти директивы сообщают браузеру, что CSS и JS можно кэшировать 1 месяц. Это безопасно, если вы используете версионирование файлов (query string с версией), чтобы при обновлении файла URL менялся, и браузер загружал новую версию.
Как правильно добавлять версии к CSS и JS в WordPress
Функция wp_enqueue_style и wp_enqueue_script имеют параметр $ver, который отвечает за версию файла. Если его указать, WordPress добавит к URL параметр ?ver= с указанным значением.
Пример правильного подключения стилей с версией:
function wpsupercache_enqueue_assets() {
wp_enqueue_style('wpsupercache-style', get_template_directory_uri() . '/css/style.css', array(), '1.2.3');
wp_enqueue_script('wpsupercache-script', get_template_directory_uri() . '/js/script.js', array('jquery'), '1.2.3', true);
}
add_action('wp_enqueue_scripts', 'wpsupercache_enqueue_assets');
При обновлении файлов просто меняйте версию, например, с '1.2.3' на '1.2.4', чтобы браузеры сбрасывали кэш и загружали свежие копии.
Использование плагинов для оптимизации и кэширования CSS и JS
Ручная настройка — это хорошо, но для комплексной оптимизации часто используют плагины, которые умеют объединять, минифицировать и кэшировать ресурсы.
Autoptimize
Один из самых популярных бесплатных плагинов. Он объединяет CSS и JS в единые файлы, минифицирует их и добавляет правильные заголовки для кэширования.
Настройка простая: после установки и активации перейдите в меню плагина и включите оптимизацию CSS и JS. Autoptimize также умеет откладывать загрузку скриптов для ускорения первоначальной загрузки.
WP Rocket
Премиум плагин с расширенными возможностями. Он не только кэширует страницы, но и оптимизирует загрузку CSS и JS, умеет автоматически добавлять версии к файлам и управлять загрузкой скриптов.
WP Rocket может работать в связке с WP Super Cache для комплексного ускорения сайта.
Как кэшировать CSS и JS с помощью WP Super Cache?
WP Super Cache в первую очередь делает кэширование HTML страниц, но можно настроить совместную работу с кэшированием статических ресурсов.
В разделе настроек WP Super Cache убедитесь, что включена опция «Кэшировать страницы для посетителей» и «Использовать мод_rewrite». Затем добавьте в .htaccess правила, которые я приводил выше, для кэширования CSS и JS.
Для динамически подключаемых скриптов стоит проверить, что они используют правильные версии для сброса кэша на клиенте.
Кэширование CSS и JS с помощью CDN
Если вы используете CDN (Content Delivery Network), то он обычно умеет автоматически управлять кэшированием статических ресурсов. Важно правильно настроить заголовки на сервере источнике (вашем хостинге), чтобы CDN мог кэшировать файлы и отдавать их быстро.
WP Super Cache умеет интегрироваться с CDN. В настройках укажите URL CDN и активируйте соответствующие опции, чтобы CSS и JS грузились с CDN, ускоряя доставку контента пользователям.
Пример функции для автоматического изменения версии файлов по времени изменения
Чтобы не менять версию вручную, можно автоматически подставлять время последнего изменения файла. Вот пример функции, которую можно использовать в functions.php вашей темы:
function wpsupercache_auto_version($file) {
$filepath = get_template_directory() . $file;
if (file_exists($filepath)) {
return get_template_directory_uri() . $file . '?ver=' . filemtime($filepath);
}
return get_template_directory_uri() . $file;
}
function wpsupercache_enqueue_assets_auto() {
wp_enqueue_style('wpsupercache-style', wpsupercache_auto_version('/css/style.css'));
wp_enqueue_script('wpsupercache-script', wpsupercache_auto_version('/js/script.js'), array('jquery'), null, true);
}
add_action('wp_enqueue_scripts', 'wpsupercache_enqueue_assets_auto');
Эта функция подставляет в URL параметр ?ver= с меткой времени последнего изменения файла, что позволяет браузерам кэшировать ресурсы и получать обновления автоматически при изменении файлов.
Резюме: лучшие практики кэширования CSS и JS в WordPress
- Используйте версионирование файлов с помощью параметра
$verвwp_enqueue_styleиwp_enqueue_script. - Добавляйте правила кэширования через
.htaccess(для Apache) или аналогичные настройки для Nginx. - Применяйте плагины, такие как Autoptimize или WP Rocket, для автоматической оптимизации и кэширования ресурсов.
- Интегрируйте CDN для ускорения доставки CSS и JS.
- Используйте автоматическое версионирование через время изменения файла, чтобы избежать проблем с устаревшим кэшем.
Следуя этим рекомендациям, вы заметно ускорите загрузку страниц вашего WordPress сайта, снизите нагрузку на сервер и улучшите пользовательский опыт.
Если хотите узнать больше о комплексной оптимизации WordPress, рекомендую ознакомиться с плагином Clearfy Pro, который помогает оптимизировать множество аспектов работы сайта.