How to Use Google AMP to Boost Site Speed and Mobile Optimization

Eric Siu

Business owners with slow-running and poorly-optimized websites need a serious wake-up call.

Forty percent of people will abandon a website that takes more than three seconds to load. In 2016, your website might as well not exist if it’s not loading quickly across all platforms, from laptops to smartphones. Fortunately, there’s a solution that can tackle this problem and improve your mobile marketing strategy.

Google recently released a new solution called Accelerated Mobile Pages (AMP), which can significantly boost your website speed and make it better optimized for mobile users.

Here’s a guide to help you get started with using AMP.

What Are AMP Pages?

The AMP project is an open-source initiative created by Google. Its purpose is to improve the experience of mobile users.

Google first announced the new project on October 7, 2015. However, many content marketers still know very little about AMP or are not using it to their advantage. So what is the purpose of AMP, and what are its limitations?

Faster and Better-Optimized Mobile Pages

Optimizing mobile web page speed is crucial for your success. Website bounce rates are significantly higher for pages that take a long time to load. Long loading times also cause conversion rates to plummet—as much as 27% for a 1-second delay—and slow-loading pages rank much lower in the SERPS.

Higher Revenue for Publishers

One of the main purposes of the AMP Project is to allow publishers to scale their revenue. Web pages that load quickly receive more visibility, which means that publishers can earn a lot more in advertising revenue.

Eliminate Dynamic Website Features

The primary downside with AMP pages is that they only work with static content. Static content appears exactly the same every time the page is loaded.

In other words, you can’t use AMP pages for mobile web pages that use geo-targeting or content created with random number generators. This can diminish the user experience on pages that used to allow for more user interactivity.

Elements of AMP

AMP pages are very easy to create. You just need to familiarize yourself with the three basic components, which are listed on the AMP project site, and summarized below.

AMP HTML

HTML has been the primary markup language for building websites for over 20 years. This has not changed with the introduction of AMP.

AMP HTML is the open-source code used to create AMP pages. The majority of AMP HTML code is the same as regular HTML. However, there are some special tags that are made specifically for AMP.

Here’s an example of an AMP HTML document that was published on Github:

<!doctype html>

<html ⚡>

<head>

<meta charset=”utf-8″>

<title>Sample document</title>

<link rel=”canonical” href=”./regular-html-version.html”>

<meta name=”viewport” content=”width=device-width,minimum-scale=1,initial-scale=1″>

<style amp-custom>

h1 {color: red}

</style>

<script type=”application/ld+json”>

{

“@context”: “http://schema.org”,

“@type”: “NewsArticle”,

“headline”: “Article headline”,

“image”: [

“thumbnail1.jpg”

“datePublished”: “2015-02-05T08:00:00+08:00”

}

</script>

<script async custom-element=”amp-carousel” src=”https://cdn.ampproject.org/v0/amp-carousel-0.1.js”></script>

<script async src=”https://cdn.ampproject.org/v0.js”></script>

</head>

<body>

<h1>Sample document</h1>

<p>

Some text

<amp-img src=sample.jpg width=300 height=300></amp-img>

</p>

<amp-ad width=300 height=250

type=”a9″

data-aax_size=”300×250″

data-aax_pubname=”test123″

data-aax_src=”302″>

</amp-ad>

</body>

</html>

As you can see, the meta, script, body, link, and formatting tags are the same as standard HTML. However, some of the tags used to embed content are different, such as the image and ad tags.

AMP JS

JavaScript plays an important role in modern web design. The AMP Project provides its own open-source JavaScript code called AMP JS.

These scripts are important for increasing web page load speeds. Unfortunately, since AMP can only be used to create static pages, you won’t be able to embed third-party JavaScript in it.

AMP CDN

AMP CDN is a content delivery network built specifically for AMP pages. You don’t need to utilize it to make use of AMP pages, but it can significantly improve the performance of your pages and it allows you to cache them, making them easier to share.

Getting Started with AMP

Now that you understand the primary elements of AMP pages, you can start incorporating them into your site. Here’s how to get started:

Be Mindful of Your Content Limitations

Remember that many of the features you’re accustomed to using will not be available on AMP, including:

Certain tracking cookies (though open-source developers have released some)
Lead forms
Geolocation scripts

Despite these limitations, you can still find ways to make your pages engaging, and you can store locally-hosted images with HTML5.

Outline the Structure of Your AMP Pages

Start by creating an outline of your web pages. Despite the speed of AMP page loading, you should still avoid using unnecessarily large images and redundant content that can interfere with loading times.

Create AMP HTML Code

If you’re proficient writing HTML pages, you can learn to create AMP pages pretty quickly. As I said earlier, most of the code is identical to regular HTML.

I recommend following the tutorials on this page from the AMP Project website. Here’s a brief overview.

Start With a Boilerplate Page

Start by copying the code from this page. You can easily modify this page to see how it looks.

There are some key differences between traditional HTML and AMP HTML that you should know before you start editing.

Top-Level Tag

All HTML code requires a top-level tag. In traditional HTML, this is simply the <html> tag, but the top-level tag for AMP HTML is <html amp>.

First Child Tag in the <head> Tag

Make sure the first tag within the head tag is <meta charset=”utf-8″>.

Additional Tags in <head> Tag

The head tag also requires a tag that reads:

<meta name=”viewport” content=”width=device-width,minimum-scale=1″>.

You’ll also need to copy and paste the following:

Changing Style and Formatting

Change the formatting of your AMP pages with CSS. The process is pretty much the same, except you need to use the AMP equivalent element for the <style tag>, which is <style amp-custom>. Here are some AMP styling rules to be aware of:

It’s important to know that every AMP page is only allowed to have a single embedded style sheet. You can’t reference external style sheets, except to create custom fonts.
You will need to use Sass for a preprocessor. The preprocessors are just as effective as they would be on any other site.
Some of popular styling features aren’t available. These include the important qualifier, filter and <link rel=”stylesheet”> styles.
Some other features are still allowed, but heavily discouraged because they have been found to interfere with performance of AMP pages. You can read about them here.

Acclimating to the styling differences is probably the biggest challenge you’ll deal with while building AMP pages, but you’ll get the hang of them pretty quickly.

Embedding Images With AMP

You can’t use the standard <img> tag to embed images in AMP pages. Instead, use the AMP equivalent tag: <amp-img>. You also need to get used to using a closing tag for your image: </amp-img>.

You won’t need to be as conservative with your images since they’ll load much faster on AMP pages, but that doesn’t mean you should get carried away. They can still reduce performance if you use too many.

Preview Before Building

Of course you should always preview any web page before publishing it to the web, but this takes on particular importance when you’re just getting started creating AMP pages and learning how to get the formatting just right. Either open your page directly in the browser, or use a local server such as Apache to check your work.

You’ll also need to append the following to your link #development=1. Use Chrome DevTools Console to scan for validation errors.

Move Your Content to AMP Today

AMP is revolutionizing mobile web page optimization. If you’re building a lot of static pages, then you may want to start transitioning them all to AMP. However, don’t change your dynamic pages unless you’re willing to do without some of the functionality.

Images: Pixabay, Wikimedia Commons, YouTube