Прискорити завантаження сайту на 1 секунду за допомогою AMP Google

Якщо ваша Мобільна сторінка відкривається протягом більше 3 секунд, ви втратите половину своїх клієнтів.

Чи знаєте ви, що 3 секунди завантаження сторінки вже занадто повільні? 53% користувачів залишають сайт, тому що не готові чекати… це здається смішним… Три секунди. Чи знаєте ви, скільки часу в середньому займає мобільний сайт, щоб завантажитися з 3G-з'єднанням? Та-да-а-а-м — 19 секунд.

«За цей час можна впасти з високої будівлі, – говорить менеджер з розвитку партнерів Google Андрій Ліпатцев, – і сторінка, яка змусила вас стрибнути з балкона, не відкриється».

Давайте не будемо робити наші користувачі страждають. Є рішення, як прискорити завантаження сторінки до 1 секунди навіть при найгіршій мобільній мережі. Почнемо працювати з AMP Google.

Що таке AMP Google?

AMP від Google (прискорена мобільна сторінка) – прискорені мобільні сторінки.

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

Для версій AMP Google відрізає від 90% коду, що робить веб-сторінки громіздкими та повільними.

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

AMP підтримує Chrome, Firefox, Edge, Safari і Opera, а також працює на соціальних платформах Facebook, Twitter, Instagram, Pinterest, Reddit, Vk та інших.

AMP Google не є точно Google

AMP не є технологією Google, це про Інтернет. Про це свідчить менеджер з розвитку партнерів Google Андрій Ліпатцев. Google підтримує ініціативу AMP, але не контролює його.

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

Що AMP Google виглядає?

Знайдіть різницю між звичайною версією мобільної версії та сторінкою AMP на цій картинці.

Вони не знаходяться в візуальній частині. AMP може повторювати вихідну версію сторінки з точністю до пікселів. Різниця полягає в тому, як цей вміст бачить браузер і скільки коду він дається.

Ви можете розпізнати сторінку AMP в пошуковій системі за допомогою значка "блискавка".

Навіщо і кому потрібен Google AMP?

Ще в квітні 2016, технологія була доступна тільки для ЗМІ. Очевидно, що швидкість для новинних сайтів є одним з основних конкурентних переваг. Тепер сторінки AMP використовуються багатьма видавцями, а деякі з них замінюють мобільну версію ресурсу.

Офіційний сайт AMP перераховує 3 категорії Інтернет-бізнесу, для яких ці технології працюють:

1. AMP для видавців.
2. AMP для рекламодавців.
3. Платформи AMP для технологічних платформ (SSP, ДСП, аналітичні послуги).

AMP для інтернет-магазинів

Розширений функціонал AMP для інтернет-магазинів вже в дорозі. У травні 2017 року Google оголосила про те, що незабаром на сторінках AMP можна буде вибрати параметри, порівнювати товари та здійснювати покупки. Зараз, схоже, загальна інформація про продукт з можливістю перейти на мобільну версію сайту для покупки. Але цього достатньо, щоб значно збільшити конверсію магазину. Ми розповімо вам, чому.

Як AMP впливає на конверсію?

Давайте згадаємо, коли ми закриємо сторінку, не чекаючи, щоб вона повністю відображалася. Коли ми вступили в пошуках нашого запиту, натиснув на посилання і сторінка повісив в очікуванні. Чому ми його закрили? Тому що ми ще не бачили, що нам сподобалося і чого ми готові чекати.

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

Скажімо, я шукаю скутер. Я відкриваю каталог товарів. Чи потрібен мені кошик для покупок на даний момент? Ні. Чи потрібна детальна фільтрація, кнопка «Купити»? Ні. Я просто вибрати. На даний момент, eBay робить лістинг (список пунктів) з AMP, який представляє тільки основні фільтри, використовувані замовником. Наприклад, «міський скутер», «дитячий скутер», «електросамокат» і т. Д.

Фільтри виглядають як звичайні заголовки. Під ними виводиться кілька предметів товару з бічним горизонтальним сувою. Це довга сторінка з невеликими зображеннями і скутерів імен. Все, що мені потрібно на етапі відбору. Але коли я натискаю на певний продукт, ресурс кидає мене на мобільну версію сторінки. Я вибрав продукт, який мені подобається, і тепер готовий почекати.

Перш ніж відвідувач потрапить на ваш сайт, перевірте швидкість і помилки його мобільної версії.

Багато інтернет-магазинів втрачають клієнта на 1 етапі – він йде до завантаження посилання.

Порівняйте спосіб посадки та приземлення у версії мобільної системи AMP.

https://www.youtube.com/embed/xWXS3LjjqPg?rel=0

Завдання AMP – зробити так, щоб 1-й контакт з користувачем відбувався максимально швидко.

Чим швидше 1-й контакт з споживачем, тим вище конверсія і нижня частота відмов.

Навіщо використовувати AMP Google?

Швидкість і швидкість завантаження знову. І питання не тільки тоді, коли Відкриється сторінка, але і в якій формі.

Давайте всі пам'ятаємо знайоме становище. Відкриваємо сайт і починаємо писанпінг його. Сторінка починає стрибати повз нас: деякі елементи пролетіли, інші-в бік, інші-вниз.

Всі нові скрипти і кадри падають на поганий пристрій, і він не знає, де засунути їх на цьому маленькому екрані.

AMP виключає цю ситуацію. Ресурс запущено асинхронно. Сторінки попередньо завантажені за допомогою кешування. Візуалізація відбувається до завантаження всіх вмісту. Елементи не заважають один одному і не стрибають на сторінку.

Як працює AMP Google?

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

• HTML стискається до мінімального необхідного об'єму.
• JavaScript є суворо обмеженим.
• Користувацький CSS не підтримуються.

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

Ще одним компонентом, який надає сторінці ще більшу швидкість , є глобальний кеш. Тобто, зміст поміщається ближче до місця, де користувач буде споживати його.

Ось як виглядає сторінка AMP між вашим сайтом і пристроєм користувача.

1. AMP-HTML завантажується в кеш.
2. Платформа, яка використовується користувачем, перетворюється на кеш і відображає його на екрані.
3. Ресурс відвантажується практично миттєво, безпосередньо з пошукової системи Google.

Що дає AMP?

• Середній час завантаження сторінки – 0,7 секунди.
• Сторінка завантажується в 4 рази швидше.
• Обсяг даних, які необхідно передати користувачеві, зменшується до 10 разів.

Як впровадити AMP Google на сайт?

Існує багато вимог і обмежень для версії AMP. Це варто врахувати при створенні сторінки.

Детальну інструкцію можна знайти на офіційному сайті АМФ – https://www.ampproject.org/ru/docs/tutorials/create.

Головне – внести зміни в оригінальну сторінку в звичайному HTML, щоб Google і інші браузери могли перейти на версію AMP.

Як ви це робите?

1. Ви створюєте звичайний файл і зв'язуєте його з основним змістом (канонічним посиланням).
2. Якщо у вас вже є сторінка, версію якої ви хочете створити в AMP, ви пов'язуєте сторінку AMP з основною, вказуючи, що вона канонічна (тобто основна), а ця – AMP.
3. Якщо ви створюєте сторінку AMP для нового вмісту з нуля, достатньо залишити посилання AMP на себе, вказавши його як канонічну версію.

Будь ласка, Попередьте, що якщо ви не веб-розробник або не розумієте HTML, реалізація AMP не буде легкою.

Приклад введення ПІДСИЛЮВАЧА в Lenta.ru

Lenta.ru поділився з Google її справу представляючи AMP на сайті. Ми покажемо це, щоб зрозуміти, як довго цей процес може тривати і які кроки прийняти.

Lenta.ru введення AMP прийняла 12 днів роботи розробника і приніс гарне збільшення органіки. Результати нижче.

https://www.youtube.com/embed/MCo4shjvG7k?rel=0

Для цього було необхідно:

1. Записування нових шляхів у базі даних AMP.
2. Створюйте нові шаблони сторінок, де розміщено наявний вміст.
3. Переписати новий CSS для задоволення обмежень розміру файлу.
4. Створити нову систему для вставки мультимедійного контенту.
5. Ввести мікро-маркування для новин на сторінці, так що пошукові системи та інші платформи зрозуміти, що зміст о.
6. Підключіть Google Analytics.

На основі результатів:

• Швидкість завантаження сайту подвоїлася;
• Аудиторія сторінок виросла в 18 разів.

Висновок

Завжди Будьте в курсі 3 секунди завантаження, коли ви створюєте Super Cool чіпи для вашого сайту. Google закликає нас піклуватися про телефонів інших людей і завантажити вміст, який дозволяє користувачеві робити саме те, що вони повинні робити.

Ще раз про важливість Google AMP:

• Ваш веб-сайт відкриється на мобільному веб-сайті в 1 секунду.
• Ресурс не перестає працювати, навіть якщо користувач пропускає Інтернет (завдяки кешування).

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

Пам'ятайте, що ПІДСИЛЮВАЧ дає 1 швидкий дотик. Тоді ваш сайт і його мобільна версія працює. Читайте , як поліпшити конверсію інтернет-магазину: все, що потрібно для збільшення продажів.