Minimizing the size of your CSS files
When the Remove unused CSS setting is enabled, the plugin will remove all CSS that are not used on the page, significantly reducing the size of the CSS file that is downloaded by the browser. This setting is found in the Optimize CSS Delivery feature rather than as a stand-alone feature because Optimize CSS Delivery needs to be enabled for this to work effectively.
Remove unused CSS setting
Please note this setting will remove all the CSS for dynamic content on your site, that is, content generated or styled using javascript. Use the Dynamic CSS Selector setting to add the CSS declarations that targets dynamic content so the plugin will not remove these CSS. The following procedure will describe how to identify these CSS.
![[Warning]](/media/com_docimport/admonition/warning.png){kind=small} | Warning |
|---|---|
Enabling |
Procedure 4.2. Identifying CSS required for dynamic content
Enable
Remove unused CSSthen view the site, looking for areas on the page that are 'broken' or not styled properly.Using the browser's HTML inspector tool, you can examine the broken element to see what CSS declarations are being applied. In Chrome, you can right-click on the element and select from the context menu to open the HTML Web Inspector.
Disable the setting and load the same page in an adjacent tab to have the elements rendered properly. Inspect the element in the HTML web inspector in the same manner as before. Compare the CSS that is being applied now with the previous tab to identify the ones that are being used that were removed by the plugin.
You can also identify any CSS classes that were added to the HTML DOM with javascript. These are sometimes added when the page is being loaded or in response to some interaction on the page and are usually highlighted in the DOM when added so they're easy to identify.
Add these CSS declarations, classes, or any substring of these text to the
Dynamic CSS Selectorsetting and the plugin will not remove any CSS that contains these substring.