Render-blocking CSS delays First Contentful Paint—users see a blank screen while waiting for stylesheets to download and parse.
Quick Reference
- Use
<link rel="preload" as="style">with onload handler - Inline critical CSS, defer non-critical styles
- Use media queries to split CSS by viewport/feature
- Modern: Next.js/Vite handle this automatically
Check
Analyze this CSS loading implementation to ensure stylesheets are loaded without blocking the DOM parsing and rendering process.
Fix
Implement non-blocking CSS loading using the preload technique with media attributes and loadCSS polyfill for better performance.
Explain
Explain how non-blocking CSS loading improves page performance by preventing render-blocking resources from delaying the initial paint.
Code Review
Review stylesheets, component styles, and responsive states related to Load CSS without blocking render. Flag exact selectors, declarations, or breakpoints that violate the rule in the rendered UI.
For full implementation details, code examples, and framework-specific guidance,
see references/rule.md.
Rule page: https://frontendchecklist.io/en/rules/css/css-non-blocking