Successfully reported this slideshow.
Your SlideShare is downloading. ×

AMP and PWA

Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Loading in …3
×

Check these out next

1 of 58 Ad
Advertisement

More Related Content

Slideshows for you (19)

Similar to AMP and PWA (20)

Advertisement

Recently uploaded (20)

AMP and PWA

  1. 1. Progressive Web App Roadshow Starting Fast with AMP
  2. 2. @techhtml GDG Korea WebTech AMP Docs Contributor Korean 한국말 잘해요
  3. 3. Comic Sans Times Stories never meant for print Penguins are adorable Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sodales tellus eget auctor ullamcorper. Aenean pretium faucibus tellus id interdum. Donec vitae suscipit nisl. Praesent vel turpis velit. Donec fringilla, sem non congue condimentum, eros arcu aliquam massa, sit amet efficitur ligula tellus at libero. Mauris quis risus et erat fermentum commodo. Morbi ut augue erat. Proin non ipsum mattis, ultrices diam ut, elementum est. Vestibulum malesuada ligula vel massa malesuada semper. Nam vitae quam fermentum, pharetra urna non, fermentum erat. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In ornare, leo in
  4. 4. Comic Sans Times Stories never meant for print Penguins are adorable Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sodales tellus eget auctor ullamcorper. Aenean pretium faucibus tellus id interdum. Donec vitae suscipit nisl. Praesent vel turpis velit. Donec fringilla, sem non congue condimentum, eros arcu aliquam massa, sit amet efficitur ligula tellus at libero. Mauris quis risus et erat fermentum commodo. Morbi ut augue erat. Proin non ipsum mattis, ultrices diam ut, elementum est. Vestibulum malesuada ligula vel massa malesuada semper. Nam vitae quam fermentum, pharetra urna non, fermentum erat. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In ornare, leo in Comic Sans Times Get the app or continue to the mobile site…
  5. 5. Comic Sans Times Stories never meant for print Penguins are adorable Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sodales tellus eget auctor ullamcorper. Aenean pretium faucibus tellus id interdum. Donec vitae suscipit nisl. Praesent vel turpis velit. Donec fringilla, sem non congue condimentum, eros arcu aliquam massa, sit amet efficitur ligula tellus at libero. Mauris quis risus et erat fermentum commodo. Morbi ut augue erat. Proin non ipsum mattis, ultrices diam ut, elementum est. Vestibulum malesuada ligula vel massa malesuada semper. Nam vitae quam fermentum, pharetra urna non, fermentum erat. Pellentesque habitant morbi tristique senectus et netus et
  6. 6. Comic Sans Times Stories never meant for print Penguins are adorable Lorem ipsum dolor sit amet, consectetur adipiscing elit. Magic Sun Screen SPF 1,000,000+ Jake Approved
  7. 7. Start fast, Stay fast!
  8. 8. 의 사용자는 로딩에 3초 이상이 걸리면 해당 페이지를 닫아버립니다53%
  9. 9. Response Times: The 3 Important Limits, Jakob Nielsen, January 1, 1993
  10. 10. 0.1s feels instant 1s feels natural 10s lost user’s attention Response Times: The 3 Important Limits, Jakob Nielsen, January 1, 1993
  11. 11. 214 server requests per mobile web page 19 sec average mobile page loading time 50% requests that are ad related 77% mobile sites that take 10+ seconds to load
  12. 12. Focus on user experience? Focus on monetization & user acquisition?
  13. 13. Start fast, stay fast!
  14. 14. Start fast, stay fast!
  15. 15. Content
 Shifting Slow
 Loading Non-Responsive
 Content
  16. 16. Content
 Shifting Slow
 Loading Non-Responsive
 Content
  17. 17. Three Core Components AMP HTML <html> <script> AMP JS AMP Cache
  18. 18. Three Core Components AMP HTML <html> <script> AMP JS AMP Cache
  19. 19. Hello, world! <!doctype html> <html ⚡> <head> <link rel="canonical" href="hello-world.html"> ... <style amp-boilerplate>...</style> <script async src="https://cdn.ampproject.org/v0.js"> </script> </head> <body> <div>Hello World!</div> <amp-img src="hello.jpg" height="400" width="800"></amp-img> </body> </html>
  20. 20. Three Core Components AMP HTML <html> <script> AMP JS AMP Cache
  21. 21. Prioritized content loading ● Header ● Logo ● Responsive hero image ● Headline ●Article text ● Image
 in article ● ● Some more text ● Ad ● ● “Above the Fold” Prerendered “Below the Fold” Not Prerendered
  22. 22. Three Core Components AMP CacheAMP HTML <html> <script> AMP JS
  23. 23. Web server Edge server Edge server Edge server Edge server Edge server Edge server Edge server For illustrative purposes only.
  24. 24. Pre-rendering that feels instant ● Header ● Logo ● Responsive hero image ● Headline ●Article text ● Image
 in article ● ● Some more text ● Ad ● ●
  25. 25. Start fast, Stay fast* * Some conditions apply, including no JavaScript, or other PWA features like offline, add to home screen or push notifications.
  26. 26. Start fast, Stay fast!
  27. 27. AMP and Progressive Web Apps
  28. 28. <amp-install-serviceworker>
  29. 29. ★ AMP as Progressive Web App ★ AMP to Progressive Web App ★ AMP in Progressive Web App
  30. 30. ★ AMP as Progressive Web App ★ AMP to Progressive Web App ★ AMP in Progressive Web App
  31. 31. AMP as Progressive Web App
  32. 32. AMP as Progressive Web App
  33. 33. AMP as Progressive Web App
  34. 34. AMP as Progressive Web App
  35. 35. ★ AMP as Progressive Web App ★ AMP to Progressive Web App ★ AMP in Progressive Web App
  36. 36. AMP to Progressive Web App
  37. 37. AMP to Progressive Web App
  38. 38. AMP to Progressive Web App
  39. 39. AMP Experience PWA Experience AMP HTML JSON
  40. 40. ★ AMP as Progressive Web App ★ AMP to Progressive Web App ★ AMP in Progressive Web App
  41. 41. AMP pages aren’t just webpages, they’re
 ultra-portable, embeddable, content units
  42. 42. AMP Experience PWA Experience AMP HTML JSON
  43. 43. AMP Experience PWA Experience AMP HTML
  44. 44. <iframe>
  45. 45. <iframe> but it’s slow…
  46. 46. Without Shadow DOM 1 1 1 Window AMP Library Instance Document
  47. 47. Without Shadow DOM 1 1 1 Window AMP Library Instance Document 2 23 34 4n n
  48. 48. Shadow DOM to the rescue
  49. 49. With Shadow DOM 1 1 Window AMP Library Instance Document 1 1∞∞∞
  50. 50. In Practice 1. PWA hijacks navigation clicks 2. Fetch the requested AMP page 3. Put content into Shadow Root 4. Call attachShadowDoc goo.gl/zs42rs
  51. 51. In Practice 1. PWA hijacks navigation clicks 2. Fetch the requested AMP page 3. Put content into Shadow Root 4. Call attachShadowDoc goo.gl/zs42rs
  52. 52. ★ AMP as Progressive Web App ★ AMP to Progressive Web App ★ AMP in Progressive Web App
  53. 53. Start fast, Stay fast!
  54. 54. Resources ★ AMP Project
 ampproject.org ★ AMP By Example
 ampbyexample.com
  55. 55. Thank You!

×