Accelerated Mobile Pages (AMP) The Next Revolution in Mobile Web Development

In old days, publishers were worried about their website speed in desktop only, but now they worry about their website speed in mobile and tablets.The reason being, now smartphones and tablets have become the king of browsing traffic. According to Google data, the share of mobile web browsing traffic expends to 52.3%.

Use of external js files and high-quality images make mobile speed slower. If the mobile browser pages are not loading quickly, it can discourage users and they can leave even before your content is completely loaded. So It is good to optimize your web pages for mobile users.

As mobile browsing is increasing day by day, Google provided a solution to the publishers for their mobile website problems by launching Project AMP, or Amp Mobile Pages. In short AMP Website was created so that publishers can load their amp web pages more quickly and fast in mobile devices.

WHAT IS AMP?

Accelerated Mobile Pages (AMP) is an open source project powered by Google which helps publishers and web developers to create mobile friendly and mobile optimized web pages which load instantly.

The main concept of Accelerated Mobile Pages (AMP) is to load readable text content in web page first and then load additional content like images, ads, scripts after the remainder of the page has rendered. Accelerated Mobile Pages (AMP Google) blocks external and unwanted JavaScript code to load web page near-instantaneously.  To Know More Advantages of Accelerated Mobile Pages

HOW AMP WORKS?

AMP HTML

AMP HTML Code is new markup language inherited from parent language HTML with many custom tags and properties like amp-i frame, amp-script, amp-images etc. if you are familiar with HTML then you are ready to go converting your web page into Google AMP pages with  AMP HTML. For more details of amp tags, you can check  AMP Project’s list.

AMP JS

It is a JavaScript framework for mobile web pages, An important function is to manage resource handling and asynchronous loading of page content. But you can not use third party java-script file or your own custom java-script code in AMP framework because it is not permitted.

AMP CDN

A Content Delivery Network caches your AMP  pages and automatically make some performance optimizations.

HOW ARE AMP PAGES LOADING SO FASTS?

• It executes all JS code asynchronously to avoid delaying page rendering. Amp blocks author-written java-script and provides its own java-script to handle page features. Third-party JS likes to use synchronous JS loading. Third party java-script is allowed in the i frame by restricting them to i frames, they can’t block the execution of the main page.

• In AMP, it is important to state the sizes of external resources such as images, ads or iframes in the HTML so that it can measure each resources size and position before resources are downloaded. AMP loads the layout of the page without waiting for any resources to download.

• In Google AMP  pages, only inline styles are allowed. By this, it removes multiple external CSS and style files HTTP requests from the rendering path compared to most web pages.

• AMP accelerated mobile pages controls all resource downloads: it prioritizes resource loading, loading only what’s needed, and use lazy-loading method to download resources. It optimizes downloads so that the currently most important resources are downloaded first. Images and ads are only downloaded if users are going to scroll the page.

• AMP Sites doesn’t let extension mechanisms block page rendering. AMP supports extensions like lightboxes, Instagram embeds, tweets, etc. While these require additional HTTP requests, but those requests do not block page layout and rendering.

• Web fonts are super large, so web font optimization is crucial to performance. The AMP system declares zero HTTP requests until fonts start downloading. This is only possible because all JS in AMP has the async attribute and only inline style sheets are allowed; there are no HTTP requests blocking the browser from downloading fonts.
• The new connect API is used to ensure HTTP requests are as fast as possible when they are made. With this, a page can be rendered before the user explicitly states they’d like to navigate to it; the page might already be available by the time the user actually selects it, leading to instant loading.
   

Also Read:

• How to Enable Ads on AMP Pages?
• AMP Development | A Complete Guide