p10

core/audits/largest-contentful-paint-element.js

@@ -8,7 +8,8 @@ import log from 'lighthouse-logger';
 
 import {Audit} from './audit.js';
 import * as i18n from '../lib/i18n/i18n.js';
-import {LargestContentfulPaint} from '../computed/metrics/largest-contentful-paint.js';
+import {LargestContentfulPaint as LargestContentfulPaintComputed} from '../computed/metrics/largest-contentful-paint.js';
+import LargestContentfulPaint from './metrics/largest-contentful-paint.js';
 import {LCPBreakdown} from '../computed/metrics/lcp-breakdown.js';
 import {Sentry} from '../lib/sentry.js';
 
@@ -134,10 +135,12 @@ class LargestContentfulPaintElement extends Audit {
 
     const items = [elementTable];
     let displayValue;
+    let metricLcp = 0;
 
     try {
-      const {timing: metricLcp} =
-        await LargestContentfulPaint.request(metricComputationData, context);
+      const lcpResult =
+        await LargestContentfulPaintComputed.request(metricComputationData, context);
+      metricLcp = lcpResult.timing;
       displayValue = str_(i18n.UIStrings.ms, {timeInMs: metricLcp});
 
       const phaseTable = await this.makePhaseTable(metricLcp, metricComputationData, context);
@@ -152,14 +155,17 @@ class LargestContentfulPaintElement extends Audit {
 
     const details = Audit.makeListDetails(items);
 
+    // Conceptually, this doesn't make much sense as "savings" for this audit since there isn't anything to "fix".
+    // However, this audit will always be useful when improving LCP and that should be reflected in our impact calculations.
+    const idealLcp = LargestContentfulPaint.defaultOptions[context.settings.formFactor].scoring.p10;
+    const lcpSavings = Math.max(0, metricLcp - idealLcp);
+
     return {
       score: 1,
       displayValue,
       details,
       metricSavings: {
-        // Conceptually, this doesn't make much sense as "savings" for this audit since there isn't anything to "fix".
-        // However, this audit will always be useful when improving LCP and that should be reflected in our impact calculations.
-        LCP: metricLcp || 0,
+        LCP: lcpSavings,
       },
     };
   }

core/test/audits/largest-contentful-paint-element-test.js

@@ -103,7 +103,7 @@ describe('Performance: largest-contentful-paint-element audit', () => {
     expect(auditResult.score).toEqual(1);
     expect(auditResult.notApplicable).toBeUndefined();
     expect(auditResult.displayValue).toBeDisplayString('5,800\xa0ms');
-    expect(auditResult.metricSavings).toEqual({LCP: 5804});
+    expect(auditResult.metricSavings).toEqual({LCP: 3304}); // 5804 - 2500 (p10 mobile)
     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');