"AMP - технология на три буквы", Макс Фролов, MoscowJS 29
0 likes•654 views
Документ описывает технологию AMP (Accelerated Mobile Pages), предназначенную для ускоренной загрузки статических мобильных веб-страниц. В нём рассматриваются ключевые элементы и ограничения использования AMP, а также преимущества, такие как значительное снижение времени загрузки страниц и количество запросов. Автор подчеркивает легкость внедрения AMP и его подходящесть для контентных сайтов.
![抜刀術
[баттодзюцу]
13](https://image.slidesharecdn.com/amp-short-160331164740/85/AMP-MoscowJS-29-13-320.jpg)
"AMP - технология на три буквы", Макс Фролов, MoscowJS 29
- 1. AMP: технология на три буквы 29 Rambler & Co Макс Фролов [email protected]
- 2. AMP: технология на три буквы Accelerated Mobile Pages 2
- 3. 3
- 4. 4
- 5. 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 AMP Lenta 11
- 12. Мобильная Lenta AMP Lenta 12
- 14. Первый экран Остальное может подождать чуть дольше 14
- 15. Чуть-чуть о технической стороне 15
- 17. Key parts: • Специфицированная структура страницы • Ограничения стилевого оформления • Правильно сформированный контент • Нет кастомного JS-кода (ну почти :) • Семантическая микроразметка страниц • Валидация специальными инструментами 17
- 18. AMP HTML 18
- 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 … Canonical link style amp-custom (<50kB) microdata noscript fallback style AMP JS Library AMP JS custom components <link rel="canonical" href=" … " />
- 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 … 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 … 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 … 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 … 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>
- 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. <amp-img width="500" height="500" src="ampimg.jpg" alt="A retina ready amp image" /> Пример: <amp-img> 29
- 30. <amp-img width="500" height="500" src="ampimg.jpg" alt="A retina 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. Микроразметка 52
- 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
- 61. Так каков же выигрыш в скорости? 61
- 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 раза
- 67. Mobile site 67
- 68. AMP 68
- 69. Резюме: 69
- 70. Резюме: • AMP даёт значительный прирост скорости 70
- 71. Резюме: • AMP даёт значительный прирост скорости • Внедрение несложное и быстрое 71
- 72. Резюме: • AMP даёт значительный прирост скорости • Внедрение несложное и быстрое • Отлично подходит для контентных сайтов 72
- 73. Резюме: • AMP даёт значительный прирост скорости • Внедрение несложное и быстрое • Отлично подходит для контентных сайтов • Есть ряд ограничений 73
- 74. Резюме: • AMP даёт значительный прирост скорости • Внедрение несложное и быстрое • Отлично подходит для контентных сайтов • Есть ряд ограничений • Проект открытый и активно развивается 74
- 75. Резюме: • AMP даёт значительный прирост скорости • Внедрение несложное и быстрое • Отлично подходит для контентных сайтов • Есть ряд ограничений • Проект открытый и активно развивается • В перспективе прямая поддержка 75