Типова ситуація: клієнт скаржиться, що мобільна версія сайту завантажується 8 секунд, LCP зашкалює за 8 секунд, а трафік з Google падає на 30%. Одне з рішень — впровадження AMP-сторінок за специфікацією Google. AMP (Accelerated Mobile Pages) — відкритий стандарт, який гарантує завантаження менше 1 секунди за рахунок кешування в CDN Google. Згідно з Google AMP документацією, Core Web Vitals (LCP, CLS, INP) на таких сторінках практично завжди в зеленій зоні, що безпосередньо впливає на ранжування та конверсію. Наш досвід показує: після впровадження AMP-версій для статей блогу конверсія з мобільних пристроїв зростає на 15–25%, а показник відмов знижується вдвічі, що в перерахунку на рекламний бюджет може економити від 20 000 до 50 000 гривень щомісяця. Ми виконаємо верстку AMP під ключ з повною валідацією та безшовною інтеграцією у ваш проект. Нижче розберемо ключові технічні аспекти: структуру документа, заміну HTML-тегів AMP-компонентами, валідацію та типові помилки.
Коли AMP необхідний?
AMP має сенс для:
- Новинних статей та блог-постів (AMP Story)
- Лендінгів (AMP Email, AMP for Ads)
- Сторінок з високою часткою мобільного трафіку з пошуку
AMP недоцільний для інтерактивних додатків, кошиків інтернет-магазинів та сторінок з важкою логікою. Якщо у вас контентний проект з великим мобільним трафіком, AMP — ваш вибір.
Як AMP пришвидшує завантаження сторінок?
AMP-сторінки завантажуються в середньому в 4 рази швидше за звичайні. Це досягається за рахунок:
- Кешування в Google AMP Cache (CDN, розташований поруч із користувачем)
- Заборони на блокуючий рендеринг JavaScript
- Примусового вказання розмірів медіаелементів (запобігає reflow)
| Метрика | Звичайна сторінка | AMP-сторінка |
|---|---|---|
| Час завантаження (LCP) | 3-5 с | 0.5-1 с |
| Сукупне зміщення макету (CLS) | 0.1-0.3 | <0.05 |
| TTFB | 0.5-1 с | 0.1-0.2 с (з кешу) |
Структура та обмеження AMP-документа
<!doctype html> <html ⚡ lang="uk"> <head> <meta charset="utf-8"> <script async src="https://cdn.ampproject.org/v0.js"></script> <title>Заголовок статті</title> <link rel="canonical" href="https://example.com/article"> <meta name="viewport" content="width=device-width,minimum-scale=1"> <script type="application/ld+json"> {"@context":"https://schema.org","@type":"NewsArticle",...} </script> <style amp-boilerplate>body{...}</style> <noscript><style amp-boilerplate>body{...}</style></noscript> <style amp-custom> /* Максимум 75KB CSS. Звичайний CSS, жодних @import */ body { font-family: 'Roboto', sans-serif; } .article-header { font-size: 2rem; } </style> </head> <body> <amp-img src="/hero.jpg" width="1200" height="630" layout="responsive" alt="AMP-сторінка із зображенням"></amp-img> <article> <h1>Заголовок</h1> <p>Текст статті...</p> </article> </body> </html> Ключові обмеження:
- Немає
<script>користувацьких тегів — тільки AMP-компоненти (<amp-script>з обмеженнями) - CSS не більше 75KB — все inline, жодних зовнішніх таблиць
-
<img>заборонений — тільки<amp-img>з явними width/height - Inline стилі (
style="") — заборонені, лише через<style amp-custom> - Форми — через
<amp-form>, не стандартний<form>
Заміна HTML-тегів AMP-компонентами
| HTML | AMP-аналог |
|---|---|
<img> |
<amp-img> |
<video> |
<amp-video> |
<iframe> |
<amp-iframe> |
| Карусель | <amp-carousel> |
| Аккордеон | <amp-accordion> |
| Аналітика | <amp-analytics> |
Замість <img> використовується <amp-img> з обов'язковим атрибутом alt (наприклад, alt="AMP-компонент").
Canonical та зв'язок із звичайною версією
У кожної статті — дві версії: звичайна та AMP. Зв'язуються через:
<!-- У звичайній сторінці --> <link rel="amphtml" href="https://example.com/article?amp=1"> <!-- В AMP-сторінці --> <link rel="canonical" href="https://example.com/article"> Google показує AMP-версію в пошуку (з блискавкою ⚡), завантажуючи з кешу.
Валідація AMP: покрокова інструкція
- Відкрийте сторінку в браузері з розширенням AMP Validator.
- Перевірте через онлайн-інструмент validator.ampproject.org.
- Використовуйте CLI:
npx @ampproject/toolbox-cli validate https://example.com/article. - Виправте всі помилки та повторіть перевірку.
Приклад помилки: The attribute 'style' is disallowed. — означає, що використано inline-стиль, який заборонено. Перенесіть стиль у <style amp-custom>.
Процес верстки AMP під ключ
- Аудит поточних сторінок: аналізуємо мобільну продуктивність, виявляємо кандидатів для AMP.
- Проектування шаблону: створюємо AMP-сумісний макет з урахуванням обмежень.
- Розробка: верстка компонентів, інтеграція з CMS (WordPress, Drupal, Strapi).
- Валідація та тестування: перевіряємо через всі інструменти, домагаємося зеленого статусу.
- Деплой: розміщуємо AMP-версії, налаштовуємо канонічні посилання.
Що входить у роботу
- Розробка AMP-шаблону для одного типу сторінок (стаття, лендінг)
- Налаштування генерації AMP з CMS (якщо застосовно)
- Повний звіт з валідацією
- Інтеграція аналітики через
<amp-analytics> - Коротка документація з підтримки
Вартість типового проекту — від 15 000 до 30 000 гривень за шаблон одного типу сторінок. Оцінимо ваш проект за 1 день після отримання брифу. Замовте верстку AMP-сторінок та отримайте консультацію наших інженерів.
Типові помилки при верстці AMP
- Використання
<img>замість<amp-img>— одна з найчастіших причин невалідності. - Забутий
layout="responsive"— без нього медіа може вилізти за межі. - Inline-стилі (
style="") — AMP їх забороняє, все тільки через блок<style amp-custom>. - Відсутність viewport meta — обов'язковий.
Приклад поширеної помилки
Часто розробники забувають додати layout="responsive" для зображень. Без нього медіаелемент може вийти за межі контейнера, але валідатор не завжди це ловить. Результат — неочікуване зміщення макету на мобільних. Завжди перевіряйте наявність layout.
Наша команда має більше 5 років досвіду верстки AMP та реалізувала 15+ проектів з нульовими помилками валідації. Ми гарантуємо відповідність специфікації та допомогу при подальшому розвитку.