When using PageSpeed Insights to check website performance, you often see optimization suggestions like “Reduce unused CSS” and “Minify CSS“, especially on websites that have not undergone performance optimization. These two suggestions almost always appear in the report.
Why does this happen? The reason is that the WordPress themes and plugins we use when building websites often come built-in with a large amount of CSS to accommodate a wide range of needs and scenarios. While this design is flexible in terms of functionality, for website performance, it means many CSS rules we don’t actually need will be loaded onto the page, causing the page to load slower, affecting the overall speed of the site, and triggering optimization suggestions from PageSpeed Insights.
How to Reduce Unused CSS?
For site operators who are not tech-savvy, PageSpeed Insights usually gives a simple suggestion: “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. When using multi-functional premium themes, unused CSS is more likely to come from the theme itself rather than plugins.
If you want to fundamentally reduce unused CSS, the most effective way is to clean up redundant CSS in the theme or plugin code. For friends with some technical background, you can refer to the following steps for manual optimization:
- Analyze page-loaded CSS: Use browser developer tools (such as Chrome DevTools) to view the CSS actually used and unused during page loading.
- Simplify and remove useless CSS rules: Based on the analysis results, delete unused CSS code to ensure that only styles relevant to the current page are kept.
- Use tools for automatic optimization: You can use tools such as PurifyCSS or UnCSS, which can help automatically remove unused CSS code.
- Load CSS files on demand: Based on page requirements, adopt the method of loading CSS on demand to reduce unnecessary CSS file loading.
Practical Guide to Reducing Unused CSS
This site has previously published some practical guides on reducing unused CSS. Friends with certain technical abilities can refer to the articles below to try optimizing.
- Use PurgeCSS to Remove Unused CSS from a WordPress Theme
- Load JavaScript Only on Specific WordPress Pages to Improve Performance
To improve website performance, reducing unused CSS is key. While reducing the number of plugins can optimize to some extent, a more effective way is to manually clean up redundant CSS in the theme or plugin code. By using tools or manually removing useless styles and loading CSS on demand, you can significantly improve website loading speed and enhance user experience.
