diff --git a/cli/test/smokehouse/test-definitions/perf-frame-metrics.js b/cli/test/smokehouse/test-definitions/perf-frame-metrics.js index 805e759b47e8..1031528cf33e 100644 --- a/cli/test/smokehouse/test-definitions/perf-frame-metrics.js +++ b/cli/test/smokehouse/test-definitions/perf-frame-metrics.js @@ -92,12 +92,14 @@ const expectations = { }, 'largest-contentful-paint-element': { details: { - items: [{ - node: { - // Element should be from main frame while metric is not LCPAllFrames. - nodeLabel: 'This is the main frame LCP and FCP.', - }, - }], + items: {0: { + items: [{ + node: { + // Element should be from main frame while metric is not LCPAllFrames. + nodeLabel: 'This is the main frame LCP and FCP.', + }, + }], + }}, }, }, }, diff --git a/cli/test/smokehouse/test-definitions/perf-trace-elements.js b/cli/test/smokehouse/test-definitions/perf-trace-elements.js index 60f22cfc2fd1..79b8cb3fd0d7 100644 --- a/cli/test/smokehouse/test-definitions/perf-trace-elements.js +++ b/cli/test/smokehouse/test-definitions/perf-trace-elements.js @@ -146,15 +146,17 @@ const expectations = { score: null, displayValue: '1 element found', details: { - items: [ - { - node: { - type: 'node', - nodeLabel: 'section > img', - path: '0,HTML,1,BODY,1,DIV,a,#document-fragment,0,SECTION,0,IMG', - }, + items: { + 0: { + items: [{ + node: { + type: 'node', + nodeLabel: 'section > img', + path: '0,HTML,1,BODY,1,DIV,a,#document-fragment,0,SECTION,0,IMG', + }, + }], }, - ], + }, }, }, 'lcp-lazy-loaded': { diff --git a/core/audits/largest-contentful-paint-element.js b/core/audits/largest-contentful-paint-element.js index f9bc7b7c99ca..0931a744f2f8 100644 --- a/core/audits/largest-contentful-paint-element.js +++ b/core/audits/largest-contentful-paint-element.js @@ -6,6 +6,8 @@ import {Audit} from './audit.js'; import * as i18n from '../lib/i18n/i18n.js'; +import {LargestContentfulPaint} from '../computed/metrics/largest-contentful-paint.js'; +import {LCPBreakdown} from '../computed/metrics/lcp-breakdown.js'; const UIStrings = { /** Descriptive title of a diagnostic audit that provides the element that was determined to be the Largest Contentful Paint. */ @@ -13,6 +15,20 @@ const UIStrings = { /** Description of a Lighthouse audit that tells the user that the element shown was determined to be the Largest Contentful Paint. */ description: 'This is the largest contentful element painted within the viewport. ' + '[Learn more about the Largest Contentful Paint element](https://developer.chrome.com/docs/lighthouse/performance/lighthouse-largest-contentful-paint/)', + /** Label for a column in a data table; entries will be the name of a phase in the Largest Contentful Paint (LCP) metric. */ + columnPhase: 'Phase', + /** Label for a column in a data table; entries will be the percent of Largest Contentful Paint (LCP) that a phase covers. */ + columnPercentOfLCP: '% of LCP', + /** Label for a column in a data table; entries will be the amount of time spent in a phase in the Largest Contentful Paint (LCP) metric. */ + columnTiming: 'Timing', + /** Table item value for the Time To First Byte (TTFB) phase of the Largest Contentful Paint (LCP) metric. */ + itemTTFB: 'TTFB', + /** Table item value for the load delay phase of the Largest Contentful Paint (LCP) metric. */ + itemLoadDelay: 'Load Delay', + /** Table item value for the load time phase of the Largest Contentful Paint (LCP) metric. */ + itemLoadTime: 'Load Time', + /** Table item value for the render delay phase of the Largest Contentful Paint (LCP) metric. */ + itemRenderDelay: 'Render Delay', }; const str_ = i18n.createIcuMessageFn(import.meta.url, UIStrings); @@ -28,15 +44,64 @@ class LargestContentfulPaintElement extends Audit { description: str_(UIStrings.description), scoreDisplayMode: Audit.SCORING_MODES.INFORMATIVE, supportedModes: ['navigation'], - requiredArtifacts: ['traces', 'TraceElements'], + requiredArtifacts: + ['traces', 'TraceElements', 'devtoolsLogs', 'GatherContext', 'settings', 'URL'], }; } /** * @param {LH.Artifacts} artifacts - * @return {LH.Audit.Product} + * @param {LH.Audit.Context} context + * @return {Promise} */ - static audit(artifacts) { + static async makePhaseTable(artifacts, context) { + const trace = artifacts.traces[Audit.DEFAULT_PASS]; + const devtoolsLog = artifacts.devtoolsLogs[Audit.DEFAULT_PASS]; + const gatherContext = artifacts.GatherContext; + const metricComputationData = {trace, devtoolsLog, gatherContext, + settings: context.settings, URL: artifacts.URL}; + + const {timing: metricLcp} = + await LargestContentfulPaint.request(metricComputationData, context); + const {ttfb, loadStart, loadEnd} = await LCPBreakdown.request(metricComputationData, context); + + let loadDelay = 0; + let loadTime = 0; + let renderDelay = metricLcp - ttfb; + + if (loadStart && loadEnd) { + loadDelay = loadStart - ttfb; + loadTime = loadEnd - loadStart; + renderDelay = metricLcp - loadEnd; + } + + const results = [ + {phase: str_(UIStrings.itemTTFB), timing: ttfb}, + {phase: str_(UIStrings.itemLoadDelay), timing: loadDelay}, + {phase: str_(UIStrings.itemLoadTime), timing: loadTime}, + {phase: str_(UIStrings.itemRenderDelay), timing: renderDelay}, + ].map(result => { + const percent = 100 * result.timing / metricLcp; + const percentStr = `${percent.toFixed(0)}%`; + return {...result, percent: percentStr}; + }); + + /** @type {LH.Audit.Details.Table['headings']} */ + const headings = [ + {key: 'phase', valueType: 'text', label: str_(UIStrings.columnPhase)}, + {key: 'percent', valueType: 'text', label: str_(UIStrings.columnPercentOfLCP)}, + {key: 'timing', valueType: 'ms', label: str_(UIStrings.columnTiming)}, + ]; + + return Audit.makeTableDetails(headings, results); + } + + /** + * @param {LH.Artifacts} artifacts + * @param {LH.Audit.Context} context + * @return {Promise} + */ + static async audit(artifacts, context) { const lcpElement = artifacts.TraceElements .find(element => element.traceEventType === 'largest-contentful-paint'); const lcpElementDetails = []; @@ -51,7 +116,15 @@ class LargestContentfulPaintElement extends Audit { {key: 'node', valueType: 'node', label: str_(i18n.UIStrings.columnElement)}, ]; - const details = Audit.makeTableDetails(headings, lcpElementDetails); + const elementTable = Audit.makeTableDetails(headings, lcpElementDetails); + + const items = [elementTable]; + if (elementTable.items.length) { + const phaseTable = await this.makePhaseTable(artifacts, context); + if (phaseTable) items.push(phaseTable); + } + + const details = Audit.makeListDetails(items); const displayValue = str_(i18n.UIStrings.displayValueElementsFound, {nodeCount: lcpElementDetails.length}); diff --git a/core/test/audits/largest-contentful-paint-element-test.js b/core/test/audits/largest-contentful-paint-element-test.js index 285f324c5965..ae27f38bc27c 100644 --- a/core/test/audits/largest-contentful-paint-element-test.js +++ b/core/test/audits/largest-contentful-paint-element-test.js @@ -5,6 +5,67 @@ */ import LargestContentfulPaintElementAudit from '../../audits/largest-contentful-paint-element.js'; +import {defaultSettings} from '../../config/constants.js'; +import {createTestTrace} from '../create-test-trace.js'; +import {networkRecordsToDevtoolsLog} from '../network-records-to-devtools-log.js'; + +const requestedUrl = 'http://example.com:3000'; +const mainDocumentUrl = 'http://www.example.com:3000'; + +const scriptUrl = 'http://www.example.com/script.js'; +const imageUrl = 'http://www.example.com/image.png'; + +function mockNetworkRecords() { + return [{ + requestId: '2', + priority: 'High', + isLinkPreload: false, + networkRequestTime: 0, + networkEndTime: 500, + timing: {sendEnd: 0, receiveHeadersEnd: 500}, + transferSize: 400, + url: requestedUrl, + frameId: 'ROOT_FRAME', + }, + { + requestId: '2:redirect', + resourceType: 'Document', + priority: 'High', + isLinkPreload: false, + networkRequestTime: 500, + responseHeadersEndTime: 800, + networkEndTime: 1000, + timing: {sendEnd: 0, receiveHeadersEnd: 300}, + transferSize: 16_000, + url: mainDocumentUrl, + frameId: 'ROOT_FRAME', + }, + { + requestId: '3', + resourceType: 'Script', + priority: 'High', + isLinkPreload: false, + networkRequestTime: 1000, + networkEndTime: 2000, + transferSize: 32_000, + url: scriptUrl, + initiator: {type: 'parser', url: mainDocumentUrl}, + frameId: 'ROOT_FRAME', + }, + { + requestId: '4', + resourceType: 'Image', + priority: 'High', + isLinkPreload: false, + networkRequestTime: 2000, + networkEndTime: 4500, + transferSize: 640_000, + url: imageUrl, + initiator: {type: 'script', url: scriptUrl}, + frameId: 'ROOT_FRAME', + }]; +} + describe('Performance: largest-contentful-paint-element audit', () => { it('correctly surfaces the LCP element', async () => { const artifacts = { @@ -18,27 +79,76 @@ describe('Performance: largest-contentful-paint-element audit', () => { }, type: 'text', }], + settings: JSON.parse(JSON.stringify(defaultSettings)), + traces: { + defaultPass: createTestTrace({ + traceEnd: 6000, + largestContentfulPaint: 8000, + }), + }, + devtoolsLogs: { + defaultPass: networkRecordsToDevtoolsLog(mockNetworkRecords()), + }, + URL: { + requestedUrl, + mainDocumentUrl, + finalDisplayedUrl: mainDocumentUrl, + }, + GatherContext: {gatherMode: 'navigation'}, }; - const auditResult = await LargestContentfulPaintElementAudit.audit(artifacts); + const context = {settings: artifacts.settings, computedCache: new Map()}; + const auditResult = await LargestContentfulPaintElementAudit.audit(artifacts, context); + expect(auditResult.score).toEqual(1); expect(auditResult.notApplicable).toEqual(false); expect(auditResult.displayValue).toBeDisplayString('1 element found'); - expect(auditResult.details.items).toHaveLength(1); - expect(auditResult.details.items[0].node.path).toEqual('1,HTML,3,BODY,5,DIV,0,HEADER'); - expect(auditResult.details.items[0].node.nodeLabel).toEqual('My Test Label'); - expect(auditResult.details.items[0].node.snippet).toEqual('

'); + expect(auditResult.details.items).toHaveLength(2); + expect(auditResult.details.items[0].items).toHaveLength(1); + expect(auditResult.details.items[0].items[0].node.path).toEqual('1,HTML,3,BODY,5,DIV,0,HEADER'); + expect(auditResult.details.items[0].items[0].node.nodeLabel).toEqual('My Test Label'); + expect(auditResult.details.items[0].items[0].node.snippet).toEqual('

'); + + // LCP phases + expect(auditResult.details.items[1].items).toHaveLength(4); + expect(auditResult.details.items[1].items[0].phase).toBeDisplayString('TTFB'); + expect(auditResult.details.items[1].items[0].timing).toBeCloseTo(800, 0.1); + expect(auditResult.details.items[1].items[1].phase).toBeDisplayString('Load Delay'); + expect(auditResult.details.items[1].items[1].timing).toBeCloseTo(651, 0.1); + expect(auditResult.details.items[1].items[2].phase).toBeDisplayString('Load Time'); + expect(auditResult.details.items[1].items[2].timing).toBeCloseTo(1813.7, 0.1); + expect(auditResult.details.items[1].items[3].phase).toBeDisplayString('Render Delay'); + expect(auditResult.details.items[1].items[3].timing).toBeCloseTo(2539.2, 0.1); }); it('doesn\'t throw an error when there is nothing to show', async () => { const artifacts = { TraceElements: [], + settings: JSON.parse(JSON.stringify(defaultSettings)), + traces: { + defaultPass: createTestTrace({ + traceEnd: 6000, + largestContentfulPaint: 4500, + }), + }, + devtoolsLogs: { + defaultPass: networkRecordsToDevtoolsLog(mockNetworkRecords()), + }, + URL: { + requestedUrl, + mainDocumentUrl, + finalDisplayedUrl: mainDocumentUrl, + }, + GatherContext: {gatherMode: 'navigation'}, }; - const auditResult = await LargestContentfulPaintElementAudit.audit(artifacts); + const context = {settings: artifacts.settings, computedCache: new Map()}; + const auditResult = await LargestContentfulPaintElementAudit.audit(artifacts, context); + expect(auditResult.score).toEqual(1); expect(auditResult.notApplicable).toEqual(true); expect(auditResult.displayValue).toBeDisplayString('0 elements found'); - expect(auditResult.details.items).toHaveLength(0); + expect(auditResult.details.items).toHaveLength(1); + expect(auditResult.details.items[0].items).toHaveLength(0); }); }); diff --git a/core/test/fixtures/fraggle-rock/reports/sample-flow-result.json b/core/test/fixtures/fraggle-rock/reports/sample-flow-result.json index 71e63fb80294..4688aa668f55 100644 --- a/core/test/fixtures/fraggle-rock/reports/sample-flow-result.json +++ b/core/test/fixtures/fraggle-rock/reports/sample-flow-result.json @@ -1520,32 +1520,79 @@ "scoreDisplayMode": "informative", "displayValue": "1 element found", "details": { - "type": "table", - "headings": [ - { - "key": "node", - "valueType": "node", - "label": "Element" - } - ], + "type": "list", "items": [ { - "node": { - "type": "node", - "lhId": "page-0-IMG", - "path": "1,HTML,1,BODY,0,DIV,0,DIV,4,IMG", - "selector": "body > div#__next > div.flex > img.h-32", - "boundingRect": { - "top": 192, - "bottom": 320, - "left": 38, - "right": 322, - "width": 284, - "height": 128 + "type": "table", + "headings": [ + { + "key": "node", + "valueType": "node", + "label": "Element" + } + ], + "items": [ + { + "node": { + "type": "node", + "lhId": "page-0-IMG", + "path": "1,HTML,1,BODY,0,DIV,0,DIV,4,IMG", + "selector": "body > div#__next > div.flex > img.h-32", + "boundingRect": { + "top": 192, + "bottom": 320, + "left": 38, + "right": 322, + "width": 284, + "height": 128 + }, + "snippet": "\"Mike's", + "nodeLabel": "Mike's Cereal Shack Logo" + } + } + ] + }, + { + "type": "table", + "headings": [ + { + "key": "phase", + "valueType": "text", + "label": "Phase" }, - "snippet": "\"Mike's", - "nodeLabel": "Mike's Cereal Shack Logo" - } + { + "key": "percent", + "valueType": "text", + "label": "% of LCP" + }, + { + "key": "timing", + "valueType": "ms", + "label": "Timing" + } + ], + "items": [ + { + "phase": "TTFB", + "timing": 614.517, + "percent": "45%" + }, + { + "phase": "Load Delay", + "timing": 370.96815338890303, + "percent": "27%" + }, + { + "phase": "Load Time", + "timing": 76.93370773303661, + "percent": "6%" + }, + { + "phase": "Render Delay", + "timing": 289.6881388780603, + "percent": "21%" + } + ] } ] } @@ -6869,11 +6916,32 @@ } ], "core/lib/i18n/i18n.js | columnElement": [ - "audits[largest-contentful-paint-element].details.headings[0].label", + "audits[largest-contentful-paint-element].details.items[0].headings[0].label", "audits[lcp-lazy-loaded].details.headings[0].label", "audits[layout-shift-elements].details.headings[0].label", "audits[dom-size].details.headings[1].label" ], + "core/audits/largest-contentful-paint-element.js | columnPhase": [ + "audits[largest-contentful-paint-element].details.items[1].headings[0].label" + ], + "core/audits/largest-contentful-paint-element.js | columnPercentOfLCP": [ + "audits[largest-contentful-paint-element].details.items[1].headings[1].label" + ], + "core/audits/largest-contentful-paint-element.js | columnTiming": [ + "audits[largest-contentful-paint-element].details.items[1].headings[2].label" + ], + "core/audits/largest-contentful-paint-element.js | itemTTFB": [ + "audits[largest-contentful-paint-element].details.items[1].items[0].phase" + ], + "core/audits/largest-contentful-paint-element.js | itemLoadDelay": [ + "audits[largest-contentful-paint-element].details.items[1].items[1].phase" + ], + "core/audits/largest-contentful-paint-element.js | itemLoadTime": [ + "audits[largest-contentful-paint-element].details.items[1].items[2].phase" + ], + "core/audits/largest-contentful-paint-element.js | itemRenderDelay": [ + "audits[largest-contentful-paint-element].details.items[1].items[3].phase" + ], "core/audits/lcp-lazy-loaded.js | title": [ "audits[lcp-lazy-loaded].title" ], @@ -17853,32 +17921,79 @@ "scoreDisplayMode": "informative", "displayValue": "1 element found", "details": { - "type": "table", - "headings": [ - { - "key": "node", - "valueType": "node", - "label": "Element" - } - ], + "type": "list", "items": [ { - "node": { - "type": "node", - "lhId": "page-0-IMG", - "path": "1,HTML,1,BODY,0,DIV,0,DIV,3,MAIN,2,DIV,0,IMG", - "selector": "div.flex > main#main-content > div.flex > img.rounded-md", - "boundingRect": { - "top": 228, - "bottom": 388, - "left": 38, - "right": 322, - "width": 284, - "height": 160 + "type": "table", + "headings": [ + { + "key": "node", + "valueType": "node", + "label": "Element" + } + ], + "items": [ + { + "node": { + "type": "node", + "lhId": "page-0-IMG", + "path": "1,HTML,1,BODY,0,DIV,0,DIV,3,MAIN,2,DIV,0,IMG", + "selector": "div.flex > main#main-content > div.flex > img.rounded-md", + "boundingRect": { + "top": 228, + "bottom": 388, + "left": 38, + "right": 322, + "width": 284, + "height": 160 + }, + "snippet": "", + "nodeLabel": "div.flex > main#main-content > div.flex > img.rounded-md" + } + } + ] + }, + { + "type": "table", + "headings": [ + { + "key": "phase", + "valueType": "text", + "label": "Phase" }, - "snippet": "", - "nodeLabel": "div.flex > main#main-content > div.flex > img.rounded-md" - } + { + "key": "percent", + "valueType": "text", + "label": "% of LCP" + }, + { + "key": "timing", + "valueType": "ms", + "label": "Timing" + } + ], + "items": [ + { + "phase": "TTFB", + "timing": 602.5712, + "percent": "33%" + }, + { + "phase": "Load Delay", + "timing": 0, + "percent": "0%" + }, + { + "phase": "Load Time", + "timing": 234.3445723189716, + "percent": "13%" + }, + { + "phase": "Render Delay", + "timing": 966.0934276810284, + "percent": "54%" + } + ] } ] } @@ -23241,10 +23356,31 @@ } ], "core/lib/i18n/i18n.js | columnElement": [ - "audits[largest-contentful-paint-element].details.headings[0].label", + "audits[largest-contentful-paint-element].details.items[0].headings[0].label", "audits[lcp-lazy-loaded].details.headings[0].label", "audits[dom-size].details.headings[1].label" ], + "core/audits/largest-contentful-paint-element.js | columnPhase": [ + "audits[largest-contentful-paint-element].details.items[1].headings[0].label" + ], + "core/audits/largest-contentful-paint-element.js | columnPercentOfLCP": [ + "audits[largest-contentful-paint-element].details.items[1].headings[1].label" + ], + "core/audits/largest-contentful-paint-element.js | columnTiming": [ + "audits[largest-contentful-paint-element].details.items[1].headings[2].label" + ], + "core/audits/largest-contentful-paint-element.js | itemTTFB": [ + "audits[largest-contentful-paint-element].details.items[1].items[0].phase" + ], + "core/audits/largest-contentful-paint-element.js | itemLoadDelay": [ + "audits[largest-contentful-paint-element].details.items[1].items[1].phase" + ], + "core/audits/largest-contentful-paint-element.js | itemLoadTime": [ + "audits[largest-contentful-paint-element].details.items[1].items[2].phase" + ], + "core/audits/largest-contentful-paint-element.js | itemRenderDelay": [ + "audits[largest-contentful-paint-element].details.items[1].items[3].phase" + ], "core/audits/lcp-lazy-loaded.js | title": [ "audits[lcp-lazy-loaded].title" ], diff --git a/core/test/results/sample_v2.json b/core/test/results/sample_v2.json index 8b3b00717161..1ebbb24cddd7 100644 --- a/core/test/results/sample_v2.json +++ b/core/test/results/sample_v2.json @@ -2285,32 +2285,79 @@ "scoreDisplayMode": "informative", "displayValue": "1 element found", "details": { - "type": "table", - "headings": [ - { - "key": "node", - "valueType": "node", - "label": "Element" - } - ], + "type": "list", "items": [ { - "node": { - "type": "node", - "lhId": "page-13-H2", - "path": "3,HTML,1,BODY,9,DIV,0,H2", - "selector": "body > div > h2#toppy", - "boundingRect": { - "top": 336, - "bottom": 364, - "left": 8, - "right": 352, - "width": 344, - "height": 28 + "type": "table", + "headings": [ + { + "key": "node", + "valueType": "node", + "label": "Element" + } + ], + "items": [ + { + "node": { + "type": "node", + "lhId": "page-13-H2", + "path": "3,HTML,1,BODY,9,DIV,0,H2", + "selector": "body > div > h2#toppy", + "boundingRect": { + "top": 336, + "bottom": 364, + "left": 8, + "right": 352, + "width": 344, + "height": 28 + }, + "snippet": "

", + "nodeLabel": "Do better web tester page" + } + } + ] + }, + { + "type": "table", + "headings": [ + { + "key": "phase", + "valueType": "text", + "label": "Phase" }, - "snippet": "

", - "nodeLabel": "Do better web tester page" - } + { + "key": "percent", + "valueType": "text", + "label": "% of LCP" + }, + { + "key": "timing", + "valueType": "ms", + "label": "Timing" + } + ], + "items": [ + { + "phase": "TTFB", + "timing": 571.7680000019074, + "percent": "4%" + }, + { + "phase": "Load Delay", + "timing": 10277.099999996944, + "percent": "77%" + }, + { + "phase": "Load Time", + "timing": 2050.6490000002086, + "percent": "15%" + }, + { + "phase": "Render Delay", + "timing": 420.4440000009381, + "percent": "3%" + } + ] } ] } @@ -9284,11 +9331,32 @@ } ], "core/lib/i18n/i18n.js | columnElement": [ - "audits[largest-contentful-paint-element].details.headings[0].label", + "audits[largest-contentful-paint-element].details.items[0].headings[0].label", "audits[layout-shift-elements].details.headings[0].label", "audits[non-composited-animations].details.headings[0].label", "audits[dom-size].details.headings[1].label" ], + "core/audits/largest-contentful-paint-element.js | columnPhase": [ + "audits[largest-contentful-paint-element].details.items[1].headings[0].label" + ], + "core/audits/largest-contentful-paint-element.js | columnPercentOfLCP": [ + "audits[largest-contentful-paint-element].details.items[1].headings[1].label" + ], + "core/audits/largest-contentful-paint-element.js | columnTiming": [ + "audits[largest-contentful-paint-element].details.items[1].headings[2].label" + ], + "core/audits/largest-contentful-paint-element.js | itemTTFB": [ + "audits[largest-contentful-paint-element].details.items[1].items[0].phase" + ], + "core/audits/largest-contentful-paint-element.js | itemLoadDelay": [ + "audits[largest-contentful-paint-element].details.items[1].items[1].phase" + ], + "core/audits/largest-contentful-paint-element.js | itemLoadTime": [ + "audits[largest-contentful-paint-element].details.items[1].items[2].phase" + ], + "core/audits/largest-contentful-paint-element.js | itemRenderDelay": [ + "audits[largest-contentful-paint-element].details.items[1].items[3].phase" + ], "core/audits/lcp-lazy-loaded.js | title": [ "audits[lcp-lazy-loaded].title" ], diff --git a/shared/localization/locales/en-US.json b/shared/localization/locales/en-US.json index 52f4537057c4..ba4374f10da8 100644 --- a/shared/localization/locales/en-US.json +++ b/shared/localization/locales/en-US.json @@ -980,9 +980,30 @@ "core/audits/is-on-https.js | warning": { "message": "Allowed with warning" }, + "core/audits/largest-contentful-paint-element.js | columnPercentOfLCP": { + "message": "% of LCP" + }, + "core/audits/largest-contentful-paint-element.js | columnPhase": { + "message": "Phase" + }, + "core/audits/largest-contentful-paint-element.js | columnTiming": { + "message": "Timing" + }, "core/audits/largest-contentful-paint-element.js | description": { "message": "This is the largest contentful element painted within the viewport. [Learn more about the Largest Contentful Paint element](https://developer.chrome.com/docs/lighthouse/performance/lighthouse-largest-contentful-paint/)" }, + "core/audits/largest-contentful-paint-element.js | itemLoadDelay": { + "message": "Load Delay" + }, + "core/audits/largest-contentful-paint-element.js | itemLoadTime": { + "message": "Load Time" + }, + "core/audits/largest-contentful-paint-element.js | itemRenderDelay": { + "message": "Render Delay" + }, + "core/audits/largest-contentful-paint-element.js | itemTTFB": { + "message": "TTFB" + }, "core/audits/largest-contentful-paint-element.js | title": { "message": "Largest Contentful Paint element" }, diff --git a/shared/localization/locales/en-XL.json b/shared/localization/locales/en-XL.json index 0df77046b6c5..dd8191a20fa9 100644 --- a/shared/localization/locales/en-XL.json +++ b/shared/localization/locales/en-XL.json @@ -980,9 +980,30 @@ "core/audits/is-on-https.js | warning": { "message": "Âĺl̂óŵéd̂ ẃît́ĥ ẃâŕn̂ín̂ǵ" }, + "core/audits/largest-contentful-paint-element.js | columnPercentOfLCP": { + "message": "% ôf́ L̂ĆP̂" + }, + "core/audits/largest-contentful-paint-element.js | columnPhase": { + "message": "P̂h́âśê" + }, + "core/audits/largest-contentful-paint-element.js | columnTiming": { + "message": "T̂ím̂ín̂ǵ" + }, "core/audits/largest-contentful-paint-element.js | description": { "message": "T̂h́îś îś t̂h́ê ĺâŕĝéŝt́ ĉón̂t́êńt̂f́ûĺ êĺêḿêńt̂ ṕâín̂t́êd́ ŵít̂h́îń t̂h́ê v́îéŵṕôŕt̂. [Ĺêár̂ń m̂ór̂é âb́ôút̂ t́ĥé L̂ár̂ǵêśt̂ Ćôńt̂én̂t́f̂úl̂ Ṕâín̂t́ êĺêḿêńt̂](https://developer.chrome.com/docs/lighthouse/performance/lighthouse-largest-contentful-paint/)" }, + "core/audits/largest-contentful-paint-element.js | itemLoadDelay": { + "message": "L̂óâd́ D̂él̂áŷ" + }, + "core/audits/largest-contentful-paint-element.js | itemLoadTime": { + "message": "L̂óâd́ T̂ím̂é" + }, + "core/audits/largest-contentful-paint-element.js | itemRenderDelay": { + "message": "R̂én̂d́êŕ D̂él̂áŷ" + }, + "core/audits/largest-contentful-paint-element.js | itemTTFB": { + "message": "T̂T́F̂B́" + }, "core/audits/largest-contentful-paint-element.js | title": { "message": "L̂ár̂ǵêśt̂ Ćôńt̂én̂t́f̂úl̂ Ṕâín̂t́ êĺêḿêńt̂" },