AMP-сторінки: що це та для чого потрібні

Валерія Кисільова

Content-writer

Подобається

Содержание статьи
1. Принципи роботи AMP
1.1 Вимоги до сторінок
2. Переваги технології AMP
3. Складнощі впровадження формату
4. Застосування AMP-сторінок
Висновок

При ранжуванні результатів пошуковик віддає перевагу сторінкам, які завантажуються швидше.

Для зменшення часу завантаження використовуйте технологію AMP-сторінок. Її анонсували ще в 2015 році і сьогодні вона активно просувається Google’ом. Наприклад, з 15.07.20 в Search Console при перевірці урлов почали посилатися на керівництво по роботі з AMP. Воно допоможе оптимізувати сторінку й усунути проблеми продуктивності.

AMP = Accelerated Mobile Pages = Прискорені мобільні сторінки

AMP – стандарт розробки інтернет-сторінок, при якому потрібно дотримуватися певних вимог. Про них поговоримо нижче.

Швидкість завантаження таких сторінок в рази вище звичайних, при цьому в жертву приноситься функціональність. Небажання чекати - не єдина причина використовувати AMP. Друга причина – швидкість Інтернету в окремих країнах. Більшість досі перебувають на стадії 3G та GPRS-доступу. AMP якраз і здатний дати користувачам з різних країн однаковий експірієнс за швидкістю завантаження.

Подивіться, наскільки відрізняються результати PageSpeed Insights для звичайної та прискореної версій сторінки.

AMP страницы тест обычная

Рис. 1 – Результат тесту PageSpeed Insights для звичайної сторінки

AMP страницы оптимизированная

Рис. 2 – Результат тесту PageSpeed Insights для сторінки з amp

Хочете так само?

Читайте, які елементи можна та не можна використовувати при створенні сторінки.

1. Принципи роботи AMP

Для створення сторінки, що швидко завантажується, використовуються власні теги. Їх кількість та функції обмежені. При скануванні Google знаходить ці теги й заносить інформацію про них в кеш. Коли користувач шукає інформацію за запитом, браузер завантажує з кеша дані. А користувачеві виводиться заздалегідь завантажена форма.

При ранжируванні Google віддає перевагу AMP-сторінкам, тому що завантажуються вони швидше та адаптовані під показ на мобільних. І в SERP, як правило, стоять вище інших.

1.1 Вимоги до сторінок

Якщо бажаєте зробити AMP сторінку, можете зробити таким чином – створити з нуля або конвертувати існуючий код HTML.
Перед початком принципово знати про такі відмінності:

неможливо використовувати користувальницькі скрипти, тобто динамічні зміни реалізувати не вийде;
багато тегів мають власні альтернативи, наприклад: <amp-img>, <amp-video, amp-audio> й т. п.;
заборонено застосування inline-стилів (ті, що знаходяться всередині тегів в html-коді);
загальний розмір CSS не може бути більше 50 кб;
посилання на канонічну сторінку та назад;
окремі вимоги для логотипів (наприклад, не підтримуються анімовані зображення, обов’язкова прямокутна форма та ін.);
розміри таких ресурсів як картинки або реклама повинні заздалегідь бути задані;
JS-код виконується асинхронно і т. д..

Особливість формату – привласнення пріоритету ресурсу в області перегляду користувача на цей час. Причому середовище виконання намагається вгадати, куди подивляться далі, і завантажує відповідні ресурси. Елементи не в області перегляду можуть розвантажуватися для зменшення навантаження на RAM.

Рекламу та зображення слід завантажувати тільки в разі, якщо їх побачить користувач.

Наш висновок: створити AMP-сторінки складніше, ніж звичайні, через зазначені обмеження. Ось каталог доступних компонентів у допомогу.

2. Переваги технології AMP

Технологія має 4 явних переваги:

Перше й основне – швидкість завантаження. Користувачі менше чекатимуть, що знизить показник відмов.
Швидкість ще може позитивно вплинути на тривалість перебування користувача на сайті.
Швидкі сторінки займають більш високі позиції в пошуку в порівнянні зі звичайними.
AMP має відкритий вихідний код, який можна змінювати на свій розсуд відповідно до вимог вище.

3. Складнощі впровадження формату

Незважаючи на переваги, прискорених сайтів в онлайн не так і багато. AMP-формат значно урізує функціональні можливості сторінки. Є й інші недоліки:

для аналітики таких ресурсів потрібно встановлювати окремий тег на кожній прискореній сторінці;
через урізаний функціонал реклама на сайті може бути не такою ефективною, і не всі формати реклами можуть бути доступними;
стежити за веб-сайтом, мобільною та amp-версіями складно, пошуковик все одно може не відобразити потрібну версію у відповідь на запит;
статичні сайти виглядають однаково для всіх (не можна персоналізувати);
технологія не підходить складним, багатофункціональним сайтам (наприклад, великим інтернет-магазинам та сайтам, де передбачається активна взаємодія з користувачем).

4. Застосування AMP-сторінок

Незважаючи на вагомі переваги, зробити AMP-сторінку є сенс за умови вузьконаправленого проекту.
Для цих галузей такий формат спрацює:

інформаційні ресурси;
блоги;
інтернет-журнали;
сайти-візитки;
односторінкові сайти;
статичні сайти з рецептами;
сторінки продукту;
огляди та ін..

Тобто там, де інформацію потрібно донести швидко, де сторінка не повинна підлаштовуватися під кожного індивідуально, як в блозі або збірнику рецептів.

Висновок

Прискорені мобільні сторінки значно покращують показник швидкості завантаження, тим самим залучаючи користувачів залишитися на вашому ресурсі. Але ця технологія має істотні недоліки, через які застосування amp-сторінок на практиці обмежено простими сайтами.

Ви ж можете й своїми силами спробувати створити документ за допомогою amp, і вже на практиці оцінити її переваги для вас.

SEO - просування

Контекстна реклама

SMM - просування

Email-маркетинг

ASO-просування

Контакти