Настроить CDN

Зачем настраивать CDN

CDN (Content Delivery Network) — это сеть серверов, распределённых по разным географическим точкам. Когда пользователь запрашивает страницу, CDN отдаёт контент с ближайшего сервера (точки присутствия, PoP). Вместо того чтобы запрос из Владивостока летел на сервер в Москве через 7000 км — он обрабатывается на ближайшем узле CDN.

Для Core Web Vitals CDN ускоряет загрузку статики: изображений, CSS, JavaScript, шрифтов. TTFB (Time to First Byte) снижается, потому что данные идут по короткому маршруту. LCP улучшается, потому что крупнейший элемент (часто изображение) загружается быстрее. Для сайтов с аудиторией по всей России CDN даёт ощутимую разницу: пинг от Дальнего Востока до московского сервера — 80-120 мс, до ближайшего PoP CDN — 10-30 мс.

Помимо скорости, CDN защищает от DDoS-атак (поглощает трафик на своей инфраструктуре), снижает нагрузку на origin-сервер (статика отдаётся из кеша CDN) и обеспечивает отказоустойчивость (если origin упал — кешированный контент продолжает отдаваться).

Пошаговая инструкция

Шаг 1. Выберите CDN-провайдера

Для российского рынка выбор CDN имеет свои особенности. Google CDN (Cloud CDN) ограничен в РФ с 2022 года, и его точки присутствия в России недоступны. Вот рабочие варианты:

• Cloudflare — есть точки присутствия в Москве, Санкт-Петербурге. Бесплатный тариф покрывает базовые потребности: CDN, SSL, базовая DDoS-защита. Pro-тариф ($20/мес) добавляет оптимизацию изображений (Polish) и улучшенный кеш. Минус: часть функций работает нестабильно из-за блокировок IP Cloudflare в России.
• BunnyCDN — бюджетный CDN с оплатой по трафику (от $0.01/ГБ). Есть PoP в Москве и нескольких городах СНГ. Надёжно работает в РФ. Простая настройка, хорошая панель аналитики. Для небольших сайтов обходится в 1-3 доллара в месяц.
• Selectel CDN / VK Cloud CDN — российские провайдеры с широкой сетью в РФ. Подходят для проектов, где критично размещение данных на территории России.
• KeyCDN — точек в РФ нет, но хорошо работает для аудитории в Европе. Не лучший выбор для чисто российского сайта.

Шаг 2. Определите, что кешировать через CDN

Не всё содержимое сайта должно проходить через CDN. Разделите ресурсы:

• Кешировать: изображения, CSS, JavaScript, шрифты, видеофайлы, PDF-документы. Это статический контент, который не меняется при каждом запросе.
• Не кешировать или кешировать кратковременно: HTML-страницы (особенно с персонализацией), ответы API, страницы корзины и личного кабинета, результаты поиска.
• Для WordPress: исключите из кеша CDN страницы с куками woocommerce_*, wp-postpass, wordpress_logged_in. Иначе авторизованный пользователь увидит кешированную версию для анонима.

Шаг 3. Настройте DNS

Большинство CDN работают через изменение DNS-записей. Два основных подхода:

• Полный прокси (Cloudflare-модель): NS-записи домена переключаются на серверы Cloudflare. Весь трафик проходит через CDN. Cloudflare автоматически определяет, что кешировать, а что передавать на origin.
• Pull Zone / CNAME (BunnyCDN-модель): создаётся поддомен для статики, например cdn.example.com, и CNAME-запись направляется на CDN. В WordPress настраивается подмена URL статики на cdn.example.com через плагин (WP Rocket, CDN Enabler).

После изменения DNS подождите 1-24 часа на распространение записей. Проверьте через dig или nslookup:

dig cdn.example.com +short

В ответе должны быть IP-адреса CDN-провайдера, а не вашего origin-сервера.

Шаг 4. Настройте правила кеширования в CDN

В панели CDN задайте TTL (время жизни кеша) для разных типов контента:

• Изображения: 30 дней
• CSS и JS: 7-30 дней (зависит от частоты обновлений)
• Шрифты: 365 дней
• HTML: 0 (без кеша) или 5-10 минут для статических страниц

В Cloudflare это настраивается через Page Rules или Cache Rules. В BunnyCDN — через Pull Zone Settings → Cache Expiration Time. Важно: настройте заголовок Cache-Control на origin-сервере — большинство CDN уважают заголовки от origin и используют их как основу для своего кеша.

Шаг 5. Настройте CDN в WordPress

Для подключения CDN к WordPress нужно заменить URL статических файлов. Варианты:

• WP Rocket — раздел CDN, укажите URL CDN-домена (например, cdn.example.com). Плагин автоматически заменит URL для всех статических ресурсов.
• CDN Enabler (бесплатный плагин от KeyCDN) — простая замена URL. Указываете origin-домен и CDN-домен — плагин делает подмену.
• W3 Total Cache — раздел CDN с детальными настройками для разных типов CDN.

Если используете Cloudflare в режиме полного прокси — отдельные плагины не нужны, весь трафик и так проходит через CDN.

Шаг 6. Настройте очистку кеша CDN

При обновлении контента или дизайна нужно очищать кеш CDN, чтобы пользователи видели актуальную версию. Настройте автоматическую очистку:

• Cloudflare: плагин Cloudflare для WordPress автоматически очищает кеш при публикации или обновлении записи.
• BunnyCDN: API для программной очистки. Можно настроить webhook при деплое.
• Ручная очистка: в панели CDN есть кнопка Purge Cache (очистить всё) и Purge URL (очистить конкретную страницу). Используйте Purge URL при точечных обновлениях.

Шаг 7. Проверьте работу CDN

После настройки убедитесь, что CDN работает корректно:

• В DevTools → Network проверьте заголовки ответа для статических файлов. Должен присутствовать заголовок CDN: cf-cache-status: HIT (Cloudflare) или CDN-Cache: HIT (BunnyCDN).
• Проверьте TTFB для статики — должно быть меньше 50 мс.
• Протестируйте загрузку из разных регионов через KeyCDN Performance Test или аналогичные сервисы.
• Убедитесь, что динамические страницы (корзина, личный кабинет) не кешируются — добавьте товар в корзину и проверьте, что он отображается.

Типичные ошибки

• Кешировать персонализированные страницы. Если CDN закеширует страницу с авторизацией — все пользователи увидят данные одного аккаунта. Исключайте из кеша страницы с cookie авторизации, корзины, A/B-тестов.
• Выбирать CDN без точек присутствия в регионе аудитории. CDN с PoP только в Европе и США не ускорит загрузку для пользователей из России. Проверяйте карту точек присутствия перед подключением.
• Не настроить HTTPS на CDN. Если origin работает по HTTPS, а CDN отдаёт по HTTP — браузер заблокирует загрузку как mixed content. В Cloudflare включите Full (Strict) SSL. В BunnyCDN загрузите SSL-сертификат для поддомена cdn.
• Забывать про очистку кеша при обновлениях. Обновили CSS, но CDN отдаёт старую версию ещё 30 дней — пользователь видит сломанную вёрстку. Настройте автоматическую очистку или используйте версионирование файлов.
• Подключать CDN на сайт без базовых оптимизаций. CDN не компенсирует отсутствие сжатия, минификации и оптимизации изображений. Если CSS весит 500 КБ без минификации — CDN доставит его быстрее, но файл всё равно тяжёлый. Сначала оптимизируйте, потом подключайте CDN.

Что проверить в итоге

• CDN подключён и статические ресурсы отдаются с PoP CDN (заголовок cf-cache-status: HIT или аналогичный).
• TTFB для статических ресурсов — менее 50 мс из региона целевой аудитории.
• CDN имеет точки присутствия в России (Москва как минимум).
• HTTPS настроен корректно на уровне CDN, нет ошибок mixed content.
• Динамические страницы (корзина, авторизация, поиск) исключены из кеша CDN.
• Настроена автоматическая очистка кеша при обновлении контента.
• WordPress-плагин корректно заменяет URL статики на CDN-домен.
• Сайт загружается быстрее из удалённых регионов (проверено через KeyCDN Performance Test или аналог).