Minimizing the size of your CSS files
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.
Please note this setting will remove all the CSS for dynamic content on your site, that is, content generated or
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.
Procedure 4.2. Identifying CSS required for dynamic content
Remove unused CSS then 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 selectfrom 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.
Add these CSS declarations, classes, or any substring of these text to the
Dynamic CSS Selector setting and the plugin
will not remove any CSS that contains these substring.