Руководство для начинающих по ускоренным мобильным страницам (AMP)

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

Медлительность - не только проблема UX, но и снижает конверсию, а также наносит вред доступности исключая пользователей с более медленным интернет-соединением. AMP это командная работа, нацеленная на то, чтобы издатели могли создать оптимизированный для мобильных устройств контент один раз и загрузить его везде и сразу.

С момента запуска многие издатели, такие как BBC, The Economist, Guardian News и Financial Times, реализовали эту инициативу, поэтому к настоящему времени мы можем с уверенностью предположить, что AMP - это инновация, которую стоит учитывать всем, кто хочет оставаться конкурентоспособным на мобильных устройствах. Web.

AMP в действии

Прежде чем погрузиться в детали, вот AMP demo, так что вы можете увидеть это в действии. Демо можно получить по этой ссылке.

Чтобы увидеть AMP в действии, вам нужно сделать две вещи:

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

На скриншоте ниже вы можете увидеть, что я получил, когда использовал поисковый запрос Олимпийские игры в Рио.

Как видите, страницы AMP выглядят как Google Rich Cards, оптимизированная для мобильных устройств карусель изображений, что Google выпустил в мае 2016 года.

Обратите внимание, как Google отличает страницы AMP от других страниц, оптимизированных для мобильных устройств. используя 2 разных ярлыка: AMP и Mobile-friendly. Также стоит нажать на некоторые результаты, чтобы увидеть, как выглядит веб-страница AMP и насколько быстро она работает на мобильных устройствах..

Техническое образование

AMP является веб-стандарт построены на существующих веб-технологиях и ориентированы на статический контент. Она имеет 3 разные части:

1. AMP HTML: модифицированный HTML с (1) ограничение некоторых обычных функций HTML / CSS и (2) введение новых пользовательских тегов (Компоненты)
2. AMP JS: применяет лучшие практики для уменьшения времени загрузки страницы
3. 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-страницу, используя тег. > тег добавляет Библиотека AMP JS.

Вы можете иметь только один встроенная таблица стилей, и есть также много запрещенные правила стиля, например, вы не можете использовать !важный классификатор, @Импортировать правила и псевдоклассы.

Не забудьте проверить ограничения таблицы стилей, прежде чем начать писать CSS для ваших страниц AMP.

Есть еще одна вещь, которую важно знать о правилах стиля AMP: вы не может использовать любой макет, который вы хотите - так как это один из принципов AMP, позволяющий браузеру рассчитать пространство каждого элемента на странице заблаговременно.

Посмотрите на поддерживаемые и неподдерживаемые макеты.

AMP JS

Документы AMP могут включать ни авторские, ни сторонние скрипты JavaScripts, однако это не означает, что ускоренные мобильные страницы вообще не используют JavaScript. Библиотека JavaScript AMP (среда выполнения AMP) отвечает за быструю загрузку и рендеринг страниц AMP применение лучших методов работы.

AMP Компоненты

Компоненты AMP являются определяется временем выполнения AMP. Они вышеупомянутые HTML-теги для AMP вам нужно использовать вместо их обычного аналога, такого как вместо тег.

Каждый компонент AMP содержит конкретный внешний ресурс (изображение, видео, код для вставки и т. д.). Внешние ресурсы склонны тормозить сайты. Основной целью этого решения является управлять загрузкой внешних ресурсов разумным образом, запустив их внутри песочницы.

AMP предоставляет вам 2 вида компонентов:

1. Встроенные компоненты: они всегда доступны в каждом документе AMP, они встроенный прямо во время выполнения AMP. В настоящее время их пять:
   1. для показа рекламы
   2. для изображений, он используется вместо тег
   3. для отслеживания пикселей (используется для подсчета просмотров страниц)
   4. для прямого встраивания видеофайла HTML5, заменяет тег
   5. для встроенных элементов (может использоваться вместо в определенных случаях)
2. Расширенные компоненты: Дополнительные компоненты, вы должны явно включить их в ваш документ AMP. Есть много полезных, таких как а также , смотрите полный список. Многие из них могут быть использованы для вставлять контент сторонних сервисов, например из твиттера или инстаграма.

Обратите внимание, что все внешне загруженные ресурсы, такие как а также должен иметь известный а также атрибут для того, чтобы включить браузер рассчитать макет заранее.

AMP CDN

AMP CDN в основном кеш, называется Google AMP Cache. Он выбирает действительные документы AMP, кэширует и загружает их. AMP CDN также имеет встроенная система проверки.

Это стоит тестирование ваших страниц AMP прежде чем позволить им выходить в интернет, чтобы безопасно пройти валидатор. Вы можете сделать это разными способами.

Хорошо знать, что AMP CDN использует протокол HTTP / 2 для достижения наилучшей производительности.

AMP Tools

Есть несколько отличных инструментов, которые могут помочь вам реализовать Ускоренные мобильные страницы, давайте посмотрим на некоторые из них.

Google предоставляет веб-мастерам удобный Инструмент отчета о состоянии AMP который показывает количество успешно проиндексированных страниц AMP, а также ошибки, связанные с AMP.

Lullabot-х AMP PHP Library позволяет конвертировать ваши HTML-страницы в AMP HTML, а также сообщает о соответствии любого HTML-документа стандартам AMP.

Если вы хотите использовать AMP на своем сайте WordPress, прочитайте учебник Yoast о том, как настроить WordPress для AMP и как AMP работает с плагином Yoast SEO..

Вы также можете проверить Automattic's AMP плагин это позволяет вам включить ускоренные мобильные страницы на вашем сайте WordPress.

Дальнейшие соображения

Если вы все еще не уверены, посмотрите видео о быстрый тест скорости ниже.

Джонатан Абрамс, основатель Nuzzel, утверждает, что даже сайты, оптимизированные для мобильных устройств, такие как New York Times, загружаются значительно быстрее. - вместо трех секунд, чтобы загрузить среднюю страницу, страница загружается в менее чем за полсекунды когда ускоренные мобильные страницы Google включены.

Вы также можете прочитать интересную статью в Verge о конкурсе Google AMP и мгновенных статей Facebook. Если вы все еще ищете ответ на вопрос «в чем подвох?», Ознакомьтесь с постом Йоста, в котором упоминаются опасения, что AMP в основном возвращает нас к Интернету до 2000 года, и вопросы, действительно ли это открытый стандарт.

.