Cdn какие данные отправляются от пользователя. Что такое CDN (сеть доставки контента) и каковы преимущества использования CDN. Ускорьте время загрузки

27.01.2021

От автора: если вы давно работаете в сфере разработки, вы знаете, что главная проблема в интернете – это скорость. Все просто: скорость имеет значение, и чем быстрее, тем лучше. Простой способ повысить производительность – использовать CDN. Мы уже поднимали эту тему несколько раз на сайте CSS-Tricks. Простота в том, что вам не нужно переписывать базу данных и вручную редактировать контент, однако многие из нас не уделяют должного внимания производительности в этой области. Хостинг, серверы и cPanel, боже мой!

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

В этой статье мы разберем процесс настройки CDN на пользовательском веб-приложении, после чего узнаем про пару фишек, которые помогут выжать максимум из CDN. Как я и сказал, настройка должна быть легкой, так что давайте начнем и сделаем веб быстрее!

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

Вы потеряли меня на CDN

Не повредит, если мы рассмотрим основные понятия: что такое CDN, для чего они нужны. Начнем с этого.

JavaScript. Быстрый старт

CDN вытягивает статические файлы с сервера вашего сайта и кэширует их на своих серверах. Когда браузер обращается к вашему сайту, статический контент подгружается через CDN, а не с вашего сайта. Так получается намного быстрее, так как серверы CDN расположены по всему миру. Сам CDN работает по принципу прокси, определяя ближайший к пользователю сервер, что обеспечивает более быструю и удобную доставку контента. Аббревиатура расшифровывается как Content Delivery Network или сеть доставки контента.

Так как браузер определяет, когда загружать файлы через CDN, а не с сервера сайта? URL статических файлов переписывается, чтобы он вел на CDN.

К примеру, мы хотим настроить CDN на поддомен. На сайте CSS-Tricks адрес может быть таким cdn.css-tricks.com. Соответственно, все ссылки для файлов будут идти на поддомен.

Грубо говоря, адреса файлов на вашем сайте:

http://www.css-tricks.com/image.jpg http://www.css-tricks.com/style.css http://www.css-tricks.com/script.js

http : //www.css-tricks.com/image.jpg

http : //www.css-tricks.com/style.css

http : //www.css-tricks.com/script.js

… станут такими:

http://cdn.css-tricks.com/image.jpg http://cdn.css-tricks.com/style.css http://cdn.css-tricks.com/script.js

http : //cdn.css-tricks.com/image.jpg

http : //cdn.css-tricks.com/style.css

http : //cdn.css-tricks.com/script.js

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

Погодите, два сервера на одном сайте?

В определенной степени, это так, но это не значит, что вы будете управлять двумя серверами.

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

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

Как установить CDN на пользовательское приложение

Сервисов много, но чаще других используются Amazon AWS и MaxCDN . Сегодня мы рассмотрим сервис MaxCDN.

Шаг 1: выберите CDN и зарегистрируйте ваш сайт

Если вы решили, что для вашего сайта понадобится CDN, вам понадобится зарегистрироваться. Способов много, очень много, но чтобы не взвешивать плюсы и минусы каждого (хорошая тема для следующей статьи), я приведу ряд сервисов:

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

Шаг 2: создайте URL на вашу CDN

URL CDN – тот адрес, по которому будут скачиваться все ваши файлы после настройки. Есть хорошее правило – использовать простые имена в URL, чтобы можно было легко искать файлы и заменить адреса всех существующих файлов в базе данных.

Как и для других поддоменов, необходимо будет указать cname-запись в настройках DNS вашего хоста.

Шаг 3: направьте ваши файлы на CDN

Рассмотрим, как можно создать переменную для CDN адреса, и как ее можно использовать для программной вставки перед URL статических ресурсов. Для чего это нужно: (1) так сложнее допустить ошибки в разметке и (2) так легче работать с URL, которые нам нужно будет менять.

Для этого нам понадобится глобальная переменная для CDN, которую мы будем присоединять слева к URL статических ресурсов. Переменную будем создавать как в PHP, так и в JS, чтобы потом было легче работать. Также эта переменная поможет нам легко выключить CDN, если мы этого захотим. Нужно будет просто заменить значение на /, чтобы вернуть адрес на наш сервер.

Обратите внимание, что следующие примеры – это лишь примеры, не стоит использовать их. Реальные примеры использования могут отличаться.

Hello World! /* Let’s define a javascript global for using the CDN inside scripts */ var cdnURL = ""; js/main.js">