What is AMP (Accelerated Mobile Pages) Web Development?

The benefits of AMP and how it differs from Responsive Web Design

Man using a smartphone
Mobile visitors to a website have specific needs and expecations.

If you look at the past few years of analytics traffic for websites, you will likely find that they all share one major thing in common – a rise in the number of visitors they are getting from users on mobile devices.

Globally, there is now more web traffic coming from mobile devices than from what we would consider “traditional devices”, which basically means desktop or laptop computers. There is no doubt that mobile computing has changed the way people consume online content, which means it has changed the way that we must build websites for those increasingly mobile-centric audiences.

Building for a Mobile Audience

Creating “mobile friendly websites” has been a priority for web professionals for many years. Practices like responsive web design aimed to help create sites that worked well for all devices, and a focus on website performance and fast download times benefits all users, mobile or otherwise.  Another approach to mobile friendly sites is known as AMP web development, which stands for Accelerated Mobile Pages.

This project, which is backed by Google, was created as an open standard meant to allow website publishers to create sites that load more quickly on mobile devices. If you’re thinking that that sounds a lot like responsive web design, you’re not wrong. The two concepts share a lot in common, namely that they are both focused on delivering content to users on mobile devices. There are a number of differences between these two approaches, however.

Key Differences Between AMP and Responsive Web Design

One of the strengths of responsive web design has always been the flexibility that it adds to a site.

You can create one page that automatically responds to a visitor’s screen size. This gives your page reach and the ability to serve a good experience to a wide range of devices and screen sizes, from mobile phones to tablets to laptops, desktops, and beyond. Responsive web design is focused on all devices and user experiences, not just mobile.

That is both good in some ways and bad in others.

Flexibility in a site is great, but if you really want to focus on mobile, creating a site that focuses on all screens, instead of solely on mobile ones, can be trading flexibility for purely optimized mobile performance. That is the theory behind AMP. 

AMP is purely focused on speed – namely mobile speed. According to Malte Ubl, Google Tech Lead for this project, AMP aims to bring “instant rendering to web content.” Some of the ways this is done include:

  • Lazy loading
  • Using preconnect
  • Prefetching resources
  • Async Javascript
  • Inline style sheets
  • No downloadable fonts
  • Resource prioritization

These are just some of the principals that make AMP load so quickly. There are also, however, some items in that list that may make long-time web professionals cringe. Inline style sheets, for example. Many of us have been told for years that all styles should be contained in external style sheets. Being able to style lots of site pages all from one external sheet is one of the strengths of CSS- a strength that is negated if pages use inline styles instead. Yes, you prevent the need to download the external file, but at the cost of being able to manage that entire site with the single style sheet.

So which approach is better? The reality is that they both have their benefits and drawbacks. The Web is constantly changing and different people who visit your site have different needs. It’s very difficult to establish rules that will apply in all cases, because different approaches make sense in different situations. The key is to weigh the benefits or drawbacks of each approach to determine which is best in your particular case.

Another key difference between AMP and RWD is the fact that responsive design is rarely “added on” to an existing site. Because RWD is really a ground-up rethinking of a site’s architecture and experience, it will generally require that site to be redesigned and redeveloped to accommodate the responsive styles. AMP can be added onto an existing site, however. In fact, it can even be added onto an existing responsive site.

Javascript Considerations

Unlike sites with RWD, AMP sites do not play well with Javascript. This includes 3rd party scripts and libraries that are very popular on sites today. Those libraries can add incredible functionality to a site, but they also impact performance. As such, it stands to reason that an approach keenly focused on page speed would eschew Javascript files. It is for this reason that AMP is often best used on static webpages as opposed to highly dynamic ones or those which require specific Javascript effects for one reason or another. For example, a website gallery that makes use of a “lightbox” style experience is not going to be a great candidate for AMP.  On the other hand, a standard website article or press release which does not require any fancy functionality would be a great page to deliver with AMP. That page is likely to be read by people using mobile devices who may have seen the link on social media or via a mobile Google search. Being able to instantly deliver that content when they request it, instead of slowing download speed while unnecessary Javascript and other resources are loaded, makes for a great customer experience.

Choosing the Right Solution

So which option is right for you – AMP or RWD?  It depends on your specific needs, of course, but you don't need to choose one or the other. If we want to have smarter (and more successful) online strategies it means that we need to consider all the tools at our disposal and learn how they will work together.

Maybe this means delivering your site responsively, but using AMP on select sections or pages which may be most suited to that style of development. It could also mean taking aspects of different approaches and combining them to create hybrid solutions that meet very specific needs and which delivers the best of both worlds to that site’s visitors. 

Format
mla apa chicago
Your Citation
Girard, Jeremy. "What is AMP (Accelerated Mobile Pages) Web Development?" ThoughtCo, Jun. 8, 2017, thoughtco.com/amp-definition-4138123. Girard, Jeremy. (2017, June 8). What is AMP (Accelerated Mobile Pages) Web Development? Retrieved from https://www.thoughtco.com/amp-definition-4138123 Girard, Jeremy. "What is AMP (Accelerated Mobile Pages) Web Development?" ThoughtCo. https://www.thoughtco.com/amp-definition-4138123 (accessed November 19, 2017).