- html5css.dev
- SEO
- Мобильное SEO
- Скорость сайта
- Использование CDN
Использование CDN
CDN приближает файлы к пользователю и снимает нагрузку с сервера приложений. Разбираем, кому он действительно нужен, что через него отдавать и на чём чаще всего спотыкаются.
Что даёт CDN
- География. Файл отдаётся из точки, ближайшей к пользователю: меньше задержка, лучше TTFB.
- Разгрузка сервера. Статика не доходит до приложения — оно занимается только динамикой.
- Устойчивость к всплескам. Пик трафика принимает сеть, а не один сервер.
- Современные протоколы. HTTP/3, Brotli, TLS 1.3 обычно доступны без настройки.
- Обработка изображений на лету. Один оригинал, а размеры и форматы отдаются по параметрам URL.
Что отдавать через CDN
| Ресурс | Через CDN | Комментарий |
|---|---|---|
| Изображения | Да | Основной объём трафика |
| CSS, JS, шрифты | Да | С версией в имени и годовым кешем |
| Видео и крупные файлы | Да | Ради разгрузки канала |
| HTML контентных страниц | По ситуации | Кеширование на границе даёт заметный выигрыш |
| HTML с персонализацией | Нет | Риск отдать чужие данные |
| API и формы | Нет | Динамика, кешировать нельзя |
Обработка изображений на лету
Самая недооценённая функция. Вместо того чтобы готовить набор размеров на сборке, вы храните оригинал, а CDN отдаёт нужный вариант по параметрам:
<img src="/img/photo.jpg?w=800&fm=avif&q=55"
srcset="/img/photo.jpg?w=400&fm=avif&q=55 400w,
/img/photo.jpg?w=800&fm=avif&q=55 800w,
/img/photo.jpg?w=1600&fm=avif&q=55 1600w"
sizes="(max-width: 768px) 100vw, 800px"
width="800" height="450" alt="Схема работы CDN">Многие сети умеют сами выбирать формат по заголовку Accept:
AVIF современным браузерам, WebP остальным, JPEG самым старым. Приёмы работы
с изображениями разобраны в
отдельном уроке.
Настройка кеширования
- Правила по типам. Версионированная статика — год и
immutable; HTML — короткийs-maxage. Vary: Accept-Encoding— чтобы сжатые и несжатые варианты не смешивались.- Не кешировать
Set-Cookie— иначе чужая сессия достанется другому пользователю. - Игнорировать рекламные параметры (
utm_*) в ключе кеша, иначе он не работает. - Сброс по событию при публикации или изменении цен.
- Не пересжимать уже сжатые изображения.
Схема уровней кеша — в уроке о многоуровневом кешировании.
Ошибки, ломающие индексацию
| Ошибка | Признак | Решение |
|---|---|---|
| Роботы под антибот-защитой | Ошибки обхода в Search Console | Внести поисковых роботов в исключения |
| CDN-домен закрыт в robots.txt | Отчёт о заблокированных ресурсах | Открыть доступ к CSS, JS, изображениям |
| Устаревший кеш HTML | Правки «не выезжают» | Короткий s-maxage и сброс по событию |
Кешируется страница с Set-Cookie | Чужие данные у пользователей | Исключить такие ответы из кеша |
| Смешанное содержимое | Замок в браузере пропадает | Все ресурсы по https |
| Разные версии по геолокации | Робот видит не то, что пользователь | Не варьировать содержание по стране без необходимости |
Проверка после подключения
- Search Console → Проверка URL: страница загружается, ресурсы не заблокированы.
curl -sIпо CDN-ресурсу: заголовки кеширования и сжатия на месте.- DevTools → Network: колонка Protocol показывает
h3илиh2. - Полевые Core Web Vitals через месяц: TTFB и LCP должны улучшиться.
- Логи сервера: доля запросов к статике заметно снизилась.
Итог
CDN стоит подключать почти всем — не столько ради географии, сколько ради разгрузки сервера, современных протоколов и обработки изображений на лету. Главное после подключения — убедиться, что защита от ботов не мешает поисковым роботам, а кеш HTML не отдаёт устаревшее.
Частые вопросы
Нужен ли CDN, если вся аудитория в одном городе?
Выигрыш от географии будет небольшим, но CDN всё равно полезен: снимает статику с сервера приложений, стабилизирует ответ при всплесках трафика и обычно даёт HTTP/3 и Brotli из коробки.
Что отдавать через CDN?
Как минимум статику: изображения, CSS, JS, шрифты, видео. HTML — по ситуации: для контентных страниц кеширование на границе даёт хороший эффект, для персонализированных не подходит.
Может ли CDN навредить индексации?
Может, если блокирует поисковых роботов защитой от ботов, отдаёт им устаревший кеш или неверно определяет географию и подсовывает не ту версию. Проверяйте доступность сайта для Googlebot после подключения.
Нужно ли размечать CDN-домен как отдельный сайт?
Нет. Файлы на CDN-домене — ресурсы вашего сайта, а не отдельный ресурс. Главное, чтобы они были доступны роботу и не закрыты в robots.txt.