Reduce Unused CSS

Unused CSS slows down a browser as it must walk the entire DOM in the HTML and check which CSS rules apply to each node. The more unused CSS there are, the more time that a browser might potentially need to spend calculating the styles for each node. Also, a browser must download, parse, and process all external stylesheets that it encounters before it can display, or render, any content to a user's screen.

Due to how dynamic some HTML pages are, it is difficult or not feasible to identify and remove all the unused CSS from the site using an extension like JCH Optimize since the component runs on the server and cannot render the page as in a browser to properly assess it. The component then employs a workaround to ensure unused CSS is not loaded initially to speed up the rendering of the page by the browser. This feature then requires the Optimize CSS Delivery feature to be enabled to inline the critical CSS required to render the section of the page above the fold. The combined CSS is then loaded dynamically using JavaScript only after the user has interacted with the page. Since only the critical CSS is downloaded and rendered, this will significantly speed up the initial render of the page.

This feature can be enabled on The Dashboard in the Advanced Features section.

Reduce Unused CSS
Reduce Unused CSS

Enabling this feature here will automatically enable the Optimize CSS Delivery feature and disabling the Optimize CSS Delivery feature will automatically disable the Reduce Unused CSS feature.