AMP стандарт для Drupal 8 — блог Drudesk
050 640 98 44
support@drudesk.com

Впровадження AMP стандарту для Drupal 8

Гадаємо, ви погодитеся, що мобільні пристрої стають дедалі значущими, адже вони приносять зручність у наші життя. Drupal 8 містить багато мобільних покращень і сьогодні ми зосередимо вашу увагу на одному з них — AMP стандарті. До речі, це — технічний блог-пост, написаний нашим розробником з Drudesk, як і попередній про перевірку і підвищення безпеки Drupal-сайту.

AMP (Accelerated Mobile Pages) — це стандарт, розроблений для пришвидшення завантаження вебсторінок на мобільних пристроях. Він складається з таких трьох частин:

  • AMP HTML — це HTML з певними обмеженнями та доповненнями;
  • AMP JS — інструмент високопродуктивної візуалізації;
  • Google AMP Cache — сервіс для обробки кешованих вебсторінок.

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

Детальніше про AMP

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

АМР стандарт забороняє додавання кастомного JavaScript коду. Це обмеження пов’язане із затримкою у відображенні вебсторінок, яку може спричиняти його виконання. Проте воно не стосується асинхронного JavaScript.

За стандартом АМР розміри усіх елементів, що підвантажуються зі сторонніх ресурсів, повинні бути наперед задані в HTML сторінки. Це дозволяє заздалегідь виділити місце під такі елементи та завантажувати макет сторінки без затримки через підвантаження елементів зі сторонніх джерел.

АМР надає свої засоби завантаження контенту для багатьох розширень. Окремі HTTP запити, необхідні для підвантаження даних, не спричиняють затримку в завантаженні сторінки, оскільки АМР наперед створює елементи для цих даних.

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

Щодо стилів, то згідно з АМР стандартом, дозволені тільки інлайн CSS стилі, а їх розмір не повинен перевищувати 50 KB.

Ще одним бар’єром на шляху до підвищення швидкодії є веб-шрифти. Зазвичай вони дуже великі, а необхідність їх завантаження нікуди не зникає, незалежно від пристрою, з якого відвідується сайт. AMP стандарт вирішує цю проблему, ставлячи підвантаження шрифтів на перше місце. А вже після них ідуть HTTP запити для JavaScript та CSS стилів. Таким чином зникає затримка початку завантаження шрифтів.

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

Встановлення AMP

Для того, щоб налаштувати виведення сторінок сайту в AMP форматі, необхідно встановити:

Встановимо AMP PHP Library через composer.

Додамо необхідний репозиторій:

composer config repositories.drupal composer https://packages.drupal.org/8

Оновимо composer.json, додавши в залежності бібліотеку AMP, та почекаємо, поки встановляться необхідні залежності.

composer require "drupal/amp"

Встановимо модулі Token та AMP. Встановимо AMP сабтему як тему за замовчуванням.

Налаштування типів контенту. AMP режим перегляду та форматування полів

Перейдемо до налаштувань модуля AMP (admin/config/content/amp).

Налаштування типів контенту AMP

Модуль створює власний режим перегляду (AMP) для наявних на сайті типів контенту. Включити AMP версію можна окремо для будь якого типу контенту, додавши AMP view mode в його налаштуваннях (admin/structure/types/manage/<content_type>/display). В налаштуваннях режиму перегляду можна встановити спеціальні AMP форматтери для полів типу контенту.

спеціальні AMP форматтери для полів типу контенту

На даний момент (версія модуля AMP — 8.x-1.0) доступні такі AMP форматтери для полів:

  • AMP Iframe (string, text, text_long, text_with_summary)
  • AMP Image (image)
  • AMP Summary or Trimmed (string, text_with_summary)
  • AMP Text (string, text, text_long, text_with_summary)
  • AMP Trimmed Text (string, text, text_long, text_with_summary)
  • AMP Video (file)

Для деяких AMP форматтерів є додаткові налаштування. Так, наприклад, для AMP Image форматтера можна задати якийсь із AMP стилів зображень та AMP макетів.

AMP тема

В налаштуваннях модуля AMP необхідно вибрати одну із доступних AMP тем (ExAMPle Subtheme або ж додати свою власну). При створенні власної AMP теми слід пам’ятати, що додавати можна тільки стилі. Додати кастомний javascript неможливо. Для створення стилів можна використовувати sass чи less, але для 8 версії Друпалу стилі необхідно додавати виключно у twig темплейт. Також слід знати, що деякі стилі обмежені у використанні, а деякі заборонені взагалі.

Інтеграції з сервісами

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

Інтеграції з сервісами

В налаштуваннях модуля AMP можна додати інтеграцію з сервісами Google AdSense та Google DoubleClick. Також можна включити та налаштувати технологію AMP-PIXEL.

Налаштування AMP бібліотеки

AMP php-бібліотека видаляє теги та атрибути, що не підтримуються стандартами AMP. Це може вплинути на html контент, який видають встановлені на сайті модулі, тому її увімкнення вимагає додаткового тестування сайту.

Налаштування AMP бібліотеки

Щоб додати можливість тестування, потрібно увімкнути таку опцію в налаштуваннях модуля: "Power User: Run the whole HTML page through the AMP library". Крім того, увімкнення цієї опції дозволяє додати коментар зі статистичними данними про швидкодію при завантаженні сторінки.

Налаштування AMP бібліотеки

Цей коментар можна знайти в кінці тегу body.

На даний момент надаються такі статистичні дані щодо швидкодії:

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

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

Щоб перевірити, чи коректно працює AMP бібліотека, можна перейти за посиланням "Test that AMP is configured properly" в налаштуваннях модуля. Якщо бібліотека налаштована правильно, то можна побачити, як обробляються неправильні або заборонені теги, атрибути та значення атрибутів.

перевірити, чи коректно працює AMP бібліотека

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

<link href="http://mysite.org/node/1?amp=1" rel="amphtml">

Труднощі при використанні модуля AMP

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

Тестування AMP розмітки через AMP Validator

Для тестування веб-сторінок на відповідність AMP стандартам можна використовувати розширення AMP Validator для Google Chrome, а також AMP Validator для Opera.

Тестування AMP розмітки

Тестування AMP розмітки

Встановивши та увімкнувши розширення, можна відслідковувати усі невідповідності веб-сторінки AMP розмітці.

Порівняння швидкодії сайту

Подивимося на результати базового налаштування AMP стандарту.

Створимо ноду типу Article та протестуємо сторінку її перегляду спочатку без впровадженого AMP стандарту. Для цього скористаємося сервісами GTmetrix та think with Google.

До пророблених налаштувань:

Порівняння швидкодії сайту

Порівняння швидкодії сайту

Порівняння швидкодії сайту

Порівняння швидкодії сайту

Порівняння швидкодії сайту

Після налаштувань:

Порівняння швидкодії сайту після налаштувань

Порівняння швидкодії сайту після налаштувань

Порівняння швидкодії сайту після налаштувань

Порівняння швидкодії сайту після налаштувань

Порівняння швидкодії сайту після налаштувань

Бачимо, як за допомогою AMP стандарту було зменшено кількість запитів та покращено показник Inline small CSS завдяки використання тільки інлайн CSS стилів. Також суттєво підвищився показник використання CDN. Тестування через think with Google показало підвищення швидкодії сайту на мобільних пристроях на 8 пунктів, перевівши показник швидкодії на новий рівень.

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

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

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