Speed up your WordPress: How to defer unused CSS with plugins
Optimizing your WordPress site’s loading speed is crucial for user experience and search engine rankings. One of the most effective ways to do this is by deferring the loading of unused CSS. Essentially, this means loading only the CSS needed for the visible portion of the page (the “above the fold”) first and leaving the rest for later. Fortunately, several WordPress plugins can automate or simplify this process.
This comprehensive guide will introduce you to the best plugins for deferring unused CSS, with step-by-step instructions for the most popular and effective options.
Understanding the Problem: Unused CSS
When a user visits your website, the browser downloads all CSS files, even though many of the style rules apply to elements that aren’t on the current page or that won’t appear until after scrolling. This blocks page rendering, making the visitor wait longer to see the main content. Deferring non-essential CSS solves this performance bottleneck.
The Best Plugins for the Task
Several WordPress optimization plugins offer the ability to defer unused CSS. The ideal choice will depend on your level of technical expertise, your budget, and your website’s specific needs.
| Plugin | Ideal For | Price | Highlights |
| WP Rocket | Beginners and users looking for an easy-to-use all-in-one solution. | Premium | Simple setup, automatic removal of unused CSS with one click. |
| LiteSpeed Cache | Users on LiteSpeed web servers. | Free | Deep server integration for optimized performance, removal of unused CSS. |
| Perfmatters | Intermediate to advanced users who want granular control. | Premium | Lightweight, focused on disabling scripts and styles per page, excellent for “cleaning” the site. |
| Asset CleanUp | Users who want granular control and a robust free option. | Free (with Pro version) | Allows you to disable CSS and JS on specific pages or posts, test mode to avoid breakage. |
| Autoptimize | Users looking for a free and simple solution for file optimization | Free | Focuses on CSS and JS aggregation and minification, with the option to defer CSS. |
Step-by-Step Guide: Deferring CSS with Popular Plugins
1. WP Rocket: The Simplest Solution (Premium)
O WP Rocket é amplamente considerado um dos plugins de otimização mais fáceis de usar. Sua funcionalidade “Remover CSS Não Utilizado” automatiza todo o processo.
Step 1: Install and Activate WP Rocket. Since this is a premium plugin, you’ll need to purchase a license from the official WP Rocket website, download the .zip file, and install it in your WordPress dashboard under Plugins > Add New > Upload Plugin.
Step 2: Enable Unused CSS Removal
In the WordPress menu, go to Settings > WP Rocket.
Click the File Optimization tab.
Scroll down to the CSS Files section and check the Remove Unused CSS box.
WP Rocket may ask for confirmation, as this is a powerful feature. Confirm to activate it.
Save your changes.
WP Rocket will begin processing your site’s pages to generate critical CSS (the CSS needed for the visible portion of the page) and defer the rest. This process may take a few minutes, depending on the size of your site.
Pros:
Extremely easy to set up.
Fully automated.
Excellent support and documentation.
Cons:
It’s a paid plugin.
2. Asset CleanUp: Granular Control with Free Option
Asset CleanUp offers a more manual approach, allowing you to decide exactly which CSS (and JavaScript) files should not be loaded on specific pages.
Step 1: Install and Activate Asset CleanUp. In your WordPress dashboard, go to Plugins > Add New and search for “Asset CleanUp.” Install and activate the plugin.
Step 2: Enable “Test Mode.” To avoid accidentally breaking your site, using “Test Mode” is highly recommended.
Go to Asset CleanUp > Settings.
In the Test Mode tab, enable the “Enable Test Mode” option. This will ensure that changes are applied only to you (the logged-in administrator).
Step 3: Disable Unused CSS per Page
Edit any page or post on your site.
Scroll down until you find the Asset CleanUp box.
You will see a list of all CSS and JavaScript files loaded on that page.
For each file you know isn’t needed on that specific page, you can choose the “Unload this post” option.
After making your selections, refresh the page.
Step 4: Test and Apply Changes Visit the page in an incognito window (or while logged out) to confirm that everything is working as expected. If everything is working as expected, you can disable “Test Mode” so that the optimizations are applied to all visitors.
The Pro version of Asset CleanUp offers more advanced features, such as automatically removing unused CSS, similar to WP Rocket.
Pros:
Robust free version.
Full control over which files are uploaded.
Safe test mode.
Cons:
Requires more technical knowledge to identify which files can be safely disabled.
Can be time-consuming on sites with many pages and plugins.
Autoptimize: Simple and Free Optimization
Autoptimize is a popular plugin that focuses on minifying and aggregating files. It also has a CSS deferral feature.
Step 1: Install and Activate Autoptimize. Go to Plugins > Add New, search for “Autoptimize,” install, and activate it.
Step 2: Configure CSS Optimization
Go to Settings > Autoptimize.
In the CSS Options section, check the “Optimize CSS Code?” box.
To defer CSS, the most effective approach is to use the “Critical CSS” feature. However, the automatic generation of critical CSS in Autoptimize is a paid service. You can generate critical CSS manually using online tools (such as criticalcss.com) and paste the code into the designated area in Autoptimize.
A simpler, but less effective, option for deferral is to check the “Aggregate CSS Files?” option. This will combine your CSS files, but it won’t necessarily defer loading in the most optimal way.
Save your changes and clear your cache.
Pros:
Completely free for basic functionality.
Easy to use for minification and bundling.
Cons:
The automated “Critical CSS” feature is a paid service.
Simply bundling files isn’t as effective as intelligently removing or deferring unused CSS.
Conclusão e Recomendações
Delaying the loading of unused CSS is a fundamental step in optimizing your WordPress site’s speed.
For beginners or those looking for the fastest, most effective, hassle-free solution, WP Rocket is the best choice.
For LiteSpeed server users, the LiteSpeed Cache plugin is unbeatable due to its native integration and free features.
For users who want maximum control and don’t mind more manual work, Asset CleanUp (especially the free version) and Perfmatters are excellent options for “cleaning up” unnecessary code page by page.
Autoptimize is a great free tool for general file optimizations, and its CSS functionality can be a good starting point if you’re on a budget.
Regardless of which plugin you choose, always remember to back up your site before implementing major changes and test your site’s functionality after activation to ensure no visual elements have been broken in the process.