Speed/Performance is one the most important factor for the User Experience. A System needs to be highly optimised, so that user can use the product with maximum possible ease and minimum effort in a very less span of time.

Tech Crunch says around 80% of the users who uses internet owns a smartphone. The previous days, Google officially announced Mobile Optimisation will be a resulting factor to the priority of Search Results.

That’s why it has become more important to optimise the mobile first and deliver a faster performance across the mobile devices.

There are several factors which directly impacts the Speed/Performance of the Web App or Page —

• HTTP Requests — The number of requests a Web App/Page makes to the server to paint the DOM.
• First Byte Time— It is the responsiveness of the Server, as how fast it can respond with the first byte to the HTTP/Client request.
• Compress Transfer — The files are compressed into small size for a faster network transfer using file formats like gZip.
• Image Optimisation — Optimising and Compressing images to the optimum compression size level.
• Minification — Delivering Javascript/CSS Files in a minified version, which don’t have useless spaces in between and are comparatively lighter in the weight or size.
• Others — There are many other factors as well like —Avoiding Page Redirects, Setting HTTP Headers, Serving Dynamically as per User Agentand the list continues.

We can conclude that we have a long list of the factors which directly impacts the Speed/Performance of the System (Web Pages). We need to take care of all the factors for a lighting fast system for the end-users. It is where the AMP comes in as an Ultimate Saviour.

The Previous days Google has came up with an idea of optimising Web Pages for the Mobile in fact not only optimising, creating a dedicated optimised page for the mobile with specific mobile optimised standards — and it is called AMP(Accelerated Mobile Pages)

AMP renders the elements of the Web Page in the form of high speed static content which are comparatively lightweight in the size and are served to the users at lighting fast performance. An AMP page appears with ⚡ Lighting Sign on Mobile Devices at search results which tells the users, the page is actually accelerated mobile page.

 

An existing page can be converted into the AMP Page using the AMP Skeleton or a new dedicated AMP page can also be created for the respective page. AMP restricts over several HTML tags and doesn’t allow any external CSS/JS resources as well (as it tends to reduce the HTTP requests for faster performance) which makes it quite difficult for a Web Page. AMP boosts the performance with the help of following three important factors –

• Pre-Calculation — User Agent(Browser) already knows the size of Page Elements.
• Pre-Rendering— The content which is likely to be viewed by the user is loaded as a background process and is served when a user specifically asks for it. However, Images and content likes Ads are only fetched if they are likely to be seen by the mobile user.
• Asynchronous— Asynchronous approach keeps a check so that not a single element or resource can be a hinder to the Page Rendering.
• No External Resource— No External Files can be requested in an AMP Page as it may hinder the pre-rendering and calculation.

 

Skeleton of the AMP Page –

HTML

AMP HTML comes with Custom AMP Tags, most of the HTML Tags are whitelisted by AMP and can be used while creating AMP Variation of the page.

AMP JS

AMP JS is built on the top of best practices and meets all the standards required for faster and optimised system for the mobile devices. It focuses on the asynchronous concept and makes very sure no code or library can block the rendering of the page. AMP JS also makes sure the browser can calculate the space needed by each element even before it is loaded which is called Pre-calculation.

Google AMP Cache

Once an AMP page is crawled by the Google Bot it is fetched and cached at Google’s CDN(Content Delivery Network) and the next time when a mobile user requests for that page, the page is served from Google’s CDN along with all the resources from the same origin with a faster speed despite of the original source server.

Canonical and AMP Pages

Whenever a separated AMP Page is created, it’s highly recommended to define a canonical properly. What is Canonical or a Canonical URL?

Sometimes different URLs can point to the same page. For example — a Product page in an eCommerce Website can have several pointing URL’s.

A canonical url helps the search engine to understand, the set of urls which are pointing to specific destination are actually same.

Mobile is getting hotter these days, make an action today and either convert your existing pages into AMP Skeleton or create dedicated AMP pages for your respective pages to deliver a faster performance across mobile devices.