AMP Framework: No Longer Just for Mobile, but the Web at Large

AMP is a powerful framework for mobile, desktop and tablet, and for stories, ads and email. It’s a framework – purpose-built for the entire web ecosystem.

AMP officially launched in early 2016 as Accelerated Mobile Pages, a Google-led open source project. It was initially focused on the publishing industry, and at its launch AMP was touted in the media as Google’s open source answer to Facebook’s Instant Articles and Apple News.

Since its launch, AMP has continued to evolve and mature. The name for the project has officially changed from Accelerated Mobile Pages to simply AMP, in part representing how the project has grown beyond a tool to increase the performance of the mobile web and become a framework to build for the entire internet across desktop, tablets and mobile.

In May 2019, the AMP project published a post explaining the concept of AMP as a framework and how the project has moved beyond its Accelerated Mobile Pages beginnings:

  • Accelerated – AMP is not simply accelerated. The includes UX advantages such as disallowing interstitials and enforcing a free main thread for smooth interactions.
  • Mobile – Its responsive design features work across many device types from desktop to mobile screens.
  • Pages – AMP has evolved beyond pages to also build ads, emails and stories.

Simply put, AMP is no longer focused on publishers and mobile. It’s now for desktop, marketers, e-commerce and even email as a best-in-class HTML framework. Because of this, there are great reasons for developers to take an AMP-first  approach by creating canonical AMPs so those pages benefit from performance and UX optimizations across desktop, mobile and beyond.

AMP as a framework has come about at the perfect time in the evolution of web development. It has become a mature and robust platform – similar to Angular, Vue or React – to build on for the entire web ecosystem while solving the slow mobile experience challenge.  Its built-in advantages are available to developers at a time when performance and speed are keys to success on the internet.

The web wasn’t built for today’s mobile world and its small touch screens, battery powered CPUs and intermittent network connections. And Responsive Web Design (RWD) as a mobile-web solution has passed its shelf life. Businesses face the challenge of consumers shifting from desktop to mobile, a transition that happened more quickly than many brands expected. The result is legacy responsive websites that are just too slow on mobile and don’t match consumer expectations.

Building for a mobile-first world can be a challenge, but AMP solves for speed in a number of ways:

  • AMP circumvents the slow server issue by using a cache – or CDN – for distribution.
  • Because AMPs are pre-fetched by Google, network traffic happens in the background before users click, allowing pages to load instantly even for slow or intermittent mobile connections. Google automatically provides prefetching on the Search Engine Response Pages (SERPs), and a PWA can provide the feature on any website.
  • While a single JavaScript or CSS file can block the critical rendering path, turning a website into a blank screen while files are downloaded, AMP’s built-in validator ensures nothing blocks the critical rendering path.
  • AMP sets guardrails of a maximum of 50 kilobytes of CSS to avoid large stylesheets that cause slow loading websites.
  • Optimizing images for mobile is challenging due to different screen sizes and pixel densities, and varying support for next-generation image formats. AMP automates image resizing, lazy-loading, place holding and distributing the correct, next-generation formats – all served from the AMP cache.
  • Third-party software scripts handling personalization, analytics or customization can bring a website to a crawl. AMP uses the world’s largest components library – with built-in features – to run or replicate third-party scripts, while guaranteeing speed.
Old Way New Way
Slow Servers Serve from cache to combat slow servers
Slow Mobile Connections AMPs are prefetched to create instant load
Blocked Critical Rendering Path Built-in validator ensures nothing blocks critical rendering path
Append-Only Style Sheets AMP sets guardrails, including a CSS budget, to ensure long-term performance
Slow Images AMP automatically re-sizes and configures images to the correct, next-generation formats
Third-Party Scripts AMP has built-in components to create fully features pages that guarantee speed

While bells and whistles are great, speed is paramount in today’s internet. AMP is built on ensuring performance and taking an AMP-first approach is ideal for businesses hyper focused on speed and delivering the best possible user experience. The project may have begun with a focus on publishers, but it has evolved far beyond its early aims. AMP is still a solid SEO play, but it has become a development framework for the entire internet.

Notable brands, including, Samsung and BMW, have already discovered the value of adopting AMP as a framework, and as an open-source project, AMP continues to improve with additions, such as signed exchanges and the use of custom JavaScript.

AMP as a framework – it’s more than accelerated, way bigger than just mobile, and serves as a development foundation for webpages and beyond.