CSS Performance Optimization
Optimize render-blocking CSS to improve page load performance and Lighthouse scores.
Current Issues
Lighthouse Performance Report:
- Render blocking requests: Est savings of 490 ms
- /assets/main.css: 107.3 KiB, 610ms load time
- Blocking initial page render and delaying LCP (Largest Contentful Paint)
Current Setup:
- CSS is not minified (1,682 lines with spaces, newlines, comments)
- Loaded synchronously in
<head> (blocking render)
- No SASS compression configured
- 16 SCSS partial files, some very large (939, 762, 725 lines)
Optimization Tasks
Quick Wins (GitHub Pages Compatible):
Advanced Optimizations:
Critical CSS Split Strategy:
- Critical: variables, colors, typography, core layout, navigation essentials
- Deferred: components, books, search, social, contact-form, responsive enhancements
Expected Impact
SASS Compression Only:
- File size: 107KB → ~45-65KB (40-60% reduction)
- Impact: Moderate improvement
Critical CSS + Async Loading:
- Initial render: ~10-14KB inline CSS (instant, no blocking)
- Deferred load: ~50KB compressed CSS (non-blocking)
- LCP improvement: ~400-500ms faster
- Lighthouse Performance: +10-20 points
Implementation Options
- Easy (5 min): Enable SASS compression only
- Moderate (1-2 hours): Critical CSS inlining + async loading
- Comprehensive (4-6 hours): Full hybrid approach with split partials
Success Criteria
- Reduce render-blocking CSS to under 14KB inline
- Eliminate render-blocking warning from Lighthouse
- Improve LCP metric by 400ms+
- Maintain visual consistency (no flash of unstyled content)
- GitHub Pages compatible (no custom plugins)
Resources
Notes
- Deferred from Phase 7 snagging
- Consider starting with SASS compression for quick win
- Critical CSS requires ongoing maintenance as styles change
CSS Performance Optimization
Optimize render-blocking CSS to improve page load performance and Lighthouse scores.
Current Issues
Lighthouse Performance Report:
Current Setup:
<head>(blocking render)Optimization Tasks
Quick Wins (GitHub Pages Compatible):
_config.ymlAdvanced Optimizations:
_includes/critical.scsswith essential styles (~10-14KB)head.htmlCritical CSS Split Strategy:
Expected Impact
SASS Compression Only:
Critical CSS + Async Loading:
Implementation Options
Success Criteria
Resources
Notes