Skip to content

Commit fc28cea

Browse files
committed
Cross-link Element Timing example
1 parent de7486d commit fc28cea

File tree

1 file changed

+16
-8
lines changed

1 file changed

+16
-8
lines changed

_posts/2023-09-28-the-ultimate-lqip-lcp-technique.md

Lines changed: 16 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -556,16 +556,24 @@ In this particular instance, I bumped the quality up to 10, which came in at
556556

557557
## <ins datetime="2025-09-05">Verifying It Works</ins>
558558

559-
You can use the Element Timing API to verify that your LQIP image(s) are being
560-
loaded and rendered in the intended order:
559+
You can use the [Element Timing
560+
API](/2022/08/measure-what-you-impact-not-what-you-influence/) to verify that
561+
your LQIP image(s) are being loaded and rendered in the intended order:
561562

562-
```js
563-
const observer = new PerformanceObserver((list) => {
564-
list.getEntries().forEach((entry) => {
565-
console.log(entry);
563+
```html
564+
565+
<header elementtiming=masthead>
566+
[…]
567+
</header>
568+
569+
<script>
570+
const observer = new PerformanceObserver((list) => {
571+
list.getEntries().forEach((entry) => {
572+
console.log(entry);
573+
});
566574
});
567-
});
568-
observer.observe({ type: "element", buffered: true });
575+
observer.observe({ type: "element", buffered: true });
576+
</script>
569577
```
570578

571579
This should show you <var>n</var> separate entries for your LQIPs and your full

0 commit comments

Comments
 (0)