You will find an option to remove unused CSS on Perfmatters, use that with caution, even when your site looks good on Mobile, Tablet, and Desktop.
Check Google Search Console for mobile usability errors or test several of your URLs to make sure the site is still mobile-friendly using this Google Tool
This is why I wrote this post.
Table of Contents
Perfmatters and Mobile Usability Issues
I let the “remove unused CSS feature” handle these two GeneratePress stylesheets
- generatepress/assets/css/main.min.css
- gp-premium/menu-plus/functions/css/offside.min.css
I kinda knew that I shouldn’t optimize those files but I did anyways since everything looked fine after doing so.
Two weeks later after applying those optimizations, I found that half of my URLs were tagged as “not usable”
I started checking the typography settings on Perfmatters, the hero pages, buttons, and footer created with GenerateBlocks but everything looked fine.
I deactivated the unused CSS feature on one page, cleared the cached, tested again, and the mobile usability issues were gone.
So I decided to deactivate the unused CSS feature to make sure I stop getting more of these errors and let Google bots validate that everything is back to normal.
My Bad
I am not pissed off at Perfmatters for two main reasons:
- The GeneratePress support team has said in several support forum threads that the stylesheets load only what’s necessary, so I shouldn’t have included those two GP stylesheets.
- Also, Perfmatters Documentation warns about the possibility of mobile usability issues when removing unused CSS. I should have read the plugin’s documentation or read it thoroughly since I have checked that page several times.
Recommendations
These are some of my recommendations after going through this problem.
- Whatever you do to your site related to speed, design, or security, make sure Google Bot is pleased with it.
- Don’t try to optimize scripts and styles when you don’t have anything or much to gain from doing so.
