Seeing people with their heads bent down toward their mobile devices or tablets with one hand doing the scrolling is a common sight these days. In a world where information can be accessed with just one click of a button, pages that take more than three seconds to load are easily abandoned, regardless of the quality of content that they have. Thanks to the variations in Internet speed, publishers have to rely on optimizing their pages so it can load faster on these devices. If you have been reading our previous blogs, you must have understood by now that loading the web pages faster, is one of the many benefits of Accelerated Mobile Pages (AMP). For those who don’t know anything about AMPs still, here’s an explanation but for those who are already familiar with the topic can skip the next paragraph and move straight to the accelerated mobile pages implementation section.

What is an AMP?

Simply put, AMP is a framework that allows web pages to load faster in mobile devices. Launched in October 2015, this open-source initiative aims to help publishers improve both speed and user experience for their users without compromising ad revenues. AMP appears with a lightning symbol on the search engine results page – an indication that it has a fast loading time. Aside from improving the site’s rankings, it also increases engagement and click-throughs. You can read more about AMPs in detail in this blog.

How Does the Accelerated Mobile Page Implementation Work?

The AMP framework consists of the following:

1AMP HTML – an HTML subset which has custom properties and tags plus plenty of restrictions. Those who know a thing or two about basic HTML won’t have issues in tweaking the existing pages to adapt to AMP HTML.

2AMP JS – This is basically a JavaScript framework that’s used for mobile pages. It allows pages to load asynchronously and manages the handling of resources. It’s important to note however that third-party JavaScript won’t work with AMP.

3AMP CDN – this Content Delivery Network is optional. It automates the creation of performance optimizations, takes AMP-enabled pages and caches them.

How to Implement Accelerated Mobile Pages

To start, two versions of article pages must be maintained. The first version being the original page that users often see, and the second being the AMP version. On-page comments and lead forms won’t be allowed since AMP disables third-party JavaScript and other elements that are commonly used for standard implementation. This means that site templates need to be written to make room for the restrictions. Case in point, CSS in AMP has a limitation of 50KB and should be in-line. Publishers who wish to use custom fonts on their pages should use a special amp-font extension to minimize and control of the loading-intensiveness.

When a legacy website needs to be converted into an AMP template, the utilization of a custom amp-img element that includes explicit height and weight should be used for images and other multimedia. Fair warning, though, this process can be tiresome especially when the height and width attributes are not yet being used. An amp-anim extended component is necessary for GIFS and other images that require some animation. A custom tag commonly known as the amp-video is needed to embed locally hosted videos through the HTML5.

A different extended component called the amp-youtube is used for embedding YouTube videos. There’s a high chance that this extended component will be used often since most of the web video’s are on YouTube. Other components are the amp-carousel for slideshows and amp-image-lightbox for image lightboxes. Social media embeds for Vine, Twitter, Pinterest, Instagram, and Facebook has their own respective extended components.

To make it easier for Google to detect your article’s AMP version, you will need to do some modifications on the original version. The following canonical tag for AMP pages should be included in the original page of the article:
<link rel=”amphtml” href=”http://www.example.com/blog-post/amp/”>

If you find these steps a bit too complicated for your liking, you can start working via WordPress since it integrates AMP effortlessly. All you have to do is go to the Dashboard, look for the AMP WordPress plugin and have it installed and activated. This will attach /amp on every single page of the site without redirecting the mobile users to the /amp pages. The next step would be to modify your .htaccess file via the Filezilla or any other FTP program. To check if all of your AMP pages are working, paste this code into the .htaccess file:

RewriteEngine On
RewriteCond %{REQUEST_URI} !/amp$ [NC]
RewriteCond %{HTTP_USER_AGENT} (android|blackberry|googlebot\-mobile|iemobile|iphone|ipod|\#opera\ mobile|palmos|webos) [NC]
RewriteRule ^([a-zA-Z0-9-]+)([\/]*)$ https://example.com/$1/amp [L,R=302]

Don’t forget to replace example.com with the domain name of your site. The 302 will also keep the link equity from being passed on or transferred to the site’s /amp pages. Also, make sure that you edit your site’s CSS to improve the user experience.