1 | /*
|
2 | * Copyright 2022 Google LLC
|
3 | *
|
4 | * Licensed under the Apache License, Version 2.0 (the "License");
|
5 | * you may not use this file except in compliance with the License.
|
6 | * You may obtain a copy of the License at
|
7 | *
|
8 | * https://www.apache.org/licenses/LICENSE-2.0
|
9 | *
|
10 | * Unless required by applicable law or agreed to in writing, software
|
11 | * distributed under the License is distributed on an "AS IS" BASIS,
|
12 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
13 | * See the License for the specific language governing permissions and
|
14 | * limitations under the License.
|
15 | */
|
16 |
|
17 | import {getLoadState} from '../lib/getLoadState.js';
|
18 | import {getSelector} from '../lib/getSelector.js';
|
19 | import {onCLS as unattributedOnCLS} from '../onCLS.js';
|
20 | import {
|
21 | CLSReportCallback,
|
22 | CLSReportCallbackWithAttribution,
|
23 | CLSMetric,
|
24 | CLSMetricWithAttribution,
|
25 | ReportOpts,
|
26 | } from '../types.js';
|
27 |
|
28 | const getLargestLayoutShiftEntry = (entries: LayoutShift[]) => {
|
29 | return entries.reduce((a, b) => (a && a.value > b.value ? a : b));
|
30 | };
|
31 |
|
32 | const getLargestLayoutShiftSource = (sources: LayoutShiftAttribution[]) => {
|
33 | return sources.find((s) => s.node && s.node.nodeType === 1) || sources[0];
|
34 | };
|
35 |
|
36 | const attributeCLS = (metric: CLSMetric): void => {
|
37 | if (metric.entries.length) {
|
38 | const largestEntry = getLargestLayoutShiftEntry(metric.entries);
|
39 | if (largestEntry && largestEntry.sources && largestEntry.sources.length) {
|
40 | const largestSource = getLargestLayoutShiftSource(largestEntry.sources);
|
41 | if (largestSource) {
|
42 | (metric as CLSMetricWithAttribution).attribution = {
|
43 | largestShiftTarget: getSelector(largestSource.node),
|
44 | largestShiftTime: largestEntry.startTime,
|
45 | largestShiftValue: largestEntry.value,
|
46 | largestShiftSource: largestSource,
|
47 | largestShiftEntry: largestEntry,
|
48 | loadState: getLoadState(largestEntry.startTime),
|
49 | };
|
50 | return;
|
51 | }
|
52 | }
|
53 | }
|
54 | // Set an empty object if no other attribution has been set.
|
55 | (metric as CLSMetricWithAttribution).attribution = {};
|
56 | };
|
57 |
|
58 | /**
|
59 | * Calculates the [CLS](https://web.dev/cls/) value for the current page and
|
60 | * calls the `callback` function once the value is ready to be reported, along
|
61 | * with all `layout-shift` performance entries that were used in the metric
|
62 | * value calculation. The reported value is a `double` (corresponding to a
|
63 | * [layout shift score](https://web.dev/cls/#layout-shift-score)).
|
64 | *
|
65 | * If the `reportAllChanges` configuration option is set to `true`, the
|
66 | * `callback` function will be called as soon as the value is initially
|
67 | * determined as well as any time the value changes throughout the page
|
68 | * lifespan.
|
69 | *
|
70 | * _**Important:** CLS should be continually monitored for changes throughout
|
71 | * the entire lifespan of a page—including if the user returns to the page after
|
72 | * it's been hidden/backgrounded. However, since browsers often [will not fire
|
73 | * additional callbacks once the user has backgrounded a
|
74 | * page](https://developer.chrome.com/blog/page-lifecycle-api/#advice-hidden),
|
75 | * `callback` is always called when the page's visibility state changes to
|
76 | * hidden. As a result, the `callback` function might be called multiple times
|
77 | * during the same page load._
|
78 | */
|
79 | export const onCLS = (
|
80 | onReport: CLSReportCallbackWithAttribution,
|
81 | opts?: ReportOpts
|
82 | ) => {
|
83 | unattributedOnCLS(
|
84 | ((metric: CLSMetric) => {
|
85 | attributeCLS(metric);
|
86 | onReport(metric);
|
87 | }) as CLSReportCallback,
|
88 | opts
|
89 | );
|
90 | };
|