AMP - Accelerated Mobile Pages
6 likes6,897 views
The document discusses the challenges faced by publishers in the mobile web landscape, emphasizing the need for faster and more engaging web pages. It introduces Accelerated Mobile Pages (AMP) as a solution to improve mobile web performance, highlighting features like simplified design, responsive layout, and instant loading through caching. The document also outlines steps for publishers to adopt AMP and its potential benefits for content discovery on Google.
AMP - Accelerated Mobile Pages
- 2. Proprietary + Confidential Ido Green @greenido
- 3. With the shift to mobile, the way we consume content has changed
- 4. Source: comScore Mobile Metrix, U.S., Age 18+, June 2015 The web offers broader reach, but engagement is low - Let’s fix it! Top 1000 mobile apps vs. top 1000 mobile web properties 10.9 Monthly unique visitors (MM) 3.3 Average minutes per visitor Mobile webApps 8.9 201.8
- 5. UI Today “ For the first time this summer, more Google searches were completed on mobile devices than desktop computers Amit Singhal, August 2015 ”
- 6. Proprietary + Confidential What is happening? ● Mobile is our main focus ● Mobile web suffers from slow, cluttered sites ● User experience is not good ● Mobile Apps create silos and reduce diversity ● Many ways to access mobile content Publisher appsSocial, aggregators Targeted queries Serendipitous discovery Search Habitual use
- 7. of people abandon a website that takes more than 3 seconds to load40% Performance as a feature
- 8. 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 Publishers are faced with new challenges With a common objective: an open ecosystem of knowledge
- 9. We must something Fast Easy to implement Mobile Friendly Embrace the open web Gives strong Incentives ✔⚡
- 10. How to make fast web pages ● Simplify the pages - Less Javascript ● Optimize the bandwidth ○ Get the best content for your device (image resolution etc.) ○ Parallelize the loading (asynchronous load) ● Cache the pages ○ Use Content Delivery Servers to store a local copy of the pages ⚡
- 11. Introducing Accelerated Mobile Pages Web pages, today Accelerated Mobile Pages
- 12. What is AMP? HTML5 (AMP HTML) JavaScript (AMP JS) CSS3 (Custom styling) Global Proxy Cache (AMP Cache)
- 13. How does it work? AMP-HTML Ad revenue and analytics HTML Speed up by the AMP Cache CMS
- 14. Yourwebsite... Web server Local copy of your assets Without the AMP cache With the AMP cache Web server Edge server Edge server Edge server Edge server Edge server Edge server Edge server
- 15. How AMP works Open-source framework and common set of building blocks replacing Javascript HTML CSS COMPONENT CALLS Embeds Twitter Instagram Maps Ads more... Accelerated Mobile Pages Cached Runtime Libraries Separate companion file referenced via link tag on a site’s current article page Widgets Ads load in safe iFrames secondarily to content - Needs to be HTTPS hosted galleries polls lightboxes forms
- 16. AMP Features ● Smart content prioritization ○ Prefetching the elements ○ No relayout ○ Asynchronous load ● Responsive design ○ Always get the best image for your screen (full srcset support) ● Limited by design ○ No custom Javascript except in amp-iframe ○ No scrolling elements on the page ○ Max 50kB inline stylesheet Page load time Synchronous load Page load time Asynchronous load
- 17. Select publisher and platform partners on AMP initiative
- 18. AMP-HTML on Google Search driving content discovery Google will display articles created using AMP-HTML in new carousels on search…
- 19. AMP-HTML on Google Search driving content discovery Google has been displaying sports articles created using AMP-HTML in the Top Stories carousel on search.
- 20. Beyond News We will also create article carousels for topics related to soft news like ● “pasta recipes” ● “visit barcelona” ● “uk music festivals” Illustrative Mocks
- 21. …..and ultimately across multiple Google surfaces. Now On TapGoogle News Play NewsstandGoogle Now Illustrative Mocks
- 22. Reading Experience using AMP- HTML ● Articles are cached and load instantly ● Publishers have control over visual design and business model ● Supports existing ad formats ● Deepen engagement with related articles
- 23. Join the Amp Initiative 1 EXPLORE Review the technical documentation and join the community on GitHub and StackOverflow 2 DEVELOP & TEST Start developing your AMP files* and validate them. You can use ampbyexample.com for reference 5 LAUNCH Point to AMP files from your canonical articles to make them publicly crawlable 3 FOLLOW THE GOOGLE SEARCH GUIDELINES Review the Google Search requirements and check the AMP Search Console Report 4 RESEARCH ADS & ANALYTICS Review your options for ads and analytics If you use a market CMS platform, please visit ampproject.org/who
- 24. For more info on AMP, please visit: • Get help in the Webmaster Central forums • Learn more about AMP in Google Search • Read about Structured Data for Top Stories • Check for errors in the Search Console Using AMP with GoogleCreating Native AMPs • AMP Project Website and getting started guide • Learn about extensions, ads , and analytics • Get help on StackOverflow (how to ask questions) • Videos: NewsLab Hangouts, AMP with Paul Bakaus & AMP Anatomy with Malte Ubl
- 25. Use Google Analytics or ads? Support on Ads and Analytics Request support from your vendor GA Neither Yes No Ask your vendor to support AMP Contact your support rep or the DFP Help Center Does the vendor support AMP? Check the latest on ampproject.org/who Not Sure Contact your premium support rep or the GA Help Center Visit GitHub • Ads • Analytics Ads