Blog Details

  • Home
  • How and why you should Implement AMP on WordPress
banner
banner
banner

AMP has been getting a lot of attention lately. And why not? It just made the world a better place for mobile users by seriously speeding up the page load time.

If your page load time is more than 6 seconds, then…

200_d (1).gif

Here’s how AMP helps increase website speed?

It keeps JavaScript ASYNC

While loading your web page, the external and heavy loaded JS blocks the DOM construction, which delays page rendering. AMP keeps JS as ASYNC, as a result of which a faster page speed can be achieved.

It uses Inline CSS

In WordPress, we have a common header file that contains multiple stylesheets, which may not be required for a particular page. In order to remove the issue of render blocking stylesheet, AMP uses inline styling that helps increase the page speed.

How do you implement AMP on WordPress?

200_d (2).gif

It is as simple as drinking water. Just download the AMP plugin and activate it. If you want to check how your blog looks in the AMP format, just add ‘/amp/’ at the end of your URL.

You think it’s done? Ugh huh ugh huh Ugh huh!

200_d _3.gif

Validate your AMP page

Once you have installed the AMP plugin, you can validate it here. Sometimes developers fail to follow the structured data on the AMP page. Therefore, validating it helps you to find additional errors.

CSS Issue

We need to make sure that no external CSS links are present in the header or else it will raise an error at the AMP validator.

Modifying the Template

If you think the AMP page is not very attractive then you can modify the template in two ways.

Analytics for AMP

Now let’s get to business where you keep a track of all the clicks, page visits and bounce rates with Google Analytics. You don’t have to worry about losing the analytics code while using the AMP format. However, for this, you need to install the plugin AMP Analytics and just add the GTM or Google analytics ID, which will automatically create and add the analytics code for the same.

amp-analytics.png

Alright, Sparky! You are ready to implement AMP now.

text