How to Remove Elementor Unused CSS and JavaScript (2026 Guide) | GrowWP
By Akash Vishwakarma · Updated July 19, 2026 · 9 min read

How to Remove Elementor Unused CSS and JavaScript (2026 Guide)

Quick Answer

To remove Elementor unused CSS and JavaScript: first audit your page with Chrome DevTools Coverage tab, then enable Improved CSS Loading and Improved Asset Loading from Elementor's Experiments settings, disable widgets you never use, and finish with a per-page asset optimization plugin like Asset CleanUp or Perfmatters. This combination typically removes 60-85% of unused code without breaking your layout.

Why Unused CSS/JS Slows You Down

Elementor is built to support hundreds of widgets, animations, and layout options. To make every one of them available instantly, it loads a shared set of CSS and JavaScript files across your site — including styles and scripts for widgets you have never even dragged onto a page. On a typical landing page, this can mean 40-70% of the loaded code is never actually applied to anything visible.

Search engines and browsers measure this directly. Google PageSpeed Insights and Lighthouse both flag "Reduce unused CSS" and "Reduce unused JavaScript" as opportunities, and they tie into real ranking-relevant metrics like Largest Contentful Paint (LCP) and Total Blocking Time (TBT). Fixing this is one of the highest-leverage speed changes you can make on an Elementor site.

Step 1: Audit Your Page First

Before removing anything, confirm exactly how much unused code exists and where it's coming from.

Using Chrome DevTools

  • Open your page, press Ctrl+Shift+I (or Cmd+Option+I on Mac)
  • Go to the More Tools → Coverage panel
  • Click the reload icon to record coverage
  • Review each CSS/JS file — red bars show unused bytes

Using PageSpeed Insights

Run your URL through PageSpeed Insights and check the "Reduce unused CSS" and "Reduce unused JavaScript" opportunities — these list the exact files and estimated savings in kilobytes and milliseconds.

Tip: Audit both a text-heavy page and a widget-heavy page separately, since Elementor loads different asset sets depending on which widgets are used on that specific page.

Step 2: Enable Elementor's Improved Asset Loading

Elementor has two built-in experiments designed specifically for this problem.

Elementor Settings Experiments panel with Improved CSS Loading and Improved Asset Loading toggles enabled
Elementor Settings → Experiments panel
  1. Go to Elementor → Settings → Experiments
  2. Set Improved CSS Loading to Active
  3. Set Improved Asset Loading to Active
  4. Save changes, then clear your cache

These two settings tell Elementor to only enqueue the CSS and JS actually required by the widgets present on each specific page, instead of loading a single large shared file everywhere.

After activating, manually check your key pages (homepage, popups, forms) since some older or poorly coded third-party widgets can occasionally lose their styling with this setting on.

Step 3: Disable Widgets You Never Use

Elementor lets you turn off entire widget categories site-wide, which stops their CSS and JS from being registered at all.

  1. Go to Elementor → Settings → Advanced
  2. Under "Widgets", uncheck any widget you have confirmed you don't use anywhere (e.g., Price Table, Testimonial Carousel, Portfolio)
  3. Save changes

Search your existing pages first — you can use Elementor's Navigator, or a quick Ctrl+F in the page export XML — to be certain a widget isn't used before disabling it.

Step 4: Use a Dedicated Asset Optimization Plugin

Asset CleanUp plugin interface showing per-page script and stylesheet disable toggles
Per-page script manager inside an asset optimization plugin

Elementor's own settings handle a large share of the problem, but plugins built for this purpose let you go file-by-file, page-by-page:

  • Asset CleanUp — free, lets you disable specific CSS/JS files per post/page, shows exact file sizes
  • Perfmatters — paid, includes script manager plus broader performance settings (lazy load, DNS prefetch)
  • WP Rocket — paid, combines caching, minification, and unused CSS removal in one tool

Install one, visit a page you audited earlier, and disable the specific files DevTools flagged as unused for that page only — this avoids accidentally breaking other pages that do need those files.

Step 5: Combine With Caching and Minification

Removing unused code and caching solve different problems, so use both together. A caching plugin reduces server response time on repeat visits, while minification shrinks the remaining necessary CSS/JS further by stripping whitespace and comments. Neither replaces the work of actually removing unused code — they simply compound the improvement once the unused code is gone.

Step 6: Test and Validate Your Results

After completing the steps above:

  1. Clear all caching layers (plugin cache, browser cache, CDN cache if used)
  2. Re-run Chrome DevTools Coverage on the same pages
  3. Re-run PageSpeed Insights and compare the new "Reduce unused CSS/JS" figures against your original audit
  4. Manually click through key pages to confirm nothing visually broke
Before: Unused CSS 210KB · Unused JS 340KB · LCP 3.8s
After: Unused CSS 45KB · Unused JS 90KB · LCP 2.1s

Common Mistakes to Avoid

  • Disabling a widget that's actually used on a page you forgot to check
  • Turning on Improved Asset Loading without testing popups, forms, and WooCommerce pages separately
  • Using an aggressive "remove unused CSS" tool that strips styles needed for hover/active states, breaking interactions
  • Not clearing cache before re-testing, resulting in false "no improvement" readings
  • Stacking multiple optimization plugins that conflict with each other's script manager

Frequently Asked Questions

What does "remove unused CSS and JavaScript" mean in Elementor?
It means eliminating the CSS and JavaScript files or code blocks that Elementor loads on a page but that are never actually used by the visible elements on that page, which reduces file size and speeds up loading.
Why does Elementor create so much unused CSS and JS?
Elementor loads a base set of styles and scripts for every widget available in its library, even if you only use a handful of widgets on a page, which results in extra unused code being downloaded.
Does removing unused CSS and JS actually improve PageSpeed score?
Yes, reducing unused CSS and JavaScript directly improves metrics like Largest Contentful Paint and Total Blocking Time, which are core factors in your PageSpeed and Core Web Vitals scores.
Is Elementor's Improved Asset Loading safe to enable?
Yes, it is an official Elementor feature designed for this exact purpose, though you should test your site's layout after activation since some third-party widgets can occasionally break.
Which plugin is best to remove unused CSS and JS on Elementor sites?
Asset CleanUp and Perfmatters are widely used because they let you disable specific scripts and stylesheets per page, while WP Rocket offers a similar feature bundled with caching.
Can I remove unused CSS and JS without a plugin?
Yes, Elementor's built-in Experiments panel lets you enable Improved CSS Loading and Improved Asset Loading without installing any additional plugin.
Will disabling Elementor widgets break my existing pages?
Only disable widgets you have verified are not used anywhere on your site, since disabling an active widget will remove its functionality from pages that rely on it.
How do I check which CSS and JS files are unused on my site?
Open Chrome DevTools, go to the Coverage tab, reload the page, and it will show the exact percentage of unused CSS and JavaScript for every loaded file.
Does removing unused CSS and JS affect SEO rankings?
Indirectly yes, since page speed and Core Web Vitals are ranking factors, and a faster site tends to improve user experience signals that search engines consider.
How often should I re-check for unused CSS and JS on an Elementor site?
It is a good practice to re-check after adding new plugins, widgets, or major page redesigns, since new unused code can accumulate over time.
Is caching enough to fix unused CSS and JS warnings?
No, caching improves repeat load times but does not remove the unused code itself, so it should be combined with asset optimization for the best results.

Conclusion

Removing Elementor's unused CSS and JavaScript is not a single toggle — it's a layered process. Start with an honest audit using Chrome DevTools, switch on Elementor's own Improved Asset Loading experiments, trim widgets you genuinely don't use, and finish with a per-page optimization plugin for the remaining files. Done together, these steps consistently cut unused code by more than half and translate into a measurably faster, better-ranking Elementor site.

Related guides on GrowWP: