Что такое CDN и как работает эта технология

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

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

Содержание

• Что такое сеть доставки контента
• Как появилась технология и какие преимущества она даёт
• Как работает CDN
• Виды CDN и примеры провайдеров
• Тестируем сеть доставки контента на простом примере

Что такое сеть доставки контента

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

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

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

Как появилась технология и какие преимущества она даёт

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

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

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

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

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

Читайте также:

Что такое DDoS-атаки, как они устроены и почему от них сложно защититься

Как работает сеть доставки контента

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

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

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

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

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

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

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

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

Виды CDN и примеры провайдеров

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-сервисами часто пользуются фронтенд-разработчики, поскольку это удобный способ подключать шрифты, фреймворки, библиотеки и изображения без загрузки их на сервер или локальный диск. Для этого вам достаточно добавить ссылки на нужные ресурсы в 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-серверов — без единого локального файла.

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

Читайте также:

Как сделать простой слайдер на HTML, CSS и JavaScript