Two of the most common mobile usability alerts raised by Google search console or a Mobile Friendly test are: Text too small to read and Clickable elements too close together. However they are often a false negative and many users find themselves at a loss on how to fix the issue.
The reasons for this are:
- Text is too small to read and or clickable elements are too close together.
- The Site needs optimizing to make it easier for Search Engines to perform a valid test.
- They are a false negative due to crawling and testing of sites when Google server resources are low. See point 2.
Perform a visual check
When you receive an alert the first thing is to check the affected pages on a real mobile device. It is advisable to use an Incognito / Private Browser as this will eliminate you seeing a cached version of the page instead of the latest version. Note: some routers and ISPs also cache pages so you may want to check on a different network. If in doubt ask a friend to check.
My page looks a mess
If your site looks like it is missing styles then these alerts are just symptoms of a bigger issue. It is most likely related to caching or the server not being able to complete the necessary requests resulting in 404 or 500 errors visible in the the browser developer tools console. The first step in diagnosing an issue is to temporarily disable any cache or optimization plugins. Then review the site again.
Text legibility
If you’re finding you need to pinch zoom in order to read the text easily then the odds are your text is too small to conform to legibility guidelines. Whether Google alerted you or not. Increase your font-sizes and line-heights if necessary to remedy that issue. We recommend a minimum body font size of 16px. This ensure elements that are displayed as a % of the body size do not fall below the recommended 12px minimum.
Click elements
You should be able to click an element without your finger tip overlapping a neighbouring clickable element. If thats not the case then look at increasing its size. The size of an element can be controlled by many means. For example a buttons size may be defined by its font size and padding. Social icons may be visually small but you can add more padding to increase the tap target size. Lists of links may need an increased line-height to separate them.
Lighthouse report
If your having difficulty identifying an issue then run a Chrome developer tools Lighthouse report:
https://developers.google.com/web/tools/lighthouse
These two articles will help:
Text too small to read: https://web.dev/font-size/
Clickable elements too close together: https://web.dev/tap-targets/
My site passed all of the tests, so why am i receiving these alerts?
What you see and what Googlebot sees maybe two different things. Correctly displayed sites rely on all of the necessary stylesheets and javascript files to be loaded. Receiving these alerts when your site looks correct means that googles servers were not able to load all of them. There are two main reasons for this:
- Blocked by Robots.txt
- Other error
To find out which ones are the cause run a mobile friendly test:
Click the Page Loading Issues links to see if any Stylesheets or Javascript files are reported.
Blocked by Robots.txt
Edit your robots.txt to ensure the relevant resources including /wp-admin/ are not disallowed. The bottom line is; do not block CSS and JS files.
Most SEO plugins provide tools for editing your robots.txt file or your hosting company should be able to help you access the file via FTP or a server console file editor.
Other Error
This rather ambiguous error simply means Googles server resource limit was exceeded by the number of network requests your site required or the time it took to complete them.
There are lots of factors in how the Google resource limit is calculated when it crawls and fetches your site. But it also varies considerably depending on how busy its servers are at the time.
To eliminate the possibility that Google is extremely busy, take a break and come back later and perform another Mobile Friendly Test. Remember running continuous tests of your site will just place more strain on their servers resources and increase the chances of more failed tests.
Continual mobile usability alerts or Mobile Friendly test Fails
If your site continues to fail its test due to the Other issue than your Site could probably do with some optimization. The better your site performs the less likely it will exceed Googles available resources.
Optimization
We don’t go into depth here on optimization as this is a complex task that varies from site to site. However one of the main issues we see is Sites making a large number of network requests. You can get a quick summary of this by using many of the online testing tools such as GT Metrix.
To put network requests into perspective, a clean install of the GeneratePress theme makes only 3 requests ( in GP 3.0 there will only be 2 ) in addition to the 3 default WordPress requests. The generatepress.com site makes around 36 which considers premium functions, fonts and images.
If your site is making 50 or more requests, we have seen cases of 300+, then you need to reconsider what is important and look at trimming back on those plugins, fonts, images or adverts.