Google Amp

WordPress is an amazing platform that provides exceptional ease to people from all backgrounds. Coder or no coder, you can build your site within a short span of time. By integrating AMP with WordPress, website owners can enjoy and provide their users a unique experience.   

So what is AMP?

AMP (Accelerated Mobile Pages) is an open standard project, initiated by Google, that allows quick loading of pages on mobile devices. Google gives special preferences to AMP pages. This allows them to enjoy higher rankings, load in as less time as one second and use data less than ten times as compared to regular pages.

AMP is based on HTML with few restrictions and some specialized tags. AMP pages can be built by creating a separate version of the respective site, based on AMP standards.

HTML AMP can be rendered easily similar to normal HTML.  Apart from creating website, this open source HTML framework allows you to create AMP ads, AMP stories and even AMP emails.

To maintain the performance, AMP has a list of elements that are restricted or has replacement. You can learn more about them here : https://amp.dev/documentation/guides-and-tutorials/learn/spec/amphtml/?format=websites

Clearly, AMP has turned out to be extremely beneficial for content creators.

How to use AMP for WordPress:

  • Install the WordPress Plugin: Install the official AMP plugin from the link below:
     https://amp-wp.org/

    After installation, make sure that you disable “AMP” on each page individually and then start activating and fixing one page at a time. This will allow you to manage pages easily.

amp
  • Understanding the modes: AMP basically creates another light weight version of pages and creates a canonical URL such as:

    Non-AMP URL: abc.com
    AMP URL : abc.com/?amp

Now let’s see what modes provide us

  • Standard : The standard mode converts all pages in AMP as soon as you activate it and there will be no canonical URLS. So your site is just amp overall. This may require development work if your theme styles break.
  • Transitional: This mode will allow you to manage both URLs: AMP and non AMP. This way you have styles and other important functions in your hand. You can keep everything on the page to be displayed on desktop (Non-AMP), while managing what to show/hide in the AMP version for mobile view.
  • Reader : Reader mode also have both AMP and non-Amp version but here your theme for site is not used. It converts page into a very simplified template.

    • -Managing styles/scripts for AMP version pages: If you choose Standard or Transitional mode you will need some development work as mentioned before. Here are few important points to consider: 

  • All styles and scripts need to be in header file inside the head tag.
  • Styles should be placed between <style amp-custom> </style> tags.
  • There are few actions on page that need scripts like slick slider, hamburger menu etc. You will need to check if they have replacement in amp. If yes, then replace, for example : slick slider with amp carousel and hamburger menu with amp-sidebar.
  • If there is Google captcha on your forms, you will have to enable option for the captcha keys to work with AMP. Login to the Google recaptcha account and check this option :

    google-captcha

  • You will need a condition to get the new AMP related styles work only on amp page. So here is what you will add :

if (function_exists( ‘is_amp_endpoint’ ) && is_amp_endpoint()) {

    // do stuff }

For more details read here :

https://amp-wp.org/documentation/developing-wordpress-amp-sites/how-to-develop-with-the-amp-plugin/

Submitting the page on Google: The last step after setting the styles and scripts for amp page is to get the AMP version of URL crawl by Google.

For this, login to the Google search console and submit the page URL for indexing. After few hours the result will be emailed to you, if there will be amp related errors the result will display them and you will have re-indexed the page, once they are fixed.

How AMP Works so Fast? 

Let’s discuss some of the reasons that makes AMP to work so fast:

  • Javascript is a powerful method to modify a page but it can create delay in page rendering. AMP helps to deal with this issue by only allowing asynchronous JavaScript.
  • Custom AMP elements, though consisting of some JavaScript, are designed in a way that they do not affect the overall performance.  
  • All external resources (such as ads or iframes) are supposed to define their size in HTML. AMP does not wait for the resources to download and loads the layout of the page.
  • If a page is using custom script, then it is necessary to let the AMP system know that it will have a custom tag.
  • AMP Pages does not restrict Third party Javascript provided it is specifically for sandboxed iframes.
  • AMP HTML only allows inline styles, while the inline style sheet provides a maximum size of 50 kilobytes.
  • AMP allows GPU-accelerated animations i.e. animation and transitioning can be done on transform and opacity which eliminates the need of page layout.    
  • AMPHTML allows you to share your ads on AMP and non-AMP pages. In short, you can create and share your adds, without any hassle, on any platform.
  • AMP also optimizes resource download. It does so by prioritizing the resource loading. And only loads the relevant, most necessary resources and prefetches the lazy-loaded resources. It loads the resources by taking ample amount of time while prefetches them without showing any delay.
  • As far as ads and images are concerned, they are only downloaded based on the user’s interest.
  • When prerendering is applied to web content, it utilises a lot of bandwidth as well as CPU. AMP greatly helps in resolving such issues too.

What is CSS Tree Shaking?

CSS Tree Shaking : AMP purpose is to keep pages as simple as possible. Tree shaking is an algorithm that removes the css that is invalid for AMP page and exceeds limit of 50 KB. Your styling may break after converting pages. To fix this you will have to do some custom css in the header file. To read more, click here 

https://amp.dev/documentation/guides-and-tutorials/develop/style_and_layout/style_pages/

Conclusion

The quick loading of AMP pages plays a vital role to create and maintain a large audience. This expands user engagement, brand awareness and enhances their interest in purchasing your product.

You can customise CSS any way you want along with performing A/B testing to provide an appealing website to viewers. Since you are providing fast access to every single page, it also helps in increasing the revenue.

By building website content (such as ads or landing pages) through AMP, which usually takes time, you can distribute them on various platforms simultaneously.

You do not even have to optimize your code for every distribution platform as format of AMP is completely portable and fast. Undoubtedly, Google AMP has changed the way content is loaded and accessed.

Rabia Asif is a Project Manager at Genetech Solutions with a love for technology writing. Having a BS degree in Computer Science, she has decent exposure to, as well as makes ample effort to keep up with, latest technology trends.

Rabia Asif