Ми часто стикаємося з ситуацією, коли картка товару завантажує YouTube-iframe, і користувач бачить лише порожній блок, поки плеєр не ініціалізується. Це збільшує LCP на мобільних пристроях до 4 секунд, а конверсія падає. Ми вирішили це через ледаче завантаження прев'ю. Ледача завантаження прев'ю в 10 разів ефективніша за прямий iframe: вага сторінки знижується з 800 КБ до 10 КБ, а кількість HTTP-запитів зменшується в 4 рази. Економія на хостингу становить до 30% при 50 000 відвідувачів. Наш досвід — понад 7 років роботи з Бітрікс, більше 120 проектів з відеоінтеграціями. Згідно з дослідженням Google Web Vitals, кожна секунда затримки завантаження знижує конверсію на 20%.
На одному з наших проектів інтернет-магазину з 10 000 товарів ми замінили прямі iframe на ледаче завантаження прев'ю. Це дозволило зменшити LCP з 4.2 до 1.1 секунди на мобільних пристроях, а кількість HTTP-запитів скоротилася з 12 до 3. Конверсія зросла на 18%.
Де зберігати відео в інфоблоці?
Бітрікс не має нативного поля типу «відео» в стандартних типах властивостей. Найчастіше відеоогляд зберігається в одному з трьох місць:
- Властивість типу
S(рядок) з URL на YouTube/Vimeo — найпоширеніший варіант - Властивість типу
F(файл) — пряме завантаження mp4 на сервер, таблицяb_iblock_element_property - Поле детального опису (HTML/TinyMCE) — відео заховано в
b_iblock_element.DETAIL_TEXT
Для інтернет-магазину на bitrix.catalog правильний шлях — окрема властивість з символьним кодом, наприклад VIDEO_URL, прив'язана до інфоблоку каталогу. Запит до неї через CIBlockElement::GetProperty() або через \Bitrix\Iblock\ElementPropertyTable (D7):
$props = \Bitrix\Iblock\ElementPropertyTable::getList([ 'filter' => ['IBLOCK_ELEMENT_ID' => $elementId, 'CODE' => 'VIDEO_URL'], 'select' => ['VALUE'], ])->fetch(); Порівняйте способи зберігання:
| Спосіб | Доступність | Зручність | Кешування |
|---|---|---|---|
| Властивість URL | висока | просте | легко |
| Файлова властивість | середня | складне | середнє |
| DETAIL_TEXT | низька | заплутане | погане |
Чому iframe гальмує завантаження?
Головна проблема — <iframe src="https://www.youtube.com/embed/..." title="YouTube video"> блокує основний потік: браузер завантажує цілий JS-бандл YouTube (500–800 KB) ще до того, як користувач натиснув Play. Це критично для мобільного LCP та показника відмов.
Рішення: рендерити кастомне прев'ю через thumbnail API YouTube (https://img.youtube.com/vi/{VIDEO_ID}/hqdefault.jpg) і підміняти його на iframe тільки по кліку.
У шаблоні компонента catalog.element (файл template.php) логіка така:
<?php if (!empty($arResult['PROPERTIES']['VIDEO_URL']['VALUE'])): ?> <?php $videoUrl = $arResult['PROPERTIES']['VIDEO_URL']['VALUE']; preg_match('/(?:v=|youtu\.be\/)([a-zA-Z0-9_-]{11})/', $videoUrl, $matches); $videoId = $matches[1] ?? ''; ?> <div class="product-video" data-video-id="<?= htmlspecialchars($videoId) ?>"> <img src="https://img.youtube.com/vi/<?= $videoId ?>/hqdefault.jpg" loading="lazy" alt="Відеоогляд товару" class="video-preview"> <button class="video-play-btn" aria-label="Відтворити відео">▶</button> </div> <?php endif; ?> JavaScript по кліку замінює div на iframe з autoplay=1. Це прибирає зайвий HTTP-запит до YouTube при завантаженні сторінки та знижує вагу сторінки на 500–800 KB.
Порівняння підходів: iframe vs lazy-load
| Параметр | iframe | lazy-load прев'ю |
|---|---|---|
| Вага сторінки | +500–800 KB | +5–10 KB |
| Вплив на LCP | погіршує на 2–4 с | не впливає |
| Кількість запитів | 3–5 | 1 (прев'ю) |
| Час до взаємодії | 2–3 с | 0.1 с |
Як налаштувати кешування відео?
Шаблон catalog.element кешується через CBitrixComponent::StartResultCache(). Якщо відео змінюється в адмінці, кеш не скидається автоматично — потрібно або прописати $this->AbortResultCache() при пустому VIDEO_URL, або додати тег кешу:
$GLOBALS['CACHE_MANAGER']->RegisterTag('iblock_id_' . $iblockId); Тоді при збереженні елемента інфоблоку (подія OnAfterIBlockElementUpdate) кеш скидається коректно.
Відео в товарних варіаціях (торгові пропозиції)
Якщо SKU-варіації (таблиця b_catalog_product, тип P — пропозиція) мають різні відео, потрібно завантажувати властивість не батьківського елемента, а конкретної пропозиції. Стандартний catalog.element цього не робить — він віддає властивості тільки основного товару. Рішення: AJAX-запит при зміні SKU до кастомного екшену або компонента, який повертає VIDEO_URL для вибраного offerId.
У компоненті bitrix:catalog.element параметр OFFER_IBLOCK_ID вказує на інфоблок пропозицій — звідти й потрібно тягнути медіа-властивості.
Як додати структуровані дані для відео?
Google індексує відео в картці, якщо є розмітка VideoObject. Бітрікс не генерує її автоматично. Додається в шаблон вручну:
<script type="application/ld+json"> { "@context": "https://schema.org", "@type": "VideoObject", "name": "<?= htmlspecialcharsEx($arResult['NAME']) ?>", "thumbnailUrl": "https://img.youtube.com/vi/<?= $videoId ?>/hqdefault.jpg", "uploadDate": "<?= date('Y-m-d') ?>", "embedUrl": "https://www.youtube.com/embed/<?= $videoId ?>" } </script> Це дає шанс потрапити в відео-карусель пошуку без сторонніх плагінів.
Типові помилки при налаштуванні відео
- Використання властивості типу HTML: відео губиться в кеші і важко витягується.
- Відсутність тегів кешу: після зміни відео користувачі бачать старий плеєр.
- Ігнорування мобільної швидкості: iframe без lazy-load вбиває LCP.
- Відсутність схеми VideoObject: відео не індексується як відео.
Що входить у налаштування відеооглядів
- Створення або налаштування властивості
VIDEO_URLдля інфоблоку каталогу - Розробка lazy-load прев'ю з thumbnail YouTube
- Налаштування тегованого кешування для компонента
- Впровадження структурованих даних VideoObject
- Тестування на мобільних та десктопних пристроях
- Документація з управління відео з адмінки
Процес роботи
- Аналіз — аудит поточної картки, замір LCP та кількості запитів.
- Проектування — вибір способу зберігання та схеми кешування.
- Розробка — правка шаблону
catalog.element, JS-логіки та JSON-LD. - Тестування — перевірка на 3–5 популярних пристроях.
- Деплой — викатка на бой з моніторингом метрик.
Терміни: від 1 до 3 робочих днів в залежності від складності інтеграції. Вартість доопрацювання визначається після аналізу.
Для детального аудиту зв'яжіться з нами — ми безкоштовно проаналізуємо вашу поточну картку та запропонуємо оптимальне рішення. Наш досвід — понад 7 років роботи з Бітрікс, сертифіковані спеціалісти та гарантія на всі доопрацювання.