Bitrix - Композитный сайт
Войти

Bitrix - Композитный сайт

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

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

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

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

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

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

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

1
2
3
4
5
 <?php 

  $this->setFrameMode(true); 

?>

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

1
2
3
4
5
6
7
 <?php 

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

?>

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 <?php 

<? 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>

?>

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
 <?php 

 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-запроса загружаются динамические зоны. Благодаря этому тяжеловесные операции выполняются в фоне; простой пользователь и не заметит разницы, чего не скажешь о машинах. Поэтому поисковики, видя, что сайт загружается мгновенно, будут поднимать ваш сайт всё выше и выше в выдаче.

Ссылки по теме:

  1. 1. g-rain-design.ru
Теги:
php