Remove Unused CSS
Prev Chapter 4. Optimizing Your Site With The Plugin Next

Remove Unused CSS

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 on the Advanced Features tab rather than as a stand-alone feature because Optimize CSS Delivery needs to be enabled for this to work effectively.

Remove unused CSS

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]Warning

Enabling Remove unused CSS WILL break your site and needs further configuration with the Dynamic CSS Selector setting for the page to be rendered properly. Be sure you understand how to identify the CSS required for dynamic content on your site first before using.

Procedure 4.2. Identifying CSS required for dynamic content

  1. Enable Remove unused CSS then view the site, looking for areas on the page that are 'broken' or not styled properly.

  2. 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 Inspect from the context menu to open the HTML Web Inspector.

  3. 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.

  4. 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.

  5. 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.

Prev Up Next
Chapter 4. Optimizing Your Site With The Plugin Home Optimize and Resize Images