Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Appearance settings

Commit d5c2ef7

Browse filesBrowse files
nucliwebnucliweb
authored
Merge pull request #39 from JMPerez/prettier
Pass snippets through Prettier to unify code styling, and minor changes in text
2 parents 2dd20ca + a9a6266 commit d5c2ef7
Copy full SHA for d5c2ef7

22 files changed

+977
-648
lines changed

‎pages/CoreWebVitals/CLS.mdx

Copy file name to clipboardExpand all lines: pages/CoreWebVitals/CLS.mdx
+15-17Lines changed: 15 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -5,25 +5,23 @@ This script displays the CLS value when the focus of the browser is switched to
55
#### Snippet
66

77
```js copy
8-
let cumulativeLayoutShiftScore = 0;
9-
const observer = new PerformanceObserver((list) => {
10-
for (const entry of list.getEntries()) {
11-
if (!entry.hadRecentInput) {
12-
cumulativeLayoutShiftScore += entry.value;
13-
}
8+
let cumulativeLayoutShiftScore = 0;
9+
const observer = new PerformanceObserver((list) => {
10+
for (const entry of list.getEntries()) {
11+
if (!entry.hadRecentInput) {
12+
cumulativeLayoutShiftScore += entry.value;
1413
}
15-
});
14+
}
15+
});
1616

17-
observer.observe({ type: "layout-shift", buffered: true });
17+
observer.observe({ type: "layout-shift", buffered: true });
1818

19-
document.addEventListener("visibilitychange", () => {
20-
if (document.visibilityState === "hidden") {
21-
observer.takeRecords();
22-
observer.disconnect();
19+
document.addEventListener("visibilitychange", () => {
20+
if (document.visibilityState === "hidden") {
21+
observer.takeRecords();
22+
observer.disconnect();
2323

24-
console.log(`CLS: ${cumulativeLayoutShiftScore}`);
25-
}
26-
});
24+
console.log(`CLS: ${cumulativeLayoutShiftScore}`);
25+
}
26+
});
2727
```
28-
29-

‎pages/CoreWebVitals/LCP-Image-Entropy.mdx

Copy file name to clipboardExpand all lines: pages/CoreWebVitals/LCP-Image-Entropy.mdx
+3-3Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22

33
Context: [Largest Contentful Paint change in Chrome 112 to ignore low-entropy images](https://chromium.googlesource.com/chromium/src/+/refs/heads/main/docs/speed/metrics_changelog/2023_04_lcp.md)
44

5-
This snippet is based on and with the permission [Stoyan Stefanov](https://twitter.com/stoyanstefanov), read his post [here](https://www.phpied.com/quick-bpp-image-entropy-check/).
5+
This snippet is based on and with the permission of [Stoyan Stefanov](https://twitter.com/stoyanstefanov), read his post [here](https://www.phpied.com/quick-bpp-image-entropy-check/).
66

77
With the script you can get a list of the BPP of all(1) images loaded on the site.
88

@@ -14,13 +14,13 @@ With the script you can get a list of the BPP of all(1) images loaded on the sit
1414
console.table(
1515
[...document.images]
1616
.filter(
17-
(img) => img.currentSrc != "" && !img.currentSrc.includes("data:image")
17+
(img) => img.currentSrc != "" && !img.currentSrc.includes("data:image"),
1818
)
1919
.map((img) => [
2020
img.currentSrc,
2121
(performance.getEntriesByName(img.currentSrc)[0]?.encodedBodySize * 8) /
2222
(img.width * img.height),
2323
])
24-
.filter((img) => img[1] !== 0)
24+
.filter((img) => img[1] !== 0),
2525
);
2626
```

‎pages/CoreWebVitals/LCP-Sub-Parts.mdx

Copy file name to clipboard
+18-20Lines changed: 18 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,37 +1,37 @@
11
### Largest Contentful Paint Sub-Parts (LCP)
22

3-
This script it's part of the [Web Vitals Chrome Extension](https://chrome.google.com/webstore/detail/web-vitals/ahfhijdlegdabablpippeagghigmibma) and appear on the [Optimize Largest Contentful Paint](https://web.dev/i18n/en/optimize-lcp/) post.
3+
This script is part of the [Web Vitals Chrome Extension](https://chrome.google.com/webstore/detail/web-vitals/ahfhijdlegdabablpippeagghigmibma) and appear on the [Optimize Largest Contentful Paint](https://web.dev/i18n/en/optimize-lcp/) post.
44

55

6-
#### Snippet
6+
#### Snippet
77

88
```js copy
99
const LCP_SUB_PARTS = [
10-
'Time to first byte',
11-
'Resource load delay',
12-
'Resource load time',
13-
'Element render delay',
10+
"Time to first byte",
11+
"Resource load delay",
12+
"Resource load time",
13+
"Element render delay",
1414
];
1515

1616
new PerformanceObserver((list) => {
1717
const lcpEntry = list.getEntries().at(-1);
18-
const navEntry = performance.getEntriesByType('navigation')[0];
18+
const navEntry = performance.getEntriesByType("navigation")[0];
1919
const lcpResEntry = performance
20-
.getEntriesByType('resource')
20+
.getEntriesByType("resource")
2121
.filter((e) => e.name === lcpEntry.url)[0];
2222

2323
const ttfb = navEntry.responseStart;
2424
const lcpRequestStart = Math.max(
2525
ttfb,
26-
lcpResEntry ? lcpResEntry.requestStart || lcpResEntry.startTime : 0
26+
lcpResEntry ? lcpResEntry.requestStart || lcpResEntry.startTime : 0,
2727
);
2828
const lcpResponseEnd = Math.max(
2929
lcpRequestStart,
30-
lcpResEntry ? lcpResEntry.responseEnd : 0
30+
lcpResEntry ? lcpResEntry.responseEnd : 0,
3131
);
3232
const lcpRenderTime = Math.max(
3333
lcpResponseEnd,
34-
lcpEntry ? lcpEntry.startTime : 0
34+
lcpEntry ? lcpEntry.startTime : 0,
3535
);
3636

3737
LCP_SUB_PARTS.forEach((part) => performance.clearMeasures(part));
@@ -56,18 +56,16 @@ new PerformanceObserver((list) => {
5656
];
5757

5858
// Log helpful debug information to the console.
59-
console.log('LCP value: ', lcpRenderTime);
60-
console.log('LCP element: ', lcpEntry.element, lcpEntry?.url);
59+
console.log("LCP value: ", lcpRenderTime);
60+
console.log("LCP element: ", lcpEntry.element, lcpEntry?.url);
6161
console.table(
6262
lcpSubPartMeasures.map((measure) => ({
63-
'LCP sub-part': measure.name,
64-
'Time (ms)': measure.duration,
65-
'% of LCP': `${
63+
"LCP sub-part": measure.name,
64+
"Time (ms)": measure.duration,
65+
"% of LCP": `${
6666
Math.round((1000 * measure.duration) / lcpRenderTime) / 10
6767
}%`,
68-
}))
68+
})),
6969
);
70-
}).observe({type: 'largest-contentful-paint', buffered: true});
70+
}).observe({ type: "largest-contentful-paint", buffered: true });
7171
```
72-
73-

‎pages/CoreWebVitals/LCP.mdx

Copy file name to clipboardExpand all lines: pages/CoreWebVitals/LCP.mdx
+4-4Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
11
# Largest Contentful Paint (LCP)
22

3-
The next scripts show information about the [LCP](https://web.dev/lcp) metric.
3+
The next scripts shows information about the [LCP](https://web.dev/lcp) metric.
44

5-
> You can use it in the browser console or as snippet in the Chrome DevTools Source tab, take a look to the [Introduction](/introduction/) section.
5+
> You can use it in the browser console or as a snippet in the Chrome DevTools Source tab, take a look at the [Introduction](/introduction/) section.
66
77
## Get the LCP element
88

9-
List the Largest Contentful Paint in the console and add a green dotted line in the LCP element.
9+
List the Largest Contentful Paint in the console and add a green dotted line around the LCP element.
1010

1111
#### Snippet
1212

@@ -19,7 +19,7 @@ const po = new PerformanceObserver((list) => {
1919
entries.forEach((item, i) => {
2020
console.dir(item);
2121
console.log(
22-
`${i + 1} current LCP item : ${item.element}: ${item.startTime}`
22+
`${i + 1} current LCP item : ${item.element}: ${item.startTime}`,
2323
);
2424
item.element ? (item.element.style = "border: 5px dotted lime;") : "";
2525
});

‎pages/Interaction/Interactions.mdx

Copy file name to clipboardExpand all lines: pages/Interaction/Interactions.mdx
+48-31Lines changed: 48 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -1,75 +1,92 @@
11
# Interactions
22

3-
This script it's part of the [Web Vitals Chrome Extension](https://chrome.google.com/webstore/detail/web-vitals/ahfhijdlegdabablpippeagghigmibma) and allows you to track all interactions as you click around the page to help improve INP.
3+
This script is part of the [Web Vitals Chrome Extension](https://chrome.google.com/webstore/detail/web-vitals/ahfhijdlegdabablpippeagghigmibma) and allows you to track all interactions as you click around the page to help improve INP.
44

55

66
#### Snippet
77

88
```js copy
9-
const valueToRating = (score) => score <= 200 ? 'good' : score <= 500 ? 'needs-improvement' : 'poor';
9+
const valueToRating = (score) =>
10+
score <= 200 ? "good" : score <= 500 ? "needs-improvement" : "poor";
1011

11-
const COLOR_GOOD = '#0CCE6A';
12-
const COLOR_NEEDS_IMPROVEMENT = '#FFA400';
13-
const COLOR_POOR = '#FF4E42';
12+
const COLOR_GOOD = "#0CCE6A";
13+
const COLOR_NEEDS_IMPROVEMENT = "#FFA400";
14+
const COLOR_POOR = "#FF4E42";
1415
const RATING_COLORS = {
15-
'good': COLOR_GOOD,
16-
'needs-improvement': COLOR_NEEDS_IMPROVEMENT,
17-
'poor': COLOR_POOR
16+
good: COLOR_GOOD,
17+
"needs-improvement": COLOR_NEEDS_IMPROVEMENT,
18+
poor: COLOR_POOR,
1819
};
1920

2021
const observer = new PerformanceObserver((list) => {
2122
const interactions = {};
2223

23-
for (const entry of list.getEntries().filter((entry) => !entry.interactionId)) {
24+
for (const entry of list
25+
.getEntries()
26+
.filter((entry) => !entry.interactionId)) {
2427
interactions[entry.interactionId] = interactions[entry.interactionId] || [];
2528
interactions[entry.interactionId].push(entry);
2629
}
2730

2831
// Will report as a single interaction even if parts are in separate frames.
2932
// Consider splitting by animation frame.
3033
for (const interaction of Object.values(interactions)) {
31-
const entry = interaction.reduce((prev, curr) => prev.duration >= curr.duration ? prev : curr);
34+
const entry = interaction.reduce((prev, curr) =>
35+
prev.duration >= curr.duration ? prev : curr,
36+
);
3237
const value = entry.duration;
3338
const rating = valueToRating(value);
3439

3540
const formattedValue = `${value.toFixed(0)} ms`;
3641
console.groupCollapsed(
3742
`Interaction tracking snippet %c${formattedValue} (${rating})`,
38-
`color: ${RATING_COLORS[rating] || 'inherit'}`
43+
`color: ${RATING_COLORS[rating] || "inherit"}`,
3944
);
40-
console.log('Interaction target:', entry.target);
45+
console.log("Interaction target:", entry.target);
4146

4247
for (let entry of interaction) {
43-
console.log(`Interaction event type: %c${entry.name}`, 'font-family: monospace');
48+
console.log(
49+
`Interaction event type: %c${entry.name}`,
50+
"font-family: monospace",
51+
);
4452

4553
// RenderTime is an estimate, because duration is rounded, and may get rounded down.
4654
// In rare cases it can be less than processingEnd and that breaks performance.measure().
4755
// Lets make sure its at least 4ms in those cases so you can just barely see it.
48-
const adjustedPresentationTime = Math.max(entry.processingEnd + 4, entry.startTime + entry.duration);
49-
50-
console.table([{
51-
subPartString: 'Input delay',
52-
'Time (ms)': Math.round(entry.processingStart - entry.startTime, 0),
53-
},
54-
{
55-
subPartString: 'Processing time',
56-
'Time (ms)': Math.round(entry.processingEnd - entry.processingStart, 0),
57-
},
58-
{
59-
subPartString: 'Presentation delay',
60-
'Time (ms)': Math.round(adjustedPresentationTime - entry.processingEnd, 0),
61-
}]);
56+
const adjustedPresentationTime = Math.max(
57+
entry.processingEnd + 4,
58+
entry.startTime + entry.duration,
59+
);
60+
61+
console.table([
62+
{
63+
subPartString: "Input delay",
64+
"Time (ms)": Math.round(entry.processingStart - entry.startTime, 0),
65+
},
66+
{
67+
subPartString: "Processing time",
68+
"Time (ms)": Math.round(
69+
entry.processingEnd - entry.processingStart,
70+
0,
71+
),
72+
},
73+
{
74+
subPartString: "Presentation delay",
75+
"Time (ms)": Math.round(
76+
adjustedPresentationTime - entry.processingEnd,
77+
0,
78+
),
79+
},
80+
]);
6281
}
6382

6483
console.groupEnd();
65-
6684
}
6785
});
6886

6987
observer.observe({
70-
type: 'event',
88+
type: "event",
7189
durationThreshold: 0, // 16 minimum by spec
72-
buffered: true
90+
buffered: true,
7391
});
7492
```
75-

‎pages/Interaction/Layout-Shift-Loading-and-Interaction.mdx

Copy file name to clipboardExpand all lines: pages/Interaction/Layout-Shift-Loading-and-Interaction.mdx
+1-2Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
# Layout Shift Loading and Interaction
1+
# Layout Shift Loading and Interaction
22

33
Print all the CLS metrics during page load and when the user interacts with the page:
44

@@ -9,4 +9,3 @@ new PerformanceObserver((entryList) => {
99
console.log(entryList.getEntries());
1010
}).observe({ type: "layout-shift", buffered: true });
1111
```
12-

0 commit comments

Comments
0 (0)
Morty Proxy This is a proxified and sanitized view of the page, visit original site.