SEO, Web Design

AMP for SEO? Accelerated Mobile Pages: An Introduction

If you follow any web trends, you may have heard of Google’s recent initiative, AMP. AMP, or Accelerated Mobile Pages, is a new, standardized type of mobile website, aimed at improving load times and decreasing data usage on mobile devices. We’re going to run down how you can use AMP for SEO, improving your site’s mobile user experience and driving more traffic your way.Let’s look at what AMP is, how it works, and how you can leverage it for better mobile functionality and more page views.

W.T.F is A.M.P.?

Currently, websites are built on all manner of platforms, with all sorts of design standards and functionality. Google wants to provide mobile users with a faster, more intuitive way to browse the web on their devices. It’s part of Google’s material design initiative. Material design is Google’s set of design standards aimed at making information accessible, and interfaces predictable and intuitive. It involves specific visual cues and layouts that suggest layers of depth. Their goal is to provide an uncluttered experience that feels tactile and familiar. If you’ve used a Google product in the past few years, you’ve experienced material design.

animated image of confused man
Still confused? Don’t worry. We’ll clear it up.

Now, Google wants to integrate material design and its stated benefits on websites across the web. AMP is how they plan to do this. Here’s an excerpt from Google’s AMP website, describing their intention:

The AMP Project is an open-source initiative aiming to make the web better for all. The project enables the creation of websites and ads that are consistently fast, beautiful and high-performing across devices and distribution platforms.

So, that’s a pretty clear explanation of what AMP aims to be. Now let’s answer the next question: how does it work?

How AMP Works

Accelerated Mobile Pages are, as the name suggests, fast. Basically, AMP-enabled websites funnel their content (text, images, and branding, like fonts and colours) into an extremely optimized ‘template’ of sorts. We’ll get into some of the technical stuff later, but for now just think of it as a pre-built website you paste your content into. This gives all AMP sites the same feel and basic layout without making them too homogenous – you still style the content the way you want to. Think of it as a car. You might get the same car as your neighbour, but paint it a different colour, or install an aftermarket stereo, or different tires. Although your cars look (and maybe sound and feel) different, they’ll drive more or less the same.

car racing around track
How it feels when you load an AMP page instantly.

So, what makes AMP fast? Google is an authority on web development and page speed, so they built the AMP ‘template’ to perform faster and use less data than any standard mobile site. If you aren’t into tech, brace yourself. The next few paragraphs are going to get a little technical.

Here there be jargon: a technical explanation

Basically, AMP is a streamlined way to write HTML pages. Google has done a great job accelerating pages by inventing a system that minimizes HTTP requests and sizes all content, like images, text, and menus, before it loads content. Let’s break it down a little.

HTTP requests and you

First, let’s talk HTTP. Websites are rarely made from a single file. Instead, they often combine resources from several files. The HTML document contains the text and links to images and resources, formatted in a very basic way. It’s the only file actually required when building a website. HTML on its own looks like a basic text document when rendered in a browser. CSS, or cascading style sheets, are how web developers make visual changes to HTML files, like changes to background and font colours, or modifications to page layout.

CSS files can be external, meaning they are loaded separately and combined with the HTML file in the browser, or inline, meaning that rather than existing in its own file, the CSS is pre-mixed into the HTML file. External CSS files are popular because they are easy to work on, but they can slow websites down because the browser needs to load two files instead of one. That’s what HTTP requests are all about.

HTTP stands for HyperText Transfer Protocol. HyperText is basically what the internet is made from – text documents linked to other text documents. An HTTP request is like a phone call from your computer to the server, where the website is stored. Your computer makes a separate ‘phone call’ for each file it has to load, and has to wait for an answer from the server before it can move on to the next task. This doesn’t take long, usually, but several HTTP requests can add up. If a single page needs to load an HTML file, a few CSS files, and a JavaScript file, it’s going to slow things down quite a bit. By minimizing the number of HTTP requests, AMP makes pages much faster.

Alright, on to render blocking

There’s one more important concept to help you understand AMP. It’s called render blocking. Now, if you’re feeling fatigued from all the tech jargon, feel free to take a break here. I’ve included a fun video of a man punching a kangaroo, featured below:

Alright, ready? Let’s dive in to render blocking. We’ll break it down into its core parts, starting with rendering. Rendering is tech jargon for ‘displaying’ or ‘showing’. Kind of. More specifically, rendering is the computer’s process of laying out, sizing, and shaping the web page you’re loading. Your browser basically has to ‘draw’ each page it loads, positioning and styling all the content according to the CSS files we discussed above. Not so tricky, right? Now let’s talk blocking.

Render blocking is sort of what it sounds like – it stops rendering from happening. You’ve probably seen it happen on pages, even if you don’t know what it is. You know when you browse a website on your phone, and every time the page loads, all the pictures and text ‘jump’ up and down the page until everything is done loading? That’s an example of render blocking. What’s happening in that scenario is that resources (like CSS or JavaScript files) are taking a long time to load, which prevents the rest of the site from loading properly. These resources form a ‘queue’, and can’t be loaded out of order. So, when a site has lots of resources to load, it can take a long time and cause the page to jump around as each step is completed.

lemurs leap-frogging each other on a fence
Use AMP to make sure slow resources don’t hold up the line.

AMP addresses the render blocking issue by implementing standards that prevent websites from loading custom resources. Developers must instead rely on inline CSS and an existing library of JavaScript files that are loaded asynchronously. Asynchronous just means out of the ‘queue’ we mentioned earlier. It loads all at once, in one request. This, combined with some other specifications and guidelines we won’t get into, means AMP pages are perfectly optimized to load almost instantly. Pretty cool, right?

Why Use AMP?

Alright, the tech stuff is out of the way, and you should have a basic understanding of how AMP works. Here, at last, is why you should use it. Besides the obvious – fast websites are better than slow websites – there are two main reasons why AMP is a good idea. First, AMP websites are easy to use. As AMP is more widely adopted, users will become ever more familiar with its look and feel. Google wants to standardize the web as best it can, and AMP is arguably the first step in that vision.

Second, Google wants you to use AMP, and they’ll reward you for doing so. AMP pages get tagged in mobile search results, encouraging users to click them. Again, as AMP becomes widely adopted, people will associate these tagged results with speed, quality, and consistency. In addition, AMP enabled pages follow Google’s coding best practices and have blistering page speed scores. That’s great for SEO and may help you rank higher in all searches, mobile and desktop.

So, how do you get started with AMP? If you’re into DIY web development, Google has an introductory guide to coding AMP pages. If you’ve got an existing WordPress site, plugins exist that purport to convert your site to an AMP-enabled one, though your results may vary, and configuration will be required. Of course, if you want an AMP enabled site, the experienced developers here at Main Street can certainly accommodate you. Contact us for more information!