Recomendados
Recomendados
Mais conteúdo relacionado
Mais procurados
Mais procurados (19)
Semelhante a AMP and PWA
Semelhante a AMP and PWA (20)
Último
Último (20)
AMP and PWA
- 1. Progressive Web App Roadshow Starting Fast with AMP
- 2. @techhtml GDG Korea WebTech AMP Docs Contributor Korean 한국말 잘해요
- 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 malesuada fames ac turpis egestas. In ornare, leo in
- 6. 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…
- 7. 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
- 8. 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
- 10. 의 사용자는 로딩에 3초 이상이 걸리면 해당 페이지를 닫아버립니다53%
- 11. Response Times: The 3 Important Limits, Jakob Nielsen, January 1, 1993
- 12. 0.1s feels instant 1s feels natural 10s lost user’s attention Response Times: The 3 Important Limits, Jakob Nielsen, January 1, 1993
- 13. 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
- 14. Focus on user experience? Focus on monetization & user acquisition?
- 20. Three Core Components AMP HTML <html> <script> AMP JS AMP Cache
- 21. Three Core Components AMP HTML <html> <script> AMP JS AMP Cache
- 22. 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>
- 23. Three Core Components AMP HTML <html> <script> AMP JS AMP Cache
- 24. 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
- 25. Three Core Components AMP CacheAMP HTML <html> <script> AMP JS
- 26. Web server Edge server Edge server Edge server Edge server Edge server Edge server Edge server For illustrative purposes only.
- 27. Pre-rendering that feels instant ● Header ● Logo ● Responsive hero image ● Headline ●Article text ● Image in article ● ● Some more text ● Ad ● ●
- 28. Start fast, Stay fast* * Some conditions apply, including no JavaScript, or other PWA features like offline, add to home screen or push notifications.
- 30. AMP and Progressive Web Apps
- 32. ★ AMP as Progressive Web App ★ AMP to Progressive Web App ★ AMP in Progressive Web App
- 33. ★ AMP as Progressive Web App ★ AMP to Progressive Web App ★ AMP in Progressive Web App
- 38. ★ AMP as Progressive Web App ★ AMP to Progressive Web App ★ AMP in Progressive Web App
- 42. AMP Experience PWA Experience AMP HTML JSON
- 43. ★ AMP as Progressive Web App ★ AMP to Progressive Web App ★ AMP in Progressive Web App
- 44. AMP pages aren’t just webpages, they’re ultra-portable, embeddable, content units
- 45. AMP Experience PWA Experience AMP HTML JSON
- 46. AMP Experience PWA Experience AMP HTML
- 47. <iframe>
- 49. Without Shadow DOM 1 1 1 Window AMP Library Instance Document
- 50. Without Shadow DOM 1 1 1 Window AMP Library Instance Document 2 23 34 4n n
- 51. Shadow DOM to the rescue
- 52. With Shadow DOM 1 1 Window AMP Library Instance Document 1 1∞∞∞
- 53. 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
- 54. 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
- 55. ★ AMP as Progressive Web App ★ AMP to Progressive Web App ★ AMP in Progressive Web App
- 57. Resources ★ AMP Project ampproject.org ★ AMP By Example ampbyexample.com
- 58. Thank You!