Mobile Usability Error, “Text too small to read” & How to Fix it.

Are you getting mobile usability errors in Google Search Console or GSC such as “Text too small to read”, “Clickable elements too close together“, and “Content wider than screen” all of a sudden? Then you are probably at the right place!

Sometimes these mobile-friendly errors or mobile usability issues are natural and caused by some bad ads alignment and sizes. Sometimes it happens because the CSS or javascript files were not loaded properly or it got blocked by the robots.txt file. But one thing most webmasters don’t know is that Google has a crawl budget for every website that got listed in their index. I will explain them all in this article today!

1. Ads Are Bigger Than Mobile Screen Size

A lot of us webmasters uses ads on our website to monetize or generate revenue from it. But most new webmasters don’t pay much attention to how the ads load on the page. Adnetworks which does not provides flexible or adaptive size ads, which have the fixed width and height can be a problem for mobile devices’ smaller screen sizes and viewports.

This can cause mobile usability errors, the most prominent one is “Content wider than screen“. How can you fix it? I will explain below.

Usage of flexible or adaptive ads

You may use the ads that have a flexible viewport that adapts to the screen size of the device. This is standard practice for modern and big ad networks like Adsense. So obtaining flexible or adaptive size ads may not be an issue for you!

Usage of CSS to make the ads viewport flexible

You can use CSS to make your ads respect the size of the device’s screen/viewport. The CSS should have a max-width value that should be the same as the ad banner’s width. And a normal width that we put “width: 100%” instead of any fixed sizes so that it will fit the screen if the screen size is smaller than the width of the ad. If the screen size is bigger than the width of the ad, the CSS will use the max-width value which is the same as the width of the ad. So it will be fine for every device’s viewport. Height is fine because it is the vertical size of the ad.

You may use the CSS below, you can change the values as per your needs.

.ads_mobile {
    margin: 0px auto 20px auto;    
    max-width: 728px;    
    width: 100%;    
    height: 90px;    
    overflow: hidden;
}

After adding the CSS to your website you may put the ad-code inside the div class of this CSS by using the code below,

<div class="ads_mobile">

<your ad-code>

</div>

That’s all you need to do if the mobile usability error, “content wider than screen” is caused by the ad code.

2. CSS & JS Files Were Blocked From Crawl

A lot of webmaster blocks some pages and files using the robots.txt rules, to get crawled by bots. Those pesky .js and .css files can eat up their “valuable bandwidth” and other resources, right?

Jokes aside, while some robots.txt practices are good but blocking the critical CSS and javascript/js files is certainly not a good idea.

Because in mobile-friendly test Google visits your website using the user-agent Googlebot. If you are blocking the CSS and js files using robots.txt then Googlebot can not load it as well. Hence Google will see your page without CSS or JS. Which kinda looks not so nice and the text becomes too small and too close to each other in the eyes of Google.

How to fix the robots.txt issue for CSS & JS ?

You can fix the robots.txt issue which is blocking CSS and js files to load in the Google Search Console Mobile-Friendly test, by simply removing the “disallow” rules for the critical CSS and JS files in the robots.txt file. You may check other things that can be responsible such as Cloudflare or such.

robots.txt rules for allowing CSS and JS files. Fixing mobile usability error.
robots.txt rules for allowing CSS and JS files

While we are not sure but you can use these robots.txt rules to emphasize the CSS and JS files in your website. So that Googlebot crawl priority for those files can increase. You can use the code below in your robots.txt file.

User-agent: Googlebot
Allow: *.css
Allow: *.woff
Allow: *.woff2
Allow: *.js# global

I have added .woff and .woff2 as well as it is the fonts of our website, you can use the same or change it according to your needs.

3. Google Has A Low Crawl Budget For Your Website

If everything looks and feels fine on your website. Even the mobile-friendly test you do manually from the test tool provided by Google, the results are good and there was not a single issue that indicates anything. But still, you are getting “Text too small to read”, “Content wider than screen”, and “Clickable elements too close together” mobile usability errors in your Google Search Console.

Are you continuously getting those errors and could not find anything to fix the issue right? Well, I have been there too so I’m writing this article so you don’t have to be in the same situation.

Well, as per my little research I have finally found out that this is caused by the simple fact that Google has a limited crawl budget for our websites. Which can be high and low based on the website ranking values, authority, and other metrics.

The mobile usability errors mentioned in this article can be caused by the limited crawl budget of Googlebot. This happens when your page has too many HTTP requests, which is way out of the Googlebot crawl budget for your website. In those HTTP requests, it can include CSS, JS, images, and other important files. So basically when the CSS and js files are not loaded by Googlebot, then you get these mobile usability errors.

How to fix & optimize Google crawl budget?

Fixing Google’s crawl budget errors and optimizing it can be easy or moderately hard based on the type of website you have. If you have WordPress installed on your website then it can be easy to fix it.

In WordPress, you may use some page speed optimization plugins such as wp-rocket, Litespeed cache, pagespeed ninja, wp super cache, etc. These plugins or similar plugins let you combine or inline CSS and javascript files, so the HTTP requests reduce on the page. You can tune and test as per your needs.

The websites using other CMS or scripts may have to look into the docs provided or contact their developer support team to do so. You may do it too if you look into the code yourself.

Making total HTTP requests under 30 is usually a good practice. Lower the HTTP requests your website can make, higher the chances are Googlebot can have no problem crawling your website. Fixing or reducing your HTTP request will surely fix the mobile usability errors in this case. This depends on you and your developer/tech guy on how to reduce it.

Conclusion

If you have already read this post to the bottom then you probably have an idea of the reason why you are getting mobile usability errors in your search console. You probably know how to fix it by now. Give it a try. If this does not work, then you can ask for help in our fastburg forum section. We will be more than happy to help you!

Reference

SourceURL
1. WikipediaClick here to visit
2. Google Developers Search Central Click here to visit
3. IBM Click here to visit

Fastburg Blog
Logo