LCP · high impact

Eliminate render-blocking CSS

The browser must download and parse large CSS files before it can paint anything on the screen, causing a blank white screen delay.

Why it matters

Render-blocking resources heavily impact First Contentful Paint (FCP) and Largest Contentful Paint (LCP).

How to fix it in WordPress

  1. Install a performance plugin capable of 'Critical CSS' generation (like WP Rocket or LiteSpeed Cache).
  2. Enable the option to 'Optimize CSS delivery' or 'Load CSS asynchronously'.
  3. Generate the Critical CSS for your site.
  4. Clear your page cache.

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, check 'Optimize CSS delivery'.
  4. 4Choose 'Remove Unused CSS' (preferred) or 'Load CSS asynchronously' (fallback).
  5. 5Save changes and let WP Rocket generate the Critical CSS.

LiteSpeed Cache

  1. 1Go to LiteSpeed Cache → Page Optimization.
  2. 2Navigate to the CSS Settings tab.
  3. 3Turn ON 'CSS Combine' (optional but recommended if not on HTTP/3) and 'Load CSS Asynchronously'.
  4. 4Turn ON 'Generate Critical CSS' in the background.
  5. 5Save changes and purge all.

Perfmatters

  1. 1Go to Settings → Perfmatters.
  2. 2Navigate to the Assets tab.
  3. 3Enable the 'Remove Unused CSS' feature.
  4. 4Set the Used CSS Method to 'File' or 'Inline'.
  5. 5Save changes and clear cache.

How to verify the fix

  • Test the page on PageSpeed Insights again.
  • Verify the 'Eliminate render-blocking resources' audit is passed or significantly reduced.
  • Check your site visually in an incognito window to ensure no layout flashes occur (FOUC).

Be careful

  • Optimizing CSS delivery can sometimes break the layout of your site momentarily during load (FOUC). Test your site carefully after applying.

Find out which of these your site has.

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