Посібник для початківців для прискорених мобільних сторінок (AMP)
Прискорені мобільні сторінки це ініціатива Google, яка має намір вирішити найбільшу проблему мобільного Інтернету - швидкість. Дивовижний досвід користувача, який ми розробляємо з великою обережністю, болісно повільний на мобільному телефоні.
Повільність не є виключно проблемою UX, а й зменшує показники переходів, і шкодить доступності виключаючи користувачів з більш повільним підключенням до Інтернету. AMP це спільна робота, спрямована на те, щоб дозволити видавцям створити мобільний оптимізований вміст один раз і завантажувати його миттєво скрізь
.
З моменту запуску, багато видавців, таких як BBC, The Economist, Guardian News, і Financial Times реалізували цю ініціативу, тому зараз ми можемо сміливо припустити, що AMP - це новаторство, яке варто розглянути для всіх, хто хоче залишатися конкурентоспроможним на мобільному телефоні web.
AMP в дії
Перед тим, як зануритися в деталі, ось тут AMP демо, так що ви можете побачити його в дії. Доступ до демо-версії можна отримати за цим посиланням.
Щоб переглянути AMP у дії, потрібно виконати дві дії:
- Перегляньте демонстрацію або на мобільному пристрої, або на мобільному симуляторі, наприклад Симулятор мобільних пристроїв Chrome DevTools.
- Запустіть пошуковий запит на панелі пошуку. Оскільки в даний час Google AMP працює переважно з новинним сайтом, найкращим вибором є свіжа новина.
На скріншоті нижче ви можете побачити те, що я отримав під час пошуку олімпійські ігри
.
Як ви можете бачити, сторінки 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
> PHHSNEWS