When you test your WordPress site on Google Search console or on Google mobile friendly, a very annoying problem can happen. The message "resources couldn't be loaded" appears, and sometimes the page is loaded without its CSS. In this post, we will show you how to fix this issue.
This is a serious problem, as Google will consider your page non mobile-friendly, which can hurt your SEO badly. You will also receive periodic emails with these error messages : "clickable elements too close together" and "content wider than screen".
What prevents resources from getting loaded ?
According to Google, this is a normal behaviour caused by the fact that its crawler has a quota per site, or "crawl budget" : it limits the maximum fetching rate for a given site. They explain that it is "not something most publishers have to worry about".
However, it is a problem indeed, as Google's test doesn't load all your page resources, which includes CSS and JS. And if the CSS is missing, the page will be displayed in raw HTML, making the test useless.
If you click on "view tested page" and "more info" in Search Console, you can see how many resources your page has, and how many of them couldn't be loaded. In our example, 16 out of 34 weren't loaded :
As the CSS is part of the missing resources, our page looks like this in Google's point of view :
How to fix it
It appears that the more resources you have on a page, the more likely it is that the test will fail to load the CSS. Most WordPress pages have dozens of resources, but it seems that in order to avoid this issue, you have to reduce them to a maximum of 25 resources. That's a very small number !
Fortunately, there's an easy way to combine most of your CSS and JS together thanks to a WordPress plugin : Autoptimize.
Install it, and make sure the following options are checked in the settings : Aggregate JS-files and Aggregate CSS-files.
Then go to your WordPress page source code : you will see that most (if not all) your CSS files have been combined into a single large file ! And even better, your CSS is now the first element to be loaded when you open the page, just after the HTML.
Return to Google Search Console, and see how many resources are left on your page. If this number is around 25, the problem should be solved, and all your Worpress pages will now be considered mobile-friendly.
If you still have too many resources, check if any CSS or JS scripts were excluded from Autoptimize. Also consider removing any useless script : it can only be good for your site loading time.
Now this problem is fixed, your SEO should get a boost, as well as your overall site speed ! If you have any question, please leave us a reply below, we answer within 24h.