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

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

Google Developers Group Lviv
October 14, 2017
Technology
1
130

[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
130
[Zac Sweers] Breaking the Android ClassLoader
gdglviv
0
200
[Daniel Galpin] Adventures in Navigation
gdglviv
1
260
[Rebecca Franks] Practical Image Processing in Android
gdglviv
0
240
[Mateusz Herych] Architecture for App Bundles
gdglviv
1
110
[Andrea Falcone] Iterative Mobile Development
gdglviv
1
71
[Yonatan Levin] Keynote: The world of change and your significance in it
gdglviv
0
110
[Denys Tkalich] Using BigQuery as a data warehouse in B2B startup
gdglviv
0
67
[Mete Atamel] Google Assistant powered by Containers, Machine Learning and .NET on Google Cloud
gdglviv
0
120

Other Decks in Technology

See All in Technology
Tebiki株式会社 エンジニア採用資料
tebiki
0
4.1k
キャラクター制御のためのプロンプト術 for LINE Bot
uezo
0
520
20240416_devopsdaystokyo
kzkmaeda
1
190
GraphQL 成熟度モデルの紹介と、プロダクトに当てはめた事例 / GraphQL maturity model
mh4gf
4
110
「共通基盤」を超えよ！ 今、Platform Engineeringに取り組むべき理由
jacopen
25
5.9k
Vertex AI を中心に 生成AIのアップデートを共有します
kaz1437
0
140
Postman v10リリース後を振り返る
nagix
0
130
カオナビの利用実績をアウトカムへつなげる旅 / example-of-data-management-startup-in-kaonavi
kaonavi
0
120
PHPカンファレンス小田原2024
ysknsid25
3
660
SREとその組織類型
tatsuo48
8
1.5k
強みを伸ばすキャリアデザイン
yug1224
0
200
反実仮想機械学習とは何か
usaito
PRO
7
2.2k

Featured

See All Featured
Design by the Numbers
sachag
274
18k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
15
1.4k
The Art of Programming - Codeland 2020
erikaheidi
41
12k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
12
1.5k
Git: the NoSQL Database
bkeepers
PRO
422
63k
Building Your Own Lightsaber
phodgson
98
5.7k
Product Roadmaps are Hard
iamctodd
43
9.7k
Robots, Beer and Maslow
schacon
PRO
155
7.9k
Designing the Hi-DPI Web
ddemaree
276
33k
Large-scale JavaScript Application Architecture
addyosmani
503
110k
Infographics Made Easy
chrislema
237
18k
jQuery: Nuts, Bolts and Bling
dougneiner
59
7.1k

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/