О технологии «Композитный сайт»

7 Февраля 2018

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

Немного мат-части: понятие «динамичный контент» не совпадает с понятием «динамичная информация», которое используется в Bitrix Framework. Динамичный контент - это то, что:

  • обновляется чаще чем Динамичная информация, не реже чем раз в несколько минут. Динамичный контент - это не Новости, не Блоги.
  • может отличаться по правам пользователей. Например, корзина.
  • должно выдавать разные данные на каждый хит. Например, баннеры.
Примеры динамичного контента:
  • Корзина покупателя
  • Отображение информации, меняющейся с течением времени. Например, секундомер вида "До события N осталось *** часов ** минут ** секунд" или счётчик времени у новости: "N минут назад".

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

Есть динамичная страница, создаваемая компонентами CMS. Компоненты адаптированы к применению технологии «Композитный сайт».


На странице создано две динамичные зоны:
  1. Корзина покупателя и авторизация.
  2. Компонент Top элементов каталога (bitrix:catalog.top).

Статическая часть - это всё то, что не закрашено красными прямоугольниками - сохраняется в виде html кода страницы. Браузер пользователя посылает клиентский запрос на веб-сервер с адресом данной страницы. Рассмотрим поведение системы при отключенной и включенной технологии.

Технология «Композитный сайт» отключена. Веб-сервер, получив запрос, начинает собирать динамичную страницу, в ходе которого выполняются действия:

  • Проверка уровня прав доступа конкретного пользователя.
  • Подключение файлов шаблона сайта и WORK_AREA с выполнением php скриптов компонентов, расположенных в них, с учётом уровня прав пользователя и других возможных условий формирования страницы (расчёт корзины для данного пользователя, вывод цены товара, в нашем случае).
  • Система обращается к Базе данных, производит действия, определённые конкретными компонентами (выборка данных, их сортировка, обращение к файлам CMS и веб-сервера и другие).
  • Используя результаты работы компонентов, CMS производит формирование html кода для передачи на браузер и собственно передачу кода браузеру пользователя.

Время от запроса и до получения пользователем страницы может достигать нескольких секунд, это зависит от содержания страницы: числа и сложности php-кода компонентов. В рассматриваемом и очень простом случае время формирования страницы - 483 ms. Из которых собственно отображение страницы занимает примерно 26 ms. Потом грузятся стили, файлы и реально вся страница видна на примерно 750 ms.

Теперь включаем технологию «Композитный сайт». Для самого первого пользователя, зашедшего на страницу, действия CMS абсолютно аналогичны:

  • Система проверяет наличие прав у пользователя на получение страницы, подключённость страницы к системе композитного кеша, наличие собственно файла кеша. Если хотя бы одно из условий не сработало, то идёт формирование динамической страницы обычным способом.
  • Подключение файлов шаблона сайта и WORK_AREA с выполнением php скриптов компонентов, расположенных в них, с учётом уровня прав пользователя и других возможных условий формирования страницы (расчёт корзины для данного пользователя, вывод топа каталога товаров, в нашем случае).
  • Система обращается к Базе данных, производит действия, определённые конкретными компонентами (выборка данных, их сортировка, обращение к файлам CMS и веб-сервера и другие).
  • Используя результаты работы программного скрипта, CMS производит формирование html кода для передачи на браузер и собственно передачу кода браузеру пользователя.

Пользователь получает страницу за те же 750 ms. Но для веб-сервера действия не закончены. Он, в фоновом режиме в конце выполнения страницы на событие OnEndBufferContent:

  • заменяет код динамических зон на заглушки, которые определяет программист разметкой;
  • добавляет JS загрузчик,
  • высчитывает контрольную сумму страницы,
  • сохраняет на свой жёсткий диск сформированный для первого пользователя html-код страницы.
Для второго и последующих пользователей действия системы таковы:
  • Браузер пользователя посылает клиентский запрос на веб-сервер с адресом данной страницы.
  • Система проверяет наличие прав у пользователя на получение страницы, подключённость страницы к системе композитного кеша, наличие собственно файла кеша. Если условия совпали, то выполняются параллельные действия:
    • Веб сервер отправляет пользователю, сохранённый на диске html-код страницы.
    и
    • JS загрузчик посылает фоновый для пользователя запрос на актуальные данные.
    • Получив второй запрос веб-сервер в фоновом для пользователя режиме исполняет страницу.
    • В конце выполнения страницы на событие OnEndBufferContent:
    • Считает контрольную сумму вновь созданной страницы.
    • Обновляет страницу в композитном кеше, если сумма не совпала.
    • Собирает динамику, отбрасывая статическую часть.
    • Собирает некоторые дополнительные данные.
    • Загрузчику отдаётся JSON.
    • Загрузчик расставляет контент и выполняет JS.

Пользователь получает сохранённую страницу за 15 ms из которых собственно отображение страницы занимает 2 ms. Потом грузятся стили, картинки и в результате страница полностью отображается за 290 ms. Актуальные данные приходят к нему через 550 ms, но подмены старых данных на актуальные, он не замечает.

Как это выглядит в коде?

Если просмотреть код страницы, то видим в самом начале страницы скрипт фонового хита:


А в самом коде страницы зоны, куда будет вставляться код, который придёт после фонового запроса:


где
1) зона для авторизации, без статической части;
2) зона для корзины с полученными из localstorage данными, которые будут показываться до получения динамических данных с сервера.

Как узнать, внедрен на сайт «композит» или нет?

Откройте браузер Chrome в режиме "инкогнито", нажмите F12 и откройте вкладку Network. Обновите страницу сайта несколько раз. Если вы видите 304 Not modified в колонке Status у первой строки — html-документа, то все работает.

Как внедрить «композит» на сайт?

Это займет от 1 часа до 4-х рабочих дней. В любом случае самостоятельно это сделать не получится, если вы не обладаете специальными знаниями, нужно будет обратиться к партнеру, например, CADesign, с полученной и подтвержденной компетенцией. Еще отметим, что после внедрения «композита» потребуется какое-то время на тестирование и отладку, т.к. могут вылезти различные «баги». Пробуйте новую технологию "Композитный сайт": http://www.1c-bitrix.ru/composite/ это безопасно и эффективно!



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