Overview
The Broken Image Loads section tracks instances where images fail to load properly during a user’s session. These failures can negatively impact visual experience, perceived performance, and overall site quality.
This section provides insights into both the volume and impact of image loading issues, along with the ability to distinguish between what users actually see and what is detected in the background.
Metrics Explained
1. Broken Image Loads (Total)
This metric represents the total number of image load failures within the selected time period.
Use this when you want to:
Measure the overall number of image-related issues
Detect spikes caused by deployments or asset changes
Identify large-scale problems (e.g. CDN outages, missing assets)
2. Broken Image Loads Rate
This metric shows the percentage of broken image loads out of all image load attempts.
Formula:
Broken Image Loads Rate = (Broken Image Loads / Total Image Loads) × 100
Use this when you want to:
Understand the relative severity of the issue
Compare performance across time periods or segments
Evaluate improvements regardless of traffic or image volume
Type Breakdown
1. Visible to Users
Includes only image failures that directly affect the user interface.
These are images that:
Appear in the viewport or user-visible areas
Impact layout, design, or content perception
Why it matters:
This is the most critical subset, as it directly affects user experience and can lead to frustration or reduced trust.
2. All Detected
Includes all image load failures, regardless of whether they are visible to users.
This may include:
Images outside the viewport
Lazy-loaded images that never became visible
Background or hidden assets
Why it matters:
Provides a complete technical picture and helps identify underlying issues that may not yet impact users but could surface later.
Common causes of Broken image loads
Incorrect or outdated image URLs
Missing or deleted assets
CDN or hosting issues
Network failures or timeouts
Permission or access restrictions
Format or decoding errors
Blocked third-party resources
How to Use This Section
Start with “Visible to Users”
Prioritize issues that directly impact user experience.
Compare Total vs Rate
High total + low rate → likely high traffic or many images
High rate → systemic issue affecting image delivery
Use “All Detected” for deeper debugging
Identify hidden or emerging problems before they affect users.
Monitor trends after releases
Spikes often correlate with asset changes or deployment issues.
Best Practices
Ensure all image URLs are valid and up to date
Use reliable CDN and hosting solutions
Implement proper fallback images where possible
Monitor critical user-facing assets closely
Optimize loading strategies (lazy loading, compression, formats)