Home Forums Basel support forum How to remove unused CSS

How to remove unused CSS

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #172776

    oleg_dmitriev
    Participant

    Hi Elise,

    Thank you for your good support!

    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

    thanks!

    #172800

    Hello,

    Our theme has the option of Include minified CSS in the Theme Settings > Performance. This option allows minified version of style.css file will be loaded style.min.css

    Besides you can check the cache plugin settings. It is not possible to remove the styles which are not used.

    Best Regards

    #172835

    oleg_dmitriev
    Participant

    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.

    #172913

    Artem Temos
    Keymaster

    Hello,

    If that code is not used on the home page it doesn’t mean that it is never used. It may be useful for other pages and that is why you can’t remove it completely.

    Kind Regards

    #172934

    oleg_dmitriev
    Participant

    Artem,

    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.

    #172987

    Artem Temos
    Keymaster

    Hello,

    Thank you for your feature request. We will consider this for our future updates if possible for sure 🙂

    Kind Regards

    #172997

    oleg_dmitriev
    Participant

    thanks!

Tagged: 

Viewing 7 posts - 1 through 7 (of 7 total)