Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.

Amp your site an intro to accelerated mobile pages

290 vues

Publié le

Slide deck from the PHP World 2016 presentation

Publié dans : Internet
  • Soyez le premier à commenter

  • Soyez le premier à aimer ceci

Amp your site an intro to accelerated mobile pages

  1. 1. AMP your site: An Intro to Accelerated Mobile Pages Presented By Robert McFrazier
  2. 2. Robert McFrazier @rmcfrazier http://blog.robert.mcfrazier.com
  3. 3. ● Why speed is important? ● What are the problems AMP addresses? ● What is in AMP?
  4. 4. Will abandon a site that takes >3 seconds to load 40% Expect a page to load in <2 seconds 47% Say fast load time speed is important to site loyalty 52% Slow and steady doesn’t win the race What are user expectations for mobile sites?
  5. 5. How fast is fast enough.
  6. 6. Mobile pages should render in < 1s 3Gnetwork connection 600ms to 1s is consumed by mandatory 3G network overhead which can’t be avoided (average 750 Kbps to 1 Mbps) Source: "The Search Agency, Optimization Strategies for the Mobile Web"
  7. 7. Mobile pages that load 1s faster see up to +27% CvR 180,000 160,000 140,000 120,000 100,000 80,000 60,000 40,000 20,000 0 1.7 1.6 1.4 1.2 1.0 0.8 0.6 0.4 0.2 0.0 1.2 1.5 1.8 2.1 2.4 2.7 3.0 3.3 3.6 4.2 4.5 4.8 5.1 5.4 5.7 6.0 6.3 6.6 6.9 7.2 7.5 7.8 8.1 8.4 8.7 9.0 9.3 9.6 9.9 Load time (seconds) Conversionrate(%) Sessions Conversion rate (%) Bounce rate (%) 1.9% conversion rate 1.5% conversion rate Note: Some of pages with load times faster than 2.4 seconds experienced lower conversion rates. Those numbers may be influenced by faster response/page load times for 404s and other errors. Source: "Mobile performance conversion rate" 12.8% bounce rate 20% bounce rate 58 51 45 39 32 26 19 13 6 0 Bouncerate(%)
  8. 8. < 1sec Median load Time for AMP on Search 19sec Avg Load Time for Non-AMP AMP is fast
  9. 9. ● Why speed is important? ● What are the problems AMP addresses? ● What is in AMP?
  10. 10. Accelerated Mobile Pages Fast content + distribution on the web
  11. 11. 2 Poor consumer perceptions of mobile web experiences 1 Evolving ecosystems of closed distribution models 3 Monetization at the content level is hard 4 Technology updates are outpacing development cycles 5 Ad Blockers are a challenge to the industry We are faced with new challenges With a common objective: an open ecosystem of knowledge
  12. 12. So we need something... Fast Easy to implement Mobile Friendly Embrace the open web Gives strong Incentives ✔⚡
  13. 13. How to make fast web pages 1. Simplify the pages a. Less Javascript 2. Optimize the bandwidth a. Get the best content for your device (image resolution etc.) b. Parallelize the loading (asynchronous load) 3. Cache the pages a. Use Content Delivery Networks to store a local copy of the pages ⚡
  14. 14. How to make fast web pages Use HTTP/2 whenever possible. You get that for free if you use the Google AMP Cache. ⚡
  15. 15. Easy to implement What is required ● Start with the doctype <!doctype html>. ● Contain a top-level <html ⚡> tag (<html amp> is accepted as well). ● Contain <head> and <body> tags. ● Contain a <link rel="canonical" href="$SOME_URL" /> tag inside their head that points to the regular HTML version of the AMP HTML document or to itself if no such HTML version exists. ● Contain a <meta charset="utf-8"> tag as the first child of their head tag. ● Contain a <meta name="viewport" content="width=device-width,minimum-scale=1"> tag inside their head tag. It’s also recommended to include initial-scale=1. ● Contain a <script async src="https://cdn.ampproject.org/v0.js"></script> tag as the last element in their head (this includes and loads the AMP JS library).
  16. 16. Easy to implement Simple AMP webpage <!doctype html> <html amp lang="en"> <head> <meta charset="utf-8"> <title>Hello, AMPs</title> <link rel="canonical" href="http://example.ampproject.org/article-metadata.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:non e}</style></noscript> <script async src="https://cdn.ampproject.org/v0.js"></script> </head> <body> <h1>Welcome to the mobile web</h1> </body> </html>
  17. 17. Mobile Friendly “Just like all web pages, Accelerated Mobile Pages will load in any modern browser or app webview. AMP files take advantage of various technical and architectural approaches that prioritize speed to provide a faster experience for users.” Not just mobile friendly but browser friendly. ✔
  18. 18. Embrace the open web “The initial companies involved in this early preview of the project want to make the mobile web work better for all – not just for one platform, one set of technologies, or one set of publishers.” Unlike other mobile friendly solutions, AMP is open source and does not require you to be locked into a publishing platform (Facebook Instant Articles) or be an approved publisher (Apple News Format).
  19. 19. Embrace the open web “A goal of the Accelerated Mobile Pages Project is to ensure effective ad monetization on the mobile web while embracing a user-centric approach. With that context, the objective is to provide support for a comprehensive range of ad formats, ad networks and technologies in Accelerated Mobile Pages. ” Will publishers be able to sell their own ad inventory? Yes, as with their existing websites, publishers control their ad inventory and how they sell it.
  20. 20. Select publisher and platform partners on AMP initiative
  21. 21. ● Why speed is important? ● What are the problems AMP addresses? ● What is in AMP?
  22. 22. What is AMP? HTML5 (AMP HTML) JavaScript (AMP JS) CSS3 (Custom styling) Global Proxy Cache (AMP Cache)
  23. 23. Easy to implement Simple AMP webpage <!doctype html> <html amp lang="en"> <head> <meta charset="utf-8"> <title>Hello, AMPs</title> <link rel="canonical" href="http://example.ampproject.org/article-metadata.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:non e}</style></noscript> <script async src="https://cdn.ampproject.org/v0.js"></script> </head> <body> <h1>Welcome to the mobile web</h1> </body> </html>
  24. 24. AMP JS The library managing: ➔ Resource loading ➔ Core web components ➔ Performance optimizations https://github.com/ampproject/amphtml
  25. 25. Google AMP Cache ➔ Cache of valid AMP documents available for anyone to use ➔ HTTP/2 with same origin for all resources ➔ Google products all serve via the AMP cache ➔ API available to query AMP documents
  26. 26. Google AMP Cache ➔ Cache of validated AMP documents available for anyone to use ➔ HTTP/2 with same origin for all resources ➔ Google products all serve via the AMP cache ➔ API available to query AMP documents Request POST https://acceleratedmobilepageurl.googleapis.com/v1/ampUrls:batchGet { "lookupStrategy": "IN_INDEX_DOC", "urls": [ "http://www.bbc.co.uk/news/science-environment-37547103" ] } Response 200 - Show headers - { "ampUrls": [ { "originalUrl": "http://www.bbc.co.uk/news/science-environment-37547103", "ampUrl": "http://www.bbc.co.uk/news/amp/37547103", "cdnAmpUrl": "https://cdn.ampproject.org/c/www.bbc.co.uk/news/amp/37547103" } ] }
  27. 27. AMP Validation Rules Enforced ● All script tags have async attributes. ● Only inline CSS ● Only 50KB of CSS ● Only AMP’s own JavaScript (support for variety of extensions/custom-elements) ● 3rd party JS is only allowed in iframes. ● Resources must have static-responsive size declared in markup. ● Resource resizing is controlled by AMP Runtime.
  28. 28. Optimizations include: ● Only the first viewport is prerendered — because AMP knows where each page element is positioned ● No 3rd party JavaScript is executed at this stage Prerendering by Platforms Can Make Loading Instant?
  29. 29. Linking pages with <link> Add information about the AMP page to the non-AMP page and vice versa, in the form of <link> tags in the <head>. Add the following to the non-AMP page: <link rel="amphtml" href="https://www.example.com/url/to/amp/document.html"> And this to the AMP page: <link rel="canonical" href="https://www.example.com/url/to/full/document.html"> Make Your Page Discoverable
  30. 30. AMP Validator
  31. 31. AMP in action.
  32. 32. ● EXPLORE ampproject.org/docs to learn more and read documentation github.com/ampproject/amphtml to connect with the development team ampbyexample.com Look at working AMP examples ● DEVELOP & TEST Start developing AMP pages and validate them ● LAUNCH Point to AMP pages from canonical articles to make them discoverable and eligible to appear in content platforms Join the AMP initiative
  33. 33. Questions
  34. 34. Robert McFrazier Email: robert@mcfrazier.com Blog: http://blog.robert.mcfrazier.com Twitter: @rmcfrazier Slides: Thank You

×