Для большинства пользователей мобильный интернет полон боли и страданий. При том что пользователей становится только больше — проблема не решается, а становится острее. Вас ожидает увлекательнейший доклад о том, как удалось разогнать до космической скорости мобильную Lenta.ru.
33. Что можно и чего нельзя
HTML
НЕЛЬЗЯ:
script, base, frame, frameset,
object, param, applet, embed
33
34. Что можно и чего нельзя
HTML
НЕЛЬЗЯ:
script, base, frame, frameset,
object, param, applet, embed
input, textarea, select, option
34
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
35
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="{…}"
36
37. Что можно и чего нельзя
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
HTML
OK!
38. Что можно и чего нельзя
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!
39. Что можно и чего нельзя
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
40. Что можно и чего нельзя
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
41. Что можно и чего нельзя
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
43. Что можно и чего нельзя
* , :not()
CSS
НЕЛЬЗЯ:
43
44. Что можно и чего нельзя
* , :not()
CSS
НЕЛЬЗЯ:
!important
44
45. Что можно и чего нельзя
* , :not()
CSS
НЕЛЬЗЯ:
!important
filter
45
46. Что можно и чего нельзя
* , :not()
CSS
НЕЛЬЗЯ:
!important
filter
overflow: auto
overflow: scroll
46
47. Что можно и чего нельзя
* , :not()
CSS
НЕЛЬЗЯ:
!important
filter
overflow: auto
overflow: scroll
@import
47
48. Что можно и чего нельзя
* , :not()
CSS
НЕЛЬЗЯ:
!important
filter
overflow: auto
overflow: scroll
@import
.-amp-…, .i-amp…
48
49. Что можно и чего нельзя
* , :not()
CSS
НЕЛЬЗЯ:
!important
filter
overflow: auto
overflow: scroll
@import
.-amp-…, .i-amp…
49
CSS
OK!
50. Что можно и чего нельзя
* , :not()
CSS
НЕЛЬЗЯ:
!important
filter
overflow: auto
overflow: scroll
@import
.-amp-…, .i-amp…
50
CSS
OK!
@font-face
@keyframes
@media
@supports
51. Что можно и чего нельзя
* , :not()
CSS
НЕЛЬЗЯ:
!important
filter
overflow: auto
overflow: scroll
@import
.-amp-…, .i-amp…
51
CSS
OK!
@font-face
@keyframes
@media
@supports
transition
opacity
transform
56. <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
62. lenta amp vs m.lenta
62
• Время загрузки страницы меньше в 2 - 5 раз
63. lenta amp vs m.lenta
63
• Время загрузки страницы меньше в 2 - 5 раз
• Количество запросов меньше в ~ 10 раз
64. lenta amp vs m.lenta
64
• Время загрузки страницы меньше в 2 - 5 раз
• Количество запросов меньше в ~ 10 раз
• Время загрузки стабильно
из разных точек мира
65. lenta amp vs m.lenta
65
• Время загрузки страницы меньше в 2 - 5 раз
• Количество запросов меньше в ~ 10 раз
• Время загрузки стабильно
из разных точек мира
• Вес страницы меньше в 1.5 - 2 раза
66. lenta amp vs m.lenta
66
• Время загрузки страницы меньше в 2 - 5 раз
• Количество запросов меньше в ~ 10 раз
• Время загрузки стабильно
из разных точек мира
• Вес страницы меньше в 1.5 - 2 раза
71. Резюме:
• AMP даёт значительный прирост скорости
• Внедрение несложное и быстрое
71
72. Резюме:
• AMP даёт значительный прирост скорости
• Внедрение несложное и быстрое
• Отлично подходит для контентных сайтов
72
73. Резюме:
• AMP даёт значительный прирост скорости
• Внедрение несложное и быстрое
• Отлично подходит для контентных сайтов
• Есть ряд ограничений
73
74. Резюме:
• AMP даёт значительный прирост скорости
• Внедрение несложное и быстрое
• Отлично подходит для контентных сайтов
• Есть ряд ограничений
• Проект открытый и активно развивается
74
75. Резюме:
• AMP даёт значительный прирост скорости
• Внедрение несложное и быстрое
• Отлично подходит для контентных сайтов
• Есть ряд ограничений
• Проект открытый и активно развивается
• В перспективе прямая поддержка
75