- Remove unused CSS WordPress sites by measuring first. Many WordPress pages load full stylesheets, but use only some of the rules in them.
- Chrome DevTools shows which rules a page uses. Use that report to decide what to remove, then test each page after the change.
- Less CSS means less to download and parse. That is part of WordPress speed optimization, and it must never break the layout.
01Remove unused CSS WordPress sites: find it first
Open the page in Chrome and open DevTools. Start the Coverage report, then load the page again. Coverage records which CSS and JavaScript the page uses during that load.
- Press Command+Option+I on Mac, or Control+Shift+I on Windows, to open DevTools.
- Press Command+Shift+P on Mac, or Control+Shift+P on Windows, and type Show Coverage. Press Enter.
- In the Coverage tab, click the reload button. Wait until the page finishes loading.
02Read the coverage report for each stylesheet
The table lists each file with its total size and the unused part. A large theme or plugin stylesheet with a high share of unused code is the first place to look.
- Click a CSS file. Used lines and unused lines are marked in different colors.
- Read the file name. It shows which theme or plugin loads the stylesheet.
- Repeat the report on each template: home page, article, archive and search.
03Decide what to remove, one template at a time
Do not remove CSS from the whole site in one step. Start with one template. Coverage only sees what loaded, so rules for menus, popups and cookie banners can look unused until you open them.
- Keep the recording running while you open the menu, the popup and the form, then stop it.
- Keep any rule used by a state you opened, even if the first load did not need it.
- Remove one stylesheet or one rule set, then test it as described below.
04Test each change before it goes live
Check the template at the same widths as before: desktop, tablet and phone. Look for buttons that move, icons that disappear and menus that stop opening. Then run the coverage report again to see the result.
05Use plugin options before you edit code
Some plugins load their styles only on the pages that use them, and offer a setting for it. Use that setting first. If you must edit code, do it in a child theme, never in the parent theme, and keep a backup of the original.
06Keep critical CSS for the first screen
Critical CSS holds the rules for the first screen. The browser can paint that part before the full stylesheet arrives. Build it for each template, and check it after each change, because a missing rule shows as a layout jump.
07How Nucleo handles unused CSS on WordPress pages
Nucleo compiles each page to HTML and CSS when you save. The frontend receives the finished files, so the work is done before a visitor arrives.
Nucleo Pro includes the CSS purger, which removes unused rules for a template. The asset audit shows the scripts and styles that each page loads. Asset rules can dequeue, replace or defer them.
The local command nucleo critical builds critical CSS and a coverage report for each template. It is a Node package for developers. The site itself does not need Node.