Lack of critical CSS
- CSS
Problem Summary
Critical CSS contains styles needed for above-the-fold content. Without extracting and inlining critical CSS, the browser must download and parse all CSS before rendering any content, causing render blocking.
Performance Impact
- Render blocking: Full CSS blocks initial paint
- Delayed first paint: Users see blank screen longer
- Poor LCP scores: Largest content takes longer to appear
- Bad UX: Slow perceived performance
How to Detect
- PageSpeed Insights: Flags “Eliminate render-blocking resources”
- Lighthouse: Shows critical CSS opportunities
- Chrome Coverage Tab: Shows unused CSS
- Criticism tool: Extracts critical CSS
Solutions
1. Manual Critical CSS Extraction
Identify styles for above-fold elements and inline them:
<style> /* Critical CSS only */ header { background: #fff; } .hero { min-height: 100vh; }</style>2. Use WordPress Plugins
WP Rocket, Autoptimize, or Perfmatters can extract critical CSS.
3. Tools for Extraction
- Critical (npm package)
- CriticalCSS CLI
- PurifyCSS
4. Defer Non-Critical CSS
<link rel="preload" href="style.css" as="style" onload="this.onload=null;this.rel='stylesheet'"><noscript><link rel="stylesheet" href="style.css"></noscript>5. Split CSS Files
Create separate files: critical.css and non-critical.css