Why AMP Makes Mobile Pages Load 4× Faster – Core Concepts Explained

What is AMP?

AMP (Accelerated Mobile Pages) is an open‑source initiative hosted on GitHub that provides a set of specifications and libraries to make mobile web pages load up to four times faster.

Three Core Components of AMP

1. AMP HTML

AMP HTML extends standard HTML with custom

<amp-img>

and other AMP‑specific tags and attributes that enforce performance best practices.

2. AMP JS

The AMP JavaScript library manages resource loading, implements the custom tags, and applies optimisations such as iframe sandboxing, pre‑calculating layouts and disabling slow CSS selectors. Third‑party scripts are prohibited.

3. AMP Cache

AMP Cache is a proxy‑based CDN that fetches, caches and rewrites all resources of an AMP page, providing both real‑time and offline processing of assets.

Why AMP Is Fast

By using the three components, AMP automatically applies common performance techniques: pre‑computed layout, lazy loading of images via

<amp-img>

, restriction of synchronous scripts, and delivery through the AMP Cache, which shares host connections and enables Google search pre‑loading.

Domestic Equivalent – MIP

In China, Baidu’s Mobile Instant Pages (MIP) implements the same concepts as AMP and can recognise AMP pages.

Hands‑On AMP Demo

The following minimal AMP page displays a list of 24 course cards, each with an

<amp-img>

element, a title and a price.

<code>&lt;!doctype html&gt;
&lt;html amp&gt;
  &lt;head&gt;
    &lt;meta charset="utf-8"&gt;
    &lt;title&gt;Hello, AMPs&lt;/title&gt;
    &lt;link rel="canonical" href="http://m.ke.qq.com/index.html"&gt;
    &lt;meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1"&gt;
    &lt;style amp-boilerplate&gt;...&lt;/style&gt;
    &lt;script async src="https://cdn.ampproject.org/v0.js"&gt;&lt;/script&gt;
    &lt;style amp-custom&gt;
      .clist {padding:0;font-size:0;}
      .clist__item {display:inline-block;width:50%;vertical-align:top;}
      .clist__name {font-size:18px;}
      .clist__price {font-size:14px;}
    &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;ul class="clist"&gt;
      &lt;li class="clist__item"&gt;
        &lt;amp-img src="//10.url.cn/qqcourse_logo_ng/..." height="124" width="220" layout="responsive"&gt;&lt;/amp-img&gt;
        &lt;h2 class="clist__name"&gt;0基础入门-中日教情景语法课【和风日语网校】&lt;/h2&gt;
        &lt;p class="clist__price"&gt;¥388.00&lt;/p&gt;
      &lt;/li&gt;
      &lt;!-- more items omitted --&gt;
    &lt;/ul&gt;
  &lt;/body&gt;
&lt;/html&gt;
</code>

When opened in Chrome with

#development=1

, the AMP validator confirms the page complies with AMP rules, and the Network panel shows progressive lazy loading of images.

Conclusion

AMP delivers noticeable speed gains for static mobile pages, especially when combined with the AMP Cache, but it restricts third‑party scripts and rewrites URLs, making it best suited for landing pages, product showcases, and ads.