Google Developers Blog: AMP

The Speed Benefit of AMP Prerendering

Wednesday, August 14, 2019

Posted By Eric Steinlauf, Software Engineer, Google Today we want to walk through some updated analysis on the benefit that prerendering can provide on load times. AMP is designed to reduce page load time, and one of the most important ways Google Search reduces page load time is through privacy-preserving-prerendering AMP documents before a link is clicked. First Viewport Ready The AMP framework has been designed to understand the layout of all page content and the loading status of all resources, so it can determine the time when all "above the fold" content has loaded. It also knows when the document is prerendered and when it is displayed. Thus, the AMP framework can compute the time from click until the above the fold content is displayed. AMP measures page load speed with a custom metric called First Viewport Ready (FVR). This is defined as the point in time "when non-ad resources above the fold fired their load event measured from the time the user clicks (So takes pre-rendering into account)". If an AMP document is fully prerendered this metric will be 0. If prerendering was not complete at the time of click or if the document was not prerendered at all, then the metric will be greater than 0. Google Search prerenders some AMP documents and not others so we are able to see the impact that prerendering has on FVR. The chart below shows percentiles for FVR with and without prerendering. FVR is 0 when the AMP framework successfully completes prerendering before the document is displayed.

Chart showing percentiles for FVR with and without prerendering

First Contentful Paint First Contentful Paint (FCP) is a page load speed metric that is measured by the browser. It is available for all documents, not just AMP documents. FCP is the point in time when the first bit of content from the DOM is rendered. A high value for FCP indicates that a page is definitely slow, but a low value for FCP does not necessarily mean that a page loads quickly since the first bit may not be important content. This is useful, but since AMP has a better understanding of what content is visible, FVR gives a better understanding of when content becomes visible. FCP is not aware of prerendering so AMP computes a prerender sensitive derivative metric, Prerender-adjusted First Contentful Paint (PFCP), that subtracts out the time before click. When not prerendered, PFCP = FCP. FCP also decreases with prerendering, but the difference is less dramatic than FVR.

It may be surprising that median prerendered PFCP is higher than median prerendered FVR. This happens because the browser has to draw the content to the screen after the click. PFCP includes that time, while FVR does not. Conclusion Prerendering AMP documents leads to substantial improvements in page load times. Page load time can be measured in different ways, but they consistently show that prerendering lets users see the content they want faster. For now, only AMP can provide the privacy preserving prerendering needed for this speed benefit. In the future, new web platform features, such as Signed Exchanges, will bring privacy-preserving instant loading to non-AMP documents too.

AMP stories: Bringing visual storytelling to the open web

Tuesday, February 13, 2018

Posted by Rudy Galfi, Product Manager for AMP at Google The AMP story format is a recently launched addition to the AMP Project that provides content publishers with a mobile-focused format for delivering news and information as visually rich, tap-through stories. A visual-driven format for evolving news consumption on mobile Some stories are best told with text while others are best expressed through images and videos. On mobile devices, users browse lots of articles, but engage with few in-depth. Images, videos and graphics help publishers to get their readers' attention as quickly as possible and keep them engaged through immersive and easily consumable visual information. Recently, as with many new or experimental features within AMP, contributors from multiple companies — in this case, Google and a group of publishers — came together to work toward building a story-focused format in AMP. The collective desire was that this format offer new, creative and visually rich ways of storytelling specifically designed for mobile.

Minimize technical challenges and let creators focus on the storytelling The mobile web is great for distributing and sharing content, but mastering performance can be tricky. Creating visual stories on the web with the fast and smooth performance that users have grown accustomed to in native apps can be challenging. Getting these key details right often poses prohibitively high startup costs, particularly for small publishers. AMP stories are built on the technical infrastructure of AMP to provide a fast, beautiful experience on the mobile web. Just like any web page, a publisher hosts an AMP story HTML page on their site and can link to it from any other part of their site to drive discovery. And, as with all content in the AMP ecosystem, discovery platforms can employ techniques like pre-renderable pages, optimized video loading and caching to optimize delivery to the end user. AMP stories aim to make the production of stories as easy as possible from a technical perspective. The format comes with preset but flexible layout templates, standardized UI controls, and components for sharing and adding follow-on content. Yet, the design gives great editorial freedom to content creators to tell stories true to their brand. Publishers involved in the early development of the AMP stories format — CNN, Conde Nast, Hearst, Mashable, Meredith, Mic, Vox Media, and The Washington Post — have brought together their reporters, illustrators, designers, producers, and video editors to creatively use this format and experiment with novel ways to tell immersive stories for a diverse set of content categories.

Developer preview for AMP stories is starting today Today AMP stories are available for everyone to try on their websites. As part of the AMP Project, the AMP story format is free and open for anyone to use. To get started, check out the tutorial and documentation. We are looking forward to feedback from content creators and technical contributors alike. Also, starting today, you can see AMP stories on Google Search. To try it out, search for publisher names (like the ones mentioned above) within g.co/ampstories using your mobile browser. At a later point, Google plans to bring AMP stories to more products across Google, and expand the ways they appear in Google Search.

video { width: 100% !important; height: auto !important; } .ampwebimg1 img { max-width: 50%; !important; } .ampwebimg2 img { max-width: 50%; !important; }

AMP Compression Update

Tuesday, June 6, 2017

Posted by Zachary Nado, Software Engineer Recently we announced the addition of Brotli compression to the Google AMP Cache. All AMP documents served from the Google AMP Cache can now be served with Brotli, which will save a considerable amount of bandwidth for our users and further our goal of improving the mobile experience. Brotli is a newer, more efficient compression algorithm created by Jyrki Alakuijala and Zoltán Szabadka with the Google Research Europe Compression Team. Launched in 2015, it has already been used to enable considerable savings in other areas of Google. While it is a generic compression algorithm, it has particularly impressive performance when applied to web documents; we have seen an average decrease in document size of around 10% when using Brotli instead of gzip, which has amounted to hundreds of gigabytes of bandwidth saved per day across the Google AMP Cache. With smaller document sizes, pages load faster while also saving bandwidth which can amount to noticeable savings for users on limited data plans. The Google AMP Cache is just the beginning though, as engineering teams are working on Brotli support in many other products which can enable bandwidth savings throughout Google.

What’s in an AMP URL?

Monday, February 6, 2017

Posted by Alex Fischer, Software Engineer, Google Search.originsAMP in Google Search

Original URL: The publisher's document written in the AMP format. http://www.example.com/amp/doc.html

AMP Cache URL: The document served through an AMP Cache (e.g., all AMPs served by Google are served through the Google AMP Cache). Most users will never see this URL. https://www-example-com.cdn.ampproject.org/c/www.example.com/amp/doc.html

Google AMP Viewer URL: The document displayed in an AMP viewer (e.g., when rendered on the search result page). https://www.google.com/amp/www.example.com/amp.doc.html

AMP Cache URLswhy AMP Caches exist AMP Viewer URLswww.google.com/amp How does pre-rendering work?

The AMP Viewer pre-renders an AMP document in a hidden iFrame.

Where do google.com/amp URLs come from?www.example.com/amp/doc.htmlwww-example-com.cdn.ampproject.org/www.example.com/amp/doc.htmlreferencesecurity reasonswww.google.com Why do we show a header bar?www.google.com

What's next?AMP in Google Search

All Google URLs (i.e., the Google AMP cache URL and the Google AMP viewer URL) reflect the original source of the content as best as possible: www.google.com/amp/www.example.com/amp/doc.html.

When users scroll down the page to read a document, the AMP viewer header bar hides, freeing up precious screen real-estate.

When users visit a Google AMP viewer URL on a platform where the viewer is not available, we redirect them to the canonical page for the document.

Web Share APIfeedbackget involved

Google AMP Cache, Optimizations for Slow Networks, and the Need for Speed

Wednesday, January 11, 2017

Posted by Huibao Lin and Eyal Peled, Software Engineers, Google
Editor’s Note: This blog post was amended to remove the term “AMP Lite”. This was a code name for a project to make AMP better for slow networks but many readers interpreted this as a separate version of AMP. We apologize for the confusion.
Google AMP Cache Image optimizations by the Google AMP Cache
64% of the bytesPageSpeed ModulesChrome Data CompressionPageSpeed1) Removing data which is invisible or difficult to see2) Converting images to WebP formatWebP
3) Adding srcset4) Using lower quality images under some circumstancesData Saverbeforeafter

AMP for Slow Network Conditions
amp-fontwe see a combined 45% reduction in bytes

Aug	SEP	Oct
	04
2018	2019	2020

The Speed Benefit of AMP Prerendering

AMP stories: Bringing visual storytelling to the open web

AMP Compression Update

What’s in an AMP URL?

Google AMP Cache, Optimizations for Slow Networks, and the Need for Speed

Labels

Archive

Company-wide

Products

Developers