"amp - технология на три буквы", Макс Фролов, moscowjs 29

AMP: технология на три буквы

29

Rambler & CoМакс Фролов

[email protected]

mailto:[email protected]?subject=

AMP: технология на три буквы

Accelerated Mobile Pages

2

Что же это такое?

6

AMP Project - средство для ускоренной загрузки статических мобильных веб-страниц


• AMP HTML

7



• AMP HTML

• AMP JS Library

8



• AMP HTML

• AMP JS Library

• Google AMP Cache

9


AMP в поисковой выдаче

10

Мобильная Lenta AMP Lenta

11

Мобильная Lenta AMP Lenta

12

抜刀術 [баттодзюцу]

13

Первый экран

Остальное может подождать чуть дольше

14

Чуть-чуть о технической стороне

15

Critical rendering path

16

Key parts:

• Специфицированная структура страницы

• Ограничения стилевого оформления

• Правильно сформированный контент

• Нет кастомного JS-кода (ну почти :)

• Семантическая микроразметка страниц

• Валидация специальными инструментами

17

AMP HTML

18

19

…

Canonical link

style amp-custom (<50kB)

microdata

noscript fallback style

AMP JS Library

AMP JS custom components

AMP Document <HEAD>

<html amp lang="en">

20

…

Canonical link


microdata


AMP JS Library


<link rel="canonical" href=" … " />

21

…

Canonical link


microdata


AMP JS Library


<style amp-custom>{… Наши стили …}</style>

22

…

Canonical link


microdata


AMP JS Library


<script type="application/ld+json">

{… Microdata …}

</script>

23

…

Canonical link


microdata


AMP JS Library


<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>

24

…

Canonical link


microdata


AMP JS Library


<script async

src="https://cdn.ampproject.org/v0.js">

</script>

25

…

Canonical link


microdata


AMP JS Library


<script async src="..."

custom-element="amp-facebook">

</script>

<script async src="…"

custom-element="amp-twitter">

</script>

AMP Components

26

AMP Components

•amp-img•amp-ad•amp-pixel•amp-video

27

Из коробки

https://github.com/ampproject/amphtml/blob/master/builtins/amp-img.md

https://github.com/ampproject/amphtml/blob/master/builtins/amp-ad.md

https://github.com/ampproject/amphtml/blob/master/builtins/amp-pixel.md

https://github.com/ampproject/amphtml/blob/master/builtins/amp-video.md

AMP Components

•amp-img•amp-ad•amp-pixel•amp-video

•amp-carousel•amp-list•amp-fit-text•amp-lightbox

•amp-iframe•amp-instagram•amp-twitter

•amp-youtube•… и многое другое!

28

Из коробки Подключаемые

https://github.com/ampproject/amphtml/blob/master/builtins/amp-img.md

https://github.com/ampproject/amphtml/blob/master/builtins/amp-ad.md

https://github.com/ampproject/amphtml/blob/master/builtins/amp-pixel.md

https://github.com/ampproject/amphtml/blob/master/builtins/amp-video.md

<amp-img width="500" height="500" src="ampimg.jpg" alt="A retina ready amp image" />

Пример: <amp-img>

29

<amp-img width="500" height="500" src="ampimg.jpg" alt="A retina ready amp image" />

Пример: <amp-img>

30

Размер медиаконтента должен быть заранее задан!

Что можно и чего нельзя

31


HTMLНЕЛЬЗЯ:

32


HTMLНЕЛЬЗЯ:

script, base, frame, frameset,

object, param, applet, embed

33


HTMLНЕЛЬЗЯ:



input, textarea, select, option

34


HTMLНЕЛЬЗЯ:




img -> amp-img

video -> amp-video audio -> amp-audio

iframe -> amp-iframe

35


HTMLНЕЛЬЗЯ:




img -> amp-img



div style="{…}"

36


HTMLНЕЛЬЗЯ:




img -> amp-img



div style="{…}"

37

HTMLOK!


HTMLНЕЛЬЗЯ:




img -> amp-img



div style="{…}"

38

HTML

все остальные HTML5 - теги

OK!


HTMLНЕЛЬЗЯ:




img -> amp-img



div style="{…}"

39

HTML


OK!

AMP components


HTMLНЕЛЬЗЯ:




img -> amp-img



div style="{…}"

40

HTML


OK!

AMP components

SVG


HTMLНЕЛЬЗЯ:




img -> amp-img



div style="{…}"

41

HTML


OK!

AMP components

SVG

Скрипты внутри amp-iframe


CSSНЕЛЬЗЯ:

42


* , :not()

CSSНЕЛЬЗЯ:

43


* , :not()

CSSНЕЛЬЗЯ:

!important

44


* , :not()

CSSНЕЛЬЗЯ:

!important

filter

45


* , :not()

CSSНЕЛЬЗЯ:

!important

filter

overflow: auto

overflow: scroll

46


* , :not()

CSSНЕЛЬЗЯ:

!important

filter

overflow: auto

overflow: scroll

@import

47


* , :not()

CSSНЕЛЬЗЯ:

!important

filter

overflow: auto

overflow: scroll

@import

.-amp-…, .i-amp…

48


* , :not()

CSSНЕЛЬЗЯ:

!important

filter

overflow: auto

overflow: scroll

@import


49

CSS

OK!


* , :not()

CSSНЕЛЬЗЯ:

!important

filter

overflow: auto

overflow: scroll

@import


50

CSS

OK!

@font-face @keyframes

@media @supports


* , :not()

CSSНЕЛЬЗЯ:

!important

filter

overflow: auto

overflow: scroll

@import


51

CSS

OK!

@font-face @keyframes

@media @supports

transition opacity

transform

Микроразметка

52


https://schema.org/

53


https://schema.org/

JSON-LD Microdata

54

<section itemscope itemtype="http://schema.org/Person"> Hello, my name is <span itemprop="name">John Doe</span>, I am a<span itemprop="jobTitle">Graduate research assistant </span>

at the <span itemprop="affiliation">University of Dreams</span></section>

Microdata

56

Инструменты Google

57

AMP Validator

http://localhost:8000/released.amp.html#development=1

58

https://developers.google.com/structured-data/testing-tool/

59

https://www.google.com/webmasters/tools/

60

Так каков же выигрыш в скорости?

61

lenta amp vs m.lenta

62

• Время загрузки страницы меньше в 2 - 5 раз


63


• Количество запросов меньше в ~ 10 раз


64



• Время загрузки стабильно из разных точек мира


65




• Вес страницы меньше в 1.5 - 2 раза


66




• Вес страницы меньше в 1.5 - 2 раза

Mobile site

67

AMP

68

Резюме:

69

Резюме:

• AMP даёт значительный прирост скорости

70

Резюме:


• Внедрение несложное и быстрое

71

Резюме:



• Отлично подходит для контентных сайтов

72

Резюме:




• Есть ряд ограничений

73

Резюме:





• Проект открытый и активно развивается

74

Резюме:





• Проект открытый и активно развивается

• В перспективе прямая поддержка

75

Infohttp://tinyurl.com/amp-moscowjs

Thanks!

76

"amp - технология на три буквы", Макс Фролов, moscowjs 29

Software