I have decided to write a comprehensive article on causes and how to fix mobile usability issues on google search console.
Mobile Usability Issues is a dangerous killer disease that has not only blackmailed bloggers and website owners, but also causes a huge loss of revenue. Once Google detects mobile usability issues on your website, you will be eliminated from SERP.
I was once a victim of this killer disease (Mobile Usability Issues), in fact, I suffered this for almost 6 months before I could figure out how to fix it. There is nothing I did not do trying to return sanity to my website.
Initially, my website was at 250K page views per month with a revenue of not less than 20 euros per day. After mobile usability issues, my website lost all that huge traffic together with the revenue. I tried almost everything. I even changed my theme which did not solve my problem, in fact, the new theme that I installed made things worse.
One thing, even after all these things, I did not lose hope I spent every part of my precious time trying to figure out how to solve these problems.
The following is a screenshot of my website when it was still struggling with mobile usability issues:
My website suffered a huge blow. Now, the worry was, when I tested my website with a live physical mobile device, the website was always responsive. When I used the mobile usability test, some times it could show no errors sometimes It could.
I did not understand how google smartphone bot worked. It took me almost 7 months to understand and fix everything.
My website got fixed the other day. It hasn’t taken a week from the time of writing this post. A huge damage had been made and I know my website is going to take a few months if not days to recover to its normal revenue and traffic.
Following is a screenshot of the mobile usability fix for my website.
Finally, my website’s mobile usability issues got fixed.
Now from my experience, let’s try to understand what caused the mobile usability issues on my website and how to fix them.
Causes of Mobile Usability Issues on Google Search Console
Following are the main causes of Mobile Usability Issues on the Google Search Console:
- Unresponsive Website
- Rendering Block Resources
There a few things that might be causing your mobile usability issues. One, your website is not responsive all together, for this reason, you need to find a fully responsive theme or create a responsive website. I don’t want to dwell so much on unresponsive websites. This article will focus on the websites which are technically responsive but flagged for mobile usability issues.
Rendering Block Resources
Rendering block was the main reason my website had mobile usability issues on the google search console and I am dead sure that, if your website is technically responsive and flagged for mobile usability issues, chances are, rendering block resources such as CSS and JS are causing these issues.
Fix Mobile Usability Issues on Your Website Forever
Now, what does this mean for your website? Since CSS is treated as a rendering block, you need to move it to the client as soon and as quickly as possible to optimize the time to first render.
You don’t need to inline all the CSS, to fix mobile usability issues, you need to understand which CSS is used for rendering the front page. For example in this website, I am using the Astra theme. This theme has a lot of CSS resources but not all of them are used for rendering. There are CSS resources for plugins and probably other things, we don’t want to touch those.
This gives you another hard work, to understand the rending CSS for your blog. To understand the rendering CSS for your website, we’re going to use two methods.
Using External Tools
Using The Manual method, Accessing and understand your theme code.
Using External Tool To get The Rendering CSS for Your Website
If you are not a developer there is a shortcut for you. I don’t advise this route because it might not work for everyone.
To get the rendering CSS for your website, you can use the Critical Path CSS Generator. All you need to do is to paste the URL of your website into the text box provided on their home page. The critical path will do the hard work for you and give you the rending CSS.
The next thing is to inline generated CSS and defer the rendering blocking CSS. What’s the meaning of deferring CSS? If you remember what we said, all external CSS are treated as the rendering block and probably the browser won’t proceed until they are loaded, for this reason, you need to defer them so that the browser can load DOM without them.
For Example, if you use Google Page Speed Insight, you will realize that it will complain that your website has resources that are blocking the page load. This tool is right!
To defer all external CSS, we will use a plugin called Autoptimize. Download and install the plugin. Then make sure all the Autoptimize settings are set as shown in the screenshot below. To access the Autoptimize settings, navigate to your WordPress admin dashboard > Settings > Autoptimize.
for the CSS Make Sure the Settings resembles the ones shown in the screenshot below:
Realize the way we have checked “Inline and Defer CSS?” checkbox. Now here is where the Critical Path CSS Generator comes in. The CSS generated by the Critical part should be pasted here. Then save the settings.
Using the Manual Method to get The Rendering CSS for Your Website
If Critical Path CSS generator did not work for you, then you will need to get the rendering CSS for your website manually. For those using WordPress, you will need to access your theme files and try to understand which CSS are rendering your website.
To get which CSS file is rendering your website, you can move to the functions.php, and access the wp_register_style() function. Then access those CSS codes and copy-paste them to the Autoptimize “Inline and Defer CSS?” section. We’ve talked about and how to use Autoptimize in the above section where we’ve talked about how to get the rendering CSS using external path.
Finally, after deffering your external CSS and inlining the rendering CSS, make sue you delete cache if you are using any caching plugin, then navigate to Google search Console and validate fix for mobile usability issues on your website.
Whether you are using the critical path CSS generator or manual method to get the rendering CSS, you must use Autoptimize plugin to defer other external CSS files as well as in-lining the rendering CSS.
That’s how I solved mobile usability issues on my blog and that’s how I got rid of all mobile usability issues on my website.
In case problems are not solved, you can hire me to fix these issues for your website.