LCP · medium impact

Reduce unused CSS rules

WordPress themes and plugins load massive CSS files for every possible feature, even if you are only using a fraction of them on this specific page.

Why it matters

Downloading and parsing dead code wastes browser resources and delays page rendering.

How to fix it in WordPress

  1. Use a performance plugin that can 'Remove Unused CSS' (RUCSS).
  2. Enable the feature to generate page-specific CSS.
  3. If a specific plugin is causing the bloat but isn't needed on this page, use a script manager to disable it here.

Plugin-specific steps

Already using one of these plugins? Follow the exact steps for your setup.

WP Rocket

  1. 1Go to Settings → WP Rocket.
  2. 2Navigate to the File Optimization tab.
  3. 3Under CSS Files, enable 'Remove Unused CSS'.
  4. 4Save changes and wait for the CSS to be generated.

Perfmatters

  1. 1Go to Settings → Perfmatters.
  2. 2Enable 'Remove Unused CSS' under the Assets tab.
  3. 3If specific plugins are loading heavy CSS, go to the 'Script Manager' to disable them on pages where they aren't used.

How to verify the fix

  • Check PageSpeed Insights and confirm the 'Reduce unused CSS' warning is gone.

Be careful

  • Removing unused CSS is an aggressive optimization. Always check your site layout on mobile and desktop after enabling.

Related LCP fixes

Your main image is lazy-loaded (LCP penalty) →Your main image isn't prioritized →LCP image is too heavy →

Find out which of these your site has.

Free scan with real Google data. Exact fixes for your plugins.