Mobile Usability Issues with GP

Hi @masterhealerwp,

On the mobile friendly, test, View the tested page and go to more info. Can you check if your site’s resources are being loaded by the mobile friendly test?

Hi @fernandoazarcon2,

Is this what you need?

Hi there,

i ran a mobile friendly test here:

https://search.google.com/test/mobile-friendly/result?id=1-UZOBhSS5mKeRuJo1xjaA

When you click View Tested Page, and open the More Info tab you will see:

Page resources – 42/75 couldn’t be loaded

Of those 42 unloaded resources there are a few that are required for the page to render correctly. Eg. stylesheets and javascripts.

Each of those has the Other Error beside them. Which is Googles way of saying it could not allocate the resources required to download them.

This is quite common and you may find the page will validate in a future test when google bot is no so busy.

To minimise this happening you need to optimize your site to ensure the essential resources load first. And google doesn’t waste its resources with redirection errors or crawaling 3rd party resources ( which make up the largest list of missing resources ).

But to cover …. this is not GP related.

Hello @diggeddy

Thank you for the update. I truly appreciate it.

A few things:

a – I hear what you say and this sounds as good news to my ears. Still, why is Google clearly mentioning the issues is a Usability one, clearly pointing to those 2 elmements:
– clickable elements too close together
– Text too small to read

b – You said: To minimise this happening you need to optimize your site to ensure the essential resources load first.
Ok, is there a plugin that can take care of this? What else for a non-developer?

c – I checked my site on an iPphone and I noticed that the breadcrumbs are really stuck to the edge of the phoe as you can see here.
How to improve this that?
(In the past, I remember @yingscarlett providing me help to add this breadcrumbs. Not sure if the display is related to this?)

a. because themes and plugins add styles that do things such as.:

– add padding to links in a menu, so they are the right tap size, and dont sit too close together.
– resize certain text to make it more readable.

hence when google didn’t load those styles it generates those kinds of issues.

If the Screenshot that Google provided in the mobile friendly test looks correct ( which is doesnt ), and you still had those issues reported then you may have some customizations you need to change.

b. theres many to choose from. The main issue you have is all those 3rd party codes, plugins like Perfmatters, WP Rocket or Flying Pages just to name a few may help you with that.

c. i cannot see that being related to this issue but you can add some CSS to give it some padding:

@media(max-width: 1200px) {
    p#breadcrumbs {
        padding-left: 20px;
    }
}

c. So great. Thanks a bunch.

b. I already have LiteSpeed Cache installed. Should it not take care of this?

a. I understand better, thank you for your clear explanation. Always useful. Now, I’m still confused what I could do better to solve the issue?
I don’t think I used any customization on the concerned page (?). I can’t see what could be those clickable and text size issues?

You seem to be quite experience in that domain, understanding how Google think and what to improve to “pass the test”.

b. i have little experience of litespeed cache. You should check with the litespeed developer.

a. google is loading your site without the necessary stylesheets to render the page correctly. If you look at the Screenshot provided in the Mobile Friendly test, then you will see that.

Speak with Litespeed and ask them if they can assist with making sure the critical stylesheet are loaded first on your site.

For further assistance I would recommend you ask on the google search help forum:

https://support.google.com/websearch/community

@diggeddy thank you a lot.

All this makes no sense to me. I don’t think I changed anything on my site other than adding the CSS code you provided above for the breadcrumbs and now the Live Test is all OK for Google.

When you were saying I should make sure “the critical stylesheet are loaded first on your site.” Did you notice for sure it was not the case or was it just a hypothesis of yours? How can I check if this is corrected or not now the Live Test is ok?

Thank you.

If the mobile test says it ok.
And if you visit your site on a mobile device and it looks correct.

Then everything is ok.
And you can resolve this topic.

Hello,

I tried the following code snippet on this page and the padding does not seem to work as it works for another of my site:

@media(max-width: 1200px) {
    p#breadcrumbs {
        padding-left: 20px;
    }
}

Just checked the page, and I don’t see this CSS being added.

How did you add it?

Well, I put it into my CSS like this.

Not seeing it when I check:
https://www.screencast.com/t/gI4yQOAlgWsD

Maybe try clear cache.

• This reply was modified 2 years, 2 months ago by ying.

1 – Can you please check again?

2 – I’m not an expert at all at Cache… but I found there is an option to clear the Cache on the plugin LSCache. I thought it was for my own cache (the one on my browser) but i understand it is the cache on the server, correct?

3 – What do you use to be able to check the CSS of a website as on your screenshot? When I click inspect on Chrome, I can’t see such a clean CSS. It looks like this on my side.

It’s there now, and the CSS has been applied to the front end as well:
https://www.screencast.com/t/oekuOOUK0ph