Remove unused CSS in WordPress

 
  • ES
  • JA
  • RU
  • CN
  • PT
  • DE
  • FR
  • Remove unused CSS in WordPress

    Perfmatters has added a new feature, currently in Beta, in its 1.8.5 release on January 19th to remove unused CSS. I will never tire of recommending this plugin, which has become a must-have if you want to improve the performance of your blog.

    For the 25 dollars a year it offers a powerful tool to which they keep adding improvements.

    I have already tested it on WordPress 5.8 and 5.9-RC and nothing has broken so far. Although I already had the unused CSS very much under control through the Script Manager of this same plugin, just by activating this option you can save at least a couple of requests and some Kb.

    why remove unused CSS?

    Remove unused CSS in WordPress


    The usual warnings in PageSpeed of “Remove unused CSS” or“Reduce unused CSS content” usually appear when CSS loaded by a plugin or template is not needed or not used on a particular page

    Developers normally only queue a stylesheet if it is being used. However, many times additional styles are also added that may not be needed. This results in a lot of unused CSS, which slows down loading

    Occasionally, it can also result in“Remove resources that block rendering” warnings.

    Beyond the placebo of getting a better PageSpeed score, removing unused CSS has a major impact on decreasing the time it takes from when the page starts loading until any part of the page content is rendered on the screen(FCP), the time it takes for the main content of a web page to download and be fully ready for the user(LCP) and the time from when the page starts loading until it is fully interactive(TTI). In short, you know, an important part of the history of the Core Web Vitals.

    how to find unused CSS?

    The easiest way to find unused CSS is to test the URL with PageSpeed. If there is unused CSS, you will see the warning, which will only be triggered if it is above the threshold of what Google considers important enough to warn, so if the perceived loading speed (the actual speed you experience) is good don’t get too hung up on it.

    The other way to find unused CSS is to use Chrome DevTools. Open the inspector in Chrome (Ctrl+Shift-I), press Shitft+Control+P, type “Coverage” and there you will find the unused bytes for both CSS and JS. In red the unused and in blue/green the used.

    Remove unused CSS in WordPress

    From here, and understanding that you recognise each CSS, what it does and whether you can remove or disable it from the page where you are measuring, there are several options, such as replacing certain plugins with other lighter ones, reviewing or considering changing the template, using the Script Manager to selectively disable JS and CSS, etc.

    The easiest way to eliminate PageSpeed warnings is to activate the“Remove unused CSS” function in Perfmatters, which does it all automatically. They claim to have tested it on hundreds of URLs (with different templates and configurations) and report these results:

    Average FCP decrease of 15.20%.
    Average LCP decrease of 19.66%.
    Average TTI decrease of 14.95%.

    However, remember that it is still in Beta phase and the results may not be the desired ones or may even break something, so it is advisable to test it in a staging, even when it comes out of the Beta phase.

    Before activating

    Perfmatters history recommends that, before enabling this option, you remove any existing CSS preloading that has been configured in Perfmatters (excluding the local stylesheets of the google Fonts) and NOT merge the CSS.

    CSS merge is a deprecated optimisation technique since HTTP/2. In some cases, CSS merge can even be detrimental to performance. Again, remember that every page will behave differently depending on its configuration and that it is best to test and observe until you find the best error-free result for your case.

    You should also be aware of possible configurations of other performance or caching plugins you are using that may conflict or be overridden by having the same functions activated.

    La imagen tiene un atributo ALT vacío; su nombre de archivo es remove-unused-css-perfmatters.jpg

    Once activated you will find three options:

    1- Delay (the default and recommended).

    Your used CSS becomes inline and all CSS stylesheets (unused CSS) are delayed and loaded with user interaction.


    2- Async

    Your used CSS becomes inline, and all CSS stylesheets (unused CSS) are loaded asynchronously. This method can help avoid pop-in, as the stylesheets are executed asynchronously while the page loads. This method will result in a slightly higher LCP/FCP than the previous delay behaviour.


    3- Delete

    Your used CSS becomes inline, and all original CSS stylesheets (unused CSS) are deleted. This is the most aggressive method, but is also likely to require adding exceptions. Only recommended for advanced users

    Once enabled, pages and posts will behave differently.

    Pages tend to have a lot of unique CSS, and therefore the CSS used will be generated and inlined separately per page on the first visit.
    However, entries, as they tend to share a lot of CSS, the CSS used will be generated only once, on the first visit, and will become inline. The difference of inputs compared to pages is that the generation of used CSS only takes place once.


    All used CSS generated by Perfmatters will be stored locally in this path:

    /wp-content/cache/perfmatters/yourdomain.com/css/

    Remove unused CSS in WordPress

    This is what the CSS generated by Perfmatters looks like, for pages, posts, categories, tags, searches, the homepage or 404s.

    Remove unused CSS in WordPress

    In the“Excluded Stylesheets” box you can exclude specific stylesheets from the “Remove unused CSS” function by adding the full source URL(whatever.css), or by adding a single part of the source URL. Format: one per line.

    Remove unused CSS in WordPress

    In the following“Excluded Selectors” box you can exclude specific CSS (selectors) from the “Remove unused CSS” function by adding the element id, class name, etc. (#id, .class). Formatting: one per line.

    Remove unused CSS in WordPress

    It is likely that at some point you will need to delete used CSS. For example, after redesigning a page or after adding a new element. To delete the generated CSS and have it recreated after subsequent visits, simply click on the option at the bottom of “Clear Used CSS“.

    Remove unused CSS in WordPress


    You can exclude an individual post, a page or a custom post type from using the Clear Unused CSS function. In the editor, on the right hand side, uncheck“Unused CSS

    This will exclude the entire page and can be useful for, for example, a cart, checkout or contact page that might have more problems than the rest of the site.


    You can also use the perfmatters_remove_unused_css filter to change where unused CSS is removed on your site. This example would disable unused CSS on pages only.

    add_filter(‘perfmatters_remove_unused_css’, function($boolean) {if
    (is_page()) {return
    false;
    }return
    $boolean;
    });

    Perfmatters


    Suscríbete por email para recibir las viñetas y los artículos completos y sin publicidad

    Artículos relacionados