AMP Accelerated Mobile Pages

Lightning bolt symbols AMP compliant

Accelerated Mobile Pages is an open source project aimed to make news pages load faster on the web. It dictates how the page resources are loaded, primarily Javascript, because JS can be a resource hog that does not allow the rest of the page to load until it finished loading all it’s JS first. This is called render-blocking JS. It also requires knowing the dimensions of your assets so it can take control of your page layout. In other words, it knows the final dimensions of assets in the page, so it won’t half load the content, allow the user to start reading, and then have content “jump” around because it’s still loading content. This is a particularly painful point around ads, because this is what a slow-loading ad does to the user experience. Additionally, users are turning to “ad blockers” to mitigate the poor user experience. The AMP project is finding a solution that benefits not only the user experience, but a better solution for monetized publishers also. The hope of the project is to have content, and ads, load so fast that utilizing a 3rd party ad blocker will be the slower experience, thus eliminating the need for the blocker.

To load fast, there are certain rules a developer must follow when implementing the website. Most of these rules are centered around loading all JS files async, portion-sizing the CSS down to what is needed at just the page level, concentrate on loading above-the-fold content immediately, and limiting CPU usage.

WordPress is adopting the AMP methods so we might see this baked-into core WordPress in the future. Right now there are a couple of plugins available. I downloaded and tried the AMP plugin on this blog and observed what it is doing.

AMP research
Comparing the website with and without the AMP plugin for WordPress.
  • To see the AMP styling, you have to append “/amp” to the end of your URL.
  • It adds the appropriate js framework needed to make the page AMP compliant.
  • It adds “async” to javascript files so they are not render-blocking.
  • It added it’s own CSS to the head of the page, including @font-face definitions for custom fonts
  • It removed the main navigation and sidebar
  • Images are replaced with amp-img so the SRCSET is baked right into the solution.
  • Speed test shows the AMP page scores an 88 for the speed test, while non AMP page scores 32.

You don’t get to choose which version of the page the user sees, that is handled by the Google Cache System.

Plugins are only able to AMP the POSTS, not pages and not the archives.

The key strength of AMP isn’t just that it makes your pages fast, but that it makes your pages fast in a way that can be validated.” So I guess this is the advantage AMP has over using just a CDN to deliver speed.

See that Lightning Bolt?

At first I thought this was a sign of AMP compliant pages, but it is instead a symbol of Facebook’s Instant Articles:

AMP in the wild
AMP in the wild: on Facebook

I clicked it to see what it looks like, and it really was “lightning” fast, and this is what the article looked like:

AMP article found in the wild

This article has 3 sponsored ads in it that I scrolled right on by… but the ads were just as fast as the content delivery so as a user, I really didn’t mind them being there because they did not hinder my experience.  This article also has an embedded video that auto played as I scrolled over it.  I wasn’t too thrilled about the sound coming from my phone (since I was at work) but even the video, sound, and ads never slowed down my browsing experience.

Notice the URL for this ends in .html.

 

Best Employee Page

The group at Wistia has the best employee page I’ve seen. The rollover effect on the employee image shows the person in different poses. It gives life and character to an otherwise boring page of employee pics. Applause.

http://wistia.com/about/yearbook

Then I wondered what it looked like on the phone, and how it acted since there is no “hover” on a phone.  At first I didn’t think the phone version was working correctly because I expected clicking an image would take me to a link, and it didn’t.  I started tapping all around to accidentally find a link to Twitter. Upon going back to the desktop version for a closer look, I see the images contain no links. You have to click the textural link under the name to get a link to Twitter. This is how the designer got around the “no hover” on phone issue.  The tapping of the image on phone cycles through the different poses of the employee, and a deliberate tap on the textural link activates the link. Cycling of the poses only happens at 100% resolution, so if you zoom in on the phone you lose the effect, nothing happens.

This is a good way for video marketer to make use of video footage, without actually playing a video. No need, just put still shots in the hover effect. Looks like because there are 3 hover shots per employee, so the typical :hover is not being used. I am trying to locate the script they used for this. Because.  I’m geeky like that.

 

Best pics of employees
Best pics of employees

Wistia Employee
Wistia Employee