frontend_asset_debugger

Project Summary

Frontend Asset Debugger is a Drupal performance analysis module that helps developers identify unnecessary frontend assets, detect duplicate libraries, analyze component-level asset usage, and optimize CSS/JavaScript delivery across Drupal websites.

The module provides deep visibility into Drupal’s asset attachment system, helping teams reduce frontend bloat, improve rendering performance, and optimize Core Web Vitals for Drupal 10 and Drupal 11 websites.

Designed specifically for modern Drupal architectures including Layout Builder and Single Directory Components (SDC), the module offers advanced debugging dashboards, dependency analysis, and actionable optimization recommendations directly within the Drupal admin interface.

Features

Duplicate Asset Detection

• Detect duplicate CSS and JavaScript files
• Identify repeated library attachments
• Highlight redundant dependencies
• Detect duplicate framework loading

Per-Component Asset Analysis

Analyze frontend assets loaded by:

• Single Directory Components (SDC)
• Layout Builder sections
• Blocks
• Paragraphs
• Themes
• Contributed modules

Identify:

• Unused component assets
• Heavy components
• Asset duplication across components
• Conditional loading opportunities

Unused Library Detection

• Detect libraries loaded but not used
• Identify unnecessary third-party assets
• Highlight globally attached libraries
• Detect obsolete frontend dependencies

Render-Blocking Asset Analysis

• Detect render-blocking CSS and JavaScript
• Identify blocking libraries
• Estimate render delay impact
• Provide async/defer recommendations

Asset Dependency Graph

Visualize frontend asset relationships:

• Library dependency chains
• Component-to-asset mapping
• Theme and module dependencies
• Shared asset relationships

Frontend Optimization Dashboard

Interactive dashboard with:

• Total asset metrics
• Duplicate asset reports
• Unused library statistics
• Asset size analysis
• Performance savings estimation
• Render impact tracking

Reports & Exporting

• Export optimization reports
• Track asset trends over time
• Compare scan results
• Generate performance summaries

Use Cases

Frontend Performance Optimization

Reduce unnecessary frontend assets and improve page speed.

Drupal Theme Optimization

Analyze asset loading from custom and contributed themes.

Core Web Vitals Improvements

Improve:

• Largest Contentful Paint (LCP)
• First Contentful Paint (FCP)
• Total Blocking Time (TBT)
• Interaction to Next Paint (INP)

Component-Based Development

Optimize assets used by:

• Single Directory Components (SDC)
• Layout Builder
• Paragraphs
• Reusable frontend components

Enterprise Drupal Platforms

Useful for websites with:

• Large frontend codebases
• Multiple themes
• Design systems
• Heavy JavaScript usage
• Complex component architectures

Benefits

• Reduce frontend payload
• Eliminate duplicate assets
• Improve frontend maintainability
• Optimize asset delivery
• Improve Core Web Vitals
• Enhance frontend debugging visibility
• Simplify performance optimization workflows