Accel­er­at­ed Mobile Pages (AMP) is a Google-sup­port­ed project that helps pub­lish­ers bring their news on Google as fast as pos­si­ble. The main goal is to improve the mobile expe­ri­ence of users and make sure pages load quick­ly on mobile devices.

About the AMP project

In Feb­ru­ary 2016, Google intro­duced inte­grat­ed AMP list­ings into mobile search results. The pages that are tak­ing advan­tage of AMP code appear in spe­cial places in Google list­ings or have an AMP des­ig­na­tion next to them. This should divert users’ atten­tion to exact­ly the kind of mobile pages Google wants them to vis­it. In addi­tion, the aim is to moti­vate every­one who is not yet using the AMP cod­ing to join the future.

The pri­ma­ry goal for this project is to increase the speed of the Inter­net for all mobile users. Web­sites that are slow are not only a prob­lem for impa­tient surfers but also neg­a­tive­ly affect con­ver­sion rates. The opti­mistic idea behind AMP is to have pages that load instant­ly every­where. The dif­fer­ence between a load­ing time of 3 and 6 sec­onds can mean the world in online busi­ness, espe­cial­ly when it comes to conversions.

Worth men­tion­ing is the fact that many pub­lish­ers such as BBC, The Econ­o­mist, Finan­cial Times, among oth­ers, have already embraced the con­cept of AMP and are firm­ly rep­re­sent­ed amongst Google’s mobile AMP results.

What are Accelerated Mobile Pages

AMP are super-light­weight pages designed to load very quick­ly, almost instant­ly on mobile devices.

Accel­er­at­ed mobile pages con­sist of 3 parts:

• AMP HTML — a light­weight ver­sion of HTML.
• AMP JS — JavaScript library cre­at­ed for fast ren­der­ing of AMP HTML; uses best per­for­mance prac­tices such as sand­box­ing of all iframes, pre-cal­cu­lat­ing all ele­ments on the page before resources are loaded, and dis­abling slow CSS selectors.
• Google AMP cache — a proxy-based Con­tent Deliv­ery Net­work that can be used to serve AMP pages. The CDN fetch­es AMP pages, caches them and improves their performance.

How AMP Works

AMP com­bines mul­ti­ple opti­miza­tion meth­ods to be able to load pages quickly:

• allows only asyn­chro­nous scripts to keep JS from delay­ing the page rendering
• exter­nal resources state their size in HTML, so the lay­out is loaded with­out wait­ing for the resources
• does­n’t let exten­sion mech­a­nism block rendering
• allows third-par­ty JavaScript only in sand­boxed iframes to keep them out of the crit­i­cal path
• allows only inline CSS; the max­i­mum size of an inline sheet is 50 KB
• No HTTP requests can block the brows­er from down­load­ing fonts
• min­i­mizes all style recal­cu­la­tions; all DOM reads hap­pen first
• runs only GPU-accel­er­at­ed animations
• pri­or­i­tizes resource load­ing; prefetch­es lazy-loaded resources and loads only what’s needed

Supported browsers

AMP sup­ports the two lat­est ver­sions of major browsers for desk­top, phone, tablet and the web view in:

• Chrome
• Fire­fox
• Safari
• Opera
• Edge

AMP also accepts fix­es for all browsers with the mar­ket share above 1%.

How to create AMP pages

If you oper­ate a Word­Press web­site, and would like to have AMP ver­sions of the pages next to your nor­mal ver­sion of the web­site that is pre­sent­ed for desk­top searchers, there are sev­er­al Word­Press plu­g­ins that can do all the heavy lift­ing for you. Unfor­tu­nate­ly, none of the exist­ing plu­g­ins work with page builders. You may choose to use the plu­g­in only for posts and cre­ate a sim­pler, AMP ver­sion of all impor­tant pages, using AMP HTML markup.

It is pos­si­ble to have two ver­sions of the page, one AMP, and one non-AMP. If you have two ver­sions, make sure you link to both of them, so that search engines can eas­i­ly nav­i­gate your web­site, and present the prop­er ver­sion to mobile visitors.

You can find more details and excel­lent instruc­tions on how to cre­ate AMP pages, how to stage it and val­i­date, on ampproject.org.