Accelerated Mobile Pages and WordPress

Everybody knows by now that a website’s speed matters a lot. (In case you don’t, read this: Case study: Mobile pages that are 1 second faster experience up to 27% increase in conversion rate.) Google stays in front of the effort to speed things up, motivating site owners by making page load speed a factor in their search ranking algorithm, most importantly, but also by providing tools and tips for developers, like Page Speed Insights and “mobile friendly” testing — not to mention the performance tools in Chrome’s excellent developer tools.mobile-case-study-conversions

Accelerated Mobile Pages is one of Google’s newest performance-related initiatives (from early October 2015, here’s the launch announcement), promising a systematic rather than a piecemeal improvement in performance by defining and enforcing a rigid structure for the content with constrained embellishment. The open-source initiative is loose in the wild (here and here), though uncommon. and pages built accordingly are expected to show up on Google SERPs in early 2016. Sitepoint has a good overview of the initiative.

Not surprisingly, because they were one of the initial partners in the initiative, Automattic (the guys behind WordPress.com) has already released a first-cut plugin enabling a WordPress site to produce AMP pages. Called “AMP” (on GitHub) simply enough, it lacks options and features but does take care of business, and is far-enough along and well-enough written that a decent developer can start using it now. It’s implemented on this site — you can view this post in AMP format by visiting http://www.steveclason.com/accelerated-mobile-pages-and-wordpress/amp/ [opens in a new tab]. That’s the default look — I haven’t done a thing, though the plugin has plenty of filters to allow some personal expression. Like the RICG responsive image engine, I expect this will roll into the WordPress core before long.

My guess is that this will get a lot of attention once AMP pages start showing up in Google SERPS. Content providers should think about stealing a march on the competition and implementing this soon. It will mostly benefit content providers and won’t affect SEO — or shouldn’t, in theory.

Are We Mobile-Friendly Yet?

Every site I’ve built in the last couple of years incorporates a device-responsive layout using media queries to serve different styles to different device widths. (Except for one, which used device-detection at the client’s insistence, but I don’t like to talk about that one.) I’m not unique — every developer I work with can probably say the same thing.

Making a responsive site costs a little more than a static, fixed-width site, as everyone should know by now, but given the trends in mobile-device usage and search engines’ inclusion of “mobile friendliness” in their ranking algorithms, those of us still building static sites have their heads in the sand.

Google is trying to help yank those heads up (actually, they’re trying to help themselves by improving the quality of their search results, but we can pretend) by providing a simple pass/fail tool to tell you if a site is Mobile Frieldly, here. It’s also avaialable via Webmaster Tools.

Google: “Use Responsive Design!”

Some sites that I work on get more than half their traffic from mobile devices (tech-speak for “smart phones”). Not all of them — some businesses appeal more to a demographic of people looking at a big screen on a desk — but many, and the number will do nothing but increase. For while we’ve known that the mobile era is coming. Now it’s arrived. (To be accurate, it arrived a while back when I was paying attention to other things, but now I’ve noticed it.)

The mobile era won’t change the fact that some 95% of web interactions begin with search and the importance of search presence (SEO, SEM, etc.) won’t diminish along with the use of big screens, so, as we choose strategies for adapting our site designs for different screen sizes we need to check in to see how those strategies will effect our search rankings.

In this article, Google settles the question:

We recommend using responsive web design because it has many good aspects:

  • Using a single URL for a piece of content makes it easier for your users to interact with, share, and link to your content, and a single URL for the content helps Google’s algorithms assign the indexing properties for the content.
  • No redirection is needed for users to get to the device-optimized view, which reduces loading time. Also, user agent-based redirection is error-prone and can degrade your site’s user experience (see “Pitfalls when detecting user agents” section for details).
  • It saves resources for both your site and Google’s crawlers. For responsive web design pages, any Googlebot user agents needs to crawl your pages once, as opposed to crawling multiple times with different user agents, to retrieve your content. This improvement in crawling efficiency can indirectly help Google index more of the site’s contents and keep it appropriately fresh.

So, that’s one thing we don’t need to think about anymore.

Google Changes Mobile-Site Rankings

On June 11, Google announced a change to it’s ranking algorithm to adjust for sites with “misconfigured” mobile redirects. They say —

To improve the search experience for smartphone users and address their pain points, we plan to roll out several ranking changes in the near future that address sites that are misconfigured for smartphone users.

They list two common misconfigurations:

  1. Sites that redirect every desktop page to the mobile home page;
  2. Sites that show content to a desktop UA but an error page to a mobile UA for the same URL.

There’s more and this should matter to some people.

A Fine Responsive Design Demo

Well on it’s way to becoming a trendy buzzword, “Responsive Design” means very different things to different people. An obvious statement, sure, but a designer/developer*, replete from months or years of reading, experimenting, and struggling with the difficulties of implementation has a very different understanding of the term than a busy, harried small-business owner wanting to upgrade their 5-year old brochure-type Website¬† so it looks good on a phone, and the different perspectives will require some effort to consolidate if the developer and the client hope to work to their mutual benefit. .

Brad Frost has come to help.

He has build a sweet, simple responsive demo-site, very useful for showing to a client (the busy, harries, small business owner of the first paragraph) what we developers mean when we say “responsive”, and by extension, to show that “responsive”, at least to a Web-developer, has a more restricted meaning than “works good on a phone.”

The demo is best used (of course in my opinion) with a full-sized browser which you can then gradually shrink to demonstrate the layout changes that occur at different breakpoints.

* I’m not certain there’ such a thing as a designer/developer in the Web domain anymore. Both are hard and require a lot of time to stay sharp, and it’s not easy to see how someone can do both well. I could be discussing my own limitations.