Upgrade to Pro — share decks privately, control downloads, hide ads and more …

[Andrey Lipattsev] AMP in 2018. Still fast, sti...

Google Developers Group Lviv
October 14, 2017
Technology
1
200

[Andrey Lipattsev] AMP in 2018. Still fast, still furious

Presentation from GDG DevFest Ukraine 2017 - the biggest community-driven Google tech conference in the CEE.

Learn more at: https://devfest.gdg.org.ua

Google Developers Group Lviv

October 14, 2017
Tweet

More Decks by Google Developers Group Lviv

See All by Google Developers Group Lviv
[Elad Bezalel] Angular Material CDK
gdglviv
0
150
[Zac Sweers] Breaking the Android ClassLoader
gdglviv
0
210
[Daniel Galpin] Adventures in Navigation
gdglviv
1
330
[Rebecca Franks] Practical Image Processing in Android
gdglviv
0
310
[Mateusz Herych] Architecture for App Bundles
gdglviv
1
120
[Andrea Falcone] Iterative Mobile Development
gdglviv
1
77
[Yonatan Levin] Keynote: The world of change and your significance in it
gdglviv
0
120
[Denys Tkalich] Using BigQuery as a data warehouse in B2B startup
gdglviv
0
80
[Mete Atamel] Google Assistant powered by Containers, Machine Learning and .NET on Google Cloud
gdglviv
0
140

Other Decks in Technology

See All in Technology
10XにおけるData Contractの導入について: Data Contract事例共有会
10xinc
7
700
エンジニア人生の拡張性を高める 「探索型キャリア設計」の提案
tenshoku_draft
1
130
Zennのパフォーマンスモニタリングでやっていること
ryosukeigarashi
0
400
ExaDB-D dbaascli で出来ること
oracle4engineer
PRO
0
3.9k
【令和最新版】AWS Direct Connectと愉快なGWたちのおさらい
minorun365
PRO
5
780
Storybook との上手な向き合い方を考える
re_taro
5
1.6k
開発生産性を上げながらビジネスも30倍成長させてきたチームの姿
kamina_zzz
2
1.7k
LINEヤフーにおけるPrerender技術の導入とその効果
narirou
1
220
なぜ今 AI Agent なのか _近藤憲児
kenjikondobai
4
1.4k
電話を切らさない技術 電話自動応答サービスを支える フロントエンド
barometrica
1
150
複雑なState管理からの脱却
sansantech
PRO
1
160
Terraform Stacks入門 #HashiTalks
msato
0
360

Featured

See All Featured
A designer walks into a library…
pauljervisheath
204
24k
Art, The Web, and Tiny UX
lynnandtonic
297
20k
Rebuilding a faster, lazier Slack
samanthasiow
79
8.7k
Producing Creativity
orderedlist
PRO
341
39k
Docker and Python
trallard
40
3.1k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
246
1.3M
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
44
2.2k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
356
29k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
26
1.4k
Product Roadmaps are Hard
iamctodd
PRO
49
11k
Intergalactic Javascript Robots from Outer Space
tanoku
269
27k
The MySQL Ecosystem @ GitHub 2015
samlambert
250
12k

Transcript

  1. AMP 2018. Still fast! Still furious! New features and examples

    Andrey Lipattsev Strategic Partner Development Manager @ Google

  2. #dfua <html ⚡> <amp-what>“What is AMP?”</amp-what> <amp-why>“Why is AMP fast?”</amp-why>

    <amp-where>“Where is AMP used?”</amp-where> <amp-build>“What can I build?”</amp-build>

  3. #dfua What is AMP

  4. #dfua What is AMP A Library for Beautiful and Responsive

    Sites fast, ^ user-friendly,

  5. #dfua A beautiful mobile experience...

  6. #dfua … and a beautiful desktop experience Built with

  7. #dfua AMP HTML AMP JS Google AMP Cache

  8. #dfua AMP documents are only valid if they do not

    contain things that might be slow

  9. #dfua AMPHTML Hello, AMP World

  10. <!doctype html> <html ⚡> <head> <meta charset="utf-8"> <link rel="canonical" href="hello-world.html">

    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1"> <style amp-boilerplate>(✄ snip!)</style><noscript><style amp-boilerplate>(✄ snip!)</style></noscript> <script async src="https://cdn.ampproject.org/v0.js"></script> </head> <body>Hello World!</body> </html>

  11. <!doctype html> <html ⚡> | <html amp> <head> <meta charset="utf-8">

    <link rel="canonical" href="hello-world.html"> <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1"> <style amp-boilerplate>(✄ snip!)</style><noscript><style amp-boilerplate>(✄ snip!)</style></noscript> <script async src="https://cdn.ampproject.org/v0.js"></script> </head> <body>Hello World!</body> </html>

  12. <!doctype html> <html ⚡> <head> <meta charset="utf-8"> <link rel="canonical" href="hello-world.html">

    <link rel="amphtml" href="hello-world.amp.html"> <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1"> <style amp-boilerplate>(✄ snip!)</style><noscript><style amp-boilerplate>(✄ snip!)</style></noscript> <script async src="https://cdn.ampproject.org/v0.js"></script> </head> <body>Hello World!</body> </html>

  13. <!doctype html> <html ⚡> <head> <meta charset="utf-8"> <link rel="canonical" href="hello-world.html">

    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1"> <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><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript> <script async src="https://cdn.ampproject.org/v0.js"></script> </head> <body>Hello World!</body> </html>

  14. <!doctype html> <html ⚡> <head> <meta charset="utf-8"> <link rel="canonical" href="hello-world.html">

    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1"> <style amp-boilerplate>(✄ snip!)</style><noscript><style amp-boilerplate>(✄ snip!)</style></noscript> <script async src="https://cdn.ampproject.org/v0.js"></script> </head> <body>Hello World!</body> </html>

  15. <!doctype html> <html ⚡> <head> <meta charset="utf-8"> <link rel="canonical" href="hello-world.html">

    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1"> <style amp-boilerplate>(✄ snip!)</style><noscript><style amp-boilerplate>(✄ snip!)</style></noscript> <script async src="https://cdn.ampproject.org/v0.js"></script> </head> <body>Hello World!</body> </html>

  16. #dfua AMP JS

  17. #dfua The library managing: • Resource loading • Core web

    components • Performance optimizations https://github.com/ampproject/amphtml

  18. #dfua Google AMP Cache

  19. #dfua • Cache of valid AMP documents available for anyone

    • HTTP/2 with same origin for all resources • Google products all serve via the AMP cache • API available to query AMP documents

  20. #dfua Why is AMP fast

  21. #dfua All scripts are async Static resource sizing Extended components

    do not block page layout 3rd party JS only in sandboxed iframes CSS limit ... Why is AMP fast

  22. #dfua ... Zero HTTP requests until fonts start downloading Minimal

    style recalculations GPU optimizable animations only Resource prioritization Prerendering Why is AMP fast

  23. #dfua Static resource sizing ->

  24. #dfua Header Logo Responsive hero image Headline Article text Image

    in article Some more text Ad 1st viewport Resource prioritization

  25. #dfua Header Logo Responsive hero image Headline Article text Image

    in article Some more text Ad 1st viewport Prerendering

  26. #dfua AMP is getting 2x as fast.

  27. #dfua 50% reduction in image bandwidth usage Brotli compression for

    Google AMP Cache.

  28. #dfua Where is AMP used

  29. #dfua

  30. #dfua What can I build with AMP - can’t

  31. #dfua

  32. #dfua

  33. #dfua

  34. #dfua ‘sup lol

  35. #dfua -- What can I build with AMP --- Ok,

    ok, ok, fine so… What can - can’t --

  36. #dfua

  37. #dfua AliExpress 10.5% Reducing load time by 36% lead to

    increase in orders 27% increase in conversion rates

  38. #dfua • Gallery view • Pagination • Responsive <amp-lightbox> +

    <amp-carousel>

  39. #dfua <amp-form> Search items with <amp-form> Shopping cart with <amp-form>

  40. #dfua <amp-bind>

  41. #dfua 1. Store product data in <amp-state> amp-bind

  42. #dfua <amp-state id="product"> <script type="application/json"> { "golden_apple": { “price”: “$9.99”,

    "sizes": [“S”, “M”, “L”] }, } </script> </amp-state>

  43. #dfua 1. Store product data in <amp-state> 2. Add [text]

    binding to price label amp-bind

  44. #dfua <span [text]=" product[selectedColor].price"> $1.99 </span>

  45. #dfua 1. Store product data in <amp-state> 2. Add [text]

    binding to price label 3. Change the selectedColor variable with AMP.setState amp-bind

  46. #dfua <amp-selector on="select: AMP.setState({ selectedColor: event.targetOption })"> <div option="green_apple"></div> <div

    option="golden_apple"></div> <div option="red_apple"></div> </amp-selector>

  47. #dfua Code @ bit.ly/amp-apple

  48. #dfua <amp-animation> Thin wrapper around Web Animations Pixel-perfect animations not

    possible with CSS

  49. #dfua <amp-position-observer> Animation 3D Cube Parallax

  50. #dfua iene.mediaset.it m.rabota.ua www.standard.co.uk

  51. #dfua AMP Roadshow, November 2017 Munich, Paris, Madrid, London https://www.ampproject.org/amp-roadshow/