Оптимізуємо мобільну версію сайту: що таке Google AMP

  1. Що таке Google AMP?
  2. AMP для магазину MotoCMS
  3. За рахунок чого збільшується швидкість завантаження?
  4. АМР HTML
  5. додаємо CSS
  6. AMP JS
  7. АМР-кеш Google
  8. валідація АМР
  9. Чи потрібна вашому сайту АМР-версія?
  10. Чому АМР - це вигідно
  11. Майбутнє прискорених мобільних сторінок

24 Марта, 2017, 11:00

9127

Згідно зі статистикою, близько 53% користувачів мобільних пристроїв не затримуються на веб-сайтах довше 3 секунд. Чому так? Причина проста - люди звикли до швидкого темпу життя, і довге завантаження сайтів дратує їх. Не всі користувачі розуміють, що наявність смартфона і підключення до інтернету не гарантує швидкий і безперешкодний доступ до улюблених веб-сайтів в будь-який час.

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

Що таке Google AMP?

Абревіатура AMP розшифровується як Accelerated Mobile Pages (прискорені мобільні сторінки). AMP - це спеціальний проект від Google , Виконаний спільно з десятками всесвітньо відомих IT-компаній, веб-розробників і власників веб-сайтів. Мета проекту - збільшити швидкість завантаження сайтів на мобільних пристроях за рахунок впровадження нових технологій.

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

Не так давно команда MotoCMS провела роботу по AMP-оптимізації онлайн-магазину шаблонів. Головна сторінка магазину виглядає приблизно так:

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

AMP для магазину MotoCMS

Оцініть результат нашої роботи самостійно і спробуйте знайти шаблон для свого сайту , Скориставшись будь-яким мобільним пристроєм. Різниця очевидна, правда?

Сторінка повністю оптимізована, оскільки на ній відсутні «важкі» елементи. У найближчому майбутньому команда розробників MotoCMS планує створити AMP-версію інших сторінок офіційного сайту MotoCMS. Ви також можете оптимізувати свій сайт, скориставшись порадами і підказками в цій статті.

За рахунок чого збільшується швидкість завантаження?

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

АМР HTML

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

AMP HTML-документ повинен мати наступні характеристики:

  • починатися з <! doctype html>;
  • містити тег верхнього рівня <html ⚡> або <html amp>;
  • містити теги <head> і <body>;
  • всередині контейнера <head> містити тег <meta charset = "utf-8">;
  • в якості атрибута href тега <link rel = "canonical» href = "$ SOME_URL» /> всередині контейнера <head> містити посилання на сайт;
  • всередині контейнера <head> містити теги <meta name = "viewport» content = "width = device-width, minimum-scale = 1"> і <Style amp-boilerplate> ;
  • перед закриває тегом </ head> містити тег <script async src = "https://cdn.ampproject.org/v0.js»> </ script> для підключення АМР JS.

Якщо ви знайомі з HTML, у вас не повинно виникнути труднощів при створенні АМР-документа. Варто звернути увагу на те, що деякі теги для додавання контенту за типом зображень, аудіо та відео замінені АМР-аналогами. Наприклад, для додавання картинки на сайт замість звичного тега <img> використовується тег <amp-img>.

додаємо CSS

Можливості використання CSS при створенні АМР-версії сайту вельми обмежені. Перш ніж додати стилі, переконайтеся, що їх використання дозволено . Щоб додати файл стилю, скористайтеся тегом <style amp-custom> всередині контейнера <head>.

Зверніть увагу, що тег <style amp-custom> можна використовувати тільки один раз. Багаторазове підключення стилів в АМР заборонено.

AMP JS

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

АМР-кеш Google

Google за замовчуванням зберігає ваші АМР-сайти в кеші на своїх серверах. При цьому використовується протокол HTTP / 2 , Що сприяє збільшенню швидкості завантаження сайту. Власникам веб-сайтів варто дотримуватися загальноприйнятого формату URL для кеша АМР . Очевидно, що Google AMP-кеш працює з безпечним каналом HTTPS.

валідація АМР

Існує безліч способів валідації АМР-сторінок:

  • Google Search Console. Якщо у вас вже є готовий веб-сайт, за допомогою спеціального сервісу ви можете перевірити, чи відповідає він критеріям АМР.
  • Інтерактивний редактор. Якщо ви часто працюєте прямо в браузері, можете використовувати АМР-валідатор і виправляти помилки під час роботи над HTML-документом.
  • Консоль розробника. Це ще один спосіб редагувати АМР-сторінки прямо в браузері. Для цього додайте до URL-адресою сайту # development = 1 і почніть роботу з консоллю розробника (наприклад, http://www.mywebsite.com/released.amp.html # development = 1).
  • Розширення для браузера. Ви можете завантажити спеціальний інструмент для Chrome або Opera . Три колірних індикатора допоможуть вам візуально визначати помилки.
  • Простий валідатор. Для створення власного валідатора вам потрібно встановити Node.js з пакетним менеджером NPM і активувати командний рядок AMP HTML-валідатора за допомогою команди <npm install -g amphtml-validator>.

Чи потрібна вашому сайту АМР-версія?

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

  • Мобільний трафік. Перш ніж прийняти рішення про створення АМР-версії сайту, порахуйте, скільки відсотків користувачів переглядають ваш ресурс з мобільних пристроїв. Якщо статистика показує, що в основному користувачі заходять на сайт з телефонів і планшетів, зі створенням АМР-версії краще не зволікати!
  • Різноманітність контенту. Для користувача будь-якого мобільного пристрою нестатичні сайти з анімацією, спливаючими вікнами і іншими інтерактивними елементами - це справжній кошмар. Додаючи на сайт багато інтерактивного вмісту, будьте готові до збурень з боку користувачів. АМР - ідеальне рішення для веб-сайтів з величезною кількістю контенту, наприклад, інтернет-магазинів або інформаційних порталів. Користувачам таких сайтів буде набагато зручніше користуватися оптимізованої АМР-версією.
  • Ранжування. При ранжируванні сайтів пошуковою системою Google швидкість завантаження сторінок завжди береться до уваги. Незважаючи на те, що наявність АМР-версії не є вирішальним фактором, вибираючи між АМР-сторінкою і звичайної мобільного сторінкою, Google віддасть перевагу першому варіанту. Не забувайте, що АМР - це не тимчасове рішення для поліпшення вашого сайту. Цей тренд схвалений десятками авторитетних веб-ресурсів. Зараз відповідність сайту критеріям АМР не обов'язково, але не виключено, що найближчим часом воно стане таким.

Чому АМР - це вигідно

  • Миттєва завантаження. Згідно з дослідженнями Google і SOASTA, 70% веб-сторінок завантажуються більш, ніж за 10 секунд. Для АМР-сторінок цей показник зменшується втричі. Чудовий результат, чи не так?
  • Конверсія і показник відмов. За допомогою АМР ви можете значно збільшити рівень конверсії сайту і знизити показник відмов. Просто уявіть - будь-який користувач потрапляє на ваш сайт за лічені секунди. Це сподобається не тільки користувачам, але і вам самим, адже за таких умов перше враження про порталі напевно буде хорошим.
  • Посилений вплив рекламних оголошень. Якщо ви заробляєте на рекламі, неодмінно ознайомтеся з матеріалами цього дослідження . Медіакомпанії Hearst вдалося збільшити коефіцієнт КЕП на рекламних оголошеннях на 45%. Зрозуміло, у випадку з вашою фірмою цей показник може бути іншим, але наявність АМР-версії неодмінно сприятиме розвитку вашого бізнесу і отримання прибутку.
  • Open source. Вам не доведеться витрачатися на створення АМР-версії вашого сайту. Як згадувалося раніше, даний фреймворк доступний кожному і абсолютно безкоштовний.

Майбутнє прискорених мобільних сторінок

Зараз проект АМР тільки набирає обертів. І, хоча АМР існує неповних два роки, результати вже вражають. Станом на березень 2017 року інтернеті налічувалося близько 1,6 мільярда АМР-сторінок. І ця кількість тільки зростає - все більше і більше компаній використовують АМР, щоб зробити свої веб-сайти більш доступними для власників мобільних пристроїв.

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

Помітили помилку? Виділіть її та натисніть Ctrl + Enter, щоб повідомити нам.

Що таке Google AMP?
Чому так?
Що таке Google AMP?
Різниця очевидна, правда?
За рахунок чого збільшується швидкість завантаження?
Чи потрібна вашому сайту АМР-версія?
Чудовий результат, чи не так?
Помітили помилку?