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


Сравнительная таблица веса десятка крупнейших банковских сайтов России, средний вес главной страницы составляет 4,4 МБ (по состоянию на 15 мая 2017).


Банк Вес сайта в МБ
МКБ 1,3
ВТБ 1,7
ВТБ 24 1,8
Сбербанк 1,9
Альфабанк 2,8
Юникредит 3,6
Промсвязьбанк 5,2
Газпромбанк 5,3
Россельхозбанк 8,1
Открытие 12

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


Что такое CDN и для чего он нужен, этой аудитории объяснять не надо. Но, чтобы было понятно, что мы говорим об одном и том же, поясню.


Упрощённо говоря, это набор технологий, позволяющих пользователям сайтов получать контент в среднем в несколько раз быстрее простого взаимодействия «хостинг-клиент». Контентом может быть всё что угодно, от изображений и видео, до динамически создаваемых json для мобильного приложения и полностью сгенерированных страниц сайта. Происходит ускорение за счёт того, что контент пользователи получают не из единственного дата центра, в котором размещается сайт или сервис, а с ближайшей кеширующей точки CDN провайдера (ноды).




Пример 1: Вы находитесь в Петрозаводске, а ноды есть в Санкт-Петербурге и Москве, очевидно, что географически ближе Санкт-Петербург. Поэтому для вас быстрее будет получить контент из ноды в СПб.


Рисунок 1: Изображение с Яндекс.Карты


Важно, что под ближайшей точкой понимается не только географическое расположение ноды, но и её расположение в интернете, определяемое с помощью динамического протокола маршрутизации (BGP).



Пример 2: Вы всё ещё в Петрозаводске и открываете сайт, который находится в дата центре Петрозаводска.


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


Рисунок 2: Схема магистральной сети Ростелеком.


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


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


Какова разница в доставке контента в первом и втором примере с использованием технологии CDN и без?


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


Ходят легенды, что ещё в далёком 2008 году Amazon уже рассчитал суммарные годовые потери в $1,6 млрд на одну секунду дополнительного времени загрузки их сайта. Кстати, исследования показывают, что мы с вами уже через 6-10 секунд закроем страницу, открываемую с мобильного устройства, если она не откроется до того. И в этот момент встаёт вопрос – за что бороться? За скорость и конверсию или за красоту?


А хочется же чтобы на странице было видео с милыми котиками. Ну да, на сайте крупного банка видео с котиками, почему бы и нет. И вот запускаешь ты такой котика на сайт, он гуляет себе размером видео ролика в 3 МБ. И ещё одно видео с цветочками, самолётами, шахматами и уже не остановиться.



Одни решают вопрос просто – минимум графики, максимум текста. Это консервативный вариант, и из десятка сайтов крупнейших банков 40% пошли именно по нему. Другие следуют современным трендам сайтостроения и передачи эмоций, добавляют графику и динамичные объекты. Вследствие чего вес сайта увеличивается в 5-10 раз.


Как быть в этой ситуации?


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

Именно по такому пути мы и пошли в банке «Открытие», переведя статический контент наших сайтов на CDN компании МегаФон. В результате этого перехода мы ускорили загрузку нашего сайта в различных регионах страны от 2 до 4 раз. Сам по себе переход на использование CDN занял примерно 2 рабочих дня наших разработчиков после нескольких месяцев согласований архитектуры, тендеров, пилотных проектов и заключения договоров. «Гарантированная доступность веб-ресурсов становится обязательным бизнес-требованием для банков. CDN помогает решить сразу две важные задачи — повысить скорость работы и обеспечить дополнительный уровень безопасности от кибератак. Большая емкость сети доставки контента позволяет обработать запросы миллионов пользователей и одновременно противостоять флуд-атакам на транспортном и сетевом уровнях.


В случае решения от компании «МегаФон» защита обеспечивается в комбинации с ПАК «Периметр», что расширяет поверхность защиты ускоряемых веб-ресурсов до нескольких Тб/с и экранирует от атак на уровне приложений, — говорит руководитель отдела по развитию сети доставки контента ПАО «МегаФон» Алексей Сечкин,


Какие сложности нам пришлось преодолеть, до того как мы реализовали это решение?


Ведь рисков, потенциально влияющих на действующих бизнес, – огромное количество. А вдруг случится deface, и вместо того, чтобы увидеть баннер с актуальным продуктом, посетитель увидит баннер установленный злоумышленником с призывом пойти в банкоматы и срочно снять всю наличность?


Для этого есть средства проверки и защиты целостности доставляемого через CDN контента. Как, например, атрибут Subresource Integrity, который в 2016 году был предложен консорциумом W3C и уже поддерживается рядом браузеров. Его суть заключается в том, что при формировании html страницы на сервере происходит генерация ключей для каждого файла по безопасному алгоритму хеширования, а браузер при загрузке файлов через CDN сравнивает значения хешей и в случае совпадения разрешает их исполнение.


«У использования CDN есть один немаловажный риск – через подмену контента можно заражать клиентов, которые по сути полностью доверяют сайту. Поэтому при использовании сторонних услуг нужно обращать на этот фактор повышенное внимание. По сути эффективными являются следующие меры – включение в договор обязанностей поставщика сервиса не вносить изменения в контент без инициации изменений со стороны заказчика, двухфакторная аутентификация заказчика для управления контентом или автоматизация управления (во втором случае потребуется тщательный анализ защищенности API, предоставляемого сервис-провайдером).


Также можно реализовать мониторинг за изменениями в CDN собственными силами, — считает исполнительный директор по информационной безопасности ПАО Банк «ФК Открытие» Вячеслав Касимов. — Немаловажно также учесть сценарий DDoS-атаки на CDN (не приведет ли она к недоступности сайта в целом) и, в связи с этим, возможность быстрой реконфигурации основного сайта в некоторой минимальной комплектации с отсутствием зависимостей от CDN либо быстрого переключения на альтернативные доступные адреса CDN. Это обязательная потребность, так как совершенных систем защиты от DDoS нет, и расчитывать на 100% защиту сервис-провайдера не следует».


Как же выбрать лучшего и надежного CDN провайдера?


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


Наша офисная сеть покрывает всю территорию России от Выборга до Южно-Сахалинска и от Мурманска до Сочи, поэтому мы попросили наших сотрудников в нескольких десятках городов запустить этот скрипт и прислать его результаты.


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


Дмитрий Фёдоров, директор по развитию интернет технологий ПАО Банк «ФК Открытие»

Поделиться с друзьями
-->

Комментарии (17)


  1. ookami_kb
    15.05.2017 16:50
    +7

    Я не совсем понял, это вы хвастаетесь тем, что у вас главная страница весит 12 МБ?!


    И не проще ли перед тем, как подключать CDN, оптимизировать страницу, как минимум, избавившись от инлайновых стилей, минимизировав скрипты, выкинув комментарии?


    1. DrPass
      15.05.2017 17:04
      +1

      И вопрос к автору, сколько там контента в случае банковского сайта может тянуться через CDN? Табличка стилей да скриптовый движок? Это дай боже 5% от тех 12 Мб.


      1. Otkritie
        15.05.2017 17:34

        Через CDN сейчас раздаётся основной тяжелый контент, изображения и видео, которые и составляют основной вес страницы, т.е. как раз наоборот, 5% раздаётся не через CDN.


        1. DrPass
          15.05.2017 23:16
          +2

          Скажите, а в этом контенте есть что-либо, нужное вашим клиентам, и что нельзя было бы заменить на текст + оформление CSS без потери функциональности?


          1. staticlab
            16.05.2017 11:18
            +1

            После того, как Татьяныч нарисовал новый дизайн Альфы, все остальные банки решили, что без видео на главной клиент никак не проживёт.


    1. Denai
      15.05.2017 17:10

      Просто картинки нормально пожать — уже даст больший выигрыш, чем предложенные меры. Но вообще у них на главной видео на 4,6МБ, оно даёт основу весу.

      Но грузится действительно быстро, ибо само видео на cdn


    1. Pakos
      16.05.2017 09:26

      "Вы находитесь в Петрозаводске с мобильным интернетом, у вас появляется непреодолимое желание закрыть счёт в банке Открытие"".
      Хвастаются отставание от лидера на порядок и в 3 раза от среднего, блог компании, всё такое, но на техническом сайте продвигать себя таким способом… разве что в попытке найти специалиста, могущего исправить этот ужас (бесплатные советы уже нашли).


  1. Aingis
    15.05.2017 17:15

    Такое ощущение, что потерялось форматирование при вставке текста из пресс-релиза. Да, хабраредактор капризен.


    1. Otkritie
      15.05.2017 17:35
      -2

      Абзацы потерялись, да, поправлю чуть позже.


  1. m0xf
    15.05.2017 17:17
    +2

    Пробовали через 3G интернет открывать? А сайт очень не оптимизирован. Возьмём произвольную картинку ( https://cdn.open.ru/storage/main_block/39975/preview_picture.png ), сейчас она занимает 1Мб. Сожмём её на tinypng.com. Как думаете, сколько получится? 300Кб! И это без видимой потери качества. Если всё остальное оптимизировать, то никакой CDN не понадобится.


    1. staticlab
      15.05.2017 17:25

      По идее, такую картинку надо вообще в jpg передавать.


      1. Otkritie
        16.05.2017 09:55

        Упущение, да. Спасибо, что обратили внимание на это. PNG заменён на оптимизированный JPEG.


  1. ValdikSS
    15.05.2017 18:56

    Вот, например, больной пример. Страница входа в Альфа-Банк. 2.3 Мб, загружается на быстром для Непала соединении, 1 минуту (!).

    Один из файлов стилей — 250 Кб (это стили, минимизированные, куда же их столько?), бандл Javascript — 1.2 Мб (!).

    Соответственно, войти в Альфа-Банк из Индии или Непала — практически невозможное занятие. В большинстве случаев загрузка будет биться на середине, ничего работать не будет, перезагрузка будет приводить к тому, что все эти стили и бандлы загружаются заново. Короче, мой собственный опыт говорит, что если не хочешь повыдирать на голове волосы, для входа в А-Б надо заранее подготовиться морально и найти точку доступа с самым быстрым интернетом.

    Но это только один пример, просто самый близкий мне, так как много раз намучился. А по сути таких сайтов сейчас более половины всего интернета (по ощущениям).

    Во второй половине 90-х сайт, который загружал 1Мб, считался неимоверно здоровым и прожорливым. А тут только страница с двумя полями 2.2 Мб.

    В общем, понимаю, это все сложно понять людям, которые сидят в офисах в центре Москвы/Нью-Йорка/Сан-Франциско на 1-10 Гб каналах.

    https://geektimes.ru/post/287380/#comment_9969432


    1. immaculate
      15.05.2017 21:27
      +5

      Ага, я сюда зашел, чтобы снова это повторить. Но тут ситуация еще хуже. Надо сразу для себя отметить: дела надо устраивать так, чтобы при поездке в Непал, Индию, Шри-Ланку, Доминикану (из тех стран, где я был, в этих самый плохой интернет), ни в коем случае не понадобился интернет-банк «Открытие». Потому что вряд ли удастся его открыть.


  1. vikarti
    16.05.2017 04:01
    +2

    При этом:
    проводной домашний интернет-канал.
    главная страница Тинькова:
    — 800 Kb, загрузка 3 секунды (+еще 2 какие то мелочи подгружаются не мешающие пользоваться)
    — Использования CDN в явном виде не — обнаружено (картинки/css со static.tinkoff.ru идут, трейсроут показывает что живет этот static.tinkoff.ru где то в Москве и похоже за Qrator'ом, был бы CDN).
    Вход с нее в интернет-банк: 4 секунды и 200 Kb (да, куча всего в кеше лежит уже)
    При этом если канал тупой совсем — вероятно он мобильный, есть вполне полнофункциональное приложение.

    Так ли нужен CDN интернет-банку если о скорости команда разработки позаботилась и так?

    А пример с Непалом… а искать что-то живое вроде Globax / TelliNet (старые спутниковые «ускорители» — предзапросы, форсированный кеш и так далее)


  1. VolCh
    16.05.2017 08:38

    Сколько времени проходит от нажатия кнопки "сделай мнеразместить новую версию сайта" до получения её пользователями из того же Владивостока?


  1. immaculate
    16.05.2017 11:40
    +3

    Честно говоря, с утра подумал, и начал чуточку сомневаться, правильный ли банк выбрал для открытия счета. Если бы данная статься была в духе: «У других банков страницы весят несколько мегабайт, а мы в Открытии подумали, напряглись, и сделали не хуже, но уложились в 120 Кб», я бы откровенно был рад.


    Я несколько раз писал, что в Индии и Непале почти невозможно открыть страницу Альфа-Банка, например. Она слишком тяжелая, и на медленном канале рвет соединение либо сервер, либо браузер, либо просто устаешь ждать. Иногда в Индии требуется несколько дней попыток в разных местах, чтобы открыть наконец страницу А-Б.


    Ваш же сайт в 5 раз тяжелее. То есть можно сразу ставить крест на попытках пользоваться им на Шри-Ланке, в Индии и Непале. В этих странах интернет такой, что надо ориентироваться в лучшем случае на скорость Edge, регулярные разрывы связи, большие потери пакетов (то есть, просто подождать пока загрузится бандл размером в 1+ Мб не получится — он скорее всего никогда до конца не загрузится).


    Хочу ли я пользоваться банком, который не будет работать в других странах? Что говорят гигантские размеры страниц о разработчиках сайта? По-моему, ответы очевидны. :(