Skip to content

Commit

Permalink
Lcp timing allow origin (#37743)
Browse files Browse the repository at this point in the history
* Update LCP render time docs
* Update Element Timing too
  • Loading branch information
tunetheweb authored Jan 22, 2025
1 parent 5c4720e commit 9070ad7
Show file tree
Hide file tree
Showing 3 changed files with 18 additions and 6 deletions.
8 changes: 6 additions & 2 deletions files/en-us/web/api/largestcontentfulpaint/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -85,9 +85,13 @@ observer.observe({ type: "largest-contentful-paint", buffered: true });

### Cross-origin image render time

For security reasons, the value of the {{domxref("LargestContentfulPaint.renderTime", "renderTime")}} property is `0` if the resource is a cross-origin request. Instead the {{domxref("LargestContentfulPaint.loadTime", "loadTime")}} is exposed. To expose cross-origin render time information, the {{HTTPHeader("Timing-Allow-Origin")}} HTTP response header needs to be set.
For security reasons, the value of the {{domxref("LargestContentfulPaint.renderTime", "renderTime")}} property was originally `0` if the resource is a cross-origin request. Instead the {{domxref("LargestContentfulPaint.loadTime", "loadTime")}} property should be used as a fallback.

For example, to allow `https://developer.mozilla.org` to see `renderTime`, the cross-origin resource should send:
Browsers [may now expose a slightly coarsened render time](https://github.com/w3c/paint-timing/issues/104) in these situations. Check for [browser support](#browser_compatibility).

To expose more accurate cross-origin render-time information, the {{HTTPHeader("Timing-Allow-Origin")}} HTTP response header needs to be set.

For example, to allow `https://developer.mozilla.org` to see an accurate `renderTime`, the cross-origin resource should send:

```http
Timing-Allow-Origin: https://developer.mozilla.org
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -34,9 +34,13 @@ observer.observe({ type: "largest-contentful-paint", buffered: true });

### Cross-origin image render time

For security reasons, the value of the `renderTime` property is `0` if the resource is a cross-origin request. Instead the {{domxref("LargestContentfulPaint.loadTime", "loadTime")}} is exposed. To expose cross-origin render time information, the {{HTTPHeader("Timing-Allow-Origin")}} HTTP response header needs to be set.
For security reasons, the value of the {{domxref("LargestContentfulPaint.renderTime", "renderTime")}} property was originally `0` if the resource is a cross-origin request. Instead the {{domxref("LargestContentfulPaint.loadTime", "loadTime")}} property should be used as a fallback.

For example, to allow `https://developer.mozilla.org` to see `renderTime`, the cross-origin resource should send:
Browsers [may now expose a slightly coarsened render time](https://github.com/w3c/paint-timing/issues/104) in threse situations. Check for [browser support](#browser_compatibility).

To expose more accurate cross-origin render-time information, the {{HTTPHeader("Timing-Allow-Origin")}} HTTP response header needs to be set.

For example, to allow `https://developer.mozilla.org` to see an accurate `renderTime`, the cross-origin resource should send:

```http
Timing-Allow-Origin: https://developer.mozilla.org
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -47,9 +47,13 @@ observer.observe({ type: "element", buffered: true });

### Cross-origin image render time

For security reasons, the value of the `renderTime` property is `0` if the resource is a cross-origin request. To expose cross-origin render time information, the {{HTTPHeader("Timing-Allow-Origin")}} HTTP response header needs to be set.
For security reasons, the value of the `renderTime` property was originally `0` if the resource is a cross-origin request. Instead the `loadTime` property should be used as a fallback.

For example, to allow `https://developer.mozilla.org` to see `renderTime`, the cross-origin resource should send:
Browsers [may now expose a slightly coarsened render time](https://github.com/w3c/paint-timing/issues/104) in these situations. Check for [browser support](#browser_compatibility).

To expose more accurate cross-origin render-time information, the {{HTTPHeader("Timing-Allow-Origin")}} HTTP response header needs to be set.

For example, to allow `https://developer.mozilla.org` to see an accurate `renderTime`, the cross-origin resource should send:

```http
Timing-Allow-Origin: https://developer.mozilla.org
Expand Down

0 comments on commit 9070ad7

Please sign in to comment.