A blog about user experience.

A Look At (AMP) Accelerated Mobile Page Performance

The driving force behind AMP is all about speed. But just how fast are AMP pages? Here's a real-word example.

To answer that question, let's first take a look at how I built an actual AMP page in this site's framework. In the current functionality, the mobile nav bar uses a hamburger dropdown menu that uses a bit of JavaScript. Instead, I chose to eliminate the nav bar completely - which seems to be the approach taken by many AMP publishers. My thinking is that the desktop version can include a nav link with an index page that lists all articles. The AMP pages on the other hand represent the current articles. During the design process I also experimented with another version with a simplified nav bar without the need for JavaScript. This will go be used for the blog's desktop version.

One of AMP's key requirements to inline all CSS. So, before I set up the article framework, I built a simple CSS non-Boostrap framework for the page content and footer. While it is possible to use Bootstrap, I didn't want to spend a lot of time figuring out all the necessary CSS on the page (although I am sure this is possible).

So how fast is an AMP page, compared to non-AMP? To answer that question I created a mobile test page with an AMP and non-AMP version. Each page was tested on Webpagetest on Dulles, VA - Nexus 5 - Chrome - 3G connection. (I chose a 3G connection since it is the most commonly used. The non-Amp page featured the standard Boostrap nav bar, with the required JavaScript set as asynch. Each of the files were minified.

Non AMP

This page had a Speed Index of 2090ms, with a RUM first paint of 2.122. This isn't surprising though since the page had both CSS and JavaScript to deal with.

Welcome

AMP Page

This had a faster above-the-fold load time, with a Speed Index of 1264 ms. This represents a savings of 45%.

Welcome
A look at the timings compared using webpagetest.org. In the example note the time to start render and speed index are lower in the AMP version.

This is fast, and is even faster with a 4G connection. I was able to get the above the above the fold content to render in roughly 700ms. Savings on your site will vary particularly on how complex your current pages are. Note that my test page didn't include any ads or other complex JavaScript which is common on more complex sites. The bottom line is that being able to get the page to render in a little more than a half second is a big win for users.

Is It Worth It?

As the name suggests, AMP is for mobile pages. So if you have a desktop site, then you'll need to create a separate version for those users. That requires more maintenance, but the benefit is that your mobile pages are much faster. To me one of the biggest benefits of AMP is that the basic best practices can spill over to your desktop version. For example, I looked for ways to identify the CSS used on the page and reduce it, then inlined it. Although you can't completely eliminate JavaScript, perhaps reduce can it or look for ways to use asynch whenever possible. This of course means that UX works TOGETHER with developers during the design process - rather than in a silo.

Finally, AMP might light a fire within your organization to start thinking about web performance as a best practice - rather than an afterthought.

About · Contact

© 2016 Speedy UX. All rights reserved.