Руководство для начинающих по ускоренным мобильным страницам (AMP)
Ускоренные мобильные страницы это инициатива Google, которая намеревается решить самую большую проблему мобильного Интернета - скорость. Потрясающий пользовательский опыт, который мы проектируем с большой осторожностью, мучительно медленен на мобильных устройствах.
Медлительность - не только проблема UX, но и снижает конверсию, а также наносит вред доступности исключая пользователей с более медленным интернет-соединением. AMP это командная работа, нацеленная на то, чтобы издатели могли создать оптимизированный для мобильных устройств контент один раз и загрузить его везде и сразу
.
С момента запуска многие издатели, такие как BBC, The Economist, Guardian News и Financial Times, реализовали эту инициативу, поэтому к настоящему времени мы можем с уверенностью предположить, что AMP - это инновация, которую стоит учитывать всем, кто хочет оставаться конкурентоспособным на мобильных устройствах. Web.
AMP в действии
Прежде чем погрузиться в детали, вот AMP demo, так что вы можете увидеть это в действии. Демо можно получить по этой ссылке.
Чтобы увидеть AMP в действии, вам нужно сделать две вещи:
- Просмотрите демонстрацию на мобильном устройстве или на мобильном симуляторе, например, Симулятор мобильных устройств Chrome DevTools.
- Запустите поисковый запрос на панели поиска. Поскольку Google AMP в настоящее время работает в основном с новостным сайтом, лучшим выбором будет свежая новость.
На скриншоте ниже вы можете увидеть, что я получил, когда использовал поисковый запрос Олимпийские игры в Рио
.
Как видите, страницы AMP выглядят как Google Rich Cards, оптимизированная для мобильных устройств карусель изображений, что Google выпустил в мае 2016 года.
Обратите внимание, как Google отличает страницы AMP от других страниц, оптимизированных для мобильных устройств. используя 2 разных ярлыка: AMP и Mobile-friendly. Также стоит нажать на некоторые результаты, чтобы увидеть, как выглядит веб-страница AMP и насколько быстро она работает на мобильных устройствах..
Техническое образование
AMP является веб-стандарт построены на существующих веб-технологиях и ориентированы на статический контент. Она имеет 3 разные части:
- AMP HTML: модифицированный HTML с (1) ограничение некоторых обычных функций HTML / CSS и (2) введение новых пользовательских тегов (Компоненты)
- AMP JS: применяет лучшие практики для уменьшения времени загрузки страницы
- AMP CDN: кеш со встроенной системой проверки, которая еще больше оптимизирует ваш сайт
Если вы хотите узнать больше о техническом опыте страниц AMP, посмотрите видео ниже, в котором Пол Бакаус из Google дает вступительный доклад на AMP.
Если вы хотите погрузиться глубже, стоит также понять, какие методы оптимизации AMP использует для повышения производительности на мобильных устройствах. В видео ниже Малте Убл, руководитель AMP Engineering, объясняет анатомия AMP в деталях.
AMP HTML
Ускоренные мобильные страницы обычные HTML-страницы что надо следовать правилам чтобы страницы загружались быстрее и рендерились с надежной производительностью.
Давайте посмотрим на самые важные вещи, которые вам нужно знать об этом. Вы также можете ознакомиться с полной спецификацией AMP HTML..
Решите, хотите ли вы отдельную страницу AMP
Для той же страницы статического контента, вы можете иметь 2 отдельные версии - один для AMP и один для не-AMP версии. Вы также можете выбрать только одна версия - страницу AMP, и используйте ее везде. Что касается поддержка браузера, Страница AMP Github утверждает:
Если вы все еще беспокоитесь о поддержке браузера, ознакомьтесь с публикацией Пола Айриша из Google о Stackoverflow.
Если вы хотите иметь две страницы (AMP и не AMP), вам нужно ссылка на каждого из них чтобы информировать поисковые системы о существовании два версии.
Добавьте следующий код в раздел страницы без AMP:
Также добавьте следующую строку в раздел страницы AMP:
Если у вас есть только одна страница AMP, вам все равно нужно свяжите это с собой следующим образом:
Стартовая Котельная
AMP Project предлагает разные стартовые шаблоны Вы можете использовать, чтобы начать. Взгляните на простейший шаблон AMP HTML ниже:
Привет, мир!
Вы можете видеть, что шаблон связывает обычную HTML-страницу, используя тег.
>