Почему больше нельзя доверять CDN: храните библиотеки локально

Еще несколько лет назад подключение популярных библиотек через CDN считалось хорошей практикой. Разработчики подключали jQuery, Bootstrap, Google Fonts, Vue.js и другие ресурсы напрямую с серверов крупных компаний.

Плюсы были очевидны:

• снижение нагрузки на собственный сервер;
• быстрая доставка файлов пользователям;
• простота обновления библиотек;
• экономия дискового пространства.

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

Сегодня правило стало простым:

Все критически важные библиотеки должны храниться на вашем сервере.

Проблемы с Google Fonts

Самый известный пример — Google Fonts.

Тысячи сайтов до сих пор используют подключение вида:

<link rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=Roboto">

На практике это приводит к следующим проблемам:

• шрифты могут загружаться медленно;
• пользователь видит системный шрифт вместо дизайнерского;
• увеличивается время отрисовки страницы;
• возникают ошибки в консоли браузера;
• сайт начинает выглядеть по-разному для разных пользователей.

После начала массовых ограничений многие владельцы сайтов заметили, что страницы стали загружаться быстрее именно после переноса шрифтов на собственный сервер.

Кроме того, локальное хранение шрифтов положительно влияет на показатели Core Web Vitals.

jQuery CDN тоже может стать проблемой

До сих пор можно встретить код:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>

Если CDN недоступен или отвечает медленно, перестает работать:

• меню сайта;
• формы обратной связи;
• слайдеры;
• модальные окна;
• AJAX-запросы.

Для пользователя сайт выглядит сломанным, хотя сервер полностью исправен.

Особенно часто такие проблемы встречаются на старых проектах, которые создавались 5–10 лет назад.

Проблемы с Bootstrap CDN

Многие сайты используют Bootstrap через jsDelivr или CDNJS:

<link rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bootstrap@5/dist/css/bootstrap.min.css">

При недоступности CDN сайт не перестает открываться, но полностью ломается визуально:

• пропадают стили;
• съезжает верстка;
• перестают работать компоненты Bootstrap;
• мобильная версия становится нечитаемой.

Пользователь видит набор текста без оформления и обычно сразу закрывает страницу.

Cloudflare CDN — не абсолютная гарантия

Многие считают, что если ресурс размещен на Cloudflare, то проблем не будет.

На практике возникают ситуации:

• локальные сбои маршрутизации;
• проблемы отдельных провайдеров;
• ограничения доступа из отдельных стран;
• массовые сбои самого Cloudflare.

Если ваш сайт критически зависит от внешнего CDN, даже кратковременный сбой может привести к потере заявок и клиентов.

Какие библиотеки стоит перенести на свой сервер

В первую очередь рекомендуется хранить локально:

• Google Fonts;
• jQuery;
• Bootstrap CSS и JS;
• Vue.js;
• React;
• Swiper;
• Lightbox;
• Font Awesome;
• Chart.js;
• Moment.js;
• Inputmask;
• любые файлы с CDNJS;
• любые файлы с jsDelivr.

Современные серверы и хостинги без проблем справляются с хранением таких файлов. Чаще всего весь набор фронтенд-библиотек занимает меньше места, чем одна фотография высокого разрешения.

Дополнительные преимущества локального хранения

• полный контроль над версиями библиотек;
• отсутствие неожиданного обновления CDN;
• предсказуемая работа сайта;
• снижение количества внешних запросов;
• улучшение Core Web Vitals;
• повышение отказоустойчивости проекта.

Кроме того, локальные файлы проще включить в резервное копирование проекта. При переносе сайта на другой сервер ничего дополнительно искать и скачивать не потребуется.

Вывод

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

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

Поэтому практическое правило простое:

Все шрифты, JavaScript-библиотеки и CSS-файлы, необходимые для работы сайта, должны храниться локально на вашем сервере. CDN можно использовать только как дополнительный источник, но не как основной.

Это повысит стабильность работы сайта, улучшит скорость загрузки и избавит от неприятных сюрпризов, связанных с блокировками и сбоями внешних сервисов.