FEP-004 recommended Resource Loading
Preload critical CSS
Critical CSS inlined or preloaded to minimize render-blocking resources
Question to ask
"Is CSS blocking your first render right now?"
Verification guide
Severity: Recommended
CSS required for above-the-fold content should load as early as possible. Options include inlining critical CSS, preloading, or ensuring CSS isn't render-blocking.
Check automatically:
- Check for CSS preload tags:
# Preload for stylesheets
curl -sL https://example.com | grep -iE '<link[^>]*rel="preload"[^>]*style|<link[^>]*as="style"'
- Check for inlined critical CSS (better approach):
# Style tags in head before external CSS
curl -sL https://example.com | sed -n '/<head>/,/<\/head>/p' | grep -c '<style'
- Check build config for critical CSS extraction:
# Vite plugin
grep -rE "critical|critters" vite.config.* 2>/dev/null
# Webpack plugin
grep -rE "critical|critters|html-critical-webpack-plugin" webpack.config.* 2>/dev/null
# Next.js (experimental)
grep -rE "optimizeCss|critters" next.config.* 2>/dev/null
# Package.json deps
grep -E "critical|critters" package.json 2>/dev/null
- Check for render-blocking CSS (via PageSpeed API):
curl -s "https://www.googleapis.com/pagespeedonline/v5/runPagespeed?url=https://example.com&category=performance" | jq '[.lighthouseResult.audits["render-blocking-resources"].details.items[] | select(.url | contains(".css"))] | length'
- Check if using async CSS loading pattern:
# media="print" onload pattern for non-critical CSS
curl -sL https://example.com | grep -iE 'media="print".*onload|rel="preload".*as="style"'
Cross-reference with:
- FEP-002 (render-blocking CSS affects FCP/LCP)
- FEP-003 (fonts and CSS both affect first paint)
- CACHE-001 (CSS should be cached, but first load matters most)
Pass criteria:
- Critical CSS inlined in
<head>(ideal), OR - Primary CSS preloaded with
rel="preload", OR - No render-blocking CSS flagged by Lighthouse, OR
- Render-blocking CSS is small (<50KB) and cached
Fail criteria:
- Large external CSS files blocking render (>100KB)
- Multiple render-blocking stylesheets
- No critical CSS strategy for slow connections
Evidence to capture:
- Preload tags found (or absence)
- Whether critical CSS is inlined
- Render-blocking CSS count and size from Lighthouse
- Build tool critical CSS plugin (if configured)