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 |
---|---|
Enabling |
Procedure 4.2. Identifying CSS required for dynamic content
Enable 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 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 Selector
setting and the plugin
will not remove any CSS that contains these substring.