Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Report initial CLS value when reportAllChanges is true #283

Merged
merged 1 commit into from
Nov 15, 2022
Merged

Report initial CLS value when reportAllChanges is true #283

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
19 changes: 19 additions & 0 deletions src/lib/doubleRAF.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
/*
* Copyright 2022 Google LLC
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* https://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/

export const doubleRAF = (cb: () => unknown) => {
requestAnimationFrame(() => requestAnimationFrame(() => cb()));
};
38 changes: 21 additions & 17 deletions src/onCLS.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,14 +19,12 @@ import {initMetric} from './lib/initMetric.js';
import {observe} from './lib/observe.js';
import {onHidden} from './lib/onHidden.js';
import {bindReporter} from './lib/bindReporter.js';
import {doubleRAF} from './lib/doubleRAF.js';
import {whenActivated} from './lib/whenActivated.js';
import {onFCP} from './onFCP.js';
import {CLSMetric, CLSReportCallback, ReportOpts} from './types.js';


let isMonitoringFCP = false;
let fcpValue = -1;

/**
* Calculates the [CLS](https://web.dev/cls/) value for the current page and
* calls the `callback` function once the value is ready to be reported, along
Expand Down Expand Up @@ -56,27 +54,19 @@ export const onCLS = (onReport: CLSReportCallback, opts?: ReportOpts) => {
// https://web.dev/cls/#what-is-a-good-cls-score
const thresholds = [0.1, 0.25];

// Start monitoring FCP so we can only report CLS if FCP is also reported.
// Note: this is done to match the current behavior of CrUX.
if (!isMonitoringFCP) {
onFCP((metric) => {
fcpValue = metric.value;
});
isMonitoringFCP = true;
}
let metric = initMetric('CLS');
let report: ReturnType<typeof bindReporter>;

let fcpValue = -1;
let sessionValue = 0;
let sessionEntries: PerformanceEntry[] = [];

const onReportWrapped: CLSReportCallback = (arg) => {
if (fcpValue > -1) {
onReport(arg);
}
};

let metric = initMetric('CLS', 0);
let report: ReturnType<typeof bindReporter>;

let sessionValue = 0;
let sessionEntries: PerformanceEntry[] = [];

// const handleEntries = (entries: Metric['entries']) => {
const handleEntries = (entries: LayoutShift[]) => {
entries.forEach((entry) => {
Expand Down Expand Up @@ -115,6 +105,18 @@ export const onCLS = (onReport: CLSReportCallback, opts?: ReportOpts) => {
report = bindReporter(
onReportWrapped, metric, thresholds, opts!.reportAllChanges);

// Start monitoring FCP so we can only report CLS if FCP is also reported.
// Note: this is done to match the current behavior of CrUX.
// Also, if there have not been any layout shifts when FCP is dispatched,
// call "report" with a zero value
onFCP((fcpMetric) => {
fcpValue = fcpMetric.value;
if (metric.value < 0) {
metric.value = 0;
report();
}
});

onHidden(() => {
handleEntries(po.takeRecords() as CLSMetric['entries']);
report(true);
Expand All @@ -128,6 +130,8 @@ export const onCLS = (onReport: CLSReportCallback, opts?: ReportOpts) => {
metric = initMetric('CLS', 0);
report = bindReporter(
onReportWrapped, metric, thresholds, opts!.reportAllChanges);

doubleRAF(() => report());
});
}
});
Expand Down
9 changes: 4 additions & 5 deletions src/onFCP.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@

import {onBFCacheRestore} from './lib/bfcache.js';
import {bindReporter} from './lib/bindReporter.js';
import {doubleRAF} from './lib/doubleRAF.js';
import {getActivationStart} from './lib/getActivationStart.js';
import {getVisibilityWatcher} from './lib/getVisibilityWatcher.js';
import {initMetric} from './lib/initMetric.js';
Expand Down Expand Up @@ -73,11 +74,9 @@ export const onFCP = (onReport: FCPReportCallback, opts?: ReportOpts) => {
report = bindReporter(
onReport, metric, thresholds, opts!.reportAllChanges);

requestAnimationFrame(() => {
requestAnimationFrame(() => {
metric.value = performance.now() - event.timeStamp;
report(true);
});
doubleRAF(() => {
metric.value = performance.now() - event.timeStamp;
report(true);
});
});
}
Expand Down
11 changes: 5 additions & 6 deletions src/onLCP.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@

import {onBFCacheRestore} from './lib/bfcache.js';
import {bindReporter} from './lib/bindReporter.js';
import {doubleRAF} from './lib/doubleRAF.js';
import {getActivationStart} from './lib/getActivationStart.js';
import {getVisibilityWatcher} from './lib/getVisibilityWatcher.js';
import {initMetric} from './lib/initMetric.js';
Expand Down Expand Up @@ -101,12 +102,10 @@ export const onLCP = (onReport: ReportCallback, opts?: ReportOpts) => {
report = bindReporter(
onReport, metric, thresholds, opts!.reportAllChanges);

requestAnimationFrame(() => {
requestAnimationFrame(() => {
metric.value = performance.now() - event.timeStamp;
reportedMetricIDs[metric.id] = true;
report(true);
});
doubleRAF(() => {
metric.value = performance.now() - event.timeStamp;
reportedMetricIDs[metric.id] = true;
report(true);
});
});
}
Expand Down
140 changes: 92 additions & 48 deletions test/e2e/onCLS-test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -209,26 +209,34 @@ describe('onCLS()', async function() {
await browser.url('/test/cls?reportAllChanges=1');

// Beacons should be sent as soon as layout shifts occur, wait for them.
await beaconCountIs(2);
await beaconCountIs(3);

const [cls1, cls2] = await getBeacons();
const [cls1, cls2, cls3] = await getBeacons();

assert(cls1.value >= 0);
assert.strictEqual(cls1.value, 0);
assert(cls1.id.match(/^v3-\d+-\d+$/));
assert.strictEqual(cls1.name, 'CLS');
assert.strictEqual(cls1.value, cls1.delta);
assert.strictEqual(cls1.rating, 'good');
assert.strictEqual(cls1.entries.length, 1);
assert.strictEqual(cls1.entries.length, 0);
assert.match(cls1.navigationType, /navigate|reload/);

assert(cls2.value >= cls1.value);
assert(cls2.value >= 0);
assert.strictEqual(cls2.name, 'CLS');
assert.strictEqual(cls2.id, cls1.id);
assert.strictEqual(cls2.value, cls1.value + cls2.delta);
assert.strictEqual(cls2.value, cls1.delta + cls2.delta);
assert.strictEqual(cls2.rating, 'good');
assert.strictEqual(cls2.entries.length, 2);
assert.strictEqual(cls2.entries.length, 1);
assert.match(cls2.navigationType, /navigate|reload/);

assert(cls3.value >= cls2.value);
assert.strictEqual(cls3.name, 'CLS');
assert.strictEqual(cls3.id, cls2.id);
assert.strictEqual(cls3.value, cls2.value + cls3.delta);
assert.strictEqual(cls3.rating, 'good');
assert.strictEqual(cls3.entries.length, 2);
assert.match(cls3.navigationType, /navigate|reload/);

await clearBeacons();
await stubVisibilityChange('hidden');

Expand All @@ -245,25 +253,34 @@ describe('onCLS()', async function() {
await browser.url('/test/cls?reportAllChanges=1');

// Beacons should be sent as soon as layout shifts occur, wait for them.
await beaconCountIs(2);
await beaconCountIs(3);

const [cls1, cls2] = await getBeacons();
const [cls1, cls2, cls3] = await getBeacons();

assert(cls1.value >= 0);
assert.strictEqual(cls1.value, 0);
assert(cls1.id.match(/^v3-\d+-\d+$/));
assert.strictEqual(cls1.name, 'CLS');
assert.strictEqual(cls1.value, cls1.delta);
assert.strictEqual(cls1.rating, 'good');
assert.strictEqual(cls1.entries.length, 1);
assert.strictEqual(cls1.entries.length, 0);
assert.match(cls1.navigationType, /navigate|reload/);

assert(cls2.value >= cls1.value);
assert(cls2.value >= 0);
assert.strictEqual(cls2.name, 'CLS');
assert.strictEqual(cls2.id, cls1.id);
assert.strictEqual(cls2.value, cls1.value + cls2.delta);
assert.strictEqual(cls2.value, cls1.delta + cls2.delta);
assert.strictEqual(cls2.rating, 'good');
assert.strictEqual(cls2.entries.length, 2);
assert.strictEqual(cls2.entries.length, 1);
assert.match(cls2.navigationType, /navigate|reload/);

assert(cls3.value >= cls2.value);
assert.strictEqual(cls3.name, 'CLS');
assert.strictEqual(cls3.id, cls2.id);
assert.strictEqual(cls3.value, cls2.value + cls3.delta);
assert.strictEqual(cls3.rating, 'good');
assert.strictEqual(cls3.entries.length, 2);
assert.match(cls3.navigationType, /navigate|reload/);

// Unload the page after no new shifts have occurred.
await clearBeacons();
await browser.url('about:blank');
Expand Down Expand Up @@ -323,24 +340,34 @@ describe('onCLS()', async function() {
if (!browserSupportsCLS) this.skip();

await browser.url(`/test/cls?reportAllChanges=1`);
await beaconCountIs(2);
await beaconCountIs(3);

const [cls1, cls2] = await getBeacons();
const [cls1, cls2, cls3] = await getBeacons();

assert(cls1.value > 0);
assert.strictEqual(cls1.value, 0);
assert(cls1.id.match(/^v3-\d+-\d+$/));
assert.strictEqual(cls1.name, 'CLS');
assert.strictEqual(cls1.value, cls1.delta);
assert.strictEqual(cls1.entries.length, 1);
assert.strictEqual(cls1.rating, 'good');
assert.strictEqual(cls1.entries.length, 0);
assert.match(cls1.navigationType, /navigate|reload/);

assert(cls2.value > cls1.value);
assert(cls2.value >= 0);
assert.strictEqual(cls2.name, 'CLS');
assert.strictEqual(cls2.id, cls1.id);
assert.strictEqual(cls2.value, cls1.value + cls2.delta);
assert.strictEqual(cls2.value, cls1.delta + cls2.delta);
assert.strictEqual(cls2.rating, 'good');
assert.strictEqual(cls2.entries.length, 2);
assert.strictEqual(cls2.entries.length, 1);
assert.match(cls2.navigationType, /navigate|reload/);

assert(cls3.value >= cls2.value);
assert.strictEqual(cls3.name, 'CLS');
assert.strictEqual(cls3.id, cls2.id);
assert.strictEqual(cls3.value, cls2.value + cls3.delta);
assert.strictEqual(cls3.rating, 'good');
assert.strictEqual(cls3.entries.length, 2);
assert.match(cls3.navigationType, /navigate|reload/);

// Unload the page after no new shifts have occurred.
await clearBeacons();
await stubVisibilityChange('hidden');
Expand All @@ -352,15 +379,15 @@ describe('onCLS()', async function() {
await triggerLayoutShift();

await beaconCountIs(1);
const [cls3] = await getBeacons();

assert(cls3.value > cls2.value);
assert.strictEqual(cls3.name, 'CLS');
assert.strictEqual(cls3.id, cls2.id);
assert.strictEqual(cls3.value, cls2.value + cls3.delta);
assert.strictEqual(cls3.rating, 'good');
assert.strictEqual(cls3.entries.length, 3);
assert.match(cls3.navigationType, /navigate|reload/);
const [cls4] = await getBeacons();

assert(cls4.value > cls3.value);
assert.strictEqual(cls4.name, 'CLS');
assert.strictEqual(cls4.id, cls3.id);
assert.strictEqual(cls4.value, cls3.value + cls4.delta);
assert.strictEqual(cls4.rating, 'good');
assert.strictEqual(cls4.entries.length, 3);
assert.match(cls4.navigationType, /navigate|reload/);
});

it('continues reporting after bfcache restore (reportAllChanges === false)', async function() {
Expand Down Expand Up @@ -426,25 +453,34 @@ describe('onCLS()', async function() {
if (!browserSupportsCLS) this.skip();

await browser.url(`/test/cls?reportAllChanges=1`);
await beaconCountIs(2);
await beaconCountIs(3);

const [cls1, cls2] = await getBeacons();
const [cls1, cls2, cls3] = await getBeacons();

assert(cls1.value > 0);
assert.strictEqual(cls1.value, 0);
assert(cls1.id.match(/^v3-\d+-\d+$/));
assert.strictEqual(cls1.name, 'CLS');
assert.strictEqual(cls1.value, cls1.delta);
assert.strictEqual(cls1.entries.length, 1);
assert.strictEqual(cls1.rating, 'good');
assert.strictEqual(cls1.entries.length, 0);
assert.match(cls1.navigationType, /navigate|reload/);

assert(cls2.value > cls1.value);
assert(cls2.value >= 0);
assert.strictEqual(cls2.name, 'CLS');
assert.strictEqual(cls2.id, cls1.id);
assert.strictEqual(cls2.value, cls1.value + cls2.delta);
assert.strictEqual(cls2.value, cls1.delta + cls2.delta);
assert.strictEqual(cls2.rating, 'good');
assert.strictEqual(cls2.entries.length, 2);
assert.strictEqual(cls2.entries.length, 1);
assert.match(cls2.navigationType, /navigate|reload/);

assert(cls3.value >= cls2.value);
assert.strictEqual(cls3.name, 'CLS');
assert.strictEqual(cls3.id, cls2.id);
assert.strictEqual(cls3.value, cls2.value + cls3.delta);
assert.strictEqual(cls3.rating, 'good');
assert.strictEqual(cls3.entries.length, 2);
assert.match(cls3.navigationType, /navigate|reload/);

await clearBeacons();
await stubForwardBack();

Expand All @@ -453,17 +489,25 @@ describe('onCLS()', async function() {

await triggerLayoutShift();

await beaconCountIs(1);
const [cls3] = await getBeacons();

assert(cls3.value > 0);
assert(cls3.id.match(/^v3-\d+-\d+$/));
assert(cls3.id !== cls2.id);
assert.strictEqual(cls3.name, 'CLS');
assert.strictEqual(cls3.value, cls3.delta);
assert.strictEqual(cls3.rating, 'good');
assert.strictEqual(cls3.entries.length, 1);
assert.strictEqual(cls3.navigationType, 'back-forward-cache');
await beaconCountIs(2);
const [cls4, cls5] = await getBeacons();

assert.strictEqual(cls4.value, 0);
assert(cls4.id.match(/^v3-\d+-\d+$/));
assert(cls4.id !== cls3.id);
assert.strictEqual(cls4.name, 'CLS');
assert.strictEqual(cls4.value, cls4.delta);
assert.strictEqual(cls4.rating, 'good');
assert.strictEqual(cls4.entries.length, 0);
assert.strictEqual(cls4.navigationType, 'back-forward-cache');

assert(cls5.value > 0);
assert.strictEqual(cls5.id, cls4.id);
assert.strictEqual(cls5.name, 'CLS');
assert.strictEqual(cls5.value, cls4.delta + cls5.delta);
assert.strictEqual(cls5.rating, 'good');
assert.strictEqual(cls5.entries.length, 1);
assert.strictEqual(cls5.navigationType, 'back-forward-cache');
});

it('reports zero if no layout shifts occurred on first visibility hidden (reportAllChanges === false)', async function() {
Expand Down
2 changes: 1 addition & 1 deletion test/views/cls.njk
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -50,7 +50,7 @@

onCLS((cls) => {
// Log for easier manual testing.
console.log(window.cls = cls);
console.log(cls);

// Sources is verbose to serialize, so remove first.
cls = {
Expand Down