The duplicate CSS remover is part of the 📐 Style.Tools browser widget (see introduction).
The duplicate CSS remover is a PostCSS (CSS parser) based solution that enables to remove CSS code from a stylesheet that is present in one or more other stylesheets.
An example usage case would be to create a
global.css file that is loaded on all pages with additional files that contain the CSS code specific to a page, e.g.
product.css for product pages.
product.css without CSS code already present in
global.css, you may start with
total.css (all CSS of a design), use the unused CSS remover to reduce it to the CSS essential for the product page and then remove the CSS code that is already present in
global.css using the duplicate CSS remover.
The result is a
product.css file that can be loaded together with
global.css for a complete coverage of product pages with the absolute minimum CSS required.
The duplicate CSS remover enables to resolve the Google Lighthouse
Defer unused CSS pentalty on the basis of pure minimum CSS.
Note: The async CSS loader enables to resolve the performance penalty for larger (non-optimized) stylesheets. For example, it could resolve the penalty while using
total.cssby using an efficient load strategy and optimal Critical CSS.
For best performance, reducing the CSS for any page to the minimum required provides the best result. 📐 Style.Tools makes it possible.
You can conditionally load stylesheets using one of the CMS Connectors. It enables to specifically define what stylesheets to load, and how to load them, for any given page or area on a website.
The following example shows a custom PHP CMS that uses a PHP method to determine that a page is a product page, for which then a unique Async Loading configuration is applied. (the same for loading Critical CSS).