AMP Pages: Why They Matter

In order to comprehend why AMP matters, we must first understand what AMP is and how it works. A deep understanding of these concepts will help explain why this is an important part of the mobile web’s future and needs to be on your radar.

Let’s get started!

What Is AMP?

You know that frustrated feeling you get when you click on a mobile web link and the page takes twenty seconds to load? And the even more frustrating feeling when you realize it took so long to load because the site was loading pop-up ads and offers before loading the content? This is the struggle AMP aims to solve.

The AMP Project, or Accelerated Mobile Pages, was developed by Google with the desire to improve user experience across the mobile web by increasing the load speed for mobile webpages. That’s the simple explanation, we’ll get into the details in a minute. The project originally launched in early 2016 and has quickly gained momentum over the past year and a half. Chances are you’ve interacted with an AMP since then whether you realized it or not. The page format was primarily adopted by media and content publishers at first, but is beginning to spread to other industries as well.

It’s important to note that AMP protocol is designed for mobile pages, it’s in the name, and while it may work on desktop browsers the page would look parsed down and flat. So it’s not advised to use the protocol when your site is being accessed on anything but mobile.

How does it work?

The AMP Project at its core makes the mobile internet faster. Great! But how does it do that? Simply put, AMP removes the clutter on a mobile webpage and loads what’s important to the user: content. AMP improves load speed so much that the pages appear to load almost instantly. But let’s look at how that happens.

AMP is an open-source initiative that relies on existing web technologies and is built in collaboration with many different partners. The format simplifies the build of mobile webpages by using basic HTML coding with a few restrictions and extras. As a result, it doesn’t require a lot of extra work on your end. And if your site doesn’t have a lot of Javascript or is mostly static, you may not even need to create a second version of your site using AMP protocols.

Every AMP must use the AMP Javascript (JS)  library which delivers optimum performance by adding and validating a few important rules in your site’s markup. The most obvious difference between the AMP JS and standard JS is that some elements are replaced with custom elements to ensure that your site is maintains a fast loading speed in two critical situations:

• AMP JS controls the entire load chain and prioritizes certain elements over others. This usually means that third-party elements and anything “below the fold,” meaning lower on the page than the user will initially see, are loaded only after the primary content at the top of the page.
• AMP’s custom properties also require that aspect defining ratios like width or height are set explicitly. This allows AMP JS to know the layout of your page before any of the assets are even loaded and the page can be laid out in advance. Additional layout calculations are then eliminated which prevents the frustration of a half loaded page and screen jumping as additional elements continue to load.

On AMP, the content is always king and the user experience is queen.

But I rely on ads to make money while providing free content? Consider this. When users know they can quickly access and read content on a site, they are more likely to return to that site. If users return to your site for quick loading content, you can put more content in front of them. Don’t forget – your ads are still there, they just load after the content.

Why is it important?

All of this sounds great, but it will create some extra work on your end to implement on your site initially. So you’re might be wondering why you should take the time. According to research conducted by Kissmetrics, 47% of consumers expect a web page to load in 2 seconds or less! Two seconds or less. That’s nearly instantaneous. In other words, if an e-commerce site is making $100,000 per day, a 1 second page delay could potentially cost you $2.5 million in lost sales every year. That’s a lot of money to lose just because your website doesn’t load fast enough.

Today’s consumers don’t have the patience to wait for slow sites to load. They’d rather abandon the site and try a new one. That’s fine for them, but you could be losing customers that chose your site first and settled for another because you were too slow. Consumers may also remember that your site was slow in the future and may choose not to visit again in the future even if prompted to do so.

In addition, sites that follow AMP specifications explicitly receive special treatment from Google by placing AMP-optimized news stories at the top of Google’s mobile search results. That could mean higher click-through rates for you.

How Do I Get Started With AMP Pages?

If you’d like to use AMP, you’ll need create another version of your web page that utilizes AMP JS and specifications.* Typically, an AMP-optimized site will have a separate web address with/amp at the end to identify the page. If you use WordPress, there is a plug-in available that will automatically create these secondary pages for you.

Finally, the AMP Project has a robust Getting Started tutorial that will walk you through creating your first AMP-optimized site. Additionally, the project has a number of other tutorials including how to create a login page on AMP and creating a live blog with AMP.

At first glance, AMP may seem like an optional addition to your site that you can survive without. Don’t make this erroneous assumption. As the rest of the internet speeds up around you, you’ll need to stay on top of changes like AMP and implement them as fast as possible. Doing so will keep your site on the cutting edge of technological advances and provide your users with the best possible experience. Remember, happy users are recurring users.

* As mentioned earlier, if you don’t utilize JS or have a stagnant site, you may not need to create a separate build for AMP. Be sure to check the specifications of AMP against your site’s markup.