CSS Usage Analyzer

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