How to Enable Accelerated Mobile Pages Project in WordPress

AMP Project is an open source initiative spearheaded by Google, that aims to provide mobile optimized content that can load instantly everywhere. AMP is a way to build web pages for static content that render fast.

AMP in action consists of three different parts:

AMP HTML

AMP HTML is basically the usual HTML extended with custom AMP properties. Though most tags in an AMP HTML page are regular HTML tags, some HTML tags are replaced with AMP-specific tags. These custom elements, called AMP HTML components, make common patterns easy to implement in a performant way. For example, the amp-img tag provides full srcset support even in browsers that don’t support it yet.

AMP JS

The AMP JS library implements all of AMP’s best performance practices, manages resource loading and gives you the custom tags mentioned above, all to ensure a fast rendering of your page. Among the biggest optimizations is the fact that it makes everything that comes from external resources asynchronous, so nothing in the page can block anything from rendering. Other performance techniques include the sandboxing of all iframes, the pre-calculation of the layout of every element on page before resources are loaded and the disabling of slow CSS selectors.

Google AMP Cache

The Google AMP Cache is a proxy-based content delivery network for delivering all valid AMP documents. It fetches AMP HTML pages, caches them, and improves page performance automatically. When using the Google AMP Cache, the document, all JS files and all images load from the same origin that is using HTTP 2.0 for maximum efficiency.

So how to implement AMP standards in WordPress?

Step 1 –

Install AMP plugin by Automattic, the company behind WordPress.com line of services. With this plugin active, all posts on your site will have dynamically generated AMP-compatible versions, accessible by appending /amp/ to the end your post URLs. Since this plugin is developed by the same guys behind WordPress core development it is highly reliable and standardized.

Step 2 –

Install AMP for WP – Accelerated Mobile Pages by Kaludi brothers. This plugin doesn’t work on its own. It needs the above plugin in order to function. This plugin just extends the functionality of the AMP plugin and fixes most of the shortcomings of the AMP plugin. Moreover it adds a whole lot of features like related posts, recent comments, Google AdSense integration, Google Analytics support, carousel support for gallery, YouTube video embed support, notifications support, etc.

Step 3 –

Resave the permalinks. If you don’t know how to resave the permalinks in WordPress yet, follow this post. It’s quite simple actually 🙂

Step 4 –

Clear the cache.

Now your WordPress site is AMP’d up. You can check your site using the AMP validator tool available over here or by using this Chrome extension if you feel so.

The whole process was simple, right? Well, yes it is – thanks to the Developers of these two plugins.

Developers behind these plugins :

Bradford Campeau-LaurionMohammad JangdaJoen AsmussenAhmed KaludiMohammed Kaludi and Automattic.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s