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.
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).
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.
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.
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.
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.
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.
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:
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.
Reliable Acorn will help you create a custom digital marketing strategy that does just that.
Ready to Talk?