Intro to AMPs (Accelerated Mobile Pages) ⚡

Website speed is a topic we’ve covered before on the blog. Whether it’s why you should use browser caching or how to optimize your site’s images, we’re always talking about how to make our websites faster. That’s because website speed directly affects sales and customer relations. Say your website turns up in a list of search results for a potential customer: if it takes too long to load, that potential customer moves onto the next site in the list.

Site speed is even more crucial in the realm of mobile browsing, when the user is on the go, possibly with a poor connection, trying to get information fast. This is a very different web experience than sitting at the comfort of your own desk, using a laptop screen or larger. Or, it ought to be a different web experience. Most websites simply shrink down the desktop version of their site to serve to mobile devices. That’s where AMP comes in.

What is AMP?

AMP (Accelerated Mobile Page) “is an open-source library that provides a straightforward way to create web pages that are compelling, smooth, and load near instantaneously for users” – as stated on the official AMP website. Backed by Google, AMP endeavors to make a much better web experience for mobile users by ensuring that mobile sites only load the resources they absolutely need to – and load them quickly.

How does AMP work?

We’re going to keep this blog post pretty high-level, and leave the nitty gritty details to AMP’s documentation and perhaps future tutorial blog posts. But in short, AMP consists of three parts:

  • AMP HTML: a modified, limited version of HTML. It doesn’t support certain HTML tags, and it has several optimization abilities built in. It allows custom CSS, but not custom JavaScript.
  • AMP JS: the actual AMP library that you must include in your AMP HTML page. It’s what makes the magic happen.
  • AMP Cache: a content delivery network (CDN) that preloads, optimizes, and serves valid AMPs.

These three components work together to create super quick-loading mobile pages. You can either build your entire website using AMP, its principles, and its built-in elements, or you can create AMP versions of your site’s pages that will only be shown on mobile devices. You simply link the regular page to the AMP document with a bit of code in the page head to “bind” the two versions.

How do I get started with AMP?

If your website doesn’t have AMP implemented, the documentation contains a helpful tutorial showing how to convert a regular HTML page to an AMP. If your website runs on WordPress, you’re in luck! There are plugins available that can automatically generate AMPs for your existing website: AMP for WordPress and AMP for WP. The first is produced in part by WordPress and Google, making it seem more “official”; but the second is more widely used and highly reviewed. At the time of writing this, they are both pre-version 1.0, so it’s fair to expect improvements over time.

Is AMP the future of the mobile internet (or even the internet as whole)? With Google backing it, it’s likely. At the very least, it’s a push to both eliminate bloat in mobile websites and pursue a better mobile web experience for everyone. Check back here for future blog posts as we begin to implement AMP in our RedTree websites.

Share

Similar Posts
Also tagged Trends

How Website Design Can Reinforce Your Brand Culture

Also tagged Trends

What is Web Design?

Also tagged Trends

Why you SHOULD Hire a Web Designer in 2018, or any year…