AMP Conf 2018. Feb 13/14. Amsterdam.
AMP Conf. Feb 13/14.

AMP обеспечивает отличную работу пользователей на многих платформах

проиграть видео

Страницы AMP построены с 3-мя основными компонентами.

AMP HTML

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

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

<!doctype html>
<html >
 <head>
   <meta charset="utf-8">
   <link rel="canonical" href="hello-world.html">
   <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
   <style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
   <script async src="https://cdn.ampproject.org/v0.js"></script>
 </head>
 <body>Hello World!</body>
</html>

Хотя большинство тегов в странице AMP HTML являются обычными тегами HTML, некоторые теги HTML заменяются тегами AMP (см. также Теги HTML в спецификации AMP). С помощью этих персонализированных элементов, которые называются компонентами AMP HTML, можно легко создать стандартные шаблоны для реализации эффективного способа представления страниц.

Например, тег amp-img обеспечивает полную поддержку атрибута srcset даже в тех браузерах, которые пока его не поддерживают. Узнайте, как создать свою первую страницу AMP HTML.

AMP JS

Библиотека AMP JS обеспечивает быструю визуализацию страниц AMP HTML.

Библиотека AMP JS реализует все практические методы эффективного применения AMP, управляет загрузкой ресурсов и предоставляет упомянутые выше персонализированные теги для быстрой визуализации страницы.

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

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

Чтобы получить дополнительную информацию не только по методам оптимизации, но и об имеющихся ограничениях, ознакомьтесь со спецификацией AMP HTML.

AMP Cache

Дополнительный кеш Google AMP Cache используется для предоставления страниц AMP HTML.

Кеш Google AMP Cache представляет собой сеть на основе прокси-серверов для предоставления всех допустимых документов AMP. Этот кеш получает страницы AMP HTML, кеширует их и автоматически повышает скорость их отображения. При использовании Google AMP Cache сам документ, все файлы JS и все изображения загружаются из одного источника, использующего HTTP 2.0 для максимальной эффективности отображения.

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

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

Ознакомьтесь с дополнительной информацией о тестировании страниц AMP HTML.

Узнайте, что может сделать AMP для вас