Google AMP — Make your content faster!

 

Что такое AMP?

 

Способ создавать статические страницы, которые будут загружаться и отображаться очень быстро

 

Facebook Instant Articles

 

Май 2015

 

Apple News

 

Июнь 2015

 

Open Source

 

https://github.com/ampproject

 

“Accelerated Mobile Pages load four times faster and use eight times less data than traditional mobile-optimized pages.”

Someone from Pinterest

1

За счет чего быстро?

 

Минимизация блокирования рендеринга

 
  • Только асинхронные скрипты
  • Размеры всех внешних ресурсов определяются до их непосредственной загрузки
  • Никаких 3rd party скриптов. Да и своих тоже. Только то, что гугл разрешил
  • Инлайн стили
  • Анимации только на GPU
 

Google AMP Cache

 
  • CDN
  • Может отдавать уменьшенные картинки, рассчитанные на вьюпорт пользователя
  • Может инлайнить картинки с первого экрана
  • Может инлайнить веб-компоненты
  • Может минифицировать html и css
 

Ограничения HTML

 
  • <script> можно только для AMP скрипта и разрешенных веб-компонентов
  • <form> и <input> тоже нельзя, но можно <button>
  • <frame> и <frameset> нельзя
  • <object>, <param>, <applet>, <embed>
  • Для части тегов есть свои amp- варианты
 

Ограничения CSS

 
  • Только один тег <style> со своими стилями, задавать стили через атрибут нельзя
  • Не более 50 KB стилей
  • !important нельзя
  • Анимировать можно только opacity и transform
 

А как же JS?

 
  • Можно метаданные JSON-LD
  • Веб-компоненты, созданные в рамках AMP проекта
  • Есть <amp-iframe>, который дает возможность подгружать что-нибудь со скриптами
  • Можно предлагать и участвовать в разработке разрешенных веб-компонентов
 

Компоненты

 

Из коробки

 
  • amp-ad
  • amp-embed (альяс для amp-ad)
  • amp-img
  • amp-video
  • amp-pixel
 

Пример компонента

 
<head>
  <script async custom-element="amp-iframe" src="https://cdn.ampproject.org/v0/amp-iframe-0.1.js"></script>
</head>
<body>
  <amp-iframe width=300 height=300
    sandbox="allow-scripts allow-same-origin"
    layout="responsive"
    frameborder="0"
    src="https://foo.com/iframe">
  </amp-iframe>
</body>

Встраивание контента

 
  • amp-audio
  • amp-brightcove
  • amp-dailymotion
  • amp-facebook
  • amp-iframe
  • amp-instagram
  • amp-pinterest
  • amp-soundcloud
  • amp-twitter
  • amp-vimeo
  • amp-vine
  • amp-youtube
6

amp-analytics

 
  • Adobe Analytics
  • AT Internet
  • Chartbeat
  • comScore
  • Google Analytics
  • INFOnline / IVW
  • Krux
  • Médiamétrie
  • Parsely
  • Quantcast Measurement
  • SimpleReach
  • Webtrekk
6

Интерактивные компоненты

 
  • amp-accordion
  • amp-carousel
  • amp-lightbox
 

Иногда полезное

 
  • amp-fit-text
  • amp-install-serviceworker
  • amp-list
  • amp-mustache
  • amp-social-share
  • amp-user-notification
1

AMP HTML

 
<!doctype html>
<html ⚡ lang="en">
  <head>
    <meta charset="utf-8">
    <title>Hello, AMPs</title>
    <link rel="canonical" href="http://example.ampproject.org/article-metadata.html" />
    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
    <script type="application/ld+json">
      {
        "@context": "http://schema.org",
        "@type": "NewsArticle",
        "headline": "Open-source framework for publishing content",
        "datePublished": "2015-10-07T12:02:41Z",
        "image": [
          "logo.jpg"
        ]
      }
    </script>
    <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>
    <h1>Welcome to the mobile web</h1>
  </body>
</html>

Валидация

 

Как гугл узнает

 
<link rel="amphtml" href="https://www.example.com/url/to/amp/document.html">

Полезные ссылки

 
 

Google AMP

By Pavel Trehubau

Made with Slides.com

Google AMP

  • 425

More from Pavel Trehubau