Мобільний трафік постійно зростає. З кожним роком користувачі все частіше купують або просто сёрфят в інтернеті, використовуючи мобільні телефони. За даними Statista.com, світовий мобільний трафік виріс у 4 рази у порівнянні з 2017 роком, а до 2022 його частка складе 77% від загальної кількості. Це означає, що для успішної конкуренції онлайн-бізнес повинен відповідати потребам користувачів мобільних телефонів. Ще у 2010 Ерік Шмідт (на той момент генеральний директор Google) закликав дизайнерів слідувати правилу mobile-first, тобто створювати спочатку концепти для мобільної версії, а тільки потім малювати інші версії.

Статистика мобільного трафіку 

А вже у 2015 Google анонсував технологію AMP — accelerated mobile pages.

Коротко про AMP технологію

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

Якщо подивитися детально, то AMP верстка - це "урізаний" HTML, в якому частина тегів заборонена або замінена на еквівалентні AMP-теги й AMP JS-бібліотеки для швидкого рендеринга (відтворення) AMP-HTML.

Швидкому завантаженню також сприяє кешування сторінок безпосередньо у пошуковій системі Google і Lazy-loading - відмова від завантаження всієї сторінки відразу, тобто елементи сторінки завантажуються за необхідністю при прокручуванні користувачем.

Серед кейсів нашої компанії є досвід створення AMP-сторінок для одного з наших клієнтів. Про нюанси відстеження таких сторінок ми писали тут. Загалом ми створили близько 8 сторінок. При пошуці на мобільному пристрої такі сторінки позначені значком блискавки й отримують більш високі позиції.

Подивимося на швидкість завантаження стандартної версії та AMP-сторінки.

Там, де у AMP-версії сайту швидкість на мобільному дорівнює 86 балам за даними PageSpeedInsight:

Швидкість AMP-версії сайту

У звичайної версії швидкість досягає лише 31 бал:

Швидкість звичайної версії сайту

Різниця очевидна. У випадку з нашим клієнтом немає необхідності проводити додаткові заходи з оптимізації швидкості на мобільних пристроях.

Основні переваги AMP сторінок

  1. Висока швидкість завантаження.

Головна перевага AMP-сторінок - звичайно ж, швидкість, заради якої технологія і створювалася. Ви не втратите користувачів, змушуючи їх чекати більше 5-10 секунд на завантаження сторінки. Без AMP існує висока ймовірність того, що ваш сайт, особливо з великою кількістю анімацій і тегів, не отримає частини трафіку.

  1. Спецелементів видачі.

Додаткові або незвичні елементи фокусують увагу користувача. У AMP-сторінок це значок блискавки, який говорить про те, що сторінка швидкісна.

  1. Підвищення позицій у видачі.

Google мотивує власників сайтів використовувати AMP-технологію. Прискорені мобільні сторінки AMP отримують перевагу перед звичайними у видачі.

Кому потрібні AMP сторінки?

Перш за все компаніям, які борються за перші позиції у видачі за допомогою генерації контенту. Особливо пріоритетно впроваджувати технології AMP для блогів і контенту, що монетизується. Тим більше, AMP підтримує досить багато інструментів монетизації: Adform; Google AdSense; AOL AdTech; AdReactor; Plista; Smart AdServer; Taboola; DotAndAds.

Які особливості в AMP сторінок

1. Відсутність кастомних скриптів.

За високу швидкість потрібно буде заплатити відсутністю звичних плагінів. Динамічні зміни сайту - складна анімація при натисканні, дії, фільтрація - стають недоступними.

2. Структуровані дані.

AMP-сторінки зі структурованими даними можуть з'являтися в каруселі статей. Якщо структурованих даних немає, то в результатах Google Пошуку буде тільки звичайне посилання на сторінку.

3. Нові теги.

Усі зображення на сторінці повинні бути описані в особливому тезі <amp-img>, що ускладнює вставку зображень користувачем через текстовий редактор. Для інших елементів, де висновок зображень прописаний "руками", досить поправити верстку. Так само, якщо використовуються карусель або lightbox, потрібно вставити аналоги з компонентів, доступних у документації AMP.

4. Обов'язкове додавання canonical.

Щоб пошуковик зрозумів, що існує AMP-версія сторінки, основна сторінка повинна містити посилання на неї:

<Link rel = "amphtml" href = "https: //domain..com/amp/123.html">

А на AMP-сторінці обов’язкова присутність зворотнього посилання:

<Link rel = "canonical" href = "https: //domain..com/url//full/123.html">

5. Внесення змін в основну сторінку не привнесе змін до AMP-версію.

AMP-сторінка - це повністю самостійна одиниця, тому весь контент, що у майбутньому ви захочете змінити на сайті, потрібно буде зробити в обох версіях окремо.

Висновки

AMP - цікава технологія, що прекрасно вирішує вузькі завдання, під які і була створена. Якщо у вас велика сторінка, а оптимізація істотно затратна для отримання високої кількість балів у Google PageSpeed, окрема AMP-сторінка - ідеальний варіант. У випадку, коли вам потрібна мобільно адаптована версія сайту, без високого рівня функціональності, то це теж підходящий варіант. Ми знаємо, як налаштувати АМP-сторінки і завжди проконсультуємо з питань, що цікавлять. Напишіть нам, і команда Evergreen супроводить створення AMP-версії сайту від розробки до впровадження аналітики.

 

31.08.2020
Зображення, використані в статті, були взяті з відкритих джерел і використовуються як ілюстрації.