Page-agnostic CSS
- CSS
Problem Summary
Page-agnostic CSS means the same large stylesheet is loaded everywhere, even when most of its rules are only needed on a few templates.
Performance Impact
- More render-blocking bytes: CSS blocks rendering until downloaded and parsed
- Slower first paint: Unused rules still cost browser time
- Maintenance drag: Global styles increase accidental overrides
How to Detect
- Chrome Coverage: Check unused CSS per page
- Network tab: Identify large stylesheets loaded on every route
- Template audit: Compare CSS dependencies across page types
Solutions
1. Split CSS by Template
Load shop, blog, landing page, and account styles only where needed.
2. Inline Critical CSS
Keep above-the-fold styles small and defer the rest when appropriate.
3. Disable Plugin Assets Selectively
Dequeuing unused plugin styles can reduce global CSS bloat.
4. Remove Dead Rules
Use coverage reports carefully and verify responsive and state-based styles before deleting.