Categories: Уроки програмування

Google AMP – що це таке і як це реалізувати на своєму сайті?

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

Є маса інструментів і рішень, за допомогою яких можна оптимізувати час завантаження сайту для мобільних пристроїв, але є одне прогресивне рішення – AMP. Проект AMP (Accelerated Mobile Pages – Прискорені мобільні сторінки) є одним з найбільш перспективних методів, спрямованих на вирішення цієї проблеми.

Сьогодні ми поговоримо трохи про AMP; розглянемо деякі поради і способи створення прискорених мобільних сторінок AMP.

Що таке проект AMP?

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

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

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

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

Як працює AMP?

Тепер давайте подивимося, як працюють сторінки AMP.

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

Сторінки AMP повинні відповідати певному набору правил для оформлення стилів і макета, що дозволить їм вважатися сумісними з офіційними рекомендаціями проекту. Що стосується стильового оформлення, сторінки AMP залежать виключно від CSS (без зовнішніх таблиць стилів), тому ви не можете використовувати вбудовані (інлайнові) стилі, а деякі види анімацій також заборонені, щоб не виникало проблем з продуктивністю.

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

Щоб додати стилі на сторінку, ви повинні використовувати тег <style amp-custom>, як показано в прикладі нижче.

<html>
 <head>
  <meta charset="utf-8">
  <link rel="canonical" href="index.html" >
  <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
  <style amp-custom>
    /* Тут ви вказуєте всі ваші CSS стилі */    body {background-color: #fff;}
  </style>
  <script async src="https://cdn.ampproject.org/v0.js"></script>
 </head>
 <body>Контент сторінки</body>
</html>

Якщо ви хочете використовувати дефолтні CSS стилі для AMP сторінок, ви можете скопіювати їх на сторінці проекту на GitHub.

Як інтегрувати AMP на своєму сайті

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

Якщо ви використовуєте на своєму сайті CMS (наприклад, Drupal, WordPress), рекомендуємо ознайомитися зі списком корисних ресурсів для реалізації AMP на двигунах.

Для сайтів на WordPress є маса доступних плагінів, які дозволять вам без великих зусиль реалізувати на своєму сайті прискорені мобільні сторінки AMP. Список всіх доступних плагінів ви знайдете за цим посиланням.

Налаштуйте HTML структуру для AMP і перевірте код сторінки валідатором. Опис валідації AMP сторінок ви знайдете тут. Якщо ваша сторінка пройде валідацію, зовсім скоро її кешована версія буде розміщуватися на серверах Google, і її завантаження значно зросте.

На нашому сайті теж використовується AMP, — щоб перевірити швидкість завантаження з мобільного, просто додайте в кінець будь-якого посилання нашого сайту значення ?amp, наприклад для головної сторінки це буде https://sebweo.com/?amp.

Короткий підсумок

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

Все, що вам потрібно зробити для успішної інтеграції сторінок AMP на своєму сайті, це:

Ознайомитися з основами проекту AMP.
Створити HTML розмітку сторінки за офіційними рекомендаціями.
Перевірити валідацію такої сторінки.
Після проходження валідації, дочекатися збільшення трафіку з мобільних пристроїв.

Як ви ставитеся до проекту AMP? Поділіться своєю думкою по даному питанню в розділі коментарів нижче.