CDN для сайта: зачем нужна и как подключить

CDN (Content Delivery Network, сеть доставки контента) — это сеть серверов, распределённых по всему миру, которые хранят кэшированные копии вашего контента и отдают их пользователям с ближайшего узла. Пользователь из Новосибирска получает картинки с сервера в Новосибирске, а не из Москвы или Амстердама. Это кажется мелочью — пока не видишь данные.

Как CDN влияет на скорость и SEO

Конкретные цифры из реальных проектов:

• Время загрузки страницы снизилось с 4.2 до 1.8 секунды после подключения CloudFlare CDN для интернет-магазина электроники.
• LCP (Largest Contentful Paint) улучшился с 3.8 до 1.4 секунды — переход из «плохой» в «хорошую» зону Core Web Vitals.
• Трафик на изображения с основного сервера снизился на 85% — значительно разгрузился сервер.

Google учитывает Core Web Vitals (LCP, CLS, INP) при ранжировании. CDN напрямую улучшает LCP за счёт быстрой доставки изображений и статических файлов.

Что CDN кэширует

• Изображения — основная нагрузка на трафик, идеально для CDN
• CSS и JavaScript — файлы фронтенда
• Шрифты — особенно кастомные
• Видео — если не используется отдельный видеохостинг
• HTML-страницы — для статических или редко меняющихся страниц

CDN не кэширует (или не должен кэшировать): страницы с индивидуальным контентом (корзина, личный кабинет), API-ответы с динамическими данными, страницы с CSRF-токенами.

CloudFlare: самый популярный выбор

Почему CloudFlare

300+ точек присутствия по всему миру, бесплатный план включает CDN + DDoS-защиту + WAF (базовый) + SSL. Настройка занимает 15 минут — смена NS-записей домена.

Подключение

1. Регистрация на cloudflare.com → Add a Site → введите домен.
2. CloudFlare сканирует DNS-записи и импортирует их.
3. Смените NS-серверы домена на указанные CloudFlare (в панели регистратора домена).
4. Ждите распространения DNS — от 15 минут до 48 часов.

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

# В панели CloudFlare: Caching → Configuration
# Cache Level: Standard (кэширует статику по расширениям)
# Browser Cache TTL: 4 hours (или больше для статики)

# Для принудительного кэширования HTML-страниц:
# Rules → Page Rules → Cache Everything

Purge Cache при деплое

После обновления файлов на сервере нужно сбросить кэш CDN. Через API CloudFlare:

curl -X POST "https://api.cloudflare.com/client/v4/zones/{ZONE_ID}/purge_cache" \
  -H "Authorization: Bearer {API_TOKEN}" \
  -H "Content-Type: application/json" \
  --data '{"purge_everything":true}'

Для Laravel — добавьте в deploy.sh или GitHub Actions pipeline.

Яндекс CDN

Яндекс CDN — часть экосистемы Yandex Cloud. Преимущества для российских сайтов: точки присутствия в крупных городах России, интеграция с Object Storage, оплата в рублях.

Подходит если: используете Yandex Cloud для хостинга, аудитория преимущественно российская, нужно соответствие российским законам.

BunnyCDN: лучшее соотношение цена/качество

BunnyCDN — европейский провайдер с агрессивным ценообразованием: от $0.01/ГБ трафика. 100+ точек присутствия, интуитивный интерфейс, мощные правила кэширования.

Идеален для: небольших и средних проектов, которым нужен CDN без ограничений CloudFlare Free, медиасайтов с большим объёмом трафика.

Настройка кэш-заголовков на сервере

CDN использует Cache-Control заголовки для определения TTL. Правильная настройка в Nginx:

# Nginx — правильные заголовки для CDN
# Статические файлы с версионированием (Vite/Webpack добавляют хэш в имя)
location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg|woff2)$ {
    expires 1y;
    add_header Cache-Control "public, immutable";
    add_header Vary "Accept-Encoding";
}

# HTML — не кэшировать браузером, но разрешить CDN кэшировать
location / {
    expires -1;
    add_header Cache-Control "no-store, no-cache, must-revalidate";
    # CDN может игнорировать no-cache если настроена Page Rule
}

# API — не кэшировать нигде
location /api/ {
    add_header Cache-Control "no-store";
    add_header CDN-Cache-Control "no-store";
}

Когда CDN не поможет

• Медленный сервер с долгим TTFB (>500ms) — CDN кэширует, но первый запрос к origin всё равно медленный.
• Весь контент динамический (личный кабинет, реалтайм-данные) — CDN не кэширует динамику.
• Аудитория только в одном городе — выигрыш от CDN минимальный.

FAQ

CloudFlare бесплатный план подходит для продакшна?

Да, для большинства сайтов. Включает CDN, SSL, базовую DDoS-защиту. Ограничения: WAF только с базовыми правилами, нет приоритизации трафика, аналитика с задержкой.

Как понять что CDN работает?

CDN замедляет первый запрос?

Первый запрос к «холодному» кэшу может быть чуть медленнее — CDN получает файл с origin и кэширует его. Но все последующие запросы из того же региона — значительно быстрее.

Нужна ли CDN при использовании VPS в России?

Если аудитория только в Москве и Санкт-Петербурге — не критично. Если есть пользователи из регионов, Сибири, Дальнего Востока — CDN даёт заметный прирост скорости.

Как CDN влияет на SEO?

Положительно. CDN улучшает LCP и общее время загрузки — это прямые факторы Core Web Vitals. Быстрый сайт = лучшее ранжирование. Также CloudFlare автоматически сжимает файлы (gzip/brotli).