We live in a truly mobile-first world. Over the years, how people consume content has drastically shifted from desktop to mobile (especially with lockdowns in place). In this episode, we’re going to discuss what it means to be mobile-first and how to optimize for it in 2021.
Links in this episode:
- https://search.google.com/test/mobile-friendly
- https://developers.google.com/speed/pagespeed/insights/
- https://analytics.google.com/analytics/web/provision/
- https://search.google.com/search-console
Episode Notes:
We’ve heard this for a while now from mobile-geddon to mobile-first indexing.
When Did Google Start Focusing On Mobile?
The first time Google, and as a reaction to that, the rest of the world took mobile seriously was all the way back in April 2015, when Google first announced what would later be known as Mobilegeddon.
This first-ever mobile-specific update was a big deal when it happened. It affected mobile searches only, applied to all languages and applied to individual pages, not entire websites. To help website owners prepare, Google launched the mobile-friendly test and mobile usability report in what was then known as Webmaster Tools.
- November 2016 — Mobile-first indexing announced and being tested on some sites.
- March 2018 — Mobile-first indexing being rolled out.
- December 2018 – Over 50% of crawled sites now on mobile-first indexing.
- July 2019 – Mobile-first indexing by default for new sites.
- March 2020 — Over 70% of crawled sites now on Mobile-first indexing. They also announced mobile-first indexing would be used on 100% of sites by September 2020.
- July 2020 – Coronavirus delays 100% mobile-first indexing to March 2021.
- March 2021 – Tentative launch of 100% mobile-first indexing.
Mobile-first Indexing In 2021
Mobile-first indexing means Google will use the mobile version of the content for indexing and ranking.
Since more than 50% of users now access Google Search with a mobile device, Googlebot crawls and indexes most pages with the smartphone agent today and will continue to do it going forward. If you look at your server access logs and search for Googlebot entries you’ll see Nexus 5X and Android 6 mentioned in those log entries, so the way your website looks on that device/OS combination is the version Googlebot is crawling.
Start With A Responsive Design
Responsive web design is one of three mobile configurations you can choose from.
There’s “separate mobile URL”, so if your website is example.com mobile would be something like m.example.com, this is not ideal because the URLs are different, of course, but also you have two sets of template files you need to maintain.
Slightly better option is to have both mobile and desktop served from the same URL, so there are no redirects from one to the other, while serving the page dynamically, based on the device category. You get one HTML document for mobile, another for desktop. This is less confusing for the user, but there’s still the hassle of maintaining two versions of the website.
With responsive web design you avoid that completely, the template files, and the HTML document are the same for each device, and of course everyone visits the same URL. The reason Google recommends this one is because it’s the easiest design pattern to implement and maintain.
But just saying “hey, look at me, I’m responsive” is not enough. Especially if you’re using an off-the-shelf theme, what you’re doing with that is putting all your trust in someone you had a $50 business transaction with. You have to do the work and make sure there are no mobile-specific errors.
Should You Create a Mobile Version of Your Website?
I’d say not really, not in 2021. Maybe if a high percentage of your users are on low-end phones, or feature phones, or if the experience you want to provide on mobile is very different from what you are trying to do on desktop, but that is not extremely likely.
You also need to remember Googlebot will crawl mobile version of your site, so if you have some extra content on the desktop version, and having the same URL is something Google has been recommending for a while now.
Mobile-friendly Test
Before you start using any tools to assess your mobile-friendliness, you should just go ahead and test the website yourself. Grab your phone, go through all the key pages and make sure they look good, load fast, and are easy to use.
And then you can start automating, and there are two very easy ways to do that.
If you have access to Google Search Console for the website you want to check, and it’s been online long enough that Googlebot can do its thing, you can have a look at the Mobile Usability report in Google Search Console. All of your errors will be listed there, and for all the pages that have any issues.
And if the website is new, or not even launched yet, you can run this assessment on individual pages using Google’s Mobile-Friendly Test. You enter an individual URL, or paste source code of a web page and you get the assessment results, with the list of all mobile-specific issues.
What Are Some Mobile-specific Errors?
Things like “text is too small to read”, “clickable elements are too close together”, “content is too wide for the screen”, “viewport not set” and so on. Most of the issues you find here will be fairly easy to fix, but if you don’t take care of them, could lead to a frustrating user experience on mobile. And Google might decide to send searchers elsewhere because of that.
There’s one more thing about the Mobile-Friendly Test. You’ll also see the screenshot of your page, as rendered by Googlebot, so if there are some issues there, like very slow CSS or JavaScript assets that may affect page rendering, the screenshot will be messed up, and that’s something you need to fix. If you click the “Page loading issues” in this report, you’ll see exactly which assets are failing to load, and in some cases the reason why they are failing.
Mobile-first Indexing Best Practices
The first one, and this goes back to mobile configurations and serving the same HTML to all devices is not to leave out the important content on mobile. It’s very common to lazy-load some content on mobile devices, that is a good UX and performance pattern, but be careful about how you do it. If content requires a user action, like a click, so it can load, then Googlebot will not be able to see it. Make sure you lazy-load the content when it enters the viewport, so on scroll, rather than click.
Optimizing Mobile Sites for Speed
I mentioned already how Googlebot tries to render your page, and how it may give up if some assets are too slow – this is an issue you definitely want to avoid. And not just to please the crawlers, but also, and especially real users. Speed matters everywhere, but the attention span on mobile does not even come close to desktop.
You’re sitting at your desk now, focused on the screen in front of you and you’re doing one thing, recording this podcast. And you, the listener are likely doing it on a mobile device, doing something else at the same time. Not shaming, that’s what makes the podcasts so great, just stating the obvious.
So imagine the effect a slow page would have on desktop vs. mobile. Even if mobile is not used “on-the-go”, trying to catch a cab, and doing 5 more things at the same time, mobile is still a device that is often used casually, while sort of actively doing a bunch of other things. Unless it’s on the toilet, that’s mobile kingdom! According to research.
This is where Core Web Vitals and PageSpeed Insights can be very handy, we talked about this in a previous episode, if you want to learn more about Core Web Vitals you should check it out. What you want is to show the important content as soon as possible, make sure the page is interactive as it loads and that your layout is stable during the page load.
That last one can be very frustrating on mobile, so make sure the elements do not jump around by optimizing for Cumulative Layout Shift.
Mobile Usability Vs. Mobile-first
Mobile-first is just an approach. When you’re working on a new website, designing it, planning, developing, whatever… just do the mobile version first, then adapt it so it makes great use of all the extra pixels you get on larger screens.
Mobile usability is simply making sure the page is usable on mobile devices. What usable means will depend on your audience and your content, but if we go back to the Mobile Usability report in Google Search Console, it’s all about fixing the annoying issues that could make using your website annoying.
Apart from appeasing Google and making sure our websites rank, we also know that when a website is not mobile-friendly, it can grossly impact your conversion rate.
Optimizing Mobile Sites for Conversions
Conversion rate on mobile is extremely important. This is the first thing I would check on most CRO projects I work on.
The reason for this is simple – more than half, and in most cases even as high as 3/4s of your traffic is mobile. But mobile conversion rate is almost always lower than desktop conversion rate. And often it is much lower, I’ve seen websites where the mobile conversion rate is 50% of the one on desktop.
Mobile is where you usually have less time to grab their attention, this is why it’s important to show the relevant content early, and in most cases above the fold.
If you have an e-commerce product page, at the very least show product name, price, add to cart button and a nice image. This way it’s obvious what the page is about and what the user is expected to do. Let’s say your price and add to cart are pushed below the fold, it’s not as obvious you’re dealing with a product page.
And I’m not saying above the fold rules, people don’t scroll, none of that, but if it’s not obvious what the page is about, you can be sure some users will drop off just because of that, especially on mobile.
Google Analytics Mobile Users
Any web analytics tool will automatically track mobile and let you segment the data so you can only look at mobile traffic. On top of that you may want to do some event tracking that is mobile-specific, but that will depend on your audience, and your website.
Mobile vs Desktop Performance Scores
We’re talking about Lighthouse scores, something you’d get when testing your page in Chrome, or when you use PageSpeed Insights. Mobile test done with less CPU power and on a no-so-fast mobile network. I think they currently simulate the page load on a Moto G4 with network speed of 1.5 Mbps download and 750 Kbps upload speed.
And this is not quite the experience a user would get on a brand-new device and an ultra-fast connection speed, you still need to optimize for the majority of your users.
So this is why the mobile score is much lower than your desktop score and why having lots of heavy JavaScript and a lot of render-blocking resources will hurt your mobile scores.
Core Web Vitals
This goes back to the mobile-first mentality we discussed earlier. If you design, and then develop your website on desktop, and focus on making the desktop version perform well, by the time you’re done with it, it may be too late to make the mobile perform well, too.
It goes against what we’re all used to doing, but while you’re setting up, or developing your website, using a computer to do it, you actually need to use a mobile device to test what you’re working on. I’ve worked for an agency, and developed many websites for clients, this is not easy, but now it’s necessary.
So instead of using a phone to check if your mobile page “looks OK”, make it a priority to make that mobile page perfect.
Final Thoughts and Recap
Go to your web analytics tool, check the percentage of mobile users. If you weren’t sure mobile was extremely important by now, I hope that will convince you.
- Check your mobile users on Google Analytics
- Check Google’s mobile-friendly test
- Google Search Console
- Pagespeed Insights
If you have any questions about Google’s mobile-first indexing, Search Engine Journal has heaps of great resources about it.
The time to optimize your site for mobile is now.
Don’t forget to subscribe to the No Hacks Marketing Podcast. And if you learned something new today, we would appreciate it if you can leave us a review on your favorite podcast platform.