Внешние ресурсы — это один из факторов, который значительно влияет на скорость загрузки вашего сайта на WordPress. Часто это файлы шрифтов, скрипты, стили, изображения, загружаемые с других серверов. Если такие ресурсы не кэшируются должным образом, это может замедлить работу сайта и ухудшить пользовательский опыт. В этой статье мы подробно разберём, как правильно кэшировать внешние ресурсы в WordPress, какие инструменты использовать и приведём примеры кода для реализации.
Почему важно кэшировать внешние ресурсы в WordPress
Когда браузер загружает страницу сайта, он также делает запросы к сторонним серверам за файлами, которые не хранятся непосредственно на вашем хостинге. По умолчанию многие из этих ресурсов не кэшируются или кэшируются с очень коротким сроком, что приводит к постоянным загрузкам и задержкам.
Кэширование внешних ресурсов позволяет:
- Сократить время загрузки страницы;
- Уменьшить нагрузку на серверы, которые их предоставляют;
- Обеспечить плавное отображение контента для пользователей;
- Улучшить показатели Core Web Vitals и SEO.
Однако, из-за особенностей безопасности браузера и политики CORS, кэшировать внешние ресурсы сложнее, чем локальные. Рассмотрим основные методы решения этой задачи.
Методы кэширования внешних ресурсов
1. Локальное кэширование (хостинг копий файлов)
Самый простой и надёжный способ — скачать внешние ресурсы (например, шрифты Google Fonts, скрипты аналитики) и разместить их на своём сервере. Это позволяет полностью контролировать настройки кэширования через сервер или плагины WordPress.
Для автоматизации можно использовать плагин Clearfy Pro, который умеет локализовать шрифты и скрипты, а также оптимизировать их загрузку.
Пример функции для локализации Google Fonts с префиксом домена wpcache_:
function wpcache_localize_google_fonts() {
wp_dequeue_style('google-fonts');
wp_enqueue_style('wpcache-local-google-fonts', get_template_directory_uri() . '/fonts/google-fonts.css', array(), null);
}
add_action('wp_enqueue_scripts', 'wpcache_localize_google_fonts', 20);
В файле google-fonts.css вы прописываете локальные пути к шрифтам. Это избавит от постоянных запросов к внешним серверам Google Fonts и позволит кэшировать их по вашему усмотрению.
2. Использование проксирования и сервисов CDN
Если локальное хранение невозможно или нежелательно, можно использовать сервисы проксирования, которые кэшируют внешние ресурсы и подают их с минимальной задержкой. Например, Cloudflare, BunnyCDN или специализированные плагины.
Для WordPress есть плагины, которые автоматически проксируют внешние ресурсы. Они создают локальные кэшированные копии и обновляют их по расписанию.
Пример интеграции через фильтр для замены URL внешнего ресурса на проксируемый:
function wpcache_proxy_external_resource( $url ) {
$proxy_base = 'https://mycdn.example.com/proxy?url=';
if ( strpos( $url, 'fonts.googleapis.com' ) !== false ) {
return $proxy_base . rawurlencode( $url );
}
return $url;
}
add_filter( 'style_loader_src', 'wpcache_proxy_external_resource' );
Такой подход позволяет использовать кэш CDN и уменьшить время загрузки.
3. Правильная настройка заголовков кэширования (Cache-Control)
Если внешний ресурс поддерживает заголовки Cache-Control и Expires, браузер сможет кэшировать их. Однако не всегда эти заголовки выставлены оптимально. В таких случаях локальное кэширование или проксирование — лучший выход.
Для локальных ресурсов можно добавить правила в .htaccess или использовать плагины кэширования, например, Clearfy Pro, которые позволяют гибко управлять заголовками.
Кэширование шрифтов Google Fonts: практический пример
Google Fonts — одна из самых частых причин внешних запросов. Рассмотрим, как локализовать и кэшировать эти шрифты.
- Скачайте нужные шрифты из Google Fonts или используйте онлайн-инструменты (например, google-webfonts-helper).
- Поместите файлы шрифтов в папку темы, например
/fonts/. - Создайте CSS-файл с описанием @font-face для всех вариантов шрифтов.
- Подключите этот CSS через функцию WordPress:
function wpcache_enqueue_local_fonts() {
wp_enqueue_style( 'wpcache-google-fonts', get_template_directory_uri() . '/fonts/google-fonts.css', array(), null );
}
add_action( 'wp_enqueue_scripts', 'wpcache_enqueue_local_fonts' );
Так вы полностью контролируете кэширование и избегаете задержек при обращении к сторонним серверам.
Обработка проблем с CORS при кэшировании внешних ресурсов
При использовании проксирования или локализации могут возникать проблемы с политикой CORS. Чтобы избежать ошибок:
- Убедитесь, что сервер отдаёт корректные заголовки
Access-Control-Allow-Origin. - При локализации шрифтов добавьте в
.htaccessили конфигурацию сервера правила для разрешения CORS:
<FilesMatch "\.(ttf|ttc|otf|eot|woff|woff2|font.css)$">
Header set Access-Control-Allow-Origin "*"
</FilesMatch>
Это позволит браузерам без проблем загружать локальные копии шрифтов.
Использование плагинов для управления кэшированием внешних ресурсов
Существуют плагины, которые облегчают работу с внешним кэшированием:
- Clearfy Pro — умеет локализовать шрифты, оптимизировать загрузку скриптов и стилей, управлять заголовками кэширования.
- Asset CleanUp — позволяет выборочно отключать внешние скрипты и стили, тем самым снижая количество запросов.
- WP Rocket — поддерживает интеграцию с CDN и оптимизацию загрузки.
Для примера, Clearfy Pro можно скачать и узнать больше по ссылке: https://wpshop.ru/plugins/clearfy/.
Оптимизация загрузки внешних скриптов и стилей
Кроме кэширования важно правильно загружать внешние ресурсы. Несколько советов:
- Используйте атрибуты
asyncилиdeferдля скриптов, чтобы не блокировать рендеринг страницы. - Объединяйте и минимизируйте CSS и JS, если это возможно.
- Загружайте критичные стили inline, а остальные — асинхронно.
- Используйте
preconnectиdns-prefetchдля ускорения установления соединения с внешними серверами.
Пример добавления preconnect для Google Fonts:
function wpcache_add_preconnect() {
echo '<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>';
}
add_action( 'wp_head', 'wpcache_add_preconnect' );
Выводы и рекомендации
Кэширование внешних ресурсов — задача комплексная, требующая грамотного подхода. Наилучшие результаты даёт локализация и хранение копий на своём сервере, но при невозможности — стоит использовать проксирование и CDN.
Обязательно проверяйте заголовки кэширования и CORS, чтобы избежать ошибок. Используйте специальные плагины для автоматизации процессов и оптимизации загрузки.
Такой подход позволит значительно ускорить загрузку вашего сайта на WordPress и улучшить пользовательский опыт.