PageSpeed insights Optimization recommendations - reduce unused CSS, shrink CSS

When using PageSpeed Insights to check the performance of a website, it is common to see “Reducing Unused CSS”and“Shrinking CSS”Such optimization recommendations, especially on sites that have not been optimized for performance, are two recommendations that almost always appear in reports.

Why does this happen? The reason is that the WordPress themes and plugins we use to build our websites often have a lot of CSS built in for a wide range of scenarios, which is flexible in terms of functionality, but means that the performance of the site isA lot of CSS that we don't need will be loaded onto the pageThis causes pages to load slower, which affects the overall speed of the site and triggers optimization recommendations from PageSpeed Insights.

How to reduce unused CSS

For site operators who are not technologically savvy, thePageSpeed Insights Often a simple suggestion is given, “Reduce or change the number of WordPress plugins that load unused CSS.” While this method is simple and effective, plugins are often necessary for most websites. And when using a multi-purpose premium theme, the unused CSS is more likely to originate from the theme itself than from plugins.

If you want to radically reduce the amount of unused CSS, the most effective thing you can do is to clean up the theme or plugin code of theRedundant CSS. For those with some technical skills, you can refer to the following steps for manual optimization:

1. Analyzing page loaded CSS: Use browser developer tools such as Chrome DevTools to see what CSS is actually being used and what is not being used when the page loads.
2. Streamlining and eliminating useless CSS rules: Based on the results of the analysis, remove unused CSS code from the page, ensuring that only styles relevant to the current page remain.
3. Automated optimization using tools: You can use tools such as PurifyCSS or UnCSS, which help to automatically weed out unused CSS code.
4. Load CSS files on demand: Adopt on-demand CSS loading to minimize unnecessary CSS file loading according to the page requirements.

A Hands-On Guide to Reducing Unused CSS

This site has previously published some practical guidance on reducing unused CSS, there is a certain technical ability of friends can refer to the following article to try to optimize it.

Use Purgecss to remove unused CSS from your WordPress theme to reduce CSS file size.

This article describes how to use the Purgecss tool to remove unused CSS styles in WordPress themes to reduce CSS file size and optimize front-end performance. Through the Gulp configuration and sample code , a detailed explanation of the installation , use and considerations of Purgecss , including the handling of dynamically generated CSS classes and with the Tailwind CSS framework . Suitable for developers with some experience using Gulp.

Anti-Registration of JavaScript and CSS files in WordPress themes or plugins

This article describes how to deregister JavaScript and CSS files loaded by plugins in WordPress to reduce unnecessary HTTP requests and optimize site performance. By using the wp_deregister_script and wp_deregister_style functions, developers can remove redundant resource files from plugins to improve page load speed and avoid conflicts with theme code. The article also provides specific code examples to help developers quickly implement this optimization measure.

WooCommerce Load Front-End Resources on Demand Increase Page Open Speed

This article describes how to improve page opening speed by loading WooCommerce front-end resources on-demand.WooCommerce's default CSS loading method may lead to unnecessary resource loading and affect performance. The article provides specific code examples to show how to optimize website performance by loading specific CSS files according to different page types (e.g. product list page, shopping cart page, checkout page, etc.). It is suitable for users who need to do WooCommerce custom development for reference.

Optimize page performance by loading JavaScript on-demand only on specific WordPress pages

This article describes how to load JavaScript on demand in WordPress only on specific pages to optimize page performance and reduce server overhead. Through the use of wp_enqueue_script () function and conditional judgment , you can flexibly control the loading of scripts to avoid unnecessary waste of resources . Suitable for WordPress developers who need to optimize page loading speed reference.

To improve site performance, reducing unused CSS is key. While reducing the number of plugins can be optimized to some extent, a more effective way is to manually clean up redundant CSS in the theme or plugin code. eliminating useless styles and loading CSS on demand, either through tools or manually, can significantlyImprove website loading speed, improving the user experience.