Enable AMP HTML on your website

ACCELERATED MOBILE PAGES PROJECT

ACCELERATED MOBILE PAGES PROJECT

AMP HTML is an initiative from Google to speed up page load times drastically. The idea is to only load the essential content of that page, while leaving the Javascript and other non-essential elements behind. AMP stands for Accelerated Mobile Pages.

Google, on their official blog, themselves say the following about this project:

We hope the open nature of Accelerated Mobile Pages will protect the free flow of information by ensuring the mobile web works better and faster for everyone, everywhere.

AMP HTML on any HTML page

To enable AMP HTML on your own website or domain, it’s as easy as meeting the AMP specification. You can read all about it on the GitHub page of the project. But it comes down modifying your code a bit so it looks like:

<!doctype html>
<html >
 <head>
 <meta charset="utf-8">
 <link rel="canonical" href="hello-world.html" >
 <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
 <style>body {opacity: 0}</style><noscript><style>body {opacity: 1}</style></noscript>
 <script async src="https://cdn.ampproject.org/v0.js"></script>
 </head>
 <body>Hello World!</body>
</html>

This allows the AMP library to include:

  • The AMP JS library, that manages the loading of external resources to ensure a fast rendering of the page.
  • An AMP validator that provides a way for web developers to easily validate that their code meets the AMP HTML specification.
  • Some custom elements, called AMP HTML components, which make common patterns easy to implement in a performant way.

Enable AMP HTML on WordPress websites

Is your website or blog powered by WordPress.org? Automattic created a plugin that will automatically make your WordPress site AMP compatible. They explain it as follows:

This plugin adds support for the Accelerated Mobile Pages (AMP) Project, which is an an open source initiative that aims to provide mobile optimized content that can load instantly everywhere.

With the plugin active, all content on your site will have dynamically generated AMP-compatible versions, accessible by appending `/amp/` to the end your permalinks. (If you do not have pretty permalinks enabled, you can do the same thing by appending `?amp=1`.)

  1. You can download the AMP HTML plugin from the Github page and install it manually. Keep in mind this is a first version of the plugin and it might need some improvements and may contain some bugs. Use with caution. To install:
    Upload the folder to the `/wp-content/plugins/` directory
    Activate the plugin through the ‘Plugins’ menu in WordPress

 

Author Bio

Thank you for your interest in my blog! On this miniblog, I write mostly short (technical) blog posts that might interest other people. Read more about me or feel free to contact me.

 

2 thoughts on “Enable AMP HTML on your website

  1. I am comfortable reading this, good at explaining the very detailed steps, thank you for that. I have found articles like this but this is more detailed, how to make this method easier?

Leave a Reply

Your email address will not be published. Required fields are marked *