"amp - технология на три буквы", Макс Фролов, moscowjs 29
Post on 11-Apr-2017
409 Views
Preview:
TRANSCRIPT
AMP: технология на три буквы
29
Rambler & CoМакс Фролов
maksim.frolov@rambler-co.ru
AMP: технология на три буквы
Accelerated Mobile Pages
2
3
4
5
Что же это такое?
6
AMP Project - средство для ускоренной загрузки статических мобильных веб-страниц
Что же это такое?
• AMP HTML
7
AMP Project - средство для ускоренной загрузки статических мобильных веб-страниц
Что же это такое?
• AMP HTML
• AMP JS Library
8
AMP Project - средство для ускоренной загрузки статических мобильных веб-страниц
Что же это такое?
• AMP HTML
• AMP JS Library
• Google AMP Cache
9
AMP Project - средство для ускоренной загрузки статических мобильных веб-страниц
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
style amp-custom (<50kB)
microdata
noscript fallback style
AMP JS Library
AMP JS custom components
<link rel="canonical" href=" … " />
21
…
Canonical link
style amp-custom (<50kB)
microdata
noscript fallback style
AMP JS Library
AMP JS custom components
<style amp-custom>{… Наши стили …}</style>
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>
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>
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>
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>
AMP Components
26
AMP Components
•amp-img•amp-ad•amp-pixel•amp-video
27
Из коробки
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
Из коробки Подключаемые
<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НЕЛЬЗЯ:
script, base, frame, frameset,
object, param, applet, embed
input, textarea, select, option
34
Что можно и чего нельзя
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
Что можно и чего нельзя
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
Что можно и чего нельзя
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!
Что можно и чего нельзя
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!
Что можно и чего нельзя
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
Что можно и чего нельзя
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
Что можно и чего нельзя
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
Что можно и чего нельзя
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
.-amp-…, .i-amp…
49
CSS
OK!
Что можно и чего нельзя
* , :not()
CSSНЕЛЬЗЯ:
!important
filter
overflow: auto
overflow: scroll
@import
.-amp-…, .i-amp…
50
CSS
OK!
@font-face @keyframes
@media @supports
Что можно и чего нельзя
* , :not()
CSSНЕЛЬЗЯ:
!important
filter
overflow: auto
overflow: scroll
@import
.-amp-…, .i-amp…
51
CSS
OK!
@font-face @keyframes
@media @supports
transition opacity
transform
Микроразметка
52
Микроразметка
https://schema.org/
53
Микроразметка
https://schema.org/
JSON-LD Microdata
54
<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
<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 раз
lenta amp vs m.lenta
63
• Время загрузки страницы меньше в 2 - 5 раз
• Количество запросов меньше в ~ 10 раз
lenta amp vs m.lenta
64
• Время загрузки страницы меньше в 2 - 5 раз
• Количество запросов меньше в ~ 10 раз
• Время загрузки стабильно из разных точек мира
lenta amp vs m.lenta
65
• Время загрузки страницы меньше в 2 - 5 раз
• Количество запросов меньше в ~ 10 раз
• Время загрузки стабильно из разных точек мира
• Вес страницы меньше в 1.5 - 2 раза
lenta amp vs m.lenta
66
• Время загрузки страницы меньше в 2 - 5 раз
• Количество запросов меньше в ~ 10 раз
• Время загрузки стабильно из разных точек мира
• Вес страницы меньше в 1.5 - 2 раза
Mobile site
67
AMP
68
Резюме:
69
Резюме:
• AMP даёт значительный прирост скорости
70
Резюме:
• AMP даёт значительный прирост скорости
• Внедрение несложное и быстрое
71
Резюме:
• AMP даёт значительный прирост скорости
• Внедрение несложное и быстрое
• Отлично подходит для контентных сайтов
72
Резюме:
• AMP даёт значительный прирост скорости
• Внедрение несложное и быстрое
• Отлично подходит для контентных сайтов
• Есть ряд ограничений
73
Резюме:
• AMP даёт значительный прирост скорости
• Внедрение несложное и быстрое
• Отлично подходит для контентных сайтов
• Есть ряд ограничений
• Проект открытый и активно развивается
74
Резюме:
• AMP даёт значительный прирост скорости
• Внедрение несложное и быстрое
• Отлично подходит для контентных сайтов
• Есть ряд ограничений
• Проект открытый и активно развивается
• В перспективе прямая поддержка
75
Infohttp://tinyurl.com/amp-moscowjs
Thanks!
76
top related