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

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

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

Отчёт о скорости загрузки сайта на композитной технологии.

По статистике, около 37% сайтов выпадают из поисковой выдачи из-за долгой загрузки страницы. У этого есть несколько причин:

  • неоптимальный код;
  • много «тяжёлых» элементов на странице.

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

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


Как видно, время загрузки уменьшилось чуть ли не в 5, а то и в 10 раз.

Всё гениальное — просто!

Для того, чтобы начать использовать композитную технологию на своём сайте, надо разметить на страницах сайта динамические зоны. Есть 2 способа сделать это:

  • выделить как динамическую зону весь шаблон компонента;
  • в шаблоне компонента выделить конкретные зоны.

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

$this->setFrameMode(true);

Второй же намного интересней. С помощью него мы можем разметить только конкретные области страницы:

$frame = $this->createFrame("element", false)->begin(); // {1}
$frame->beginStub(); // {2}
$frame->end(); // {3}

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

Разберём второй способ на примере. Допустим, у нас есть шаблон каталога товаров на главной странице:

<? if(!defined("B_PROLOG_INCLUDED") || B_PROLOG_INCLUDED!==true)die(); ?>
<div id="catalog">
    <? foreach($arResult["ITEMS"] as $arElement){ ?>
        <div>
            <div><?= $arElement["NAME"]; ?></div>
            <div><img src="<?= $arElement["PICTURE"];?>"></div>
            <div><button id="item<?= $arElement["ID"]; ?>">Купить</button></div>
        </div>
    <? } ?>
</div>

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

<? if(!defined("B_PROLOG_INCLUDED") || B_PROLOG_INCLUDED!==true)die(); ?>
<div id="catalog">
    <? $frame = $this->createFrame("catalog", false)->begin(); ?>
        <? foreach($arResult["ITEMS"] as $arElement){ ?>
            <div>
                <div><?= $arElement["NAME"]; ?></div>
                <div><img src="<?= $arElement["PICTURE"];?>"></div>
                <div><button id="item<?= $arElement["ID"]; ?>">Купить</button></div>
            </div>
        <? } ?>
    <? $frame->beginStub(); ?>
        Загрузка...
    <? $frame->end(); ?>
</div>

В этом примере у метода $this->createFrame мы указали первым параметром ID элемента, чтобы подгружаемые данные заменялись именно в нём.

Из кода видно, что загрузка страницы происходит в 2 этапа. На первом этапе отдаётся статическая часть страницы, вторым этапом с помощью AJAX-запроса загружаются динамические зоны. Благодаря этому тяжеловесные операции выполняются в фоне; простой пользователь и не заметит разницы, чего не скажешь о машинах. Поэтому поисковики, видя, что сайт загружается мгновенно, будут поднимать ваш сайт всё выше и выше в выдаче.

Я почему вредный был? Потому что у меня композитного сайта не было! А теперь я сразу добреть начну. И каких-нибудь клиентов заведу. Чтоб жить веселее. Они на сайт приходят, радуются... Э-эх!

Похожие посты

Мы подобрали посты, которые могут быть вам интересны

Комментарии

Тут без вас никак. Поделитесь с нами вашими мыслями

Горячие вакансии