Accelerated Mobile Pages (AMP) are fast—because their job is speed. This post is an overview of AMP, and why it matters.
AMP is one of Google’s open source frameworks aimed at revolutionizing the web experience by speeding up webpage load time—making it almost instant. After only two years in existence, it has quickly shifted the way content (including blogs, ads, etc.) is delivered. If you use Google search, you probably have encountered AMP, maybe without knowing it. The Top stories section on Google search is now delivered through an AMP component known as AMP carousel. As you can see in the image below, AMP articles have a logo underneath.
Well, how fast can it get?
The Internet is still a luxury in many parts of the world. Even in well-connected regions, internet speed is not always guaranteed to be fast. Thus, optimization of web pages for faster content delivery is necessary. This is exactly what AMP does. To understand how AMP achieves this, let’s look at its major components.
AMP HTML: This is normal HTML, but with a few additions as well as subtractions. Normal HTML tags such as <img>, <iframe>, and <video> are not permitted. AMP introduced its own tags such as amp-img and amp-ad. By so doing, AMP is able to precisely determine page layout before everything finishes loading. You are, therefore, unlikely to see images pushing other components out of the way when they are loading.
AMP JS: It may come as a surprise that AMP doesn’t allow external JavaScript. It provides its own interactivity components, which enable fast rendering of pages. This might seem limiting, but that is not entirely the case. JavaScript can be notorious for slowing down page load time, so it makes sense to limit its use in AMP.
AMP Cache: To ensure maximum efficiency and consistency, AMP pages are cached. In the process, AMP pages are guaranteed to be validated. As a result, one is assured a functional webpage when requested. Another perk is having images optimized to reduce the size of pages without sacrificing quality.
Give it a try
As an open source project, AMP is constantly evolving, as more and more people are working to make the web experience more pleasant. Therefore, you are sure of adequate support. A good place to start is AMP’s website, which has everything you need to start building your first AMP website. the GitHub page is also rife with resources. Check out the YouTube channel for some videos, too.
If you want an AMP version of an existing webpage, you can try Postlight’s Mercury AMP converter. With only one line of code, you get AMP for free.
By appending a URL to the following incomplete URL, you get an AMP version of the website: https://mercury.postlight.com/amp?url=
Note: A few websites will not yield the desired results. However, I included the above in case you want to quickly experience AMP and its benefits.
Compare the regular (top) and AMP version (bottom) of the same site below on a 2G network.
Conclusion
AMP has delivered on its promise of making webpages faster. It will only get better with help from the dedicated open source community. Its support for ads (without ruining the user experience) has driven its adoption rate up. Whether you want to improve your retention rate or provide a more remarkable web experience, AMP is definitely the option to consider.
