Large Render Blocking Asset
A Large Render Blocking Asset is a performance problem that happens when a large asset causes a delay in displaying the page content. For example, if a page includes a stylesheet, and the browser pauses page rendering until the the entire stylesheet downloads and processes. If that stylesheet is large, the user may see a blank or unstyled screen for a long time. This problem occurs when applications don't split up asset files, load non-essential assets synchronously, or load assets too early.
The detector for this performance issue looks for specific asset (resource) spans with the following criteria:
- The span operation has to be either a:
- The span's
resource.render_blocking_statusdata property should either have a value of
blocking(added by the
7.38.0), or be missing.
- The span's
Encoded Body Sizedata property has to be over
- The First Contentful Paint (FCP) of the transaction must be at least
2seconds (with an upper bound of
10seconds to eliminate outliers).
- The span's duration must be at least
33%of the FCP.
You can configure detector thresholds for large render blocking asset issues in Project Settings > Performance:
You can get additional information about your large render blocking asset problem by looking at four aspects in the "Span Evidence" section:
- Transaction name
- Asset URL
- Effect on FCP
- Effect on total transaction time
View it by going to the Issues page in Sentry, selecting your
Sentry computes the issue
We recommend that you use tools like Chrome's DevTools or Firefox Developer Tools to identify and extract non-critical CSS and JS in your pages. You can learn more about fixing these assets by reading the Chrome Developers post: Eliminate render-blocking resources, and web.dev articles on extracting critical CSS and deferring non-critical CSS.