Прискорення мобільних сторінок на 1С-Бітрікс за допомогою AMP
AMP (Accelerated Mobile Pages) — HTML-підмножина Google із жорсткими обмеженнями: жодних кастомних JavaScript, тільки дозволені компоненти, CSS не більше 75KB inline. Для Бітрікса це означає, що не можна використовувати ні jQuery, ні BX.ajax, ні стандартні JS-компоненти. AMP-сторінка — окремий шаблон, що живе паралельно зі звичайним сайтом. Ми налаштовуємо AMP під ключ: від аудиту до деплою, з гарантією сумісності з 54-ФЗ та інтеграціями.
Які проблеми вирішує AMP в Бітріксі?
Основна проблема — швидкість завантаження на мобільних пристроях. Звичайна сторінка Бітрікса може важити 2-3 МБ і завантажуватися 5-6 секунд. AMP за рахунок кешу Google (google.com/amp/s/...) і строгих обмежень скорочує час до 0.5-1 секунди, що покращує Core Web Vitals. Для новинних сайтів і блогів на Бітріксі AMP дає приріст LCP на 30-50%. Для інтернет-магазинів AMP підходить тільки для інформаційних сторінок: кошик і checkout не підтримуються.
Як AMP впливає на швидкість завантаження?
Технологія AMP прискорює сторінки через кешування на CDN Google і примусове виключення блокуючого JS. У наших проектах LCP знижувався з 4.2 секунд до 0.8 секунди, а First Contentful Paint — до 0.5 секунди. Це призводить до зменшення показника відмов на 20-30% і зростання органічного трафіку на 25%.
Як ми налаштовуємо AMP-шаблон (під ключ)?
Процес включає чотири етапи:
- Аналітика: аудит поточних сторінок, які планується перевести в AMP. Визначаємо типові компоненти: каталог, детальна картка, статті, форми.
- Проектування: створення AMP-шаблону, переробка CSS (не більше 75KB), заміна JS-компонентів на AMP-аналоги. Використовуємо теговане кешування для мінімізації навантаження.
- Реалізація: верстка на HTML/CSS з amp-компонентами, інтеграція з інфоблоками, HL-блоками, Bizproc. Пишемо окремі компоненти 2.0 для AMP.
- Тест і деплой: перевірка через валідатор AMP, Google Search Console, A/B-тести швидкості. Розміщення на бойовому сервері.
Що входить в налаштування AMP?
| Етап | Дії | Результат |
|---|---|---|
| Аудит | Аналіз 20+ сторінок, виявлення вузьких місць | Звіт з рекомендаціями |
| Шаблон | Створення AMP-шаблону на основі поточного дизайну | Адаптивний шаблон з тегами amp-html |
| Компоненти | Переписування компонентів каталогу, статей, форм | Робочі сторінки без JS-помилок |
| Зображення | Заміна <img> на <amp-img> з розрахунком розмірів |
Оптимізовані медіа з layout="responsive" |
| Форми | Налаштування amp-form з CORS-заголовками | Функціональні форми зворотного зв'язку та підписки |
Порівняння: звичайна сторінка vs AMP
| Параметр | Звичайна сторінка | AMP-версія |
|---|---|---|
| Час завантаження (LCP) | 3-5 сек | 0.5-1.2 сек |
| Розмір CSS | 200+ KB inline | до 75 KB |
| JavaScript | jQuery, BX.ajax | amp-компоненти |
| Кеш | немає | Google CDN |
| Підтримка форм | так (з JS) | через amp-form |
Чому AMP все ще актуальний для Бітрікса?
Незважаючи на скасування AMP-молнії у видачі Google, технологія залишається корисною для SEO. AMP-сторінки кешуються на Google CDN, що дає пріоритет у швидкості. Крім того, AMP спрощує відповідність вимогам Core Web Vitals, особливо для сайтів з великим обсягом контенту. На практиці AMP-сторінки завантажуються в 2-3 рази швидше за звичайні, що підтверджується нашими проектами — більше 10 успішних впроваджень для новинних порталів і корпоративних блогів.
Деталі валідації AMP
Після деплою кожна сторінка перевіряється через AMP Validator (інструмент від Google). Ми також відстежуємо статус у Google Search Console в розділі «Прискорені мобільні сторінки». Помилки виправляються протягом 24 годин.Зв'язок канонічної та AMP-сторінки
На звичайній сторінці вказується посилання на AMP, а на AMP-сторінці — на канонічну. Без цієї пари Google не буде використовувати AMP-сторінку як прискорену версію. Перевірка через Google Search Console → «Прискорені мобільні сторінки».
<link rel="amphtml" href="https://example.com/catalog/product/?amp=1"> <link rel="canonical" href="https://example.com/catalog/product/"> Приклад реалізації на Бітріксі
AMP-сторінка віддається за тим же URL з параметром ?amp=1 або на окремому піддомені. Перший варіант простіший — один шаблон сайту, перемикання в пролозі:
// /bitrix/templates/ШАБЛОН/header.php if (!empty($_GET['amp'])) { define('IS_AMP', true); // Підключити AMP-шаблон include __DIR__ . '/amp_header.php'; return; } AMP вимагає специфічного <html ⚡> або <html amp> і набору обов'язкових тегів:
<!doctype html> <html ⚡ lang="uk"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1"> <link rel="canonical" href="<?= $canonicalUrl ?>"> <script async src="https://cdn.ampproject.org/v0.js"></script> <style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both}...</style> <noscript><style amp-boilerplate>body{-webkit-animation:none}</style></noscript> <style amp-custom> /* Весь CSS сторінки — не більше 75KB */ </style> </head> Зображення та медіа через amp-img. У AMP не можна використовувати тег <img> — тільки <amp-img>. Обов'язкові атрибути width і height. У шаблоні catalog.element для AMP:
$img = \CFile::GetFileArray($arResult['DETAIL_PICTURE']); $w = $img['WIDTH'] ?: 800; $h = $img['HEIGHT'] ?: 800; ?> <amp-img src="<?= absoluteImageUrl($img['SRC']) ?>" width="<?= $w ?>" height="<?= $h ?>" alt="<?= htmlspecialcharsEx($arResult['NAME']) ?>" layout="responsive"> </amp-img> Форми в AMP. Стандартні бітріксові форми (JS-відправка, AJAX) в AMP не працюють. Для форми зворотного дзвінка або підписки потрібен amp-form:
<script async custom-element="amp-form" src="https://cdn.ampproject.org/v0/amp-form-0.1.js"></script> <form method="POST" action="/local/ajax/amp-subscribe.php" action-xhr="/local/ajax/amp-subscribe.php"> <input type="email" name="email" placeholder="Email" required> <button type="submit">Підписатися</button> <div submit-success><template type="amp-mustache">Дякуємо!</template></div> <div submit-error>Помилка, спробуйте ще раз</div> </form> Обробник /local/ajax/amp-subscribe.php повинен повертати JSON з потрібними полями та встановлювати CORS-заголовки для домену ampproject.org.
Економія та терміни
Термін налаштування AMP залежить від обсягу сторінок і складності інтеграцій. Орієнтуйтеся на діапазон: від 5 днів для типового блогу до 3 тижнів для каталогу з 1С і 54-ФЗ. Вартість розраховується індивідуально після аналізу ТЗ. Економія на мобільній розробці становить до 40% порівняно з адаптивною версією. Окупність AMP-інвестицій — протягом 3-4 місяців за рахунок покращення SEO та збільшення конверсії з мобільних пристроїв. Отримайте консультацію з налаштування AMP — зв'яжіться з нами. Замовте аудит AMP-сумісності вашого сайту.