diff --git a/files/en-us/web/api/performanceresourcetiming/index.md b/files/en-us/web/api/performanceresourcetiming/index.md index 2421b6c6f2d3fc9..01ed998d59c8860 100644 --- a/files/en-us/web/api/performanceresourcetiming/index.md +++ b/files/en-us/web/api/performanceresourcetiming/index.md @@ -71,6 +71,8 @@ The interface also supports the following properties which are listed in the ord - : A `number` that is the size (in octets) received from the fetch (HTTP or cache) of the _message body_, after removing any applied content-codings. - {{domxref('PerformanceResourceTiming.serverTiming')}} {{ReadOnlyInline}} - : An array of {{domxref("PerformanceServerTiming")}} entries containing server timing metrics. +- {{domxref('PerformanceResourceTiming.renderBlockingStatus')}} {{ReadOnlyInline}} + - : A string representing the render-blocking status. Must be: "`blocking`" or "`non-blocking`". ## Instance methods diff --git a/files/en-us/web/api/performanceresourcetiming/renderblockingstatus/index.md b/files/en-us/web/api/performanceresourcetiming/renderblockingstatus/index.md new file mode 100644 index 000000000000000..cd5bab9ff4bc51f --- /dev/null +++ b/files/en-us/web/api/performanceresourcetiming/renderblockingstatus/index.md @@ -0,0 +1,51 @@ +--- +title: PerformanceResourceTiming.renderBlockingStatus +slug: Web/API/PerformanceResourceTiming/renderBlockingStatus +page-type: web-api-instance-property +tags: + - API + - Property + - Reference + - Web Performance +browser-compat: api.PerformanceResourceTiming.renderBlockingStatus +--- + +{{APIRef("Resource Timing API")}} + +Render-blocking resources are static files, such as fonts, CSS, and JavaScript that block or delay the browser from rendering page content to the screen. +The **`renderBlockingStatus`** read-only property returns the render-blocking nature of the resource. +This eliminates the need to rely on complex heuristics to identify render-blocking resources. + +## Value + +A string containing one of the following values: + +- `"blocking"` + - : The resource might potentially block rendering. +- `"non-blocking"` + - : The resource does not block rendering. + +## Examples + +In the following example, we print out the {{domxref("PerformanceEntry.name","name")}} of resources which are potentially render-blocking. + +```js +function printRenderBlockingResources() { + const entries = performance.getEntriesByType("resource"); + for (const entry of entries) { + if (entry.renderBlockingStatus === "blocking") { + console.log(entry.name); + } + } +} + +printRenderBlockingResources(); +``` + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}}