What is Google AMP Project?

Most of the time when we visit a website through our desktop or laptop the website loads instantly and everything looks fine to us but when we try to visit the same website through our mobile it takes a little longer to gets loaded in the browser, which sometimes can prove to be a frustrating experience for the user who is accessing a website through mobile phone.

Source: Google Images

In order to load the page instantly and to render the content fast, Google came up with AMP project in October 2015, AMP stands for Accelerated Mobile Pages. It is an open source initiative by Google that aims to drastically improve the performance of the mobile web. As we know that a web page can contain text, images or audio or videos, so following the same old concept can result in slow loading and rendering of contents on a browser that can result in losing your user base for your website, thus in order to load instantaneously, AMP came along.

How AMP works:

When we talk about the technical aspects of AMP Project, we need to focus on the three main parts of this project, these parts are AMP HTML, the AMP JS Library, and the Google AMP Cache.

• AMP HTML is basically an extended version of normal HTML comprised of custom AMP properties.Though most of the AMP HTML tags are same as the normal HTML tags that we use, but there are some HTML tags that needs to be modified a bit in order to make it AMP compliant like the normal <img> tag needs to be replaced with <amp-img> to make it an AMP-specific component, an example:
<amp-img alt="Welcome" height="400" src="welcome.jpg"    width="800"></amp-img>


• AMP JS is the javascript library that needs to be included in the project if we want to access the amp-specific components, this library helps in faster rendering of pages in the browser, everything that is coming from external source AMP JS makes it asynchronous that optimize the performance of web pages and nothing in the page can stop the contents from rendering fast. In order to add the AMP JS library in your project you need to add the following script source:
<script async src="https://cdn.ampproject.org/v0.js"></script>


• Google AMP Cache, keeps a track of all AMP enabled web pages and whenever we visit a website that is based on AMP, it gets retrieved directly from the Google AMP cache. It fetches all AMP HTML pages, caches them and improves the performance of page automatically.

How to integrate AMP with your WordPress Site:

In order to make your existing WordPress site AMP enabled, you have to add a couple of plugins to it, I am going to show how you can do it:

• Login into your WordPress site Dashboard and move to the add plugin section.
• Just Search For AMP, and select the following one:





• After Installing the Plugin activate it.Now in order to check whether the plugin is activated successfully or not, you will need to add /amp after the URL of your post. For example, if URL of my post is http://localhost/MySite/2017/02/26/hello-world and I need to check its AMP version then I have to modify the URL as http://localhost/MySite/2017/02/26/hello-world/amp, as I am running WordPress locally, I am showing the URL of my local server and to check your complete website in AMP version just type http://localhost/MySite/amp.





Default Version






AMP VERSION OF the same SITE

• Now as you guys can see it is not looking that much effective, so In orde to make it look a bit more attractive and effective at the same time, we have to add another AMP plugin, that is:





This plugin will provide more options than the previously installed plugin and it also provides inbuilt SEO, Analysis, Sharing etc. support as well which you can explore after installing it.

• Install the following plugin and activate it on your site.This plugin will add a lot number of options on your site, as you can see in the below screenshot a navigation menu is added that can be edited from the dashboard and sharing options are also added which is again a must have feature for your blog or website.










Setting page of newly installed AMP Plugin

AMP project's only intention is to improve the experience of end users, by loading the web pages more instantly and much faster in comparison to earlier stages, fast loading of page also helps in improving the ranking of a website, for example, if two websites are there that provides content related to the same topic, so the website whose page loading speed is faster will be ranked above than the other. As we all know that most of the people nowadays access Internet from their mobile phones or tablets, so it is a good practice to use AMP for faster loading of pages on the mobile web, so that the user base can feel connected all the time and don't get irritated by slower loading of pages.

Source of Information: https://www.ampproject.org and if you want to learn the AMP HTML concept you can check it here