What is AMP?
Accelerated Mobile Pages (AMP) is an open source technology that provides a framework for building minimal, fast and efficient web pages, with a specific focus on mobile user experience.
Why is AMP even a thing?
With the advent of responsive interface design many years ago, mobile support across the web has become almost standard. More often than not however, even though the interface of a particular website may adapt to fit into the screen limitations of a mobile device, the user experience is still poor. This is commonly due to one of these factors:
-
Poorly optimised web pages, images, JS libraries and CSS resulting in a large amount of data needing to be downloaded before the page can render. Unless you are on 4G or wifi, this can make a site completely unusable on a mobile device
-
Elements being gradually being rendered over a period of a few seconds, resulting in page content jumping around (how often have you loaded a mobile site and started reading an article, only for the copy to jump around in front of your eyes as the ads load)
-
Over complicated JS and CSS, with dependence on a number of libraries, requiring a large amount of computational power in order to render and use the page. This can cause a significant slow down in page performance on older or lower end mobile devices.
AMP was designed a solution to all of these issues. The idea is that, if you build your mobile site using the AMP framework, then you can be confident that mobile users will be able to access your content quickly and efficiently, allowing you to reap all of the benefits that come with this (increased traffic, conversions, more ad revenue etc etc).
[Image courtesy of AMP]
How Does AMP Work?
It consists of 3 core components that, when used together, provide some astonishing performance benefits:
-
AMP HTML is a tailored version of standard HTML, that restricts the use of performance heavy tags. It also swaps out some common HTML tags with AMP equivalents, for example the <img/> tag is swapped out with a faster and more efficient <img-amp></img-amp> tag. The same is true for videos and audio.
-
AMP JS is a javascript library designed to speed up the rendering of AMP HTML pages. This is the only javascript library that you are allowed to include with AMP, ensuring minimal bloat.
-
AMP Cache is caching system designed to provide further performance benefits. Hosted with Google, this Google AMP Cache is a content delivery network specifically designed to serve AMP pages.
In Summary
AMP brings its performance benefits by effectively restricting what tags you can use on a web page, what styles you can use in your CSS, and preventing you from writing any custom Javascript.
Whilst this may seem like a bad thing, I would argue that much of the time we rely too much on sophisticated JS libraries and CSS. These libraries make moving an element around on the screen or controlling the click event of a button very simple, however they also bring bloat and encourage lazy development practices.
All too often I have seen three of four independent JS libraries included within a web page just to introduce some basic form validation or animate a single element. If the developer had just spent another 15 minutes actually exploring a more efficient solution they would have ended up with a much better, faster result, with relying on the crutch of a third party library.
AMP will not work for every website, however I think if you start to consider it as on option you will be surprised how many websites it will work for, bringing a slew of user experience benefits along the way.
More Info
You can find out more information on AMP at the following links:
-
Main website - https://www.ampproject.org/
-
Create your first AMP page tutorial - https://www.ampproject.org/docs/tutorials/create
