How to Convert Your Mobile Site into AMP

You know, about 40% of people will abandon a page that takes more than 3 seconds to load.

Which means that, if your mobile site earns $100,000 each day, a 1 second page delay could cost $2.5 million in lost sales each year!

Site speed losing money

Yup, see for yourself:

(Image Source)

 

Luckily, there’s a simple solution to this, and it’s called an AMP.

AMP, short for Accelerated Mobile Pages, is a project aiming to create a more user-friendly web experience on mobile devices.

And long story short, AMPs can make your mobile pages fast.

Really fast.

And so in this post, I’m going to share with you the best practices for building an AMP version of your mobile site.

Intrigued? Let’s begin!

Converting existing pages to AMP: What’s the right content to choose?

Let’s not beat around the bush converting a website to AMP takes quite an effort. And the biggest challenge is figuring out the right content to convert first.

Remember, AMP doesn’t improve the quality of your existing content. It simply helps you achieve the ideal page load time. Which, according to Hubspot, is anything less than 1.5 seconds.

 

(Image Source)

 

Start by measuring for the most commonly visited mobile pages. Alternatively, you can measure by time spent on mobile pages.

This will help you to decide which mobile pages will make the biggest difference as AMPs.

Afterwards, select a content category you deem most popular based on these measurements.

Pro tip: Don’t worry if the popular pages are missing social media share buttons. The goal is higher speed and readability (not shareability).

 

Building an AMP site: What are the best practices?

The simplest way to build an AMP site is to duplicate your current mobile site. That is, make a copy of it, and direct visitors to it. That means managing the original mobile site and an AMP site.

This might appear to be more work for your marketing team, but trust me, it’s worthwhile.

Let me walk you through how to make AMP work for you.

1. Code templates to convert your original content pages into AMPs.

Since Accelerated Mobile Pages are completely separate web entities, you’ll need to build a template to accommodate for this.

Some requirements AMP has set out are: elimination of forms, third-party scripts and images without specified dimensions.

As you can see below, the AMP-optimized page has less on-page elements.

(Image Source)

 

But what marketers really need to know, is how to manage an AMP site.

Having two mobile sites doubles your SEO value with the same content.

You can achieve this by re-creating meta tags for every page converted to AMP. This can also be done with other on-page elements.

Unfortunately, you can’t make changes to the global template in AMP. This creates the tedious work of editing each page of an AMP site individually.

Keep in mind, lead forms and other third-party tracking services can slow mobile pages and drain battery life. This is why these elements won’t be included in an AMP site.

2. Validate your AMP site using AMP Chrome extension.

Google needs to validate your AMP pages in order for them to work.

Why? Because if a search engine Google doesn’t know they exist, your AMP pages won’t be in their search results.

A simple way to do this by installing the designated Chrome extension. It identifies errors that prevent Google from validating your AMP pages.

(Image Source)

In the image above, the green AMP icon indicates Google has validated the page. Alternatively, a red icon indicates Google has not validated the page.

All you need to do is select the icon to show a list of errors preventing Google from validating the AMP page. Like so:

(Image Source)

 

Note: A blue AMP icon indicates the web page is not an AMP page.

3. Validate your AMP site using Chrome Developer tools.

In case you that don’t want to download an extra browser extension, there is another option. All you’ll need to do is make a few small changes to Developer Tools in your Chrome browser.

Google recommends taking the following steps to get validated using Developer Tools:

  1. Open your AMP page in your browser
  2. Append “#development=1” to the URL, for example, http://localhost:8000/released.amp.html#development=1.
  3. Open the Chrome DevTools console and check for validation errors.

Similar to the AMP Chrome extension, Chrome DevTools Console has a red AMP icon that indicates Google has not validated the AMP page. It will look something like this:

(Image Source)

Simply address the errors as indicated and you’ll be on your way to higher conversion rates.

4. Validate your AMP site using the AMP Web Validator.

Last but not least, the simplest validation is for those of you that don’t use the Chrome browser.

The AMP Web Validator is a web-based interface that tests the validity of AMP pages.

All you need to do is input the URL of your AMP page. The AMP Web Validator will automatically show error messages where necessary. Pretty simple right?

(Image Source)

 

It gets better.

You can make edits directly to the source code in the AMP Web Validator to fix errors.

My favorite way to check the validity of my AMP Pages has to be the AMP Web Validator. Try it out and let me know which one is your favorite.

Using an AMP site: What are the limitations?

Building an AMP site isn’t a quick fix, it takes time to build out. Luckily Google’s mobile-first index isn’t coming until 2018. This means you have time to build out the site before Google makes mobile pages the primary page to index.

So before you proceed, I’m going to walk you through the limitations of an AMP site.

1. Limited lead generation because of heavy standardization.

Do you currently rely on your website for lead generation?

Because AMPs are all about speed, web elements like forms are difficult to implement. That means reduced opportunities to generate leads.

“Multiple publishers said an AMP pageview currently generates around half as much revenue as a pageview on their full mobile websites…AMP pages rely heavily on standardized banner units, and don’t allow publishers to sell highly-customized ad units, as they might on their own properties.”

Jack Marshall, The Wall Street Journal

It’s no easy feat to implement lead generation forms on AMP sites. So until AMP upgrades to allow publishers to implement forms in content, it would be safe to assume you may be compromising some lead generation opportunities for faster page load times.

2. AMP sites are dependent on Google servers to store their cache.

Because Google servers are storing your cache, Google is always tied to your AMP site.

In other words, your AMP site will not exist without Google.

“Google wants to keep people on the mobile web. While Google has five of the nine most-installed mobile apps, the reality is that their market share is far less certain there.”

Eric Enge, CEO of Stone Temple Consulting

Are you comfortable with depending on Google caching?

If you aren’t, there is still a way around it. Consider duplicating your current mobile site into an AMP site. This will keep your original content separate if you decide to build an AMP site.

Conclusion.

AMP provides marketers an easy way to boost the speed of mobile site pages.

It may not be an industry standard, but it’s a standard for your target audience.

Not ready to commit to building an AMP version of your mobile site? No worries, you can start on a smaller scale.

Start by converting your most popular content pages into AMPs.

Given that so many visitors are consuming your content through smartphones, test how AMPs impact their time on site.

Go ahead, try it! I’m sure you’ll be impressed by the difference 1 second makes on your conversion.

About Shalyn Dever

Shalyn is the CEO and Senior Growth Strategist at Chatter Buzz. An engineer recruited by Google, she is a guru when it comes to generating sales qualified leads. She loves amazing UI/UX, out of the box SEO tactics and forward thinking paid campaigns.