Overview
The Broken Style Loads section tracks instances where CSS files fail to load correctly. Since styles control layout, design, and visual consistency, failures here can severely affect how users perceive and interact with your site.
This section helps you understand the volume, impact, and consistency of style-related issues across your application.
Metrics Explained
1. Broken Style Loads (Total)
This metric represents the total number of failed style (CSS) load attempts within the selected time period.
Use this when you want to:
Measure the overall volume of style failures
Detect spikes caused by deployments or asset changes
Identify large-scale issues (e.g. CDN failures, missing stylesheets)
2. Broken Style Loads Rate
This metric shows the percentage of failed style loads out of all style load attempts.
Formula:
Broken Style Loads Rate = (Broken Style Loads / Total Style Loads) × 100
Use this when you want to:
Understand the relative severity of issues
Compare performance across time periods
Evaluate improvements regardless of traffic or asset volume
3. Broken Style Loads (Per Day)
This metric shows the average or total number of broken style loads per day over the selected period.
Use this when you want to:
Identify recurring daily issues
Track consistency and trends over time
Smooth out short-term spikes to reveal ongoing problems
Common Causes of Broken Style Loads
Incorrect or outdated stylesheet URLs
Missing or deleted CSS files
CDN or hosting issues
Network failures or timeouts
Blocked resources (e.g. browser restrictions, extensions)
CORS or permission issues
Build or deployment misconfigurations
How to Use This Section
Monitor all three metrics together
Look for unusual increases in total, rate, or daily values.
Compare rate vs total
High total + low rate → likely increased traffic or asset usage
High rate → real degradation in styling delivery
Use daily metric for pattern recognition
Identify whether issues are persistent or tied to specific events or releases.
Validate after deployments
Style issues often appear after build or asset pipeline changes.
Best Practices
Ensure all CSS files are properly deployed and versioned
Use reliable CDN and hosting infrastructure
Minimize render-blocking issues and optimize loading strategy
Monitor critical styles affecting layout and above-the-fold content
Implement fallback strategies where applicable