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
140
[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
300
[Mateusz Herych] Architecture for App Bundles
gdglviv
1
120
[Andrea Falcone] Iterative Mobile Development
gdglviv
1
76
[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
79
[Mete Atamel] Google Assistant powered by Containers, Machine Learning and .NET on Google Cloud
gdglviv
0
130

Other Decks in Technology

See All in Technology
【技術書典17】OpenFOAM（自宅で極める流体解析）2次元円柱まわりの流れ
kamakiri1225
0
250
「視座」の上げ方が成人発達理論にわかりやすくまとまってた / think_ perspective_hidden_dimensions
shuzon
2
13k
フルカイテン株式会社 採用資料
fullkaiten
0
39k
[JAWS-UG金沢支部×コンテナ支部合同企画]コンテナとは何か
furuton
3
320
国土交通省 データコンペ参加者向け勉強会
takehikohashimoto
0
270
コンテンツを支える 若手ゲームクリエイターの アートディレクションの事例紹介 / cagamefi-game
cyberagentdevelopers
PRO
1
140
全社横断データ活用推進のコツと その負債とのつき合い方
masatoshi0205
0
100
一休.comレストランにおけるRustの活用
kymmt90
3
640
最速最小からはじめるデータプロダクト / Data Product MVP
amaotone
5
780
福岡新卒エンジニアの会
teba_eleven
1
140
Mini Tokyo 3D × PLATEAU - 公共交通デジタルツインにリアルな風景を
nagix
1
180
Amazon CloudWatch Network Monitor 導入ガイド_デモ説明付き
yukimmmm
0
130

Featured

See All Featured
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
42
9.2k
Designing the Hi-DPI Web
ddemaree
280
34k
Building Your Own Lightsaber
phodgson
102
6.1k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
25
1.8k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
26
2.1k
How To Stay Up To Date on Web Technology
chriscoyier
788
250k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Ruby is Unlike a Banana
tanoku
96
11k
Become a Pro
speakerdeck
PRO
24
5k
Faster Mobile Websites
deanohume
304
30k
A Tale of Four Properties
chriscoyier
156
23k
Keith and Marios Guide to Fast Websites
keithpitt
408
22k

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/