Code Your Page Downloads but Never Uses
Unused JavaScript and CSS refers to code that a page downloads but never executes or applies. The browser fetches the files, parses them, and — in the case of CSS — holds them in memory for style calculations, all for code that has no effect on the page. Lighthouse reports this as “Reduce unused JavaScript” and “Reduce unused CSS,” and on WordPress sites it is one of the most common audit failures.
The waste is not just bandwidth. Unused CSS is still render-blocking — the browser must download and parse the entire stylesheet before rendering, even if 80% of its rules match nothing on the page. Unused JavaScript still consumes execution time for parsing and compilation, competing for the main thread.
Why WordPress Sites Have So Much Unused Code
Monolithic plugin assets — Plugins ship a single JavaScript or CSS file containing code for all their features. If you use a form plugin’s contact form, you still download the code for its quiz feature, survey feature, and payment integration. The plugin author bundles everything because they do not know which features you use.
Page builder stylesheets — Page builders generate CSS for every widget and layout option they support. A page using three heading elements and a button still loads CSS for accordions, tabs, sliders, countdown timers, and dozens of other elements the builder offers.
Theme frameworks — Multi-purpose themes include styles for every possible layout, color scheme, and component. Most pages use a small fraction of the theme’s full CSS.
Global script loading — WordPress plugins typically load their assets on every page, not just pages where they are needed. This is the same problem described in Plugins Loading Assets on Every Page, but viewed from the output side — the result is code present on the page that has no matching elements or event listeners.
How Much Unused Code Is Typical
Chrome DevTools’ Coverage panel (accessible from the command menu or the Sources panel) shows exactly how much of each file is used. On WordPress sites, it is common to find:
- 60-80% of total CSS bytes are unused on any given page
- 40-60% of total JavaScript bytes are unused on any given page
These are normal numbers for WordPress — not a sign that something is broken, but an indication of how the ecosystem’s modularity creates waste at the page level.
The Difference Between Unused and Unnecessary
Not all “unused” code is safe to remove. CSS rules that apply only on hover, focus, or after JavaScript interaction show as “unused” in static analysis but are needed for the page to function properly. Media query rules for different screen sizes also appear unused at the current viewport width.
Similarly, JavaScript functions that run only in response to user interaction (click handlers, form validation) show as unused during page load. Removing them would break the page when visitors interact with it.
True waste is code for features that do not exist on the page at all — slider styles on a page with no slider, form validation on a page with no form.
Tools That Can Help
Asset CleanUp and Perfmatters let you disable entire plugin stylesheets and scripts on specific pages. This is the safest and most effective approach — preventing a file from loading eliminates all its unused code without risk of breaking functionality.
Autoptimize can combine and minify CSS/JS files, reducing the overhead of multiple requests, though it does not remove unused rules from within those files.
WP Rocket offers a “Remove Unused CSS” feature that generates page-specific CSS containing only the rules each page needs. This is more aggressive and effective but requires careful testing since it must correctly identify which rules are truly unused.
Further Reading
- Reduce Unused JavaScript (Chrome Developers) — How Lighthouse identifies unused JavaScript and what the audit means.
- Reduce Unused CSS Rules (Chrome Developers) — How Lighthouse identifies unused CSS and strategies for reducing it.