ghsquared - Blog Article
best website software

Shake the Room with Google AMP

By Glen Holmes posted 8/17/2016

What is AMP?

Over the past year, Google has released technology aimed specifically at making media based webpages load faster on mobile devices. AMP or Accelerated Mobile Pages work by you adding some extra tags to your webpage. When Google’s web crawler notices that your webpage is AMP ready, it takes a copy of the whole page and can load it on a user’s mobile device instantly, even on weak networks.

AMP in action consists of three different parts;

  1. AMP HTML is HTML with some restrictions for reliable performance and some extensions for building rich content beyond basic HTML.
  2. The AMP JS library ensures the fast rendering of AMP HTML pages.
  3. The Google AMP Cache can be used to serve cached AMP HTML pages.

Why use AMP?

Google intends AMP to pave the way in mobile web. They say, “For many, reading on the mobile web is a slow, clunky and frustrating experience”. Their answer to this frustration is the AMP Project, another open-source development from Google, which can only be a good thing considering the success of Android. Developers, contributors or even just nosey tech heads can check out all project source code on the AMP GitHub here. This means AMP is under constant development and you can be sure any major issues will be ironed out as the project develops.

For businesses, AMP makes perfect sense; a Google backed platform that builds on HTML, to ensure content is readable, error free, small in size, fast-loading, responsive, cross-platform out-of-the-box… AMP does more still, it integrates perfectly with iOS and Android share features, your users can do the usual social media sharing, along with view your pages in Reader Mode, add articles to their home screen or bookmark articles to read later.

The end goal, is for AMP to work with all web content, including video and ads. This means ads will pop up quicker, pages will load faster and tailored solutions for e-commerce websites could dramatically improve the mobile shopping experience.

How to use AMP?

Using AMP is a simple, well guided process. Google has even put together detailed documentation here.

Step 1. The Markup

<!doctype html>
<html amp lang="en">
  <head>
    <meta charset="utf-8">
    <title>Hello, AMPs</title>
    <link rel="canonical" href="http://example.ampproject.org/article-metadata.html" />
    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
    <script type="application/ld+json">
      {
        "@context": "http://schema.org",
        "@type": "NewsArticle",
        "headline": "Open-source framework for publishing content",
        "datePublished": "2015-10-07T12:02:41Z",
        "image": [
          "logo.jpg"
        ]
      }
    </script>
    <style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
    <script async src="https://cdn.ampproject.org/v0.js"></script>
  </head>
  <body>
    <h1>Welcome to the mobile web</h1>
  </body>
</html>

Step 2. Make your images AMP Ready

AMP deals with most HTML tags without any changes. For media tags however, you will need to add the amp-” precursor.

<amp-img src="welcome.jpg" alt="Welcome" height="400" width="800"></amp-img>

Step 3. Dealing with Styles

Include all your custom CSS inside the amp-custom style tag

<style amp-custom>
  /* any custom style goes here */
  body {
    background-color: white;
  }
  amp-img {
    background-color: gray;
    border: 1px solid black;
  }
</style>

Step 4. Debugging

Debgugging is made simple by Google using the Chrome browser.

  • Open your page in Chrome browser.
  • Add "#development=1" to the URL, for example, http://localhost:8000/released.amp.html#development=1.
  • Press F12 to launch the development console.

What are we doing?

At ghsquared, we love to embrace new technologies, particularly if we believe they will benefit our customers. Currently, our Application Specialist Garry, is working on Project Pre-Amp. This is a web based tool that will simply convert standard HTML pages to AMP HTML pages. Check in soon for an update on this project.  

A Quiet Concern

Whilst playing around with AMP, it is easy to see the benefits, most notably the rapid delivery and caching of web pages to mobile devices. There is however, a hint of Google using its power to push a product that Google controls. Yes, the project is open source but Google makes the final say on what goes to production. Yes, the caching makes page loading lightning fast, but this is Google’s cache, and yes, there are already millions of AMP pages but how do I find them? Google search you say…

SHARE THIS PAGE!