Введение
Несколько лет назад, просматривая Интернет, я наткнулся на новый веб-сайт электронной коммерции. Я заметил, что изображения на сайте загружаются не быстро. Я обновил страницу и повторил попытку пару раз. Наконец, через десять секунд я смог увидеть отрендеренную веб-страницу с изображениями.
Сначала я думал, что у меня плохое интернет-соединение, но скорость загрузки из Интернета была достаточно хорошей. Я также смог просматривать видео на Youtube в HD. Это вызвало у меня любопытство узнать, почему веб-сайт электронной коммерции не может быстро загружать изображения.
Любопытный инженер внутри меня решил исследовать причину медленной работы сайта. Я быстро открыл инструменты разработчика Google и перешел на вкладку «Сеть» для анализа. Прочитав пару сообщений Stack Overflow, мы пришли к выводу, что сайт не использует сеть доставки контента (CDN).
В этой статье мы разберемся, что такое CDN, зачем он нужен и как он работает. Кроме того, мы увидим, как веб-сайты могут ускорить доставку своего контента, используя CDN.
Фон
Плохая работа сайта не произвела на меня хорошего впечатления. И из-за его низкой производительности я решил, что больше не буду делать покупки на сайте.
В современном мире производительность веб-сайта имеет первостепенное значение. Трудно удержать пользователей, если ваш сайт показывает время простоя или медленную загрузку. Это применимо ко всем предприятиям. Многим веб-сайтам даже пришлось закрыть свои магазины, поскольку их конкуренты доставляли веб-страницы быстрее, чем они.
Прежде чем углубиться в детали того, что такое сеть доставки контента (CDN), мы обновим наши основы. Давайте разберемся, как веб-страницы отображаются на наших устройствах.
На приведенной выше диаграмме показано, как Клиент запрашивает страницу и, наконец, показывает ее пользователям. Ниже приведены подробности: -
- Клиент (мобильное приложение/браузер) отправляет HTTP-запрос на веб-сервер.
- Сервер обрабатывает запрос, выполняет проверки и проверки, извлекает данные из базы данных, жесткого диска или хранилища больших двоичных объектов. Далее он формирует ответ.
- Клиент читает ответ. Обычно ответ представляет собой страницу HTML, которая возвращается клиенту.
- Наконец, пользователям отображается страница HTML.
HTML-страница также может содержать изображения, гифки, видео и т. д. Таким образом, вместе с документом Клиент несет дополнительную ответственность за отображение этих данных.
Клиенту также нужны файлы Javascript, чтобы сделать страницу динамичной. Кроме того, для оформления веб-страницы требуются файлы CSS. На вкладке «Сеть» инструментов разработчика вы увидите параметры, показанные на изображении ниже.
Если вы выберете JS в качестве опции, вы сможете просмотреть все запросы и ответы для файлов Javascript. То же самое относится и к другим типам, таким как CSS, Img, Doc и т. д.
Мы можем разделить контент на любой веб-странице на два типа — статический и динамический.
Статический
Если контент не меняется часто, то он становится статичным. Как правило, изображения, файлы Javascript и CSS меняются нечасто.
Кроме того, даже если эти файлы изменятся, мы не будем показывать неверные данные пользователям. В случае каких-либо улучшений файла изменится только взаимодействие с пользователем или внешний вид веб-сайта.
В некоторых случаях такие файлы сохраняются в файловой системе сервера. Другими словами, веб-сервер извлекает эти файлы с жесткого диска и отправляет их обратно клиентам. Часто эти файлы сохраняются в хранилище BLOB-объектов, таком как S3, хранилище BLOB-объектов Azure и т. д.
Размер статических данных может быть в КБ, МБ или ГБ. Файлы фильмов имеют большой размер и потребляют значительную пропускную способность.
Динамический
Данные, которые часто изменяются, являются динамическими. Например: - Количество зрителей, просматривающих видео на Youtube. Комментарии, лайки или публикации в социальных сетях.
Как правило, сервер хранит динамические данные в базе данных. В зависимости от варианта использования это может быть SQL или NoSQL. Для каждого запроса сервер запрашивает эти данные, а затем передает их обратно в ответ. В большинстве случаев для сериализации данных используется JSON.
Размер динамических данных невелик по сравнению со статическими данными, такими как фильмы, видео или изображения. Это порядка нескольких КБ. Сервер также может хранить эти данные во внешнем кеше, таком как Redis или MemCached, для повышения эффективности.
Что влияет на производительность веб-сайта?
Задержка
Задержка — это время, необходимое веб-сайту для полного отображения всех данных. В случае увеличения задержки пользователям приходится ждать больше времени. Чем больше пользователей придется ждать, тем меньше будет коэффициент конверсии.
Веб-сайты, которые отображают страницы с меньшей задержкой, более производительны. Эти веб-сайты будут показывать страницу пользователю в течение нескольких миллисекунд.
Задержка зависит от множества факторов. Он включает в себя следующее: -
- Расстояние между пользователем и сервером
- Время обработки сервера
- Время, затраченное на получение данных из базы данных
Доступность
Если сервер веб-сайта выйдет из строя, клиент не сможет просматривать веб-страницу. Сервер также должен быть в состоянии справиться с растущей нагрузкой.
Если веб-сайт не масштабируется, время обработки сервером увеличится и увеличится задержка. В современном мире простои недопустимы.
Поскольку веб-сайты являются глобальными, ожидается, что они будут работать 24*7*365. Пользователи хотят без проблем смотреть видео, делать покупки в Интернете, отправлять сообщения своим друзьям и т. д.
Что такое сеть доставки контента?
Проблема
Предположим, мы запускаем новое приложение для коротких видео, такое как TikTok. Мы создаем первую версию веб-сайта и развертываем ее в Лос-Анджелесе, США. Наш веб-сайт доступен по всему миру и постепенно начинает набирать обороты.
Мы замечаем, что получаем трафик из Европы, Ближнего Востока и Индии. По мере роста трафика мы масштабируемся по горизонтали и добавляем больше серверов. Однако пользователи из Индии жалуются на более длительное время загрузки. Пользователи из США не сталкиваются с той же проблемой. Почему это происходит?
Как видно выше, наш сервер развернут в Лос-Анджелесе, США. Для пользователей в Индии сетевой пакет должен проходить большее расстояние по сравнению с пользователями в США. Чем больше расстояние, тем пропорционально больше будет затраченное время. Если время, необходимое для получения данных в США, составляет 5 миллисекунд, то для индийских пользователей это займет 35 миллисекунд (расстояние равно 7x).
То же самое относится и к пользователям в Европе. Время загрузки веб-сайта в ЕС будет больше, чем время загрузки в США. Это будет близко к 3,5x.
Кроме того, видеофайлы на наших серверах не будут часто меняться. В случае, если видео станет вирусным, к одному и тому же видеофайлу будут обращаться пользователи по всему миру. Проблема усугубится, если размер видеофайла будет больше, так как пропускная способность сети станет узким местом.
Решение
Вышеупомянутая проблема была бы решена, если бы мы уменьшили расстояние между клиентом и сервером. А поскольку видеофайл меняется нечасто, у нас может быть механизм кэширования.
При кэшировании мы запросим файл с нашего сервера один раз, а последующие запросы будут обслуживаться кешем. Это снизит общую нагрузку на сервер.
Сети доставки контента (CDN) применяют это решение и ускоряют доставку контента для веб-сайтов. Наш основной веб-сервер также называется сервером Origin. CDN состоят из группы серверов, которые географически распределены. Эти серверы также называются серверами точки присутствия (POP). А местоположения, в которых присутствуют POP-серверы, называются пограничными местоположениями.
Серверы POP обслуживают контент для пользователей, проживающих в одном и том же географическом месте. Например: - POP-сервер в Европе будет обслуживать данные для европейских пользователей. Индийских пользователей будет обслуживать POP-сервер, расположенный в Индии.
Аналогия
Возьмем пример снятия наличных в банке. Представьте, что было бы, если бы не банкоматы? В отсутствие банкоматов у банков были бы длинные очереди. Нам потребовалось бы много времени, чтобы получить деньги. Кроме того, в праздничные дни у людей не было возможности снимать наличные.
Банкоматы в разных местах, таких как станции метро, рестораны, аэропорты и т. д., обеспечивают отсутствие длинных очередей в банках. Люди могут снимать деньги по своему усмотрению. Кроме того, люди могут пойти к ближайшему банкомату вместо того, чтобы идти в банк (расстояние может быть больше).
Вы можете думать о банках как о исходных серверах и банкоматах как о сетях CDN. CDN находятся недалеко от местоположения пользователя. Они территориально распределены и снижают нагрузку на сервер Origin. Кроме того, они улучшают доступность веб-сайта, обрабатывая трафик для статического контента.
Работа CDN
На приведенной ниже диаграмме показана работа на высоком уровне того, что происходит, когда вы загружаете веб-сайт в свой браузер:
- Браузер отправляет запрос в DNS для поиска IP-адреса.
- DNS-сервер ответит адресом ближайшего CDN-сервера.
- Браузер отправит запрос на сервер CDN (POP) для получения данных.
- Сервер CDN проверит, существуют ли данные (изображение, js, css, видео и т. д.) в его кеше.
- Если данных не существует, сервер POP отправит запрос на сервер Origin для получения контента.
- Позже сервер POP сохранит содержимое и отправит данные обратно пользователю.
- Пользователи CDN также могут установить TTL (время жизни) для содержимого. Например: - TTL 15 минут для файла изображения. Сервер CDN будет отправлять одни и те же данные пользователям до истечения срока их действия.
- Как только серверы CDN обнаружат, что контент устарел, он повторно загрузит его с серверов Origin.
Преимущества использования CDN
Производительность сайта
Клиенты получают статические данные (изображения, видео и т. д.) из CDN, а не с сервера Origin. Серверы CDN географически расположены близко к пользователям. По мере уменьшения расстояния сокращается и время на получение данных. Это приводит к значительному улучшению времени загрузки сайта.
Веб-сайты с более быстрым временем загрузки улучшают взаимодействие с пользователем. Пользователи больше склоняются к продуктам, которые эффективны и производительны. Например: - сравните Google Chrome с Internet Explorer.
Доступность
Серверы CDN берут на себя большую часть нагрузки на сайт. Поскольку серверы CDN действуют как кэши, исходный сервер защищен от всплесков трафика. Поскольку сервер Origin имеет меньшую нагрузку, меньше шансов, что этот сервер выйдет из строя.
Общая доступность веб-сайта улучшается. В случае региональных всплесков трафика серверы CDN в соответствующих регионах масштабируются и справляются с растущей нагрузкой.
Пропускная способность
Основными расходами веб-сайта являются затраты на потребление полосы пропускания. Поскольку CDN обрабатывают трафик, объем данных, предоставляемых серверами Origin, значительно сокращается. Это помогает снизить стоимость полосы пропускания для владельцев веб-сайтов.
Краткое содержание
- Сеть доставки контента состоит из набора серверов, расположенных географически близко к пользователям, для ускорения доставки контента веб-сайта.
- Браузеры или мобильные приложения запрашивают статические данные из CDN, а не с сервера Origin.
- CDN получают данные с серверов Origin и кэшируют их. Последующие запросы обслуживаются с сервера CDN.
- Основными преимуществами CDN являются повышение производительности веб-сайта, снижение затрат на потребление полосы пропускания и повышение доступности веб-сайта.
Использованная литература:-
Повышение уровня кодирования
Спасибо, что являетесь частью нашего сообщества! Перед тем, как ты уйдешь:
- 👏 Хлопайте за историю и подписывайтесь на автора 👉
- 📰 Смотрите больше контента в публикации Level Up Coding
- 🔔 Подписывайтесь на нас: Twitter | ЛинкедИн | "Новостная рассылка"
🚀👉 Присоединяйтесь к коллективу талантов Level Up и найдите прекрасную работу
