Что такое CDN и как работает эта технология
2026-02-21 01:17 Diff
https://skillbox.ru/media/code/chto-takoe-cdn/

#статьи

  • 5 ноя 2025
  • 0

Благодаря ей сайты открываются быстрее, чем вы успеваете моргнуть.

Иллюстрация: Оля Ежак для Skillbox Media

Адепт виртуальной реальности. Пишет новости и статьи для Skillbox Media, временами смотрит аниме и вышивает крестиком, но это не точно.

Вы когда-нибудь задумывались, почему сайты с серверами на другом конце земного шара открываются мгновенно? Всё дело в технологии CDN (content delivery network) — сети доставки контента. Без неё современный интернет был бы гораздо медленнее и нестабильнее.

Из статьи вы узнаете, что такое технология CDN, как она работает, какие преимущества даёт и почему нужна всем крупным веб-сервисам.

Содержание

CDN — это географически распределённая сеть серверов, которые находятся в разных точках мира. На них кэшируются и хранятся копии статического контента сайтов: изображения, CSS- и JavaScript-файлы, видео, аудио, шрифты, документы и другие неизменяемые данные.

CDN доставляет данные с ближайшего узла сети (point of presence), а не с сервера-первоисточника (upstream server). Это значительно сокращает время загрузки, поскольку физическое расстояние между пользователем и сервером уменьшается. Контент быстро доходит до клиента, даже если исходный сервер расположен на другом конце земного шара.

CDN можно сравнить с сетью продуктовых магазинов, которые разбросаны по всему городу. Вместо того чтобы ехать за продуктами на главный склад на другом конце города (сервер-первоисточник), вы заходите в магазин возле дома (узел CDN) и покупаете те же товары.

Схема доставки контента: напрямую и через CDN
Инфографика: Skillbox Media

CDN возникла с ростом интернета. По мере развития Сети увеличивался объём данных: сайты перестали быть столбцами текста и наполнились тяжёлыми изображениями, видео, музыкой и 3D-графикой. Появились стриминговые сервисы и видеохостинги. За последние десять лет медианный вес веб-страницы на десктопе вырос почти в четыре раза — с 735 КБ до 2652 КБ.

Помимо веса веб-страниц, росло и количество пользователей интернета. Миллионы людей одновременно открывают одни и те же страницы, смотрят видео, листают изображения. Один сервер неспособен выдержать такую нагрузку и стабильно обрабатывать запросы со всего мира. Именно поэтому появилась технология CDN, которая решает проблему масштабирования и географической доступности контента.

Когда поступает много запросов, нагрузка распределяется между всеми серверами в сети — это предотвращает перегрузку отдельных узлов. А если один из узлов выходит из строя, запрос автоматически перенаправляется на ближайший сервер. Так обеспечивается бесперебойная работа и высокая отказоустойчивость системы.

CDN также частично фильтрует трафик и защищает сайт от DDoS-атак, если провайдер предоставляет эту функцию. Это происходит за счёт того, что серверы анализируют входящие запросы и блокируют подозрительный трафик до того, как он достигнет основного сервера.

Например, если злоумышленники попытаются перегрузить сайт поддельными запросами, CDN распознает аномальную активность. В результате на сервер попадут только запросы реальных пользователей.

Работу CDN можно разделить на несколько основных этапов:

  • Сначала пользователь обращается к домену сайта.
  • CDN перенаправляет запрос на ближайший узел.
  • Если файла нет, CDN запрашивает его с сервера-первоисточника или соседнего узла, сохраняет в кэше и передаёт пользователю.
  • При следующем аналогичном запросе файл доставляется из CDN — обращаться к серверу-первоисточнику не требуется.

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

Без CDN данные каждый раз проходят путь от сервера-первоисточника до пользователя. В результате композиция грузится дольше, а качество звучания зависит от расстояния до Стокгольма и скорости соединения.

С CDN всё работает иначе. Когда пользователь из Москвы запрашивает трек, CDN перенаправляет запрос на ближайший узел — например, в Хельсинки. Если копия трека уже находится в кэше, она сразу передаётся слушателю. Если нет — CDN запрашивает файл с сервера в Стокгольме, сохраняет его на узле в Хельсинки и отдаёт пользователю.

Когда этот или любой другой слушатель сделает новый запрос на тот же трек, файл будет загружаться уже из Хельсинки. Расстояние меньше — поэтому трек загружается быстрее и воспроизводится стабильнее.

Слева — раздача трафика от одного сервера-первоисточника, справа — с использованием CDN
Изображение: Д. Ильин / Wikimedia Commons

При этом динамический контент не кэшируется на серверах CDN, однако запросы по-прежнему проходят через ближайший узел. Он оптимизирует маршрут перед��чи данных, устанавливает защищённое соединение и перенаправляет запросы на основной сервер.

Например, когда пользователь в Москве добавляет трек в плейлист Spotify или меняет настройки аккаунта, CDN-узел в Хельсинки выступает посредником. Он принимает запрос, устанавливает защищённое TLS-соединение с сервером в Стокгольме и передаёт данные в обоих направлениях по оптимизированным маршрутам.

CDN-сети не существуют сами по себе — за их работу отвечают CDN-провайдеры. Это компании, которые строят и поддерживают всю инфраструктуру распределённых серверов, размещают их в различных точках и предоставляют владельцам сайтов доступ к своим мощностям.

Всех провайдеров можно разделить на две категории:

  • Независимые провайдеры — их выбирает большинство сайтов и сервисов. Они создают публичные CDN, к которым может подключиться любой желающий по подписке или условно-бесплатным тарифам. К таким провайдерам относятся Cloudflare, Akamai, jsDelivr, Cdnjs, Google Hosted Libraries и другие.
  • Крупные корпорации, которые создают сети доставки контента для своих сервисов, — например, Google Cloud CDN, Microsoft (Azure CDN) или Netflix Open Connect. Их инфраструктура обычно приватная и оптимизирована под конкретные задачи компании.

Выбор провайдера зависит от типа контента, географии аудитории и требований к скорости и безопасности. Для небольших сайтов подойдут публичные CDN с простым подключением, базовой защитой от DDoS-атак и бесплатными тарифами — например, Cloudflare или jsDelivr.

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

Также учтите, что в определённых ситуациях сеть CDN может быть вообще не нужна. Это касается проектов, которые обслуживают локальную аудиторию и не содержат тяжёлого контента, — например, личных сайтов или блогов без видео и большого количества изображений. В таких случаях быстрее и дешевле воспользоваться обычным хостингом.

Схема работы CDN: провайдеры размещают узлы сети по всему миру, чтобы данные с основного сервера быстрее доходили до пользователей
Изображение: Microsoft

CDN-сервисами часто пользуются фронтенд-разработчики, поскольку это удобный способ подключать шрифты, фреймворки, библиотеки и изображения без загрузки их на сервер или локальный диск. Для этого вам достаточно добавить ссылки на нужные ресурсы в HTML-файл.

Чтобы попробовать это на практике, установите VS Code или другой редактор кода. После этого создайте новый файл, назовите его index.html, добавьте в него следующий код и сохраните изменения:

<!DOCTYPE html> <html lang="ru"> <head> <meta charset="UTF-8" /> <title>Пример работы через CDN</title> <!-- Шрифт (Google Fonts CDN) --> <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap" rel="stylesheet"> <!-- Bootstrap CSS (jsDelivr CDN) --> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"> <style> body { font-family: "Inter", system-ui, sans-serif; background: #f0f0f0; margin: 2rem; color: #212529; } .note { text-align: center; color: #6c757d; margin-bottom: 2rem; font-size: 1.1rem; } .font-demo { text-align: center; font-size: 1.2rem; margin-bottom: 2rem; } .text-center a { margin-bottom: 2rem; display: inline-block; } /* Слайдер */ .slider { position: relative; max-width: 720px; margin: 2rem auto; border-radius: 12px; overflow: hidden; box-shadow: 0 4px 16px rgba(0, 0, 0, .1); aspect-ratio: 16 / 9; min-height: 260px; background: #e9ecef; } .slide { position: absolute; inset: 0; opacity: 0; transition: opacity .6s ease; } .slide.active { opacity: 1; } .slide img { width: 100%; height: 100%; object-fit: cover; } .nav { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(0, 0, 0, .6); color: #fff; border: 0; padding: .4rem .8rem; border-radius: 6px; cursor: pointer; } .prev { left: 10px; } .next { right: 10px; } </style> </head> <body> <p class="note"> Всё на этой странице работает через CDN — шрифт, стили, скрипты и изображения. </p> <p class="font-demo"> Этот текст набран шрифтом <strong>Inter</strong> и загружается из Google Fonts CDN. </p> <!-- Кнопка Bootstrap --> <div class="text-center"> <a href="https://getbootstrap.com" class="btn btn-primary btn-lg" target="_blank" rel="noopener noreferrer"> Перейти на сайт Bootstrap </a> </div> <!-- Слайдер (картинки из CDN) --> <div class="slider" id="slider"> <div class="slide active"><img src="https://picsum.photos/id/1015/1200/600" alt=""></div> <div class="slide"><img src="https://picsum.photos/id/1036/1200/600" alt=""></div> <div class="slide"><img src="https://picsum.photos/id/1043/1200/600" alt=""></div> <button class="nav prev" aria-label="prev">&#10094;</button> <button class="nav next" aria-label="next">&#10095;</button> </div> <!-- jQuery (cdnjs CDN) --> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script> <!-- Bootstrap JS (jsDelivr CDN) --> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script> <script> // Простой слайдер на jQuery: кнопки и автопрокрутка $(function () { const $s = $('#slider'), $slides = $s.find('.slide'); let i = 0; function show(n) { i = (n + $slides.length) % $slides.length; $slides.removeClass('active').eq(i).addClass('active'); } $s.find('.next').on('click', () => show(i + 1)); $s.find('.prev').on('click', () => show(i - 1)); setInterval(() => show(i + 1), 3000); }); </script> </body> </html>

Когда вы откроете страницу в браузере, увидите, что через CDN работают все элементы — от шрифтов и стилей до картинок и скриптов:

  • шрифт Inter подключается из Google Fonts CDN;
  • CSS-фреймворк Bootstrap загружается через jsDelivr CDN и отвечает за оформление кнопки и базовые стили страницы;
  • изображения в слайдере грузятся из сервиса Picsum Photos CDN;
  • библиотека jQuery подключается через Cdnjs CDN и управляет функциональностью слайдера.

То есть мы получили интерфейс, который полностью работает на ресурсах из разных CDN-серверов — без единого локального файла.

Скриншот: Visual Studio Code / Picsum / Skillbox Media

Для сравнения вы можете попробовать сделать слайдер на чистом HTML, CSS и JavaScript — скачать все изображения на компьютер и затем добавить их вручную. Это полезная практика, которая позволит оценить удобство использования CDN во фронтенд-разработке.



Курс с трудоустройством: «Профессия Фронтенд-разработчик + ИИ» Узнать о курсе