At some point, everyone has encountered a slow loading site on their phone. Some might be willing to wait for the site to load, but most people are in a hurry and either want it right away, or not at all. Slow loading times on mobile devices are a common problem for many websites today. Ideally, websites on mobile devices should load in around three seconds, but most take closer to 15 seconds to fully load.

Accelerated Mobile Pages aims to be the solution to this. AMP’s goal is to make websites load faster on mobile devices. By leveraging less HTML resources and caching, AMP allows mobile content to open almost immediately. Although AMP has already been around for a few years, many are still confused about what it does and whether or not it’s worth adopting.

Here, we’ll provide you with an overview of how AMP works, why you should adopt it, and how to implement it on your website.  

How does AMP work?

AMP is essentially a stripped down version of traditional HTML. Web pages that use AMP only show the important content, rather than every element you would get if you were reading it on a desktop. The AMP framework consists of three core elements that allow web pages to load faster:

  • AMP HTML – the original HTML is altered to create a simplified version with AMP-related commands.
  • AMP JavaScript – this mobile specific JavaScript prevents any external resources from loading all at once.
  • AMP Cache – Google serves AMP pages directly in the search results.

The easiest way to use AMP is by installing the Official AMP plugin for WordPress.

Unfortunately, if you don’t use WordPress for your website, getting started with AMP will be a little more difficult. If you aren’t able to code or install a plugin, using AMP is going to be a difficult task.

 

AMP has an official guide to help you implement it, but unless you have web development experience already, you should find someone else who’s qualified to help.

Installing AMP Best Practices

Via the AMP Project

  • To markup an AMP page, use this tag inside the <head>: <html ⚡> or <html amp>
  • Place the <link rel=”canonical” href=”$SOME_URL”> inside the <head> and point it to either the original HTML page or the AMP page (if no HTML copy exists)
  • Add information about AMP pages on the original HTML copy by inserting this tag <link rel=”amphtml” href=”https://www.example.com/url/to/amp/document.html”> in the <head> tag
  • AMP requires <head> and <body> tags
  • Create responsive webpages by inserting the <meta name=”viewport” content=”width=device-width,minimum-scale=1″> inside the <head> tag
  • Create images using AMP img tags, such as this example: <amp-img src=”welcome.jpg” alt=”Welcome” height=”400″ width=”800″></amp-img>

Who should use AMP?

Everyone should want to make their website load faster on mobile devices, but that doesn’t necessarily mean AMP is the solution for everyone. While there are many benefits to using AMP, it won’t have the same effect on everyone.

Websites that publish a lot of content regularly will benefit the most from using AMP. News sources and blogs are typically the sites that get the most out of AMP. This allows Additionally, this content shouldn’t be heavy with media in it. Reading written content on mobile devices requires fewer elements than you would need on a desktop. This makes these types of web pages the best for AMP because you can take away from them without losing the effectiveness of the content.

It might be tempting to convert your whole website in an effort to make it load faster, but this can take a while to do and won’t have the results you might expect. If you have blog posts on your website, you should consider adopting AMP there, while leaving your landing pages alone. As AMP takes away elements that aren’t necessary for reading content on mobile devices, it can also take away important parts of landing pages as well.

AMP Pros

  • Faster loading times for mobile pages
  • Greater organic search visibility
  • Scalable design and display
  • Easy implementation from HTML

AMP Cons

  • Sacrifices some onpage resources, such as JS, CSS, and HTML
  • Requires custom image tags
  • Limited analytics tracking
  • Different CMS’s have different requirements for AMP

What effect does AMP have on SEO?

Google hasn’t officially announced that using AMP is a ranking fact. While AMP alone might not make you rank any higher, the effect it has certainly can. Most people have become accustomed to quick loading times. The majority aren’t willing to wait more than a few seconds. This can be especially important on mobile devices compared to desktops. If you have a website that doesn’t open right away, people will leave before they’re able to see anything, and they aren’t likely to come back.

It’s common knowledge for anyone who knows the basics of SEO that page speed has a huge impact. Page speed is one of the most important parts of creating a good user experience. When a website goes from one second to load to five seconds, the probability of bounce increases by 90%. With the chances of someone leaving so quickly being extremely high, making sure you’re doing everything to help your website load faster is important in keeping visitors.

Another way that AMP can help improve SEO is through the top stories carousel that appears at the top in search results on mobile devices. This is an incredible spot to be in to make you more visible. The only way to make the top stories is by using AMP. This is an especially important bonus for news publishers. Even if you aren’t in the top stories, AMP pages will be marked as such in the search results, which could give you more traffic if people are aware they’ll be getting content faster.

Featured Image Credit: Flickr

Image Credit: LSEO Screenshot