Fast Blocks (ленивые блоки, лёгкая витрина, мобильный Page Speed)

Половину мобильной страницы выбрасывают ещё до того, как её увидят

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

Fast Blocks это прекращает.

Две вещи, обе замерены

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

2. Тяжёлые блоки грузятся при прокрутке. Отметьте товарные скроллеры, полосы брендов и баннеры, которые стоят ниже первого экрана. Они уходят из первого ответа целиком и приезжают, когда посетитель к ним приближается, а место держит скелетон.

Что это даёт в цифрах

Ленивыми отмечены одиннадцать блоков ниже первого экрана, ещё три скрыты на телефоне. На другой витрине одни только галочки видимости уменьшили ответ для телефона с 371 КБ до 275 КБ, больше ничего не меняли.

Меньше разметки означает меньше скачивать, меньше разбирать и меньше держать в памяти дешёвого телефона. Это ровно та часть Core Web Vitals, которую тема сама по себе не чинит.

Скелетон повторяет форму блока

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

Он отказывается ломать ваши страницы

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

Устройство входит в ключ кеша блоков, так что первый посетитель не прогревает кеш за всех остальных. Без этого раздача разного HTML разным устройствам приносила бы больше вреда, чем пользы. А при включённой раздаче витрина отдаёт заголовок Vary: User-Agent, чтобы кеш перед магазином не смешивал мобильную и десктопную версии.

Честные ограничения

• Блок, скрытый на телефонах, отсутствует и на той странице, которую видит Google: индексация идёт mobile-first. Скрывайте оформительские блоки, а не те, которые должны находиться в поиске. Модуль пишет об этом прямо в настройках.
• Если у вас Varnish или Cloudflare, устройство нужно добавить в ключ кеша. Заголовок Vary: User-Agent мы отдаём, но эти двое по умолчанию игнорируют его для HTML. Одна настройка на их стороне, в документации описано как.