Содержание11
CDN — сеть серверов в разных городах, которая хранит копии файлов сайта и отдаёт их посетителю с ближайшей точки. Картинки, стили и скрипты едут не с вашего хостинга, а с узла рядом с человеком, поэтому страница грузится быстрее, а основной сервер меньше нагружен. Для сайта, чья аудитория живёт в одном городе, выигрыш бывает скромным.
Что такое CDN простыми словами
CDN расшифровывается как Content Delivery Network, по-русски — сеть доставки контента. Это набор серверов, разнесённых по городам и странам. Каждый хранит копии файлов вашего сайта и отвечает тем посетителям, которые находятся ближе к нему. Справочник web.dev формулирует суть так: сеть доставки повышает производительность сайта, потому что доставляет ресурсы пользователям через распределённую сеть серверов.
Без CDN каждый запрос идёт на один сервер — тот, где лежит сайт. Если хостинг в Москве, а покупатель во Владивостоке, каждая картинка проходит через всю страну и обратно. С CDN эта картинка лежит на узле рядом с покупателем, и путь сокращается.
Сам сайт при этом никуда не переезжает. Исходный сервер, который в документации называют origin, остаётся главным: там живут база данных, админка и файлы. CDN лишь берёт у него копии и раздаёт их от своего имени.
CDN не заменяет хостинг: сайт остаётся на своём сервере, а сеть только раздаёт копии его файлов с узлов поближе к посетителю.
Как CDN отдаёт файлы посетителю
Когда человек открывает страницу, его браузер обращается не к вашему хостингу, а к ближайшему узлу CDN. Если нужный файл уже лежит в кэше узла, посетитель получает его сразу. Если нет, узел сам забирает файл у исходного сервера, отдаёт посетителю и сохраняет у себя для следующих.
Такой способ заполнения кэша называют «извлечением из источника». Первый посетитель после очистки кэша получает файл чуть медленнее, все следующие — быстрее. Чем популярнее страница, тем чаще её файлы уже ждут на узле.
Важный параметр — срок хранения копии, его называют TTL. Пока он не истёк, узел не спрашивает исходный сервер, изменился ли файл. Если вы поменяли картинку, а TTL большой, посетители ещё какое-то время увидят старую версию. Для этого у CDN есть очистка кэша: она удаляет ресурс из CDN, не дожидаясь окончания срока хранения. Обычно её запускают кнопкой в панели провайдера или через API.
Доля запросов, на которые узел ответил из кэша, называется коэффициентом попаданий, CHR. По данным web.dev, CHR на уровне 90 % — хорошая цель для большинства сайтов. Провайдер показывает это число в своей статистике.
Что именно ускоряет CDN?
Главный выигрыш даёт расстояние. Серверы CDN расположены ближе к пользователям, чем исходный сервер, поэтому каждый запрос проходит короткий путь. Особенно это заметно на первом соединении: браузеру нужно несколько обменов с сервером, прежде чем начнётся передача, и каждый обмен с далёким сервером дороже.
Второй выигрыш — разгрузка хостинга. Когда картинки и скрипты отдаёт CDN, исходный сервер занят только тем, что нельзя закэшировать: оформлением заказа, поиском, личным кабинетом. Это помогает пережить пики трафика — рассылку, рекламную кампанию, сезон.
Третий выигрыш виден в метриках. По данным web.dev, время до первого байта (TTFB) может быть значительно улучшено после подключения CDN, а через него улучшается и LCP — время отрисовки главного элемента страницы. Обе метрики разбирали в статье про Core Web Vitals.
Ещё CDN часто берёт на себя служебные задачи: сжатие текстовых файлов, современные версии протоколов HTTP и TLS, конвертацию картинок в новые форматы. Это важно, потому что изображения составляют около 50% передаваемых байтов на средней веб-странице.
Факт. По данным web.dev, картинки дают около половины веса средней страницы, поэтому CDN с оптимизацией изображений заметно уменьшает объём загрузки.
Что кэшировать в CDN, а что нет
Не всё на сайте одинаково подходит для кэша. Правило простое: общедоступное и редко меняющееся кэшируют надолго, личное не кэшируют вовсе.
| Тип файлов | Примеры | Кэшировать в CDN |
|---|---|---|
| Статика с версией в имени | style.v12.css, app.v3.js, шрифты | надолго, на месяцы |
| Картинки и видео | фото товаров, баннеры, ролики | надолго, с очисткой при замене |
| Общие HTML-страницы | статьи блога, карточки товара | коротко или с очисткой по событию |
| Динамика при пиках | главная магазина, ответы API | на секунды |
| Личные данные | корзина, кабинет, оформление заказа | нельзя |
Для статики web.dev советует длительный срок жизни кэша — например, 6 месяцев или 1 год. Поэтому к имени файла добавляют версию: вышла новая версия стилей — изменилось имя, и браузер скачивает её заново, не дожидаясь конца срока.
Динамику тоже можно кэшировать. При сильном трафике кэширование ответов на очень короткий срок, например на 5 секунд, может значительно снизить нагрузку на исходный сервер, а данные почти не устареют.
Частные ресурсы с данными одного пользователя CDN кэшировать не должна. Их помечают заголовком Cache-Control: private, иначе один покупатель рискует увидеть корзину другого.
Кому CDN нужен, а кому нет?
CDN окупается там, где посетители далеко от сервера или их много одновременно. Типичные случаи:
- Аудитория по всей стране или за рубежом — интернет-магазин с доставкой по России, сервис для клиентов из нескольких стран.
- Тяжёлые страницы — каталоги с сотнями фотографий, видео, галереи работ.
- Пики посещаемости — распродажи, рассылки, телереклама, когда за минуты приходит в разы больше людей, чем обычно.
- Слабый хостинг — сервер справляется с обычной нагрузкой, но проседает, когда страницы запрашивают одновременно.
А вот сайту-визитке компании из Новороссийска, где почти все клиенты из того же региона, а хостинг стоит в соседнем дата-центре, CDN даст мало. Расстояние и так короткое, а настройка добавит сложности. Такому сайту сначала стоит разобраться с весом картинок, кэшем браузера и ответом сервера — о типичных причинах медленной загрузки рассказывали в статье почему сайт медленно загружается.
Есть и случаи, когда CDN почти ничего не изменит: личный кабинет, где каждая страница уникальна для пользователя, или внутренняя система, которой пользуются из одного офиса. Кэшировать там нечего.
Мнение. Если больше половины ваших клиентов живут в том же регионе, что и сервер, начните с оптимизации картинок и хостинга. CDN подключайте, когда аудитория расширилась или сервер перестал выдерживать пики.
Как подключить CDN к сайту
Подключение обычно не требует переписывать сайт. Порядок такой:
Если сайт работает на CMS, проверьте, есть ли у неё модуль для CDN: он сам перепишет адреса картинок и стилей. Для 1С-Битрикс и WordPress такие модули существуют, но настраивать их всё равно нужно вручную.
Подключение CDN — это в первую очередь правка DNS и правил кэша. Код сайта меняют, только если через CDN идёт статика на отдельном поддомене.
Как выбрать провайдера CDN?
Скорость — главный, но не единственный критерий. По web.dev, при выборе важно учитывать и дополнительные функции, цены, поддержку и подключение. Сравнивайте провайдеров по таким пунктам:
| Критерий | Что проверить | Почему важно |
|---|---|---|
| Точки присутствия | есть ли узлы в регионах ваших клиентов | узел далеко от аудитории не ускорит сайт |
| Доступность в России | работает ли сервис без ограничений для ваших посетителей | заблокированный CDN ломает сайт |
| Очистка кэша | есть ли очистка по адресу и по API | без неё правки видно с задержкой |
| Сжатие и форматы | Brotli, HTTP/2 и HTTP/3, конвертация картинок | быстрые победы без правки кода |
| Защита | фильтрация атак, WAF, правила доступа | CDN принимает удар на себя |
| Оплата | за трафик, за запросы или пакетом | считайте по своему объёму, а не по рекламе |
Отдельно о локальных ограничениях. Справочник MDN предупреждает: если CDN упадёт, будет заблокирован в регионе или закроется, сайт перестанет работать как надо. Для российского бизнеса это практический риск, поэтому проверяйте, откуда доступен сервис и где стоят его серверы. Если через CDN проходят формы с данными клиентов, сверьтесь с требованиями закона — их разбирали в статье про защиту персональных данных на сайте.
Частые ошибки с CDN
Большинство проблем после подключения CDN связано не с самой сетью, а с правилами кэша:
- 01 Закэшировали личное
Корзина или кабинет попали в общий кэш, и посетители видят чужие данные.
- 02 Огромный TTL без версий файлов
Поменяли стили, а у посетителей неделями старая вёрстка.
- 03 Лишний Set-Cookie на статике
Кэши обычно не кэшируют ответы сервера с этим заголовком, и CDN работает вхолостую.
- 04 Параметры в адресах
Метки рекламы делают из одной страницы десятки копий в кэше, и доля попаданий падает.
- 05 Забыли про SSL
Сертификат не перенесли, и сайт открывается с предупреждением.
- 06 Библиотеки с чужого публичного CDN «для скорости»
По данным MDN, браузеры не делят кэш одного файла между разными сайтами, так что общий jQuery всё равно скачивается заново, а у сайта появляется лишняя внешняя зависимость.
С чего начать, если сайт грузится медленно
Начните с замера: откройте сайт через PageSpeed Insights и посмотрите TTFB и LCP. Высокий TTFB у посетителей из других регионов — прямой повод подумать о CDN. Если же медленно грузится всё и везде, причина чаще в хостинге, тяжёлых картинках или коде.
Затем перечислите, откуда приходят клиенты. Аналитика покажет города и страны. Если почти весь поток из одного региона, сначала оптимизируйте сервер и изображения. Если география широкая или бывают пики, подключайте CDN, начав со статики.
После подключения сравните метрики до и после и проверьте долю попаданий в кэш в статистике провайдера. Если сайт сложный, а правила кэша страшно трогать самим, такую настройку мы делаем в рамках поддержки сайта: подбираем провайдера, переносим статику и следим, чтобы личные данные не попали в кэш.
Источники
- Сети доставки контента (CDN) — web.dev, Google
- CDN — Glossary — MDN Web Docs, Mozilla
