Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
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:
• Специфицированная структура страницы
• Ограничения стилевого оформления
• Правильно сформированный контент
• ...
AMP HTML
18
19
…
Canonical link
style amp-custom
(<50kB)
microdata
noscript fallback style
AMP JS Library
AMP JS custom
components
AMP...
20
…
Canonical link
style amp-custom
(<50kB)
microdata
noscript fallback style
AMP JS Library
AMP JS custom
components
<li...
21
…
Canonical link
style amp-custom
(<50kB)
microdata
noscript fallback style
AMP JS Library
AMP JS custom
components
<st...
22
…
Canonical link
style amp-custom
(<50kB)
microdata
noscript fallback style
AMP JS Library
AMP JS custom
components
<sc...
23
…
Canonical link
style amp-custom
(<50kB)
microdata
noscript fallback style
AMP JS Library
AMP JS custom
components
<st...
24
…
Canonical link
style amp-custom
(<50kB)
microdata
noscript fallback style
AMP JS Library
AMP JS custom
components
<sc...
25
…
Canonical link
style amp-custom
(<50kB)
microdata
noscript fallback style
AMP JS Library
AMP JS custom
components
<sc...
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-lig...
<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, ...
Что можно и чего нельзя
HTML
НЕЛЬЗЯ:
script, base, frame, frameset,
object, param, applet, embed
input, textarea, select, ...
Что можно и чего нельзя
HTML
НЕЛЬЗЯ:
script, base, frame, frameset,
object, param, applet, embed
input, textarea, select, ...
Что можно и чего нельзя
HTML
НЕЛЬЗЯ:
script, base, frame, frameset,
object, param, applet, embed
input, textarea, select, ...
Что можно и чего нельзя
HTML
НЕЛЬЗЯ:
script, base, frame, frameset,
object, param, applet, embed
input, textarea, select, ...
Что можно и чего нельзя
HTML
НЕЛЬЗЯ:
script, base, frame, frameset,
object, param, applet, embed
input, textarea, select, ...
Что можно и чего нельзя
HTML
НЕЛЬЗЯ:
script, base, frame, frameset,
object, param, applet, embed
input, textarea, select, ...
Что можно и чего нельзя
HTML
НЕЛЬЗЯ:
script, base, frame, frameset,
object, param, applet, embed
input, textarea, select, ...
Что можно и чего нельзя
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
...
Что можно и чего нельзя
* , :not()
CSS
НЕЛЬЗЯ:
!important
filter
overflow: auto
overflow: scroll
@import
.-amp-…, .i-amp…
50
...
Что можно и чего нельзя
* , :not()
CSS
НЕЛЬЗЯ:
!important
filter
overflow: auto
overflow: scroll
@import
.-amp-…, .i-amp…
51
...
Микроразметка
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",
  "job...
<section itemscope itemtype="http://schema.org/Person">
  Hello, my name is
  <span itemprop="name">John Doe</span>,
  I a...
Инструменты 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 раз
• Время загру...
lenta amp vs m.lenta
66
• Время загрузки страницы меньше в 2 - 5 раз
• Количество запросов меньше в ~ 10 раз
• Время загру...
Mobile site
67
AMP
68
Резюме:
69
Резюме:
• AMP даёт значительный прирост скорости
70
Резюме:
• AMP даёт значительный прирост скорости
• Внедрение несложное и быстрое
71
Резюме:
• AMP даёт значительный прирост скорости
• Внедрение несложное и быстрое
• Отлично подходит для контентных сайтов
...
Резюме:
• AMP даёт значительный прирост скорости
• Внедрение несложное и быстрое
• Отлично подходит для контентных сайтов
...
Резюме:
• AMP даёт значительный прирост скорости
• Внедрение несложное и быстрое
• Отлично подходит для контентных сайтов
...
Резюме:
• AMP даёт значительный прирост скорости
• Внедрение несложное и быстрое
• Отлично подходит для контентных сайтов
...
Info
http://tinyurl.com/

amp-moscowjs
Thanks!
76
Upcoming SlideShare
Loading in …5
×
Upcoming SlideShare
«Пиринговый веб на JavaScript», Денис Глазков, MoscowJS 28
Next
Download to read offline and view in fullscreen.

0

Share

Download to read offline

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

Download to read offline

Для большинства пользователей мобильный интернет полон боли и страданий. При том что пользователей становится только больше — проблема не решается, а становится острее. Вас ожидает увлекательнейший доклад о том, как удалось разогнать до космической скорости мобильную Lenta.ru.

Related Books

Free with a 30 day trial from Scribd

See all

Related Audiobooks

Free with a 30 day trial from Scribd

See all
  • Be the first to like this

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

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

Для большинства пользователей мобильный интернет полон боли и страданий. При том что пользователей становится только больше — проблема не решается, а становится острее. Вас ожидает увлекательнейший доклад о том, как удалось разогнать до космической скорости мобильную Lenta.ru.

Views

Total views

621

On Slideshare

0

From embeds

0

Number of embeds

6

Actions

Downloads

1

Shares

0

Comments

0

Likes

0

×