-
Notifications
You must be signed in to change notification settings - Fork 9.4k
/
lcp-breakdown.js
58 lines (48 loc) · 2.03 KB
/
lcp-breakdown.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
/**
* @license
* Copyright 2023 Google LLC
* SPDX-License-Identifier: Apache-2.0
*/
import {makeComputedArtifact} from '../computed-artifact.js';
import {LighthouseError} from '../../lib/lh-error.js';
import {LargestContentfulPaint} from './largest-contentful-paint.js';
import {ProcessedNavigation} from '../processed-navigation.js';
import {TimeToFirstByte} from './time-to-first-byte.js';
import {LCPImageRecord} from '../lcp-image-record.js';
class LCPBreakdown {
/**
* @param {LH.Artifacts.MetricComputationDataInput} data
* @param {LH.Artifacts.ComputedContext} context
* @return {Promise<{ttfb: number, loadStart?: number, loadEnd?: number}>}
*/
static async compute_(data, context) {
const processedNavigation = await ProcessedNavigation.request(data.trace, context);
const observedLcp = processedNavigation.timings.largestContentfulPaint;
if (observedLcp === undefined) {
throw new LighthouseError(LighthouseError.errors.NO_LCP);
}
const timeOrigin = processedNavigation.timestamps.timeOrigin / 1000;
const {timing: ttfb} = await TimeToFirstByte.request(data, context);
const lcpRecord = await LCPImageRecord.request(data, context);
if (!lcpRecord) {
return {ttfb};
}
// Official LCP^tm. Will be lantern result if simulated, otherwise same as observedLcp.
const {timing: metricLcp} = await LargestContentfulPaint.request(data, context);
const throttleRatio = metricLcp / observedLcp;
const unclampedLoadStart = (lcpRecord.networkRequestTime - timeOrigin) * throttleRatio;
const loadStart = Math.max(ttfb, Math.min(unclampedLoadStart, metricLcp));
const unclampedLoadEnd = (lcpRecord.networkEndTime - timeOrigin) * throttleRatio;
const loadEnd = Math.max(loadStart, Math.min(unclampedLoadEnd, metricLcp));
return {
ttfb,
loadStart,
loadEnd,
};
}
}
const LCPBreakdownComputed = makeComputedArtifact(
LCPBreakdown,
['devtoolsLog', 'gatherContext', 'settings', 'simulator', 'trace', 'URL']
);
export {LCPBreakdownComputed as LCPBreakdown};