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 - технология на три буквы", Макс Фролов, MoscowJS 29

567 views

Published on

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

Published in: Software
  • Be the first to comment

  • 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

×