Why it matters
Render-blocking resources heavily impact First Contentful Paint (FCP) and Largest Contentful Paint (LCP).
How to fix it in WordPress
- Install a performance plugin capable of 'Critical CSS' generation (like WP Rocket or LiteSpeed Cache).
- Enable the option to 'Optimize CSS delivery' or 'Load CSS asynchronously'.
- Generate the Critical CSS for your site.
- Clear your page cache.
Plugin-specific steps
Already using one of these plugins? Follow the exact steps for your setup.
WP Rocket
- 1Go to Settings → WP Rocket.
- 2Navigate to the File Optimization tab.
- 3Under CSS Files, check 'Optimize CSS delivery'.
- 4Choose 'Remove Unused CSS' (preferred) or 'Load CSS asynchronously' (fallback).
- 5Save changes and let WP Rocket generate the Critical CSS.
LiteSpeed Cache
- 1Go to LiteSpeed Cache → Page Optimization.
- 2Navigate to the CSS Settings tab.
- 3Turn ON 'CSS Combine' (optional but recommended if not on HTTP/3) and 'Load CSS Asynchronously'.
- 4Turn ON 'Generate Critical CSS' in the background.
- 5Save changes and purge all.
Perfmatters
- 1Go to Settings → Perfmatters.
- 2Navigate to the Assets tab.
- 3Enable the 'Remove Unused CSS' feature.
- 4Set the Used CSS Method to 'File' or 'Inline'.
- 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.