FIXED! Mobile Usability Issues on the Google Search Console

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:

mobile usability issues on WordPress

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.

 

Mobile Usability Test 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:

  1. Unresponsive Website
  2. Rendering Block Resources

Unresponsive Websites

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

The main resources that determine the site responsiveness is CSS and probably JavaScript. By default, all external CSS and Javascript are treated as rendering block resources which means the browser won’t render them until CSSOM is constructed.

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.

For this fix, I will focus on WordPress users. For other platforms, the idea is to inline all your CSS and probably JavaScripts to remove the rendering block resources.

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.

  1. Using External Tools

  2. 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 JavaScript Settings:

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.

Hire Me to Fix Mobile Usability Issues on Ur Website (bensonkarue30@gmail.com)

Relate Article:

Learn How to Turn On/Off PHP Error Reporting in the cPanel For all the Pages of Your Website

The post FIXED! Mobile Usability Issues on the Google Search Console appeared first on Hack Smile.

Author: BamDownload