Accelerated Mobile Pages / AMP
Accelerated Mobile Pages (AMP) is a Google-supported project that helps publishers bring their news on Google as fast as possible. The main goal is to improve the mobile experience of users and make sure pages load quickly on mobile devices.
About the AMP project
In February 2016, Google introduced integrated AMP listings into mobile search results. The pages that are taking advantage of AMP code appear in special places in Google listings or have an AMP designation next to them. This should divert users’ attention to exactly the kind of mobile pages Google wants them to visit. In addition, the aim is to motivate everyone who is not yet using the AMP coding to join the future.
The primary goal for this project is to increase the speed of the Internet for all mobile users. Websites that are slow are not only a problem for impatient surfers but also negatively affect conversion rates. The optimistic idea behind AMP is to have pages that load instantly everywhere. The difference between a loading time of 3 and 6 seconds can mean the world in online business, especially when it comes to conversions.
Worth mentioning is the fact that many publishers such as BBC, The Economist, Financial Times, among others, have already embraced the concept of AMP and are firmly represented amongst Google’s mobile AMP results.
What are Accelerated Mobile Pages
AMP are super-lightweight pages designed to load very quickly, almost instantly on mobile devices.
Accelerated mobile pages consist of 3 parts:
- AMP HTML – a lightweight version of HTML.
- AMP JS – JavaScript library created for fast rendering of AMP HTML; uses best performance practices such as sandboxing of all iframes, pre-calculating all elements on the page before resources are loaded, and disabling slow CSS selectors.
- Google AMP cache – a proxy-based Content Delivery Network that can be used to serve AMP pages. The CDN fetches AMP pages, caches them and improves their performance.
How AMP Works
AMP combines multiple optimization methods to be able to load pages quickly:
- allows only asynchronous scripts to keep JS from delaying the page rendering
- external resources state their size in HTML, so the layout is loaded without waiting for the resources
- doesn’t let extension mechanism block rendering
- allows third-party JavaScript only in sandboxed iframes to keep them out of the critical path
- allows only inline CSS; the maximum size of an inline sheet is 50 KB
- No HTTP requests can block the browser from downloading fonts
- minimizes all style recalculations; all DOM reads happen first
- runs only GPU-accelerated animations
- prioritizes resource loading; prefetches lazy-loaded resources and loads only what’s needed
Supported browsers
AMP supports the two latest versions of major browsers for desktop, phone, tablet and the web view in:
- Chrome
- Firefox
- Safari
- Opera
- Edge
AMP also accepts fixes for all browsers with the market share above 1%.
How to create AMP pages
If you operate a WordPress website, and would like to have AMP versions of the pages next to your normal version of the website that is presented for desktop searchers, there are several WordPress plugins that can do all the heavy lifting for you. Unfortunately, none of the existing plugins work with page builders. You may choose to use the plugin only for posts and create a simpler, AMP version of all important pages, using AMP HTML markup.
It is possible to have two versions of the page, one AMP, and one non-AMP. If you have two versions, make sure you link to both of them, so that search engines can easily navigate your website, and present the proper version to mobile visitors.
You can find more details and excellent instructions on how to create AMP pages, how to stage it and validate, on ampproject.org.
