Accelerated Mobile Pages (AMP pages)

Last Updated : 19 Mar, 2024

As we are seeing the demand for mobile phones is very large as compared to desktops or laptops. According to some sources, India has over 1.2 billion mobile phone users that’s why good organizations start focusing on mobile phones first.

So a question comes to mind how we can increase performance and user experience on mobiles? Let’s discuss about the Accelerated Mobile Pages (AMP) approach with some examples.

Table of Content

What is Accelerated Mobile Pages?
History of AMP pages
How AMP is improving performance?
How AMP Works?
AMP HTML
AMP JavaScript
AMP Cache
Difference
Difference between the codes

What is Accelerated Mobile Pages?

AMP(Accelerated Mobile Page) is an open-source HTML framework which is launched by Google in 2016. It helps to create fast-loading mobile-optimized web pages.

The AMP Project aims to “build the future web together”. It allows you to create fast, beautiful loading ads and web pages across different platforms.

History of AMP pages

In October, 2015 Google, along with other major technology companies like Twitter, LinkedIn, and Pinterest, announced the AMP project. The initiative aimed to improve the performance of mobile web pages by providing a framework that enables the creation of lightweight and fast-loading pages.

It is launched to compete with Facebook Instant Article and Apple News. But at that time, AMP became a new markdown language compared to HTML. However, due to its restrictions, it was hard to add ADS to them which caused a decrease in the revenue of Google. So, Google integrated AMP into its search results across all platforms, not just mobile. This further emphasized the importance of AMP in terms of search engine optimization and mobile user experience.

How AMP is improving performance?

AMP improves performance by employing a streamlined version of HTML, CSS, and asynchronous loading of JavaScript. The simplified code structure reduces unnecessary elements and prioritizes essential content, leading to faster page load times. Additionally, AMP utilizes a content delivery network (CDN) to cache and pre-render pages, further enhancing speed.

AMP also enforces certain performance best practices, such as lazy loading of images and efficient resource handling. By focusing on these optimizations, AMP significantly improves the loading speed and overall performance of web pages, particularly on mobile devices, providing users with a faster and smoother browsing experience.

When you search on Google using mobile phones. You most probably landed on the AMP page URL.

How AMP Works?

As we all know, a normal web page is built on three pillars

HTML
CSS
JavaScript

So, AMP needs to optimize these three things only. So it launches —

AMP Html
AMP Cache
AMP JS

AMP HTML

AMP HTML is just a normal HTML file along with certain restrictions. Most of the tags used in normal HTML files will remain the same in AMP HTML.

Example: <div> </div> , <p> </p> etc.

But some HTML tags are converted to amp tags.

Example: <html amp> </html>, <amp-selector> </amp-selector>, <style amp-custom></style>, etc.

AMP JavaScript

AMP JS library is mostly responsible for the fast loading of AMP pages. It implements all the best practices like inline CSS, font triggering, and custom HTML components. It does not allow you to load third-party JavaScript. It loads everything asynchronously so that nothing can increase speed. It provides lightweight frameworks and components to quickly build webpages without writing JS.

AMP Cache

AMP pages are served using Google AMP cache. It is a proxy-based content delivery network. It lets your site load multiple parts from different servers at once. It allows users to load your site from the nearest server. To maintain maximum efficiency it uses HTTP 2.0 to load documents, all images, and JS files from the same origin.

All three work as a union to load the page quickly and provide the best user experience. Google AMP has its validating tool which gives access to test the AMP page while development. If a webpage passes the AMP test then only it is considered by Google in ranking above in search results.

Difference

AMP Webpage

AMP webpage

HTML Webpage

Normal HTML Page

Difference at Code Level

AMP Webpage code structure

HTML

<!doctype html>

<!-- This tells the browser that this 
    is an AMP file. `<html >` works too. -->
<html amp>
<head>
      <!-- The charset definition must be the 
        first child of the `<head>` tag. -->
    <meta charset="utf-8">
  
    <script async 
            src="https://cdn.ampproject.org/v0.js">
    </script>
    
    <!-- AMP HTML files require a canonical link pointing 
        to the regular HTML. If no HTML version exists, 
        it should point to itself -->
    <link rel="canonical" href=
"https://amp.dev/documentation/examples/introduction/hello_world/index.html">

    <!-- AMP HTML files require a viewport declaration. 
        It's recommended to include initial-scale=1 -->
    <meta name="viewport" 
          content="width=device-width,minimum-scale=1,initial-scale=1">
    
    <style amp-custom>
        h1, h2 {
            color: forestgreen;
        }
    </style>

    <style amp-boilerplate>
        body {
            -webkit-animation: -amp-start 8s 
                steps(1, end) 0s 1 normal both;
        }
        @keyframes -amp-start {
            from {
                visibility: hidden
            }

            to {
                visibility: visible
            }
        }
    </style>

    <noscript>
        <style amp-boilerplate>
            body {
                animation: none
            }
        </style>
    </noscript>
</head>

<body>
    <h1> Hello World !! </h1>
    <h2> 
          This is GeeksForGeeks. Follow us for more content. 
      </h2>
</body>

</html>

HTML Webpage code structure