The Chrome Developer tools (Chrome->Dev tools->Sources->Coverage) shows that there is a large volume of unused CSS code generated by the Theme (around 70% oc the code is not used). Do you have any suggestions how can I remove the unused CSS? https://ibb.co/3pWJhF1
Thank you! I am using the Basel theme settings, and WP Rocket, and I use minification of CSS and JS.
The problem is, there is so much unused CSS, Google Page Speed checker says 1.5 seconds can be gained on the mobile if I remove unused CSS. It is 30% of the page load time, so this is the most important factor.
Your theme is very nice, and you can make it better if you make it Google Page Speed friendly.
Some CSS code is required only if a special setting is used. For example, color scheme light, or color scheme dark. I can choose “light” or “dark” in the configuration. But the problem is, all CSS for “light” and “dark” is loaded anyway, on all pages.
Some other CSS or JS is used only if an element of the Theme, such as full-page gallery, is used on the page. In all other time, it is unused.
If you find a way to generate page-specific CSS, based on the exact setting chosen, this will reduce the amount of unused CSS, and will make your theme faster and even better.
Or you can wait until plugins such as WP Rocket will start removing unused CSS. They are working on this now, it is in the development plan.