"AMP - технология на три буквы", Макс Фролов, MoscowJS 29
Transcript of "AMP - технология на три буквы", Макс Фролов, MoscowJS 29
![Page 1: "AMP - технология на три буквы", Макс Фролов, MoscowJS 29](https://reader033.fdocument.pub/reader033/viewer/2022052706/58ecf0531a28abb3418b4589/html5/thumbnails/1.jpg)
AMP: технология на три буквы
29
Rambler & CoМакс Фролов
![Page 2: "AMP - технология на три буквы", Макс Фролов, MoscowJS 29](https://reader033.fdocument.pub/reader033/viewer/2022052706/58ecf0531a28abb3418b4589/html5/thumbnails/2.jpg)
AMP: технология на три буквы
Accelerated Mobile Pages
2
![Page 3: "AMP - технология на три буквы", Макс Фролов, MoscowJS 29](https://reader033.fdocument.pub/reader033/viewer/2022052706/58ecf0531a28abb3418b4589/html5/thumbnails/3.jpg)
3
![Page 4: "AMP - технология на три буквы", Макс Фролов, MoscowJS 29](https://reader033.fdocument.pub/reader033/viewer/2022052706/58ecf0531a28abb3418b4589/html5/thumbnails/4.jpg)
4
![Page 5: "AMP - технология на три буквы", Макс Фролов, MoscowJS 29](https://reader033.fdocument.pub/reader033/viewer/2022052706/58ecf0531a28abb3418b4589/html5/thumbnails/5.jpg)
5
![Page 6: "AMP - технология на три буквы", Макс Фролов, MoscowJS 29](https://reader033.fdocument.pub/reader033/viewer/2022052706/58ecf0531a28abb3418b4589/html5/thumbnails/6.jpg)
Что же это такое?
6
AMP Project - средство для ускоренной загрузки статических мобильных веб-страниц
![Page 7: "AMP - технология на три буквы", Макс Фролов, MoscowJS 29](https://reader033.fdocument.pub/reader033/viewer/2022052706/58ecf0531a28abb3418b4589/html5/thumbnails/7.jpg)
Что же это такое?
• AMP HTML
7
AMP Project - средство для ускоренной загрузки статических мобильных веб-страниц
![Page 8: "AMP - технология на три буквы", Макс Фролов, MoscowJS 29](https://reader033.fdocument.pub/reader033/viewer/2022052706/58ecf0531a28abb3418b4589/html5/thumbnails/8.jpg)
Что же это такое?
• AMP HTML
• AMP JS Library
8
AMP Project - средство для ускоренной загрузки статических мобильных веб-страниц
![Page 9: "AMP - технология на три буквы", Макс Фролов, MoscowJS 29](https://reader033.fdocument.pub/reader033/viewer/2022052706/58ecf0531a28abb3418b4589/html5/thumbnails/9.jpg)
Что же это такое?
• AMP HTML
• AMP JS Library
• Google AMP Cache
9
AMP Project - средство для ускоренной загрузки статических мобильных веб-страниц
![Page 10: "AMP - технология на три буквы", Макс Фролов, MoscowJS 29](https://reader033.fdocument.pub/reader033/viewer/2022052706/58ecf0531a28abb3418b4589/html5/thumbnails/10.jpg)
AMP в поисковой выдаче
10
![Page 11: "AMP - технология на три буквы", Макс Фролов, MoscowJS 29](https://reader033.fdocument.pub/reader033/viewer/2022052706/58ecf0531a28abb3418b4589/html5/thumbnails/11.jpg)
Мобильная Lenta AMP Lenta
11
![Page 12: "AMP - технология на три буквы", Макс Фролов, MoscowJS 29](https://reader033.fdocument.pub/reader033/viewer/2022052706/58ecf0531a28abb3418b4589/html5/thumbnails/12.jpg)
Мобильная Lenta AMP Lenta
12
![Page 13: "AMP - технология на три буквы", Макс Фролов, MoscowJS 29](https://reader033.fdocument.pub/reader033/viewer/2022052706/58ecf0531a28abb3418b4589/html5/thumbnails/13.jpg)
抜刀術 [баттодзюцу]
13
![Page 14: "AMP - технология на три буквы", Макс Фролов, MoscowJS 29](https://reader033.fdocument.pub/reader033/viewer/2022052706/58ecf0531a28abb3418b4589/html5/thumbnails/14.jpg)
Первый экран
Остальное может подождать чуть дольше
14
![Page 15: "AMP - технология на три буквы", Макс Фролов, MoscowJS 29](https://reader033.fdocument.pub/reader033/viewer/2022052706/58ecf0531a28abb3418b4589/html5/thumbnails/15.jpg)
Чуть-чуть о технической стороне
15
![Page 16: "AMP - технология на три буквы", Макс Фролов, MoscowJS 29](https://reader033.fdocument.pub/reader033/viewer/2022052706/58ecf0531a28abb3418b4589/html5/thumbnails/16.jpg)
Critical rendering path
16
![Page 17: "AMP - технология на три буквы", Макс Фролов, MoscowJS 29](https://reader033.fdocument.pub/reader033/viewer/2022052706/58ecf0531a28abb3418b4589/html5/thumbnails/17.jpg)
Key parts:
• Специфицированная структура страницы
• Ограничения стилевого оформления
• Правильно сформированный контент
• Нет кастомного JS-кода (ну почти :)
• Семантическая микроразметка страниц
• Валидация специальными инструментами
17
![Page 18: "AMP - технология на три буквы", Макс Фролов, MoscowJS 29](https://reader033.fdocument.pub/reader033/viewer/2022052706/58ecf0531a28abb3418b4589/html5/thumbnails/18.jpg)
AMP HTML
18
![Page 19: "AMP - технология на три буквы", Макс Фролов, MoscowJS 29](https://reader033.fdocument.pub/reader033/viewer/2022052706/58ecf0531a28abb3418b4589/html5/thumbnails/19.jpg)
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">
![Page 20: "AMP - технология на три буквы", Макс Фролов, MoscowJS 29](https://reader033.fdocument.pub/reader033/viewer/2022052706/58ecf0531a28abb3418b4589/html5/thumbnails/20.jpg)
20
…
Canonical link
style amp-custom (<50kB)
microdata
noscript fallback style
AMP JS Library
AMP JS custom components
<link rel="canonical" href=" … " />
![Page 21: "AMP - технология на три буквы", Макс Фролов, MoscowJS 29](https://reader033.fdocument.pub/reader033/viewer/2022052706/58ecf0531a28abb3418b4589/html5/thumbnails/21.jpg)
21
…
Canonical link
style amp-custom (<50kB)
microdata
noscript fallback style
AMP JS Library
AMP JS custom components
<style amp-custom>{… Наши стили …}</style>
![Page 22: "AMP - технология на три буквы", Макс Фролов, MoscowJS 29](https://reader033.fdocument.pub/reader033/viewer/2022052706/58ecf0531a28abb3418b4589/html5/thumbnails/22.jpg)
22
…
Canonical link
style amp-custom (<50kB)
microdata
noscript fallback style
AMP JS Library
AMP JS custom components
<script type="application/ld+json">
{… Microdata …}
</script>
![Page 23: "AMP - технология на три буквы", Макс Фролов, MoscowJS 29](https://reader033.fdocument.pub/reader033/viewer/2022052706/58ecf0531a28abb3418b4589/html5/thumbnails/23.jpg)
23
…
Canonical link
style amp-custom (<50kB)
microdata
noscript fallback style
AMP JS Library
AMP JS custom components
<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>
![Page 24: "AMP - технология на три буквы", Макс Фролов, MoscowJS 29](https://reader033.fdocument.pub/reader033/viewer/2022052706/58ecf0531a28abb3418b4589/html5/thumbnails/24.jpg)
24
…
Canonical link
style amp-custom (<50kB)
microdata
noscript fallback style
AMP JS Library
AMP JS custom components
<script async
src="https://cdn.ampproject.org/v0.js">
</script>
![Page 25: "AMP - технология на три буквы", Макс Фролов, MoscowJS 29](https://reader033.fdocument.pub/reader033/viewer/2022052706/58ecf0531a28abb3418b4589/html5/thumbnails/25.jpg)
25
…
Canonical link
style amp-custom (<50kB)
microdata
noscript fallback style
AMP JS Library
AMP JS custom components
<script async src="..."
custom-element="amp-facebook">
</script>
<script async src="…"
custom-element="amp-twitter">
</script>
![Page 26: "AMP - технология на три буквы", Макс Фролов, MoscowJS 29](https://reader033.fdocument.pub/reader033/viewer/2022052706/58ecf0531a28abb3418b4589/html5/thumbnails/26.jpg)
AMP Components
26
![Page 27: "AMP - технология на три буквы", Макс Фролов, MoscowJS 29](https://reader033.fdocument.pub/reader033/viewer/2022052706/58ecf0531a28abb3418b4589/html5/thumbnails/27.jpg)
AMP Components
•amp-img•amp-ad•amp-pixel•amp-video
27
Из коробки
![Page 28: "AMP - технология на три буквы", Макс Фролов, MoscowJS 29](https://reader033.fdocument.pub/reader033/viewer/2022052706/58ecf0531a28abb3418b4589/html5/thumbnails/28.jpg)
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
Из коробки Подключаемые
![Page 29: "AMP - технология на три буквы", Макс Фролов, MoscowJS 29](https://reader033.fdocument.pub/reader033/viewer/2022052706/58ecf0531a28abb3418b4589/html5/thumbnails/29.jpg)
<amp-img width="500" height="500" src="ampimg.jpg" alt="A retina ready amp image" />
Пример: <amp-img>
29
![Page 30: "AMP - технология на три буквы", Макс Фролов, MoscowJS 29](https://reader033.fdocument.pub/reader033/viewer/2022052706/58ecf0531a28abb3418b4589/html5/thumbnails/30.jpg)
<amp-img width="500" height="500" src="ampimg.jpg" alt="A retina ready amp image" />
Пример: <amp-img>
30
Размер медиаконтента должен быть заранее задан!
![Page 31: "AMP - технология на три буквы", Макс Фролов, MoscowJS 29](https://reader033.fdocument.pub/reader033/viewer/2022052706/58ecf0531a28abb3418b4589/html5/thumbnails/31.jpg)
Что можно и чего нельзя
31
![Page 32: "AMP - технология на три буквы", Макс Фролов, MoscowJS 29](https://reader033.fdocument.pub/reader033/viewer/2022052706/58ecf0531a28abb3418b4589/html5/thumbnails/32.jpg)
Что можно и чего нельзя
HTMLНЕЛЬЗЯ:
32
![Page 33: "AMP - технология на три буквы", Макс Фролов, MoscowJS 29](https://reader033.fdocument.pub/reader033/viewer/2022052706/58ecf0531a28abb3418b4589/html5/thumbnails/33.jpg)
Что можно и чего нельзя
HTMLНЕЛЬЗЯ:
script, base, frame, frameset,
object, param, applet, embed
33
![Page 34: "AMP - технология на три буквы", Макс Фролов, MoscowJS 29](https://reader033.fdocument.pub/reader033/viewer/2022052706/58ecf0531a28abb3418b4589/html5/thumbnails/34.jpg)
Что можно и чего нельзя
HTMLНЕЛЬЗЯ:
script, base, frame, frameset,
object, param, applet, embed
input, textarea, select, option
34
![Page 35: "AMP - технология на три буквы", Макс Фролов, MoscowJS 29](https://reader033.fdocument.pub/reader033/viewer/2022052706/58ecf0531a28abb3418b4589/html5/thumbnails/35.jpg)
Что можно и чего нельзя
HTMLНЕЛЬЗЯ:
script, base, frame, frameset,
object, param, applet, embed
input, textarea, select, option
img -> amp-img
video -> amp-video audio -> amp-audio
iframe -> amp-iframe
35
![Page 36: "AMP - технология на три буквы", Макс Фролов, MoscowJS 29](https://reader033.fdocument.pub/reader033/viewer/2022052706/58ecf0531a28abb3418b4589/html5/thumbnails/36.jpg)
Что можно и чего нельзя
HTMLНЕЛЬЗЯ:
script, base, frame, frameset,
object, param, applet, embed
input, textarea, select, option
img -> amp-img
video -> amp-video audio -> amp-audio
iframe -> amp-iframe
div style="{…}"
36
![Page 37: "AMP - технология на три буквы", Макс Фролов, MoscowJS 29](https://reader033.fdocument.pub/reader033/viewer/2022052706/58ecf0531a28abb3418b4589/html5/thumbnails/37.jpg)
Что можно и чего нельзя
HTMLНЕЛЬЗЯ:
script, base, frame, frameset,
object, param, applet, embed
input, textarea, select, option
img -> amp-img
video -> amp-video audio -> amp-audio
iframe -> amp-iframe
div style="{…}"
37
HTMLOK!
![Page 38: "AMP - технология на три буквы", Макс Фролов, MoscowJS 29](https://reader033.fdocument.pub/reader033/viewer/2022052706/58ecf0531a28abb3418b4589/html5/thumbnails/38.jpg)
Что можно и чего нельзя
HTMLНЕЛЬЗЯ:
script, base, frame, frameset,
object, param, applet, embed
input, textarea, select, option
img -> amp-img
video -> amp-video audio -> amp-audio
iframe -> amp-iframe
div style="{…}"
38
HTML
все остальные HTML5 - теги
OK!
![Page 39: "AMP - технология на три буквы", Макс Фролов, MoscowJS 29](https://reader033.fdocument.pub/reader033/viewer/2022052706/58ecf0531a28abb3418b4589/html5/thumbnails/39.jpg)
Что можно и чего нельзя
HTMLНЕЛЬЗЯ:
script, base, frame, frameset,
object, param, applet, embed
input, textarea, select, option
img -> amp-img
video -> amp-video audio -> amp-audio
iframe -> amp-iframe
div style="{…}"
39
HTML
все остальные HTML5 - теги
OK!
AMP components
![Page 40: "AMP - технология на три буквы", Макс Фролов, MoscowJS 29](https://reader033.fdocument.pub/reader033/viewer/2022052706/58ecf0531a28abb3418b4589/html5/thumbnails/40.jpg)
Что можно и чего нельзя
HTMLНЕЛЬЗЯ:
script, base, frame, frameset,
object, param, applet, embed
input, textarea, select, option
img -> amp-img
video -> amp-video audio -> amp-audio
iframe -> amp-iframe
div style="{…}"
40
HTML
все остальные HTML5 - теги
OK!
AMP components
SVG
![Page 41: "AMP - технология на три буквы", Макс Фролов, MoscowJS 29](https://reader033.fdocument.pub/reader033/viewer/2022052706/58ecf0531a28abb3418b4589/html5/thumbnails/41.jpg)
Что можно и чего нельзя
HTMLНЕЛЬЗЯ:
script, base, frame, frameset,
object, param, applet, embed
input, textarea, select, option
img -> amp-img
video -> amp-video audio -> amp-audio
iframe -> amp-iframe
div style="{…}"
41
HTML
все остальные HTML5 - теги
OK!
AMP components
SVG
Скрипты внутри amp-iframe
![Page 42: "AMP - технология на три буквы", Макс Фролов, MoscowJS 29](https://reader033.fdocument.pub/reader033/viewer/2022052706/58ecf0531a28abb3418b4589/html5/thumbnails/42.jpg)
Что можно и чего нельзя
CSSНЕЛЬЗЯ:
42
![Page 43: "AMP - технология на три буквы", Макс Фролов, MoscowJS 29](https://reader033.fdocument.pub/reader033/viewer/2022052706/58ecf0531a28abb3418b4589/html5/thumbnails/43.jpg)
Что можно и чего нельзя
* , :not()
CSSНЕЛЬЗЯ:
43
![Page 44: "AMP - технология на три буквы", Макс Фролов, MoscowJS 29](https://reader033.fdocument.pub/reader033/viewer/2022052706/58ecf0531a28abb3418b4589/html5/thumbnails/44.jpg)
Что можно и чего нельзя
* , :not()
CSSНЕЛЬЗЯ:
!important
44
![Page 45: "AMP - технология на три буквы", Макс Фролов, MoscowJS 29](https://reader033.fdocument.pub/reader033/viewer/2022052706/58ecf0531a28abb3418b4589/html5/thumbnails/45.jpg)
Что можно и чего нельзя
* , :not()
CSSНЕЛЬЗЯ:
!important
filter
45
![Page 46: "AMP - технология на три буквы", Макс Фролов, MoscowJS 29](https://reader033.fdocument.pub/reader033/viewer/2022052706/58ecf0531a28abb3418b4589/html5/thumbnails/46.jpg)
Что можно и чего нельзя
* , :not()
CSSНЕЛЬЗЯ:
!important
filter
overflow: auto
overflow: scroll
46
![Page 47: "AMP - технология на три буквы", Макс Фролов, MoscowJS 29](https://reader033.fdocument.pub/reader033/viewer/2022052706/58ecf0531a28abb3418b4589/html5/thumbnails/47.jpg)
Что можно и чего нельзя
* , :not()
CSSНЕЛЬЗЯ:
!important
filter
overflow: auto
overflow: scroll
@import
47
![Page 48: "AMP - технология на три буквы", Макс Фролов, MoscowJS 29](https://reader033.fdocument.pub/reader033/viewer/2022052706/58ecf0531a28abb3418b4589/html5/thumbnails/48.jpg)
Что можно и чего нельзя
* , :not()
CSSНЕЛЬЗЯ:
!important
filter
overflow: auto
overflow: scroll
@import
.-amp-…, .i-amp…
48
![Page 49: "AMP - технология на три буквы", Макс Фролов, MoscowJS 29](https://reader033.fdocument.pub/reader033/viewer/2022052706/58ecf0531a28abb3418b4589/html5/thumbnails/49.jpg)
Что можно и чего нельзя
* , :not()
CSSНЕЛЬЗЯ:
!important
filter
overflow: auto
overflow: scroll
@import
.-amp-…, .i-amp…
49
CSS
OK!
![Page 50: "AMP - технология на три буквы", Макс Фролов, MoscowJS 29](https://reader033.fdocument.pub/reader033/viewer/2022052706/58ecf0531a28abb3418b4589/html5/thumbnails/50.jpg)
Что можно и чего нельзя
* , :not()
CSSНЕЛЬЗЯ:
!important
filter
overflow: auto
overflow: scroll
@import
.-amp-…, .i-amp…
50
CSS
OK!
@font-face @keyframes
@media @supports
![Page 51: "AMP - технология на три буквы", Макс Фролов, MoscowJS 29](https://reader033.fdocument.pub/reader033/viewer/2022052706/58ecf0531a28abb3418b4589/html5/thumbnails/51.jpg)
Что можно и чего нельзя
* , :not()
CSSНЕЛЬЗЯ:
!important
filter
overflow: auto
overflow: scroll
@import
.-amp-…, .i-amp…
51
CSS
OK!
@font-face @keyframes
@media @supports
transition opacity
transform
![Page 52: "AMP - технология на три буквы", Макс Фролов, MoscowJS 29](https://reader033.fdocument.pub/reader033/viewer/2022052706/58ecf0531a28abb3418b4589/html5/thumbnails/52.jpg)
Микроразметка
52
![Page 53: "AMP - технология на три буквы", Макс Фролов, MoscowJS 29](https://reader033.fdocument.pub/reader033/viewer/2022052706/58ecf0531a28abb3418b4589/html5/thumbnails/53.jpg)
Микроразметка
https://schema.org/
53
![Page 54: "AMP - технология на три буквы", Макс Фролов, MoscowJS 29](https://reader033.fdocument.pub/reader033/viewer/2022052706/58ecf0531a28abb3418b4589/html5/thumbnails/54.jpg)
Микроразметка
https://schema.org/
JSON-LD Microdata
54
![Page 55: "AMP - технология на три буквы", Макс Фролов, MoscowJS 29](https://reader033.fdocument.pub/reader033/viewer/2022052706/58ecf0531a28abb3418b4589/html5/thumbnails/55.jpg)
<script type="application/ld+json">{ "@context": "http://schema.org", "@type": "Person", "name": "John Doe", "jobTitle": "Graduate research assistant", "affiliation": "University of Dreams"}</script>
JSON-LD
55
![Page 56: "AMP - технология на три буквы", Макс Фролов, MoscowJS 29](https://reader033.fdocument.pub/reader033/viewer/2022052706/58ecf0531a28abb3418b4589/html5/thumbnails/56.jpg)
<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
![Page 57: "AMP - технология на три буквы", Макс Фролов, MoscowJS 29](https://reader033.fdocument.pub/reader033/viewer/2022052706/58ecf0531a28abb3418b4589/html5/thumbnails/57.jpg)
Инструменты Google
57
![Page 58: "AMP - технология на три буквы", Макс Фролов, MoscowJS 29](https://reader033.fdocument.pub/reader033/viewer/2022052706/58ecf0531a28abb3418b4589/html5/thumbnails/58.jpg)
AMP Validator
http://localhost:8000/released.amp.html#development=1
58
![Page 59: "AMP - технология на три буквы", Макс Фролов, MoscowJS 29](https://reader033.fdocument.pub/reader033/viewer/2022052706/58ecf0531a28abb3418b4589/html5/thumbnails/59.jpg)
https://developers.google.com/structured-data/testing-tool/
59
![Page 60: "AMP - технология на три буквы", Макс Фролов, MoscowJS 29](https://reader033.fdocument.pub/reader033/viewer/2022052706/58ecf0531a28abb3418b4589/html5/thumbnails/60.jpg)
https://www.google.com/webmasters/tools/
60
![Page 61: "AMP - технология на три буквы", Макс Фролов, MoscowJS 29](https://reader033.fdocument.pub/reader033/viewer/2022052706/58ecf0531a28abb3418b4589/html5/thumbnails/61.jpg)
Так каков же выигрыш в скорости?
61
![Page 62: "AMP - технология на три буквы", Макс Фролов, MoscowJS 29](https://reader033.fdocument.pub/reader033/viewer/2022052706/58ecf0531a28abb3418b4589/html5/thumbnails/62.jpg)
lenta amp vs m.lenta
62
• Время загрузки страницы меньше в 2 - 5 раз
![Page 63: "AMP - технология на три буквы", Макс Фролов, MoscowJS 29](https://reader033.fdocument.pub/reader033/viewer/2022052706/58ecf0531a28abb3418b4589/html5/thumbnails/63.jpg)
lenta amp vs m.lenta
63
• Время загрузки страницы меньше в 2 - 5 раз
• Количество запросов меньше в ~ 10 раз
![Page 64: "AMP - технология на три буквы", Макс Фролов, MoscowJS 29](https://reader033.fdocument.pub/reader033/viewer/2022052706/58ecf0531a28abb3418b4589/html5/thumbnails/64.jpg)
lenta amp vs m.lenta
64
• Время загрузки страницы меньше в 2 - 5 раз
• Количество запросов меньше в ~ 10 раз
• Время загрузки стабильно из разных точек мира
![Page 65: "AMP - технология на три буквы", Макс Фролов, MoscowJS 29](https://reader033.fdocument.pub/reader033/viewer/2022052706/58ecf0531a28abb3418b4589/html5/thumbnails/65.jpg)
lenta amp vs m.lenta
65
• Время загрузки страницы меньше в 2 - 5 раз
• Количество запросов меньше в ~ 10 раз
• Время загрузки стабильно из разных точек мира
• Вес страницы меньше в 1.5 - 2 раза
![Page 66: "AMP - технология на три буквы", Макс Фролов, MoscowJS 29](https://reader033.fdocument.pub/reader033/viewer/2022052706/58ecf0531a28abb3418b4589/html5/thumbnails/66.jpg)
lenta amp vs m.lenta
66
• Время загрузки страницы меньше в 2 - 5 раз
• Количество запросов меньше в ~ 10 раз
• Время загрузки стабильно из разных точек мира
• Вес страницы меньше в 1.5 - 2 раза
![Page 67: "AMP - технология на три буквы", Макс Фролов, MoscowJS 29](https://reader033.fdocument.pub/reader033/viewer/2022052706/58ecf0531a28abb3418b4589/html5/thumbnails/67.jpg)
Mobile site
67
![Page 68: "AMP - технология на три буквы", Макс Фролов, MoscowJS 29](https://reader033.fdocument.pub/reader033/viewer/2022052706/58ecf0531a28abb3418b4589/html5/thumbnails/68.jpg)
AMP
68
![Page 69: "AMP - технология на три буквы", Макс Фролов, MoscowJS 29](https://reader033.fdocument.pub/reader033/viewer/2022052706/58ecf0531a28abb3418b4589/html5/thumbnails/69.jpg)
Резюме:
69
![Page 70: "AMP - технология на три буквы", Макс Фролов, MoscowJS 29](https://reader033.fdocument.pub/reader033/viewer/2022052706/58ecf0531a28abb3418b4589/html5/thumbnails/70.jpg)
Резюме:
• AMP даёт значительный прирост скорости
70
![Page 71: "AMP - технология на три буквы", Макс Фролов, MoscowJS 29](https://reader033.fdocument.pub/reader033/viewer/2022052706/58ecf0531a28abb3418b4589/html5/thumbnails/71.jpg)
Резюме:
• AMP даёт значительный прирост скорости
• Внедрение несложное и быстрое
71
![Page 72: "AMP - технология на три буквы", Макс Фролов, MoscowJS 29](https://reader033.fdocument.pub/reader033/viewer/2022052706/58ecf0531a28abb3418b4589/html5/thumbnails/72.jpg)
Резюме:
• AMP даёт значительный прирост скорости
• Внедрение несложное и быстрое
• Отлично подходит для контентных сайтов
72
![Page 73: "AMP - технология на три буквы", Макс Фролов, MoscowJS 29](https://reader033.fdocument.pub/reader033/viewer/2022052706/58ecf0531a28abb3418b4589/html5/thumbnails/73.jpg)
Резюме:
• AMP даёт значительный прирост скорости
• Внедрение несложное и быстрое
• Отлично подходит для контентных сайтов
• Есть ряд ограничений
73
![Page 74: "AMP - технология на три буквы", Макс Фролов, MoscowJS 29](https://reader033.fdocument.pub/reader033/viewer/2022052706/58ecf0531a28abb3418b4589/html5/thumbnails/74.jpg)
Резюме:
• AMP даёт значительный прирост скорости
• Внедрение несложное и быстрое
• Отлично подходит для контентных сайтов
• Есть ряд ограничений
• Проект открытый и активно развивается
74
![Page 75: "AMP - технология на три буквы", Макс Фролов, MoscowJS 29](https://reader033.fdocument.pub/reader033/viewer/2022052706/58ecf0531a28abb3418b4589/html5/thumbnails/75.jpg)
Резюме:
• AMP даёт значительный прирост скорости
• Внедрение несложное и быстрое
• Отлично подходит для контентных сайтов
• Есть ряд ограничений
• Проект открытый и активно развивается
• В перспективе прямая поддержка
75
![Page 76: "AMP - технология на три буквы", Макс Фролов, MoscowJS 29](https://reader033.fdocument.pub/reader033/viewer/2022052706/58ecf0531a28abb3418b4589/html5/thumbnails/76.jpg)
Infohttp://tinyurl.com/amp-moscowjs
Thanks!
76