AMP

AMP as a Service: 2020 Roadmap

Websites

This blog is part of a series that we are starting to share AMP’s roadmap with the wider web community.

We first unveiled our vision of AMP as a Service on a spring morning in Tokyo at AMP Conf 2019, our flagship conference. We talked about how engineering teams can accelerate their workflow by using AMP. So what has changed since the last time we talked about AMP as a Service? And what does the future look like for AMP? In today’s post we’d like to provide some further insight into our 2020 roadmap.

What is AMP as a Service?

AMP as a Service is our focus on making AMP the easiest way for developers to create high quality web experiences without being burdened by issues such as performance and infrastructure. AMP’s “evergreen” release schedule also means that these AMP experiences, once created, improve over time by becoming faster and more delightful without AMP users investing additional engineering resources. 

Last month, Google announced the Core Web Vitals program to shine a spotlight on a set of real-user performance and experience metrics that should be measured by all site owners. The AMP Project shared that a majority of AMP page loads already meet the thresholds set out in Core Web Vitals, which are a key component of a newly-announced Google Search page experience ranking signal. This means that AMP is really living up to its goal of being a well lit path to creating great user experiences.

Now, more so than ever, it is important that the AMP Project continues investing in AMP to put developers on the path to success to creating and maintaining great page experiences while simultaneously making developers more productive. We’re eager to do this work in 2020 and beyond.

Choosing AMP First to increase productivity

When choosing to create AMP pages developers can choose between serving paired AMP pages (creating AMP equivalents for their HTML pages) or having their canonical experience be powered by AMP. While paired AMP is a great way to get started creating AMP pages with the least amount of effort, development teams should think about how they want to set themselves to be productive in the long term while creating pages that perform well against Core Web Vitals.

Developers who leverage the AMP first approach will see their sites benefit from performance and UX optimizations across desktop, mobile and beyond. And this is why we encourage developers to use this opportunity to think about investing in AMP first. Here are a couple of strategies that could be followed: 

  • Using AMP for those subset of experiences that could benefit from AMP’s performance and user experience. 
  • Going fully AMP first for the entire site if AMP makes your team more productive and improves the user experience.

AMP Optimizer: web development best practices at scale 

Server-side optimizations for AMP pages are another area where we’re taking our lessons from AMP and are making them available to a wider audience. 

At the start of the AMP Project, AMP pages were mostly served from AMP caches and these performed additional optimizations enabling AMP’s strong user experience. However, over time more surfaces started linking to AMP pages and developers started using AMP for building their whole website. This has resulted in more AMP pages being served from origin, where there is room for improving AMP loading performance. To address this, we created AMP Optimizer, a tool to bring AMP Cache optimizations to experiences on the origin.

We use AMP Optimizer for the official AMP website amp.dev, and by doing so we achieve the same performance as when the page is served from an AMP cache. AMP Optimizer fits really well into our idea of AMP as a service. It enables us to automate web development best practices such as image optimization or ESM module support. Check out how to integrate AMP Optimizer in this guide!

AMP Optimizer ❤️ Frameworks and CMSes

Our goal is to make it easy to publish optimized AMP by seamlessly integrating AMP Optimizer into frameworks and CMSes.

The Next.js integration is a perfect example for what a great AMP development experience looks like. Next.js has a special AMP mode that results in the generated page being valid AMP. The cool thing is that you can start using AMP components straight out of the box and you don’t need to worry about the AMP boilerplate or importing AMP components. All this is automatically added by AMP Optimizer which is integrated into Next.js. 

Another example is the official AMP WordPress plugin, which publishes optimized AMP by default. This means if you use the official AMP WordPress plugin you get AMP cache like performance out of the box.

Conclusion

We’re just getting started. AMP Project contributors will continue working hard to ensure site owners get the strongest performance and user experience when creating AMP pages with minimal ongoing effort.

Posted by Naina Raisinghani, Product Manager, AMP Project and Sebastian Benz, Developer Advocate, Google