A Brief Introduction to AMP — Accelerated Mobile Pages

AMP, or Accelerated Mobile Pages, has been around for a few years now. For many frameworks, that’s about a year too long. But not the AMP project. It’s here to stay and it’s quickly becoming–if it isn’t already–a mandatory component of a proper digital strategy.

We’re going to run down how you can use AMP to improve 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.

WTF is AMP?

Currently, we build websites 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. It’s 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.

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.

AMP Open Source Project

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 can 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 add different tires. Although your cars look (and maybe sound and feel) different, they’ll drive more or less the same.

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.

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. It also 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. These include changes to background and font colours, or modifications to page layout.

CSS files can be external, meaning they load separately and combine with the HTML file in the browser. Or they can be 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 makes up the internet – 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.

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.

Jumping resources.

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 has loaded? 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. This prevents the rest of the site from loading properly. These resources form a ‘queue’ and can’t load 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 it completes each step.

AMP loads it all at once!

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 load 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. Although, your results may vary and the site will require configuration.