Впровадження AMP для збільшення швидкості завантаження сторінки

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

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

Що таке Accelerated Mobile Pages (AMP)?

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

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

Як працює AMP?

У AMP використовуються три основні частини: мова розмітки, обробка ресурсів і мережа доставки контенту (CDN). Розмітка AMP HTML схожа на стандартний HTML, за винятком використання своїх власних тегів та властивостей. Основна ідея розмітки полягає в тому, щоб контент сторінки рендерився максимально швидко. Багато елементів завантажуються до того, як користувач почне нервувати, а в цей час сторінка в фоновому режимі завантажує інші елементи, включаючи рекламу.

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

CDN для AMP є зараз необов’язковою опцією. На даний момент Google робить кешування і оптимізацію AMP сторінок, використовуючи свою службу CDN. Однак ви можете створити свій власний CDN або використовувати свій веб-сервер.

Більш докладно про реалізацію AMP на своєму сайті читайте в нашій попередній статті.

До чого мені готуватися з AMP?

Щоб досягти оптимальної швидкості завантаження сайту для мобільних пристроїв, вам потрібно буде реалізувати кілька речей. Вам потрібно буде підтримувати дві версії всіх ваших сторінок. Одна з них – це версія вашого сайту для ПК (стандартна версія), а друга – це AMP версія сайту. У стандартній версії ви можете зберегти всі інтерактивні елементи, які вимагають JavaScript, в той час як у версії AMP вам потрібно буде використовувати самий мінімум.

Вам також доведеться переробити шаблон свого сайту, тому що AMP вимагає, щоб всі таблиці CSS стилів важили менше 50К і були в режимі інлайн. Всі користувацькі шрифти також повинні бути завантажені з використанням розширення amp-font. Ті ж обмеження застосовуються до звичайних зображень, в яких повинні бути визначені ширина і висота, і повинні використовувати елемент amp-img; локальні відео повинні використовувати тег amp-video, а для відео з YouTube використовується тег amp-youtube. Для розміщення реклами (Google AdSense) в AMP версії використовується компонент amp-ad (щоб додати якийсь компонент, вам потрібно окремо підключати спеціальні скрипти).

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

Після реалізації другої (AMP) версії сайту, вам потрібно зв’язати стандартну і AMP версії, використовуючи тег rel="amphtml", наприклад, так <link rel="amphtml" href="https://sebweo.com/?amp"/>. Цей тег повідомить пошуковим роботам Google, що у вас реалізована AMP версія сайту. Ви також повинні використовувати метадані Schema.org, щоб ідентифікувати тип контенту на сторінці (наприклад, стаття, рецепт, огляд), що дозволить сторінці потрапити в новинну карусель Google Search.

Перевага AMP – швидкість завантаження сторінки

Основна мета AMP – швидко завантажувати сторінки сайту. Якщо порівнювати швидкість завантаження стандартної версії сайту і AMP, то остання показує поліпшення швидкості на 85%. Це означає, що якщо ваша стандартна сторінка сайту завантажується за 3 секунди (мінімальна швидкість), то AMP-версія буде завантажуватися за 0,45 секунди, що практично миттєво.

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