Посібник для початківців для прискорених мобільних сторінок (AMP)

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

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

З моменту запуску, багато видавців, таких як BBC, The Economist, Guardian News, і Financial Times реалізували цю ініціативу, тому зараз ми можемо сміливо припустити, що AMP - це новаторство, яке варто розглянути для всіх, хто хоче залишатися конкурентоспроможним на мобільному телефоні web.

AMP в дії

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

Щоб переглянути AMP у дії, потрібно виконати дві дії:

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

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

Прискорене демонстрація мобільних сторінок на IPad

Як ви можете бачити, сторінки AMP відображаються як Google Rich Card, a Карусель із зображенням, оптимізованим для мобільних пристроїв, що Google випустив у травні 2016 року.

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

Технічна довідка

AMP являє собою a веб-стандарт побудована на існуючих веб-технологіях і зосереджена на статичному вмісті. Це має 3 різних частин:

HTML-код AMP: змінено HTML з (1) обмеження певних звичайних функцій HTML / CSS і (2) введення нових спеціальних тегів (Компоненти)
AMP JS: застосовує найкращі практики для зменшення часу завантаження сторінки
AMP CDN: кеш із вбудованою системою перевірки, що додатково оптимізує ваш сайт

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

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

HTML AMP

Прискорені мобільні сторінки звичайні сторінки HTML що потрібно дотримуйтесь набору правил для швидшого завантаження сторінок і відтворення з надійною продуктивністю.

Давайте подивимося на найважливіші речі, які потрібно знати про це. Ви також можете подивитися на повну специфікацію AMP HTML.

Вирішіть, чи хочете Ви мати окрему сторінку AMP

Для тієї самої статичної сторінки вмісту ви можете мати 2 окремі версії - один для AMP і один для не-AMP версії. Ви також можете вибрати тільки одна версія - сторінки AMP і використовуйте його всюди. Стосовно підтримка браузера, Стверджується, що сторінка AMP Github:

Якщо ви все ще стурбовані підтримкою веб-переглядача, ознайомтеся з повідомленням Paul Irish Google про Stackoverflow.

Якщо ви хочете мати дві сторінки (AMP і не AMP), вам потрібно посилання на кожну з них щоб інформувати пошукові системи про існування два версії.

Додайте наступний код до на сторінці, яка не є AMP:

Також додайте наступний рядок до сторінки AMP:

Якщо у вас є тільки одна сторінка AMP, вам все одно потрібно пов'язати його з собою таким чином:

Починаючи Boilerplate

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

          Привіт Світ!

Ви можете бачити, що шаблони посилаються на звичайну HTML-сторінку за допомогою . The > додає тег Бібліотека AMP JS.

 The   
Можна тільки мати один Вбудована таблиця стилів, а також є багато заборонені правила стилю, наприклад, ви не можете використовувати !важливо кваліфікатор, @import правило, і псевдо-класи.
 Не забудьте перевірити обмеження на таблицю стилів, перш ніж починати писати CSS для ваших сторінок AMP.
 Є ще одна річ, що важливо знати про правила стилів AMP: ви не можна використовувати будь-який потрібний макет - тому що це один з принципів AMP, що дозволяють браузеру Обчислити простір кожного елемента на сторінці наперед.
 Погляньте на підтримувані та непідтримувані макети.
 AMP JS
 Документи AMP можуть включати ані будь-який написаний автором, а також будь-який інший JavaScript, однак це не означає, що прискорені мобільні сторінки взагалі не використовують JavaScript. Бібліотека JavaScript AMP (час виконання AMP) відповідає за швидке завантаження та відтворення сторінок AMP забезпечення найкращих практик ефективності.
 Компоненти AMP
 Компоненти AMP є визначається часом виконання AMP. Вони є вищезазначеними Спеціальні HTML-теги AMP потрібно використовувати замість звичайного аналога, наприклад  замість  тег.
 Кожен компонент AMP містить a особливий зовнішній ресурс (зображення, відео, вбудовування тощо). Зовнішні ресурси можуть сповільнювати роботу веб-сайтів. Основна мета цього рішення - це керувати завантаженням зовнішніх ресурсів розумним чином, запустивши їх всередині пісочниці.
 AMP надає вам 2 види компонентів:
 Вбудовані компоненти: вони завжди доступні в кожному документі AMP вбудований безпосередньо до середовища виконання AMP. Наразі їх п'ять:  для показу оголошень
  для зображень він використовується замість  тег
  для відстеження пікселів (використовується для підрахунку переглядів сторінок)
  для прямого вкладання відеофайлу HTML5, замінює  тег
  для вбудованих елементів (можна використовувати замість  у певних випадках)
 
 Розширені компоненти: Додаткові компоненти, ви повинні явно включати їх в документ AMP. Є багато корисних, наприклад  і , Переглянути повний список. До багатьох з них можна звикнути вбудовувати вміст служб третіх сторін, наприклад, з Twitter або Instagram.
 
Зауважимо, що всі зовні завантажені ресурси, такі як  і  має бути відомим  і  атрибут щоб увімкнути браузер Розрахуйте розкладку заздалегідь.
 AMP CDN
 The AMP CDN це в основному кеш, що називається Кеш AMP Google. Він отримує допустимі документи AMP, кешує та завантажує їх. AMP CDN також має a вбудована система перевірки.
 Це варто тестування сторінок AMP перед тим, як дозволити їм безпечно перейти в онлайн пройти валідатор. Ви можете зробити це по-різному.
  IMAGE: Проект AMP
Добре знати, що AMP CDN використовує протокол HTTP / 2 для досягнення найкращої продуктивності.
 Інструменти AMP
 Є кілька чудових інструментів, які допоможуть вам реалізувати прискорені мобільні сторінки, давайте подивимося на деякі з них.
 Google надає веб-майстрам зручний доступ Інструмент звіту про стан AMP що показує кількість успішно індексованих сторінок AMP, а також помилки, пов'язані з AMP.
 Lullabot's Бібліотека AMP PHP дозволяє конвертувати ваші HTML-сторінки в AMP HTML, а також повідомляє про відповідність будь-якого HTML-документа стандартам AMP.
 Якщо ви хочете використовувати AMP на вашому сайті WordPress, прочитайте підручник Yoast про те, як налаштувати WordPress для AMP, і як AMP працює з плагіном Yoast SEO.
 Ви також можете перевірити Automattic Плагін AMP що дозволяє активувати прискорені мобільні сторінки на вашому сайті WordPress.
  Зображення: WordPress.org
Подальші міркування
 Якщо ви ще не переконані, подивіться на відео про швидкий тест швидкості нижче.
 
 Джонатан Абрамс, засновник Nuzzel, робить ще кращі претензії, оскільки стверджує, що навіть оптимізовані для мобільних пристроїв сайти, такі як New York Times, завантажують значно швидше - замість трисекундного завантаження середньої сторінки, завантажується сторінка менше половини секунди , коли активовані прискорені мобільні сторінки Google.
 Ви також можете прочитати цікаву статтю у Verge про конкурс Google AMP та статей Instant Facebook. Якщо ви все ще шукаєте відповідь на запитання "що є?", Перевірте посаду Yoast, в якій згадуються побоювання, що AMP в основному повертає нас до інтернету до 2000 року, і запитує, чи це дійсно відкритий стандарт.
 .