New AMP Roadshows.
AMP Roadshows

An open source effort to improve the content ecosystem for everyone.

AMP is an open-source library that provides a straightforward way to create web pages that are compelling, smooth, and load near instantaneously for users. AMP pages are just web pages that you can link to and are controlled by you.

AMP builds on your existing skill sets and frameworks to create web pages. AMP is supported by many different platforms, and it's compatible across browsers.

AMP's ecosystem includes 25 million domains, 100+ technology providers, and leading platforms, that span the areas of publishing, advertising, e-commerce, local and small businesses, and more!

Learn more from this introductory video

Страницы 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.

Learn AMP's design principles

Explore Design Principles

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