AMP’ing Up The AMP Framework

Editor’s note: The following was posted on Medium by Konstantin Sokhan, Design Director & David Tapp, Client Partner, MetaLab. Checkout all the AMP templates on

TL;DR — We Journeyed Into the World of AMP and Learned Some Stuff

We teamed up with Google to focus on The AMP Project and received a dream brief: create anything your heart desires, so long as it helps push the boundaries of what’s possible in AMP’s codebase and component library. As we share what we built and learned along the way, we’ll also give our take on AMP’s importance, who it’s for and where it’s going.

What is AMP?

AMP is an open-source framework for building efficient, high performance web pages. It’s currently used primarily for editorial content on mobile but is growing beyond this for wider usage across different markets (and screen sizes).


Seeing Both Sides

Before we go any further on our own experience, we’d like to acknowledge that we are well aware of the criticisms and aren’t going to pretend AMP doesn’t come with any; it does. We simply took this project as an opportunity to chart down our own path and make our own impressions. From our experience, there are some misconceptions we’d like to help clear up.

AMP allows site authors to host a static mobile-optimized version of any of their site pages which distribution platforms like Google cache and serve to users. Much of the AMP criticism is targeted at Google’s approach to caching the serving AMP pages from the domain. What is worth clarifying is that the AMP page cache and the AMP HTML mobile optimization framework are separate products. A page built using AMP HTML can be privately hosted on any server, you can take advantage of all of the framework’s features without having Google host your content.

Don’t Let the Name Fool You

AMP stands for “Accelerated Mobile Pages”. In the simplest of terms, it blocks most of the elements which causes the web to load slower on mobile, like large amounts of JavaScript, third-party tracking scripts and bloated CSS. It allows content to almost instantly load. AMP was designed for cached pages, but it is now growing into a broader toolset to fix the mobile web (as the majority of users are mobile today, some site loads still can take minutes). Although the M stands for Mobile, AMP can absolutely help improve loading speeds on any device or browser type.

The Brief

In July, The AMP Project team came to us to push the limits of what’s possible in the framework, showcase its capabilities and help content creators realize how they could better use it to bring the web to life. We were essentially given free reign to use all of the tools provided by AMP to combine and implement them as we saw fit with the goal of creating an entirely new experience that had yet to be built with the framework. The sites we were to create are intended to be reused in the real world and be made accessible as free, open-source web templates at

What We Built & Why

While we still had to work within strict guidelines to ensure the code was valid AMP, we aimed to come up with the craziest possible concepts within those defined boundaries.

After some brainstorming, we landed on the idea that online art galleries and museums are typically fun, abstract and don’t play by the rules when it comes to following conventional gridded web layouts. With that idea in mind we created a faux art gallery as proving grounds for redefining what was possible in AMP. We built a site that used the best of the initiative and built on its foundations. Our teams relied on the power of AMP to ensure the site was incredibly performant, while introducing new features and components into the framework including custom parallax experiences, hover states and more. We even had a little fun with the possibility of an immersive VR version done in AMP for consideration. Try our proof of concept in your phone here.

Design for Art Gallery AMP Site

Next, we thought about more commonly used experiences on the web that could benefit from AMP’s capabilities. We ended up exploring what was possible in a travel booking app, allowing users to search destinations, filter by activities, and find things dynamically; all while maintaining the speed and performance AMP is commonly known for. We sweat the details on this one in delight — pushing the AMP framework as far as we could with micro-animations and hits of personality.

Design for Travel Booking AMP Site

Who is AMP For?

Today, AMP is geared towards people on the go who are heavy into editorial style content (news and blogs on their phones) and e-commerce. Where we imagine strong adoption will take place is with sites that strive to be beyond performant or have a wide range of international audiences. Currently, the average mobile web page on a 3G connection takes roughly 19 seconds to load and almost half of the world is still running on it — this obviously needs to be improved and AMP can help. As the web continues to lean predominantly mobile, creating efficiencies here is both logical and essential. AMP can potentially provide a blueprint for improving access to information in developing countries.

Are We Living in The Future?


Not quite, but making progress daily! AMP sites found online today are still primarily media, news & editorial content (for now). The benefits are obvious, as being built on AMP provides a serious performance and discoverability boost. Is AMP and its aspirations the future of all web? Maybe. Maybe not. One thing’s for sure, the learnings and best practices the framework is helping establish are definitely here to stay. AMP is also building atop of the latest and greatest in the web in real time with rollout of its features. Its development community is constantly striving to keep up to date with new trends; proactively pulling in the web’s upcoming functionality and giving it to you today.

Development lessons based on our learnings from AMP

As it relates to developing within AMP, we learned some things along the way we thought would be valuable to share. Notable insights below:

  1. AMP forbids custom JavaScript outside of an iframe, forcing you to rely on its library of optimized code. This is done to ensure that no poorly-optimized or nefarious code has the opportunity to hinder the user experience. We notice many, otherwise well-built sites, can become slow from the inclusion of megabytes of advertising and tracking scripts. The importance of optimization and careful vetting of any JavaScript code included on your site is a very important takeaway from AMP.
  2. AMP prioritizes the content that is visible to the user. It knows what content is below the fold and defers loading or rendering it until necessary. Visitors to AMP pages will never have to wait as all of the loading images and ads block their access to the page. Additionally, if a visitor never decides to scroll down, none of their mobile data is wasted loading content that would never be seen.
  3. AMP has solved “loading jank.” On an AMP page, every element must have a deterministic known height, whether it be an ad, an image or video, or a paragraph of text. You will never experience content shifting on your screen as elements above load in.
  4. Ad performance: AMP sets the new bar for ad integration on sites. Ads must behave properly on the page and should comply with optimal user experience. Goodbye full screen takeovers and other obnoxious content you don’t want on the page. AMP enforces that ads behave like good citizens.

In Closing

This opportunity was challenging, fun and provided some fresh perspective. We were given a lot of flexibility, while at the same time had to find unconventional ways to adhere to set conditions within the AMP framework. We learned a lot more than what we thought we knew going in about AMP and uncovered some previous misconceptions. In working within the framework, we came away with an even stronger understanding of where the web is going and how it can learn from AMP. If you’re interested in building your next site within it, make sure to check our templates, which are completely open-source, free to use and downloadable at

The following was posted on Medium by Konstantin Sokhan, Design Director & David Tapp, Client Partner, MetaLab. Checkout all the AMP templates on

AMP’ing Up The AMP Framework

Measuring AMP Performance

Editor’s note: The following was posted on Medium by Martin Schierle, Mobile Solutions Consultant, Google.

TL;DR: Whenever performance testing AMP, keep in mind that a test from origin will include potentially suboptimal server settings like bad cache headers or missing image optimizations. Also the biggest speed gain (near instant load through prerendering) will not be reflected in commonly used performance tools and metrics.

Developers implementing AMP are looking to get blazingly fast loading speeds, and are therefore often curious to see how much their site improved with AMP. However, a naive run of one of the many available performance tools (e.g. PageSpeed Insights or Lighthouse) does sometimes yield surprising and seemingly suboptimal results.

To understand why this is happening, it is important to be aware that AMP speeds up a website on three different levels:

  1. AMP itself is already very fast, as custom JS is forbidden, critical path is unblocked, CSS is inlined and many other optimizations. However, there may still be bottlenecks from the server-side, e.g. unoptimized images or insufficient cache headers, which can’t easily be fixed by the client side AMP library.
  2. The second level of speed-up is then achieved through the caching by the AMP Caches (e.g. the Google AMP Cache), which will reoptimize images, add prefetch hints, minify html, serve via HTTP/2, along with many other optimizations. Keep in mind that the bulk of those optimizations can also be done on origin.
  3. The third (and potentially most impactful) level of speed improvement is based on the fact that AMP can be prerendered in a safe and secure way, by prerendering only assets in the first viewport, and not executing third-party scripts. This is described in far more detail here.

So if a performance check is done on AMP on origin, the speed scores (while normally much faster than the canonical) are not yet representative. A better way to test is to run the performance test on the same site served from one of the AMP Caches (you can use this tool to get a cache URL for the Google AMP cache). This will include optimizations through the cache into the measurement. This score will already be much better, and basically shows what you could achieve on your own host as well by applying optimizations like the ones described previously.

Let’s see what this might look like for an actual page, here one of our example pages from


Detailed results can be found here. The chart nicely shows how the performance improves if measured from an AMP Cache instead of origin across most metrics. First meaningful paint is, for example, 0.9s faster from cache.

Unfortunately the third and most important case (near instant load through prerendering) can’t be measured easily with the regular tools, as it would need to be measured in the flow coming from an earlier visited site or app. It should however be obvious that a page can be shown near instantly, as long as all visible content was already prerendered beforehand. allows to test flows like this via the scripting option, but it is cumbersome and error-prone to setup and maintain. A script could look like this:

// don’t log data for first navigation step

logData 0 

// navigate to the first page (e.g. Google SRP) which prerenders AMP


// sleep a bit to give prerendering time,
// a user normally also doesn’t click through immediately

sleep 10

// start logging now for clickthrough to AMP

logData 1

// click through, insert correct query expression
// to find the right link to click for your doc

execAndWait document.querySelector(‘[…]’).click();

When adding this in, the complete comparison of all three modes looks like this (with detailed results being here):


This shows the advantage of prerendering, which makes it possible to start render pretty much instantaneously (66ms) and to be visually complete and interactive after approximately 1s.

So, whenever performance testing AMP, keep in mind that not all speed advantages are directly obvious, as some will come in through caching and especially prerendering.

Posted on Medium by Martin Schierle, Mobile Solutions Consultant, Google

Measuring AMP Performance

Improving URLs for AMP pages

TL;DR: We are making changes to how AMP works in platforms such as Google Search that will enable linked pages to appear under publishers’ URLs instead of the URL space while maintaining the performance and privacy benefits of AMP Cache serving.

When we first launched AMP in Google Search we made a big trade-off: to achieve the user experience that users were telling us that they wanted, instant loading, we needed to start loading the page before the user clicked. As we detailed in a deep-dive blog post last year,  privacy reasons make it basically impossible to load the page from the publisher’s server. Publishers shouldn’t know what people are interested in until they actively go to their pages. Instead, AMP pages are loaded from the Google AMP Cache but with that behavior the URLs changed to include the URL prefix.

We are huge fans of meaningful URLs ourselves and recognize that this isn’t ideal. Many of y’all agree. It is certainly the #1 piece of feedback we hear about AMP. We sought to ensure that these URLs show up in as few places as possible. Over time our Google Search native apps on Android and iOS started defaulting to showing the publishers URLs and we worked with browser vendors to share the publisher’s URL of an article where possible. We couldn’t, however, fix the state of URLs where it matters most: on the web and the browser URL bar.

We embarked on a multi-month long effort, and today we finally feel confident that we found a solution: As recommended by the W3C TAG, we intend to implement a new version of AMP Cache serving based on the emerging Web Packaging standard. Based on this web standard AMP navigations from Google Search can take advantage of privacy-preserving preloading and the performance of Google’s servers, while URLs remain as the publisher intended and the primary security context of the web, the origin, remains intact. We have built a prototype based on the Chrome Browser and an experimental version of Google Search to make sure it actually does deliver on both the desired UX and performance in real use cases. This step gives us confidence that we have a promising solution to this hard problem and that it will soon become the way that users will encounter AMP content on the web.

The next steps are moving towards fully implementing the new web standard in web browsers and in the Google AMP Cache. Our goal is that Web Packaging becomes available in as many browsers as possible (after all Web Packaging has exciting use cases beyond just AMP such as offline pages, ES6 module loading, and resource bundling). In particular, we intend to extend existing work on WebKit to include the implementation of Web Packaging and the Google Chrome team’s implementation is getting started.

We’re super excited about getting this work under way and we expect the changes to first reach users in the second half of 2018. Thanks for all of your feedback on the matter and we will keep you all updated on the progress right here in this blog!

Malte Ubl, Tech Lead for the AMP Project at Google.

Improving URLs for AMP pages

Supporting open source sustainability

Happy New Year everyone! We on the AMP team have a New Year’s resolution that we hope will be widely shared through the industry: We want to ensure the open source projects we depend on can be maintained in a way that is sustainable for their respective core teams.

As an open source project itself, AMP is fortunate to have the benefit of support from a full time team at Google, along with many more contributors backed by their respective employers. However, not every open source project has that type of financing to pay the bills, or they might actively seek out being independent of direct corporate financial support.

This is not a sustainable state for many open source projects—the authors and maintainers of those projects need to make a living. Thankfully projects such as Open Collective have started to provide an alternative model that allows users of open source projects to contribute financially to their work. We, the AMP project, want to be part of that solution.

Last summer AMP started making regular contributions to Babel. Today we are extending that support and pledging to make funds available to more projects that we depend on as they start to accept donations.

Starting in January, we’ll contribute with monthly recurring donations to Babel (which we heavily use in our development setup), Preact (which we are planning to use in future projects), and Webpack (because they are awesome and we use it in our AMP Start project).

Screen Shot 2018-01-05 at 8.42.10 AM
The AMP Project’s monthly contributions on Open Collective as of January 2017.

Please see the Open Collective pages of Babel, Preact and Webpack to become a backer yourself!

We are super excited about the opportunity to help out and are looking forward to supporting even more projects in the future. To a more sustainable open source financing model in 2018!

Malte Ubl, Tech Lead for the AMP project at Google.

Supporting open source sustainability

Twitter uses AMP to improve reading experience, enables publishers to understand their audience

Editor’s note: This post is authored by Ben Ward, Product Manager for AMP & Publisher Platform, Twitter. Read more about their support for AMP article analytics here.

Twitter sits at the heart of news, with millions of people using the service to stay updated about what’s happening in the world, right as it happens. An essential part of our mission to keep people informed is in the discovery and reading of news articles. We’ve embraced AMP as a tool to improve that experience for our users, and make our service better.

AMP launched with support for embedding Tweets, and now we’ve built out support for displaying AMP in our mobile clients on iOS, Android and on the web. When a link is Tweeted, Twitter now automatically discovers and displays the AMP editions of articles. In our testing, we’ve found that when people are shown the faster-rendering AMP editions of articles, they build a habit of reading even more articles via Twitter than those without AMP.

Last week we announced a major milestone of our AMP implementation, launching better support for article analytics. Now publishers are able to understand their audience views from Twitter when we render AMP. We’ve made changes that mean existing analytics tools will still record views even when we display the AMP edition of an article, and we’ve enabled AMP pages to access the social referral parameters added to links shared on Twitter.

We like AMP because its design encourages performant web publishing and mobile-centric design of articles. While in the past we’ve also experimented with “reader mode” features in browsers, we love that AMP gives publishers creative control over their content, ensuring that the web remains vibrant, varied and expressive, while also being fast. And of course, AMP natively supports existing advertising platforms, supporting the businesses of publishers who we want to excel on Twitter. As a project, it is developed in the open, welcoming of community contributions, and consumed by multiple independent services, which is well aligned with Twitter’s values.

You can learn about how Twitter uses the AMP editions of articles, and how to optimize your site for our analytics enhancements in our new AMP documentation on the Twitter developer site.

Twitter is using AMP to present news articles faster and more reliably, to better keep people informed of what matters to them, with an improved reading experience. We’re excited to see how publishers continue to embrace the technology, now equipped to understand the impact of Twitter on news audiences.

Posted by Ben Ward, Product Manager for AMP & Publisher Platform, Twitter

Twitter uses AMP to improve reading experience, enables publishers to understand their audience

The Total Economic Impact™ of AMP across publishers and e-commerce

Speed equals revenue on the web, especially mobile. In fact, studies have shown even 100ms delays in page load time correlate with lower conversion rates. To better understand the impact AMP can provide for mobile sites on speed and revenue, Google commissioned Forrester Consulting, a leading global research and advisory firm, to conduct a Total Economic Impact™ study across publishers and e-commerce websites using AMP.

To conduct the analysis, Forrester interviewed 4 web companies who have been utilizing the AMP format. Based on the results observed by the sites interviewed, Forrester created a model to project the expected return from implementing AMP over a three year period. Using the model, a website with 4 million site visits monthly and a 10% profit margin would expect to win back the costs of implementing AMP and begin to see positive gains in less than 6 months.

summary graph

Some of the topline results from the study:

  • 20% increase in sales conversion rate. A/B testing conducted by the two e-commerce websites interviewed for this study demonstrated a 20% increase in the conversion rate on their AMP pages, which would drive over $200K in annual profit, based on the Forrester model.
  • 10% year-over-year increase in AMP site traffic. An increase in site traffic results in additional sales and ad views, which would drive over $75K in annual profit for a site in the first year, based on the model.
  • 60% increase in pages per visit. AMP pages performed positively for e-commerce and news publishers who both said that there was a 60% increase in people coming to the site and those people spent twice as long on the site with a small increase in return visitors of 0.3%.

AMP is still a relatively new format, and while there are costs associated with adopting it, the pay-off greatly outweighs that initial outlay. Specifically Forrester’s model found that a site with 4M visitors monthly implementing AMP could expect benefits of $1,005,447 over three years, against a total investment of $210,827, yielding a 377% ROI.

summary table

You can read the full study here, detailing the outcomes for both content and e-commerce websites. Enabling the creation of profitable, user-friendly websites for publishers and merchants is a core objective of the AMP Project. We are excited to see these results demonstrating the business viability of creating great user experiences on the web with the open-source AMP format.

Posted by Lisa Wang, Product Manager, AMP Project

The Total Economic Impact™ of AMP across publishers and e-commerce

An AMP Paywall and Subscription Model for All Publishers

The following was posted on LaterPay’s Blog by Cosmin Ene, CEO, LaterPay.

A majority of mobile users will not wait longer than 3 seconds for a page to load before moving on, creating a marked decline in revenue for sites that load slowly. It’s this desire for speed and convenience on both the user and publisher’s part that spurred Google and others to spearhead the creation of the AMP Project (Accelerated Mobile Pages), an open source project designed to improve the mobile browsing experience by generating static content pages that render at lightning speed.

Publishers – aware of user’s shift to mobile, their desire for rapid access to content, and the fact that Google accounts for as much as 40 percent of referral traffic – have widely jumped on board and adopted the project’s code to develop AMP pages.

Monetizing AMP

As the open platform has evolved through integration with third party services – growing from 2 vendors at launch to 120 today – so too have monetization strategies for AMP. Adding paywall and subscription support has always been a top priority within the AMP community. However, no out-of-box solution existed for publishers lacking the resources to adapt their in-house paywall and subscription model to work in the AMP specification.

To empower quality journalism and support the efforts of publishers to monetize their content, LaterPay has leveraged AMP’s ability to integrate with third party services to develop a component that allows all publishers to easily include a paywall and subscription model, as well as a paygate which allows monetization of single purchases through LaterPay in their AMP monetization strategy. Called AMP Access LaterPay, the component integrates LaterPay directly into publisher’s AMP pages.

The Need for Speed

LaterPay is the industry’s first on-platform payment infrastructure designed to increase user conversion rates by offering immediate, frictionless access to paid content or services. The patented model offers the speed and convenience vital to content monetization. A slow, cumbersome registration and payment process instead of getting the desired content right away is likely to discourage users and adversely impact revenue.

A typical registration and payment process can take upward of 3 minutes to complete. LaterPay’s model reduces this important first purchasing decision to less than 10 seconds for 78% of users. This is achieved by removing the upfront registration and payment process – which derails over 98% of all payments – so content providers can start monetizing their assets immediately. LaterPay’s integration with AMP further streamlines the process to 3 seconds on average.

When browsing paid content, users are prompted with a number of purchasing options – as shown below – predetermined by the publisher. For instance, publishers can prompt users to purchase a specific article, a time pass, or a full subscription.

LaterPay – daily/weekly subscription mask

Alternatively, publishers can customize their offering and forgo certain options such as time passes.


LaterPay article subscription mask

Users make their selection quickly and begin to accumulate a running tab based on the content they consume. Purchased content is aggregated and consumers are only prompted to register and pay once they hit the threshold of $5 or €5. LaterPay streamlines the registration process as well by enabling users to sign up using their Facebook or Google+ login information, rather than creating a new account.

By deferring registration and payment until users reach the threshold, LaterPay has been show to increase the user’s propensity to pay (with currently 75.5% registering and paying once reaching the threshold.) Further, by providing content providers with multiple options for monetization, publishers can more effectively convert users and take advantage of the vast space between ads and subscriptions.

AMP Integration

If you are new to AMP, get started with understanding what AMP is, and with building your first AMP page.

If you have already built your website using AMP:

  1. Get a LaterPay account.
  2. Follow the documentation on the AMP Access LaterPay page for integrating the component into your pages.
  3. Follow the Connector documentation on how to configure Connector (be aware that the same kind of in page configuration via meta tags as in Connector is not supported)

About LaterPay

LaterPay is a SaaS payment infrastructure specifically created to enable “on platform” monetization. The patented solution provides a frictionless way to convert users into paying customers without upfront registration or payment. With LaterPay, customers are able to generate incremental revenues that complement subscription and ad models. By deferring registration and payment until users reach a $5* threshold, and by aggregating purchases across websites and devices, LaterPay increases the user’s propensity to pay and reaches unprecedented conversion rates. LaterPay offers a variety of optional revenue models including Time Passes and Subscriptions. Please visit to learn more.

The above was posted on LaterPay’s Blog by Cosmin Ene, CEO, LaterPay.

An AMP Paywall and Subscription Model for All Publishers