What do Wired, LinkedIn, Twitter, and The Washington Post have in common?

They all use AMP to optimize their websites for mobile.

Studies show that 85% of users expect websites on mobile to load as fast or faster than on desktop. With more than half of online browsing being done from mobile devices, big shot publishers can’t risk losing traffic and ranking lower on Google.

So why should you?

It’s time to get you started with fast-loading AMP. This plain-English post is going to help you understand what it’s all about and how to adopt it.

Here’s what you’ll learn in the next 3 minutes:

  • What is AMP and how it can convince your visitors to stay 2x longer on your website.
  • Real-world examples where AMP has led to 4x site speed and up to a 95% increase in conversions.
  • The fastest way to set up AMP (and an extra tip for WordPress websites).

Ready to boost your website performance on mobile? Here we go then.

What is AMP?

AMP stands for Accelerated Mobile Page and it’s essentially a platform designed to make really fast mobile pages.  

It all started in 2015 when Google, Twitter, WordPress, LinkedIn and a bunch of other companies banded together to make mobile content load faster. (Although the real story is they wanted to beat Facebook’s similar project called “Instant articles.” Go figure.)

At first, it was aimed at big publishing sites like The New York Times and CNN. Google pushed the project by offering more exposure in search results for AMP-ed sites. 

Although you don’t have to be a hotshot media site to use AMP. A Google-sponsored study showed that even regular e-commerce sites that use AMP increased sales by an average of 20%. They also found that visitors spend twice the amount of time on AMP pages compared to non-AMP pages.

We’ll lay out all the impressive benefits of using AMP later on. Keep reading. 

Why use AMP for your website?

Fact: 53% of mobile visitors jump ship if a site takes more than 3 seconds to load.

A lot of things can make your website behave badly on mobile. Slow internet connections, clunky ads that hog up the entire screen, and heavy websites that load at a glacial pace.

If any (or all) of these reasons ring true for your website, you’re probably noticing a high bounce rate and a miserable ranking on Google.

This is where AMP comes in with its fast-loading pages, skinny scripts, and ad-optimized templates. Take a look at the main advantages of using AMP:

  • Higher performance: Pages will load under one second to satisfy impatient users and keep them interested in your site for longer.
  • Better mobile ranking: Google punishes slow websites. With AMP speeding up your loading times on mobile, you’ll notice a nice boost in your ranking. 
  • Increased revenue:  Conversions fall by 12% for every second your webpage takes to load. So in theory, faster pages = more sales. 
  • Flexibility for ads: If you get revenue from ads on your site, AMP guides you on how to present them so they’re effective on mobile without being intrusive for users. Win-win.

How does AMP work?

AMP is made up of three components: 

AMP HTML: This is like a diet version of regular HTML for webpages. It cuts out all the extra bits of code that bog down your loading times. Anyone who knows regular HTML won’t have a problem using AMP HTML.

AMP JS: This is a JavaScript library in charge of loading your texts, images, and video as efficiently as possible. It includes cool features like lazy loading so your images don’t take forever to show up. 

AMP Cache: This fetches the webpage and stores parts of it so visitors can get a mostly pre-loaded page instead of waiting for the entire page to load from scratch. (Read our post explaining browser caching if you’re not sure what it is.)

All three components work together to create a faster and better AMP version of your existing webpage. Google then stores it in the cloud and serves it to visitors who click to access that page. 

Fun fact: You can actually tell which mobile pages are using AMP right from the search results. For example:

Screenshot of search results on Google showing which pages use AMP.

When you see that little lightning bolt icon, you know you’ll be taken to the AMPed up version of that page. Or if you want to get tecchy: the nearest CDN will send you the cached version of the page.  

(If you want to get more tech smart in the next ten minutes, open up our practical guide on CDNs in a new tab to read after this post.) 

AMP success stories

Want to know how AMP has worked out for others before adopting it yourself? Here are a few known brands who made the leap and didn’t regret it.

Gizmodo

After two years of using every trick in the book to speed up their website, Gizmodo still felt like their page needed improvement. 

More than half of their users were coming from mobile, so they gave AMP a try. Since then, Gizmodo has reported 100k daily visits to their AMP pages and were impressed to find they load 3x faster than on their regular site.

“AMP has been an overwhelmingly positive experience for Gizmodo.”

Josh Laurito, Head of Data and Analytics

The Washington Post

In 2015, The Washington Post saw their mobile traffic was rising and knew that their slow site was costing them traffic. 

They joined Google in developing the AMP Project and were among the first to adopt it on their pages. The result? An 88% improvement in load time versus their regular mobile website. They also found that readers who used their AMP pages were 23% more likely to return within seven days. 

“Getting started with AMP was easy […] we were able to host our content, style it as we see fit, and easily integrate our existing advertising, analytics and other business tools.” 

David Merrell, Senior Product Manager at The Washington Post

Wego

If you’re not familiar with Wego, it’s the largest travel marketplace in Asia and the Middle East for booking cheap flights and hotels. 

With their target market living in places where internet connections are typically slow or unstable, Wego needed their mobile site to be lighter and faster. 

So, they created AMP versions of key landing pages. These pages went from loading in 11 seconds down to just one second. Their bounce rates plummeted and their conversion rates shot through the roof (up to 95%!). 

Wego’s advertisers also saw a nice boost in revenue thanks to AMP’s ad component which improved the clickthrough rate from 0.75% to 2.55%. 

“Speed was a critical challenge for our mobile business. AMP solves speed, so we can focus on building a better product for our customers.”

Honey Mittal, Senior Vice President of Product at Wego

For more tales of success, you can read dozens more in AMP’s Case Studies. Go nuts.  

How to get started with AMP

This is the good part. There are different ways to AMP-lify your webpages ranging from DIY coding to installing a plugin. 

Hand-code the page

If you have the time, know-how (or a developer who does) then you can head over to the AMP Project page and bury yourself in their step-by-step documentation.

Basically, they’ll start you off with an HTML template that you can customize to create a similar version of a webpage. You can add extra features like a burger menu and things you typically need on mobile. The key here is making the AMP page usable and not horrifying to look at. 

Give us a shout if you need a friendly developer to help you create your AMP pages. 

Coding AMP pages can take from a few days to a few weeks, so make sure to invest the time for a job well done. 

Install a plugin

We know you don’t want to spend hours coding pages. Fortunately, AMP does too so they packed their framework into convenient plugins for platforms like Drupal, Squarespace, and WordPress. 

If you’re part of the majority who run their website on WordPress, you can download the official AMP plugin here to get started. 

You can configure the plugin to only make certain content AMP-friendly and check analytics to see how it’s working out. (This will all be in the sidebar under your other WordPress options.)

Now don’t just install it and forget about it. The plugin will do most of the heavy lifting and recreate your webpages for you, but if you want them to look just like the original you’ll need to do some good ol’ coding. 

The good news is that if you’re building pages from scratch using the usual WordPress editor, the AMP plugin will automatically regulate your content so the resulting page fits AMP standards. If there’s something off that’s holding the page back, the plugin will tell you what it is and how to fix it.

What to do next

Now that you have a good idea of what AMP is all about and how to get started, you comfortably decide whether AMP is the next step for your website.

Whether you go all in with coding or install a plugin for a headstart, you might find yourself short on time or know-how. If that happens, get in touch and we’ll take care of AMP-lifying your pages so you can focus on putting up great content.