Download to read offline
![抜刀術
[баттодзюцу]
13](https://image.slidesharecdn.com/amp-short-160331164740/75/AMP-MoscowJS-29-13-2048.jpg)
Uploaded byMoscowJS
"AMP - технология на три буквы", Макс Фролов, MoscowJS 29
Документ описывает технологию AMP (Accelerated Mobile Pages), предназначенную для ускоренной загрузки статических мобильных веб-страниц. В нём рассматриваются ключевые элементы и ограничения использования AMP, а также преимущества, такие как значительное снижение времени загрузки страниц и количество запросов. Автор подчеркивает легкость внедрения AMP и его подходящесть для контентных сайтов.
"AMP - технология на три буквы", Макс Фролов, MoscowJS 29
- 1. AMP: технология натри буквы 29 Rambler & Co Макс Фролов maksim.frolov@rambler-co.ru
- 2. AMP: технология натри буквы Accelerated Mobile Pages 2
- 3.
- 4.
- 5.
- 6. Что же этотакое? 6 AMP Project - средство для ускоренной загрузки статических мобильных веб-страниц
- 7. Что же этотакое? • AMP HTML 7 AMP Project - средство для ускоренной загрузки статических мобильных веб-страниц
- 8. Что же этотакое? • AMP HTML • AMP JS Library 8 AMP Project - средство для ускоренной загрузки статических мобильных веб-страниц
- 9. Что же этотакое? • AMP HTML • AMP JS Library • Google AMP Cache 9 AMP Project - средство для ускоренной загрузки статических мобильных веб-страниц
- 10. AMP в поисковойвыдаче 10
- 11. Мобильная Lenta AMPLenta 11
- 12. Мобильная Lenta AMPLenta 12
- 13.
- 14.
- 15. Чуть-чуть о техническойстороне 15
- 16.
- 17. Key parts: • Специфицированнаяструктура страницы • Ограничения стилевого оформления • Правильно сформированный контент • Нет кастомного JS-кода (ну почти :) • Семантическая микроразметка страниц • Валидация специальными инструментами 17
- 18.
- 19. 19 … Canonical link style amp-custom (<50kB) microdata noscriptfallback style AMP JS Library AMP JS custom components AMP Document <HEAD> <html amp lang="en">
- 20. 20 … Canonical link style amp-custom (<50kB) microdata noscriptfallback style AMP JS Library AMP JS custom components <link rel="canonical" href=" … " />
- 21. 21 … Canonical link style amp-custom (<50kB) microdata noscriptfallback style AMP JS Library AMP JS custom components <style amp-custom>{… Наши стили …}</style>
- 22. 22 … Canonical link style amp-custom (<50kB) microdata noscriptfallback style AMP JS Library AMP JS custom components <script type="application/ld+json"> {… Microdata …} </script>
- 23. 23 … Canonical link style amp-custom (<50kB) microdata noscriptfallback 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 … Canonical link style amp-custom (<50kB) microdata noscriptfallback style AMP JS Library AMP JS custom components <script async src="https://cdn.ampproject.org/v0.js"> </script>
- 25. 25 … Canonical link style amp-custom (<50kB) microdata noscriptfallback 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.
- 27.
- 28.
- 29. <amp-img width="500" height="500" src="ampimg.jpg" alt="Aretina ready amp image" /> Пример: <amp-img> 29
- 30. <amp-img width="500" height="500" src="ampimg.jpg" alt="Aretina ready amp image" /> Пример: <amp-img> 30 Размер медиаконтента должен быть заранее задан!
- 31. Что можно ичего нельзя 31
- 32. Что можно ичего нельзя HTML НЕЛЬЗЯ: 32
- 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
- 42. Что можно ичего нельзя CSS НЕЛЬЗЯ: 42
- 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
- 52.
- 53.
- 54.
- 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. <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.
- 58.
- 59.
- 60.
- 61. Так каков жевыигрыш в скорости? 61
- 62. lenta amp vsm.lenta 62 • Время загрузки страницы меньше в 2 - 5 раз
- 63. lenta amp vsm.lenta 63 • Время загрузки страницы меньше в 2 - 5 раз • Количество запросов меньше в ~ 10 раз
- 64. lenta amp vsm.lenta 64 • Время загрузки страницы меньше в 2 - 5 раз • Количество запросов меньше в ~ 10 раз • Время загрузки стабильно из разных точек мира
- 65. lenta amp vsm.lenta 65 • Время загрузки страницы меньше в 2 - 5 раз • Количество запросов меньше в ~ 10 раз • Время загрузки стабильно из разных точек мира • Вес страницы меньше в 1.5 - 2 раза
- 66. lenta amp vsm.lenta 66 • Время загрузки страницы меньше в 2 - 5 раз • Количество запросов меньше в ~ 10 раз • Время загрузки стабильно из разных точек мира • Вес страницы меньше в 1.5 - 2 раза
- 67.
- 68.
- 69.
- 70. Резюме: • AMP даётзначительный прирост скорости 70
- 71. Резюме: • AMP даётзначительный прирост скорости • Внедрение несложное и быстрое 71
- 72. Резюме: • AMP даётзначительный прирост скорости • Внедрение несложное и быстрое • Отлично подходит для контентных сайтов 72
- 73. Резюме: • AMP даётзначительный прирост скорости • Внедрение несложное и быстрое • Отлично подходит для контентных сайтов • Есть ряд ограничений 73
- 74. Резюме: • AMP даётзначительный прирост скорости • Внедрение несложное и быстрое • Отлично подходит для контентных сайтов • Есть ряд ограничений • Проект открытый и активно развивается 74
- 75. Резюме: • AMP даётзначительный прирост скорости • Внедрение несложное и быстрое • Отлично подходит для контентных сайтов • Есть ряд ограничений • Проект открытый и активно развивается • В перспективе прямая поддержка 75
- 76.