Home › Forums › Basel support forum › How to remove unused CSS
How to remove unused CSS
- This topic has 6 replies, 3 voices, and was last updated 4 years, 10 months ago by oleg_dmitriev.
-
AuthorPosts
-
February 11, 2020 at 1:18 pm #172776
oleg_dmitrievParticipantHi 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/3pWJhF1thanks!
February 11, 2020 at 3:22 pm #172800
Elise NoromitMemberHello,
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
February 11, 2020 at 5:58 pm #172835
oleg_dmitrievParticipantThank 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.
February 12, 2020 at 7:53 am #172913
Artem TemosKeymasterHello,
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
February 12, 2020 at 9:07 am #172934
oleg_dmitrievParticipantArtem,
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.
February 12, 2020 at 12:32 pm #172987
Artem TemosKeymasterHello,
Thank you for your feature request. We will consider this for our future updates if possible for sure 🙂
Kind Regards
February 12, 2020 at 12:59 pm #172997
oleg_dmitrievParticipantthanks!
-
AuthorPosts
Tagged: basel
- You must be logged in to create new topics. Login / Register