What I Learned from Google’s Mobile Sites Certification

It’s been on my to-do list for a while: complete Google’s Mobile Sites certification. No, this does not mean I’m expanding Reliable Acorn into a web development company. My hope: that I can better advise my clients reach their customers. Their (your) customers are on mobile devices, after all.

Why is Mobile so important, anyway?

• More than half of Google’s searches are from mobile devices. If you’re doing SEO but ignoring mobile, you’re loosing half your potential from the start.
• Google is moving to a mobile-first algorithm. Soon Google will evaluate your desktop site based on it’s mobile version.
• Mobile is important no matter the channel with which you’re marketing. Think about how many marketing channels mostly occur on mobile devices… how many times you check your email on your phone, browse Facebook in a meeting, read a blog post in your spare time. Mobile is not just about search marketing.
• Many people are forgoing wifi and using a cell-signal from their homes. With the rise of “unlimited” data plans, some people are simply skipping the in-home internet altogether. If you want to reach these customers, you need a mobile-friendly experience.

How is your site doing, in terms of mobile? Here’s Google’s latest tool to help you out: https://testmysite.thinkwithgoogle.com/intl/en-us (some people think this is the early-warning for Google’s new mobile-first algorithm).

So, what did I learn about mobile sites?

The fastest resource is the resource you don’t send.

This is a mantra that Google kept saying (one way or another) throughout the course. It was even one of the questions on their exam. One of the hardest things to do with mobile site optimization is cutting things that you don’t need.

What do I mean by a “resource”? Anything that needs to be loaded on the page. This might be as simple as an image. It could be more complicated like a dynamic widget or fancy tool.

There are two ways a resource can hurt your mobile site. For one, you have limited space on a mobile device. If you have to include too many things, you’ll distract people from what you want them to do.

The other way a resource can hurt your mobile site is by taking time to load your page. You need to keep you page load time to less than 3 seconds. You need to keep your site below 1 MB 500kb in size (updated for 2018). You should have less than 100 50 different requests from a site. If you’re having a hard time cutting these down, you’re going to have to cut things from your page.

The larger the company, the harder this is. Every department wants something fancy to promote their area. Web developers are caught in this mix. It’s always easier to just keep adding things to a page- that way everyone leaves you alone, sooner.

If you want to improve your mobile site experience, you’re going to have to make some cuts. You might have to make some tough decisions.

What’s the best way to do this? Data. Is a widget actually producing new customers? Are people actually cycling through the images in your hero slider? The more data you have, the better decisions you’ll be able to make. It will also be easier to get rid of unnecessary website features.

So, before you start cutting things away from your site, start measuring their impact. In fact, this is something we should all be doing anyway. If you do only one thing to improve your mobile website measure the effectiveness of your resources. Then you can remove the ineffective ones while providing a better mobile user experience.

Responsive websites are preferred, but not perfect.

Google has been pushing responsive websites for a few years. I’ve been pushing them on my clients, too. While there are several good reasons to do this, they’re not perfect. For instance, because responsive websites load everything from the desktop site, they can be slow. Additionally, it’s hard to implement all mobile usability best-practices on a responsive site. Despite these limitations, the easy to maintain code and quick (read: cheap) build and maintenance costs make responsive sites the best option for most companies.

Best practices for mobile UX are often the best for desktop users, too.

For example, with the limited real estate on mobile sites, you need to make sure and:
put your primary call-to-action in your most prominent place.

• limit what goes into your menus.
• make it easy to return to your homepage
• don’t let your promotions steal your show

Of course, I’d suggest the same things for a desktop site. The problem with desktop sites is that these don’t happen. This is because people think they have the extra space, so they keep adding more. In reality- whether you’re on a desktop site or mobile- less is more effective.

Pick the right image type for what you need.

Images are one of the largest resource you’re loading on your site. While these images can be effective ways to communicate your message, they also slow down your site. Most people will give-up on your site if it takes more than 3 seconds to load. What good are beautiful, clear images if people don’t wait to see them.

There’s a lot of things you can do to improve your images. For one, only use images that are as large as necessary. Second, most images include invisible data that is unnecessary. Do you need to know what kind of camera shot your picture? Remove that information from your images. One of the most effective ways of improving your images is to simply pick the correct image format. Here’s a simple flow-chart to help you pick the right format, for your use.

Thanks to this flow-chart and a couple javascript changes, I was able to improve my own site’s PageSpeed scores. Mind you, I started fairly good (with a 71 Mobile and 87 Desktop score). Now I’m at 77 Mobile and 90 Desktop. It’s not perfect, but I’m happy with this. As an added bonus, according to Google’s new mobile site tool, I no longer lose visitors who come from mobile.

It’s still not time to move to AMP (for most websites)

Google has been pushing AMP for a couple years, now. I’m still not convinced that it’s the best solution for most sites. The fact is, you can accomplish most of the advantages of an AMP site, by using coding best practices such as:

• Remove render-blocking JavaScript and CSS.
• Limit your images to the size you need, and no more.
• Enable caching and compression on all assets.

Anyone who has used Google’s PageSpeed Insights tool has seen these recommendations before. If you’re able to do this without AMP, why bother to develop a separate AMP site? Really, an AMP site is just another way of creating a separate mobile site. As Google’s own characterization states, separate mobile sites are often more difficult to maintain (that means they’re more expensive). They’re also more limited in what they can do.

Perhaps the most important advantage of AMP websites is that it limits what you are able to load on a page. That means, if you want an AMP page, you can only show the most essential resources. Thus AMP is the easiest way to follow the mantra: the fastest resource is the resource you don’t send.

I’m convinced that Google is pushing AMP to help bloated websites decide what’s really important.

What are you big challenges when making mobile optimizations? What’s the most difficult part, technically? Leave your thoughts and questions in the comments below.