CSS Usage Analyzer
CSS Usage Analyzer is a Drupal module that helps developers optimize frontend performance by identifying unused CSS, analyzing stylesheet efficiency, and providing recommendations to reduce CSS bloat. It offers detailed insights into CSS usage at various levels, visual reports, and optimization suggestions directly within the Drupal admin interface.
Project Summary
CSS Usage Analyzer is a Drupal performance optimization module that helps developers identify unused CSS, analyze stylesheet efficiency, and improve frontend performance across Drupal websites.
The module provides detailed insights into CSS usage at page, component, and theme levels, enabling teams to reduce CSS bloat, optimize rendering performance, and improve Core Web Vitals metrics such as LCP and FCP.
Designed for modern Drupal 10/11 websites, the module offers developer-friendly debugging tools, visual reports, and optimization recommendations directly within the Drupal admin UI.
Features
Unused CSS Detection
- Detect unused CSS selectors and rules
- Identify dead CSS across pages
- Highlight unused lines and declarations
Per-Page CSS Analysis
Analyze CSS usage for individual pages:
- Used vs unused CSS
- Stylesheet contribution
- Page-level optimization opportunities
- Render impact estimation
Component CSS Dependency Mapping
Visualize CSS usage by:
- Single Directory Components (SDC)
- Layout Builder blocks
- Paragraphs
- Themes
- Modules
Detect:
- Duplicate styles
- Over-shared dependencies
- Component-level CSS bloat
Critical CSS Suggestions
- Above-the-fold CSS detection
- Inline critical CSS suggestions
- Render-blocking CSS analysis
- CSS splitting recommendations
CSS Usage Dashboard
Interactive admin dashboard with:
- CSS size metrics
- Unused CSS percentage
- Optimization savings
- Stylesheet rankings
- Usage trends
Unused CSS Rule Explorer
- Source file
- Line number
- Rule size
- Page impact
- Code preview
Reports & Exporting
- Export optimization reports
- Track CSS usage over time
- Compare scan results
Use Cases
Frontend Optimization
Reduce CSS payload and improve page speed.
Drupal Theme Auditing
Analyze:
- Custom themes
- Admin themes
- Contributed theme libraries
Core Web Vitals Improvements
Improve:
- LCP
- FCP
- CLS indirectly through render optimization
Component-Based Development
Optimize CSS for:
- SDC
- Layout Builder
- Paragraphs
- Reusable components
Enterprise Drupal Platforms
Useful for large websites with:
- Multiple themes
- Design systems
- Heavy frontend assets
Benefits
- Reduce frontend payload
- Improve page performance
- Simplify theme maintenance
- Remove legacy CSS safely
- Improve maintainability
- Enhance user experience