lighthouse 12.2.2 → 12.2.3-dev.20241203

package/cli/test/smokehouse/core-tests.js

@@ -21,6 +21,8 @@ import fpsMaxPassive from './test-definitions/fps-max-passive.js';
 import fpsScaled from './test-definitions/fps-scaled.js';
 import fpsOverflowX from './test-definitions/fps-overflow-x.js';
 import issuesMixedContent from './test-definitions/issues-mixed-content.js';
+import hstsFullyPresent from './test-definitions/hsts-fully-present.js';
+import hstsMissingDirectives from './test-definitions/hsts-missing-directives.js';
 import lanternFetch from './test-definitions/lantern-fetch.js';
 import lanternIdleCallbackLong from './test-definitions/lantern-idle-callback-long.js';
 import lanternIdleCallbackShort from './test-definitions/lantern-idle-callback-short.js';
@@ -79,6 +81,8 @@ const smokeTests = [
   fpsOverflowX,
   fpsScaled,
   issuesMixedContent,
+  hstsFullyPresent,
+  hstsMissingDirectives,
   lanternFetch,
   lanternIdleCallbackLong,
   lanternIdleCallbackShort,

package/core/audits/byte-efficiency/render-blocking-resources.js

@@ -130,7 +130,7 @@ class RenderBlockingResources extends Audit {
     const wastedCssBytes = await RenderBlockingResources.computeWastedCSSBytes(artifacts, context);
     const navInsights = await NavigationInsights.request(trace, context);
 
-    const renderBlocking = navInsights.RenderBlocking;
+    const renderBlocking = navInsights.model.RenderBlocking;
     if (renderBlocking instanceof Error) throw renderBlocking;
 
     /** @type {LH.Audit.Context['settings']} */

package/core/audits/has-hsts.d.ts

@@ -0,0 +1,44 @@
+export default HasHsts;
+declare class HasHsts extends Audit {
+    /**
+     * @param {LH.Artifacts} artifacts
+     * @param {LH.Audit.Context} context
+     * @return {Promise<string[]>}
+     */
+    static getRawHsts(artifacts: LH.Artifacts, context: LH.Audit.Context): Promise<string[]>;
+    /**
+     * @param {string} hstsDirective
+     * @param {LH.IcuMessage | string} findingDescription
+     * @param {LH.IcuMessage=} severity
+     * @return {LH.Audit.Details.TableItem}
+     */
+    static findingToTableItem(hstsDirective: string, findingDescription: LH.IcuMessage | string, severity?: LH.IcuMessage | undefined): LH.Audit.Details.TableItem;
+    /**
+     * @param {string[]} hstsHeaders
+     * @return {{score: number, results: LH.Audit.Details.TableItem[]}}
+     */
+    static constructResults(hstsHeaders: string[]): {
+        score: number;
+        results: LH.Audit.Details.TableItem[];
+    };
+    /**
+     * @param {LH.Artifacts} artifacts
+     * @param {LH.Audit.Context} context
+     * @return {Promise<LH.Audit.Product>}
+     */
+    static audit(artifacts: LH.Artifacts, context: LH.Audit.Context): Promise<LH.Audit.Product>;
+}
+export namespace UIStrings {
+    let title: string;
+    let description: string;
+    let noHsts: string;
+    let noPreload: string;
+    let noSubdomain: string;
+    let noMaxAge: string;
+    let lowMaxAge: string;
+    let invalidSyntax: string;
+    let columnDirective: string;
+    let columnSeverity: string;
+}
+import { Audit } from './audit.js';
+//# sourceMappingURL=has-hsts.d.ts.map

package/core/audits/has-hsts.js

@@ -0,0 +1,208 @@
+/**
+ * @license
+ * Copyright 2024 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import {Audit} from './audit.js';
+import {MainResource} from '../computed/main-resource.js';
+import * as i18n from '../lib/i18n/i18n.js';
+
+const UIStrings = {
+  /** Title of a Lighthouse audit that evaluates the security of a page's HSTS header. "HSTS" stands for "HTTP Strict Transport Security". */
+  title: 'Use a strong HSTS policy',
+  /** Description of a Lighthouse audit that evaluates the security of a page's HSTS header. This is displayed after a user expands the section to see more. No character length limits. The last sentence starting with 'Learn' becomes link text to additional documentation. "HSTS" stands for "HTTP Strict Transport Security". */
+  description: 'Deployment of the HSTS header significantly ' +
+    'reduces the risk of downgrading HTTP connections and eavesdropping attacks. ' +
+    'A rollout in stages, starting with a low max-age is recommended. ' +
+    '[Learn more about using a strong HSTS policy.](https://developer.chrome.com/docs/lighthouse/best-practices/has-hsts)',
+  /** Summary text for the results of a Lighthouse audit that evaluates the HSTS header. This is displayed if no HSTS header is deployed. "HSTS" stands for "HTTP Strict Transport Security". */
+  noHsts: 'No HSTS header found',
+  /** Summary text for the results of a Lighthouse audit that evaluates the HSTS header. This is displayed if the preload directive is missing. "HSTS" stands for "HTTP Strict Transport Security". */
+  noPreload: 'No `preload` directive found',
+  /** Summary text for the results of a Lighthouse audit that evaluates the HSTS header. This is displayed if the includeSubDomains directive is missing. "HSTS" stands for "HTTP Strict Transport Security". */
+  noSubdomain: 'No `includeSubDomains` directive found',
+  /** Summary text for the results of a Lighthouse audit that evaluates the HSTS header. This is displayed if the max-age directive is missing. "HSTS" stands for "HTTP Strict Transport Security". */
+  noMaxAge: 'No `max-age` directive',
+  /** Summary text for the results of a Lighthouse audit that evaluates the HSTS header. This is displayed if the provided duration for the max-age directive is too low. "HSTS" stands for "HTTP Strict Transport Security". */
+  lowMaxAge: '`max-age` is too low',
+  /** Table item value calling out the presence of a syntax error. */
+  invalidSyntax: 'Invalid syntax',
+  /** Label for a column in a data table; entries will be a directive of the HSTS header. "HSTS" stands for "HTTP Strict Transport Security". */
+  columnDirective: 'Directive',
+  /** Label for a column in a data table; entries will be the severity of an issue with the HSTS header. "HSTS" stands for "HTTP Strict Transport Security". */
+  columnSeverity: 'Severity',
+};
+
+const str_ = i18n.createIcuMessageFn(import.meta.url, UIStrings);
+
+class HasHsts extends Audit {
+  /**
+   * @return {LH.Audit.Meta}
+   */
+  static get meta() {
+    return {
+      id: 'has-hsts',
+      scoreDisplayMode: Audit.SCORING_MODES.INFORMATIVE,
+      title: str_(UIStrings.title),
+      description: str_(UIStrings.description),
+      requiredArtifacts: ['devtoolsLogs', 'URL'],
+      supportedModes: ['navigation'],
+    };
+  }
+
+
+  /**
+   * @param {LH.Artifacts} artifacts
+   * @param {LH.Audit.Context} context
+   * @return {Promise<string[]>}
+   */
+  static async getRawHsts(artifacts, context) {
+    const devtoolsLog = artifacts.devtoolsLogs[Audit.DEFAULT_PASS];
+    const mainResource =
+        await MainResource.request({devtoolsLog, URL: artifacts.URL}, context);
+
+    let hstsHeaders =
+        mainResource.responseHeaders
+            .filter(h => {
+              return h.name.toLowerCase() === 'strict-transport-security';
+            })
+            .flatMap(h => h.value.split(';'));
+
+    // Sanitize the header value / directives.
+    hstsHeaders = hstsHeaders.map(v => v.toLowerCase().replace(/\s/g, ''));
+
+    return hstsHeaders;
+  }
+
+  /**
+   * @param {string} hstsDirective
+   * @param {LH.IcuMessage | string} findingDescription
+   * @param {LH.IcuMessage=} severity
+   * @return {LH.Audit.Details.TableItem}
+   */
+  static findingToTableItem(hstsDirective, findingDescription, severity) {
+    return {
+      directive: hstsDirective,
+      description: findingDescription,
+      severity,
+    };
+  }
+
+  /**
+   * @param {string[]} hstsHeaders
+   * @return {{score: number, results: LH.Audit.Details.TableItem[]}}
+   */
+  static constructResults(hstsHeaders) {
+    const rawHsts = [...hstsHeaders];
+    const allowedDirectives = ['max-age', 'includesubdomains', 'preload'];
+    const violations = [];
+    const warnings = [];
+    const syntax = [];
+
+    if (!rawHsts.length) {
+      return {
+        score: 0,
+        results: [{
+          severity: str_(i18n.UIStrings.itemSeverityHigh),
+          description: str_(UIStrings.noHsts),
+          directive: undefined,
+        }],
+      };
+    }
+
+    // No max-age is a violation and renders the HSTS header useless.
+    if (!hstsHeaders.toString().includes('max-age')) {
+      violations.push({
+        severity: str_(i18n.UIStrings.itemSeverityHigh),
+        description: str_(UIStrings.noMaxAge),
+        directive: 'max-age',
+      });
+    }
+
+    if (!hstsHeaders.toString().includes('includesubdomains')) {
+      // No includeSubdomains might be even wanted. But would be preferred.
+      warnings.push({
+        severity: str_(i18n.UIStrings.itemSeverityMedium),
+        description: str_(UIStrings.noSubdomain),
+        directive: 'includeSubDomains',
+      });
+    }
+
+    if (!hstsHeaders.toString().includes('preload')) {
+      // No preload might be even wanted. But would be preferred.
+      warnings.push({
+        severity: str_(i18n.UIStrings.itemSeverityMedium),
+        description: str_(UIStrings.noPreload),
+        directive: 'preload',
+      });
+    }
+
+    for (const actualDirective of hstsHeaders) {
+      // We recommend 2y max-age. But if it's lower than 1y, it's a violation.
+      if (actualDirective.includes('max-age') &&
+          parseInt(actualDirective.split('=')[1], 10) < 31536000) {
+        violations.push({
+          severity: str_(i18n.UIStrings.itemSeverityHigh),
+          description: str_(UIStrings.lowMaxAge),
+          directive: 'max-age',
+        });
+      }
+
+      // If there is a directive that's not an official HSTS directive.
+      if (!allowedDirectives.includes(actualDirective) &&
+          !actualDirective.includes('max-age')) {
+        syntax.push({
+          severity: str_(i18n.UIStrings.itemSeverityLow),
+          description: str_(UIStrings.invalidSyntax),
+          directive: actualDirective,
+        });
+      }
+    }
+
+    const results = [
+      ...violations.map(
+          f => this.findingToTableItem(
+              f.directive, f.description,
+              str_(i18n.UIStrings.itemSeverityHigh))),
+      ...warnings.map(
+          f => this.findingToTableItem(
+              f.directive, f.description,
+              str_(i18n.UIStrings.itemSeverityMedium))),
+      ...syntax.map(
+          f => this.findingToTableItem(
+              f.directive, f.description,
+              str_(i18n.UIStrings.itemSeverityLow))),
+    ];
+    return {score: violations.length || syntax.length ? 0 : 1, results};
+  }
+
+  /**
+   * @param {LH.Artifacts} artifacts
+   * @param {LH.Audit.Context} context
+   * @return {Promise<LH.Audit.Product>}
+   */
+  static async audit(artifacts, context) {
+    const hstsHeaders = await this.getRawHsts(artifacts, context);
+    const {score, results} = this.constructResults(hstsHeaders);
+
+    /** @type {LH.Audit.Details.Table['headings']} */
+    const headings = [
+      /* eslint-disable max-len */
+      {key: 'description', valueType: 'text', subItemsHeading: {key: 'description'}, label: str_(i18n.UIStrings.columnDescription)},
+      {key: 'directive', valueType: 'code', subItemsHeading: {key: 'directive'}, label: str_(UIStrings.columnDirective)},
+      {key: 'severity', valueType: 'text', subItemsHeading: {key: 'severity'}, label: str_(UIStrings.columnSeverity)},
+      /* eslint-enable max-len */
+    ];
+    const details = Audit.makeTableDetails(headings, results);
+
+    return {
+      score,
+      notApplicable: !results.length,
+      details,
+    };
+  }
+}
+
+export default HasHsts;
+export {UIStrings};

package/core/computed/metrics/cumulative-layout-shift.js

@@ -160,13 +160,13 @@ class CumulativeLayoutShift {
         Screenshots: TraceEngine.TraceHandlers.Screenshots,
       });
       // eslint-disable-next-line max-len
-      await processor.parse(/** @type {import('@paulirish/trace_engine').Types.TraceEvents.TraceEventData[]} */ (
+      await processor.parse(/** @type {import('@paulirish/trace_engine').Types.Events.Event[]} */ (
         events
-      ));
-      if (!processor.traceParsedData) {
+      ), {});
+      if (!processor.parsedTrace) {
         throw new Error('null trace engine result');
       }
-      return processor.traceParsedData.LayoutShifts.sessionMaxScore;
+      return processor.parsedTrace.LayoutShifts.sessionMaxScore;
     };
     const cumulativeLayoutShift = await run(allFrameShiftEvents.map(e => e.event));
     const cumulativeLayoutShiftMainFrame = await run(mainFrameShiftEvents.map(e => e.event));

package/core/computed/metrics/lantern-metric.js

@@ -38,8 +38,10 @@ async function getComputationDataParamsFromTrace(data, context) {
 
   const graph = await PageDependencyGraph.request({...data, fromTrace: true}, context);
   const traceEngineResult = await TraceEngineResult.request(data, context);
-  const processedNavigation =
-    Lantern.TraceEngineComputationData.createProcessedNavigation(traceEngineResult.data);
+  const frameId = traceEngineResult.data.Meta.mainFrameId;
+  const navigationId = traceEngineResult.data.Meta.mainFrameNavigations[0].args.data.navigationId;
+  const processedNavigation = Lantern.TraceEngineComputationData.createProcessedNavigation(
+    traceEngineResult.data, frameId, navigationId);
   const simulator = data.simulator || (await LoadSimulator.request(data, context));
 
   return {simulator, graph, processedNavigation};

package/core/computed/navigation-insights.d.ts

@@ -11,6 +11,6 @@ declare class NavigationInsights {
       * @param {LH.Trace} trace
       * @param {LH.Artifacts.ComputedContext} context
      */
-    static compute_(trace: LH.Trace, context: LH.Artifacts.ComputedContext): Promise<import("@paulirish/trace_engine/models/trace/insights/types.js").NavigationInsightData>;
+    static compute_(trace: LH.Trace, context: LH.Artifacts.ComputedContext): Promise<import("@paulirish/trace_engine/models/trace/insights/types.js").InsightSet>;
 }
 //# sourceMappingURL=navigation-insights.d.ts.map

package/core/computed/network-analysis.js

@@ -4,6 +4,8 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
+import log from 'lighthouse-logger';
+
 import * as Lantern from '../lib/lantern/lantern.js';
 import {makeComputedArtifact} from './computed-artifact.js';
 import {NetworkRecords} from './network-records.js';
@@ -16,7 +18,17 @@ class NetworkAnalysis {
    */
   static async compute_(devtoolsLog, context) {
     const records = await NetworkRecords.request(devtoolsLog, context);
-    return Lantern.Core.NetworkAnalyzer.analyze(records);
+    const analysis = Lantern.Core.NetworkAnalyzer.analyze(records);
+    if (!analysis) {
+      log.error('NetworkAnalysis', 'Network analysis failed due to lack of transfer data');
+      return {
+        throughput: 0,
+        rtt: Number.POSITIVE_INFINITY,
+        additionalRttByOrigin: new Map(),
+        serverResponseTimeByOrigin: new Map(),
+      };
+    }
+    return analysis;
   }
 }
 

package/core/computed/trace-engine-result.d.ts

@@ -13,6 +13,10 @@ declare class TraceEngineResult {
      * @return {Promise<LH.Artifacts.TraceEngineResult>}
      */
     static runTraceEngine(traceEvents: LH.TraceEvent[]): Promise<LH.Artifacts.TraceEngineResult>;
+    /**
+     * @param {import('@paulirish/trace_engine/models/trace/insights/types.js').TraceInsightSets} insightSets
+     */
+    static localizeInsights(insightSets: import("@paulirish/trace_engine/models/trace/insights/types.js").TraceInsightSets): void;
     /**
      * @param {{trace: LH.Trace}} data
      * @param {LH.Artifacts.ComputedContext} context

package/core/computed/trace-engine-result.js

@@ -4,6 +4,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
+import * as i18n from '../lib/i18n/i18n.js';
 import * as TraceEngine from '../lib/trace-engine.js';
 import {makeComputedArtifact} from './computed-artifact.js';
 import {CumulativeLayoutShift} from './metrics/cumulative-layout-shift.js';
@@ -30,12 +31,37 @@ class TraceEngineResult {
     const processor = new TraceEngine.TraceProcessor(traceHandlers);
 
     // eslint-disable-next-line max-len
-    await processor.parse(/** @type {import('@paulirish/trace_engine').Types.TraceEvents.TraceEventData[]} */ (
+    await processor.parse(/** @type {import('@paulirish/trace_engine').Types.Events.Event[]} */ (
       traceEvents
-    ));
-    if (!processor.traceParsedData) throw new Error('No data');
+    ), {});
+    if (!processor.parsedTrace) throw new Error('No data');
     if (!processor.insights) throw new Error('No insights');
-    return {data: processor.traceParsedData, insights: processor.insights};
+    this.localizeInsights(processor.insights);
+    return {data: processor.parsedTrace, insights: processor.insights};
+  }
+
+  /**
+   * @param {import('@paulirish/trace_engine/models/trace/insights/types.js').TraceInsightSets} insightSets
+   */
+  static localizeInsights(insightSets) {
+    for (const insightSet of insightSets.values()) {
+      for (const [name, model] of Object.entries(insightSet.model)) {
+        if (model instanceof Error) {
+          continue;
+        }
+
+        const key = `node_modules/@paulirish/trace_engine/models/trace/insights/${name}.js`;
+        const str_ = i18n.createIcuMessageFn(key, {
+          title: model.title,
+          description: model.description,
+        });
+
+        // @ts-expect-error coerce to string, should be fine
+        model.title = str_(model.title);
+        // @ts-expect-error coerce to string, should be fine
+        model.description = str_(model.description);
+      }
+    }
   }
 
   /**

package/core/config/default-config.js

@@ -192,6 +192,7 @@ const defaultConfig = {
     'valid-source-maps',
     'prioritize-lcp-image',
     'csp-xss',
+    'has-hsts',
     'script-treemap-data',
     'accessibility/accesskeys',
     'accessibility/aria-allowed-attr',
@@ -541,6 +542,7 @@ const defaultConfig = {
         {id: 'geolocation-on-start', weight: 1, group: 'best-practices-trust-safety'},
         {id: 'notification-on-start', weight: 1, group: 'best-practices-trust-safety'},
         {id: 'csp-xss', weight: 0, group: 'best-practices-trust-safety'},
+        {id: 'has-hsts', weight: 0, group: 'best-practices-trust-safety'},
         // User Experience
         {id: 'paste-preventing-inputs', weight: 3, group: 'best-practices-ux'},
         {id: 'image-aspect-ratio', weight: 1, group: 'best-practices-ux'},

package/core/config/lr-mobile-config.js

@@ -13,7 +13,7 @@ const config = {
     throttling: {
       // Determined using PSI CPU benchmark median and
       // https://lighthouse-cpu-throttling-calculator.vercel.app/
-      cpuSlowdownMultiplier: 1.5,
+      cpuSlowdownMultiplier: 1.2,
     },
     skipAudits: [
       // Skip the h2 audit so it doesn't lie to us. See https://github.com/GoogleChrome/lighthouse/issues/6539

package/core/lib/trace-engine.d.ts

@@ -1,4 +1,4 @@
-export type SyntheticLayoutShift = import("@paulirish/trace_engine").Types.TraceEvents.SyntheticLayoutShift;
+export type SyntheticLayoutShift = import("@paulirish/trace_engine").Types.Events.SyntheticLayoutShift;
 export type SaneSyntheticLayoutShift = SyntheticLayoutShift & {
     args: {
         data: NonNullable<SyntheticLayoutShift["args"]["data"]>;

package/core/lib/trace-engine.js

@@ -2,7 +2,7 @@ import * as TraceEngine from '@paulirish/trace_engine';
 
 import {polyfillDOMRect} from './polyfill-dom-rect.js';
 
-/** @typedef {import('@paulirish/trace_engine').Types.TraceEvents.SyntheticLayoutShift} SyntheticLayoutShift */
+/** @typedef {import('@paulirish/trace_engine').Types.Events.SyntheticLayoutShift} SyntheticLayoutShift */
 /** @typedef {SyntheticLayoutShift & {args: {data: NonNullable<SyntheticLayoutShift['args']['data']>}}} SaneSyntheticLayoutShift */
 
 polyfillDOMRect();

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "lighthouse",
   "type": "module",
-  "version": "12.2.2",
+  "version": "12.2.3-dev.20241203",
   "description": "Automated auditing, performance metrics, and best practices for the web.",
   "main": "./core/index.js",
   "bin": {
@@ -181,7 +181,7 @@
     "webtreemap-cdt": "^3.2.1"
   },
   "dependencies": {
-    "@paulirish/trace_engine": "0.0.32",
+    "@paulirish/trace_engine": "0.0.39",
     "@sentry/node": "^7.0.0",
     "axe-core": "^4.10.2",
     "chrome-launcher": "^1.1.2",

package/shared/localization/locales/ar-XB.json

@@ -2621,6 +2621,66 @@
   "flow-report/src/i18n/ui-strings.js | title": {
     "message": "‏‮Lighthouse‬‏ ‏‮User‬‏ ‏‮Flow‬‏ ‏‮Report‬‏"
   },
+  "node_modules/@paulirish/trace_engine/models/trace/insights/CLSCulprits.js | description": {
+    "message": "تحدث تغييرات التصميم عندما تتحرك العناصر بدون أي تدخُّل من المستخدم. [تحقَّق من أسباب تغييرات التصميم](https://web.dev/articles/optimize-cls)، مثل إضافة عناصر أو إزالتها أو تغيير خطوطها أثناء تحميل الصفحة."
+  },
+  "node_modules/@paulirish/trace_engine/models/trace/insights/CLSCulprits.js | title": {
+    "message": "أسباب تغييرات التصميم"
+  },
+  "node_modules/@paulirish/trace_engine/models/trace/insights/DocumentLatency.js | description": {
+    "message": "طلب الشبكة الأول هو الأهم.  يمكنك تقليل وقت الاستجابة للطلب عن طريق تجنُّب عمليات إعادة التوجيه وضمان استجابة الخادم بسرعة وتفعيل ميزة ضغط النص."
+  },
+  "node_modules/@paulirish/trace_engine/models/trace/insights/DocumentLatency.js | title": {
+    "message": "وقت الاستجابة لطلب المستند"
+  },
+  "node_modules/@paulirish/trace_engine/models/trace/insights/FontDisplay.js | description": {
+    "message": "يمكنك ضبط [font-display](https://developer.chrome.com/blog/font-display) على swap أو optional لضمان ظهور النص بشكل ثابت. ويمكن تحسين swap بشكل أكبر للتخفيف من تغييرات التصميم باستخدام [إجراءات تجاوز مقاييس الخطوط](https://developer.chrome.com/blog/font-fallbacks)."
+  },
+  "node_modules/@paulirish/trace_engine/models/trace/insights/FontDisplay.js | title": {
+    "message": "عرض الخط"
+  },
+  "node_modules/@paulirish/trace_engine/models/trace/insights/InteractionToNextPaint.js | description": {
+    "message": "ابدأ بالتحقيق في المرحلة الأطول. [يمكن تقليل التأخيرات](https://web.dev/articles/optimize-inp#optimize_interactions). ولتقليل مدة المعالجة، [حسِّن تكاليف سلسلة التعليمات الرئيسية](https://web.dev/articles/optimize-long-tasks)، والتي تكون في الغالب بيانات JavaScript."
+  },
+  "node_modules/@paulirish/trace_engine/models/trace/insights/InteractionToNextPaint.js | title": {
+    "message": "مدى استجابة الصفحة لتفاعلات المستخدم (INP) حسب المرحلة"
+  },
+  "node_modules/@paulirish/trace_engine/models/trace/insights/LCPDiscovery.js | description": {
+    "message": "يمكنك تحسين مقياس سرعة عرض أكبر محتوى مرئي (LCP) من خلال جعل صورة مقياس LCP [قابلة للاكتشاف](https://web.dev/articles/optimize-lcp#1_eliminate_resource_load_delay) من HTML على الفور، و[تجنُّب التحميل الكسول](https://web.dev/articles/lcp-lazy-loading)."
+  },
+  "node_modules/@paulirish/trace_engine/models/trace/insights/LCPDiscovery.js | title": {
+    "message": "الاطّلاع على طلبات LCP"
+  },
+  "node_modules/@paulirish/trace_engine/models/trace/insights/LCPPhases.js | description": {
+    "message": "لكل [مرحلة استراتيجيات تحسين محدَّدة](https://web.dev/articles/optimize-lcp#lcp-breakdown). ومن الأفضل أن يتم قضاء معظم وقت سرعة عرض أكبر محتوى مرئي (LCP) في تحميل الموارد، وليس في التأخيرات."
+  },
+  "node_modules/@paulirish/trace_engine/models/trace/insights/LCPPhases.js | title": {
+    "message": "سرعة عرض أكبر محتوى مرئي (LCP) حسب المرحلة"
+  },
+  "node_modules/@paulirish/trace_engine/models/trace/insights/RenderBlocking.js | description": {
+    "message": "تؤدي الطلبات إلى حظر العرض الأوّلي للصفحة، ما قد يُبطئ سرعة عرض أكبر محتوى مرئي (LCP). ويمكن [تأجيل هذه الطلبات](https://web.dev/learn/performance/understanding-the-critical-path#render-blocking_resources/) أو تضمينها لإخراجها من المسار الحرج."
+  },
+  "node_modules/@paulirish/trace_engine/models/trace/insights/RenderBlocking.js | title": {
+    "message": "طلبات حظر العرض"
+  },
+  "node_modules/@paulirish/trace_engine/models/trace/insights/SlowCSSSelector.js | description": {
+    "message": "إذا ظلت تكاليف ميزة \"إعادة احتساب النمط\" مرتفعة، يمكن أن يؤدي تحسين أداة الاختيار إلى خفضها. يمكنك [تحسين أدوات الاختيار](https://developer.chrome.com/docs/devtools/performance/selector-stats) من خلال زيادة الوقت المنقضي وزيادة النسبة المئوية للمسار البطيء. وسيؤدي استخدام أدوات الاختيار الأبسط وعدد أدوات الاختيار الأقل ونموذج DOM الأصغر ونموذج DOM الأقل تعقيدًا إلى تقليل تكاليف المطابقة."
+  },
+  "node_modules/@paulirish/trace_engine/models/trace/insights/SlowCSSSelector.js | title": {
+    "message": "تكاليف أداة اختيار لغة CSS"
+  },
+  "node_modules/@paulirish/trace_engine/models/trace/insights/ThirdParties.js | description": {
+    "message": "يمكن أن يؤثر الرمز البرمجي التابع لجهة خارجية بشكل كبير في أداء التحميل. [يمكنك تقليل تحميل الرموز البرمجية التابعة لجهات خارجية وتأجيله](https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/loading-third-party-javascript/)، ومنح الأولوية لمحتوى صفحتك."
+  },
+  "node_modules/@paulirish/trace_engine/models/trace/insights/ThirdParties.js | title": {
+    "message": "الجهات الخارجية"
+  },
+  "node_modules/@paulirish/trace_engine/models/trace/insights/Viewport.js | description": {
+    "message": "إنّ إطار عرض الصفحة غير محسّن للأجهزة الجوّالة، لذا قد يتم [تأخير التفاعلات التي تتم من خلال النقر بمقدار 300 ملي ثانية على الأكثر](https://developer.chrome.com/blog/300ms-tap-delay-gone-away/)."
+  },
+  "node_modules/@paulirish/trace_engine/models/trace/insights/Viewport.js | title": {
+    "message": "إطار العرض غير محسَّن للأجهزة الجوّالة"
+  },
   "node_modules/lighthouse-stack-packs/packs/amp.js | efficient-animated-content": {
     "message": "‏‮For‬‏ ‏‮animated‬‏ ‏‮content‬‏, ‏‮use‬‏ [`amp-anim`](https://amp.dev/documentation/components/amp-anim/) ‏‮to‬‏ ‏‮minimize‬‏ ‏‮CPU‬‏ ‏‮usage‬‏ ‏‮when‬‏ ‏‮the‬‏ ‏‮content‬‏ ‏‮is‬‏ ‏‮offscreen‬‏."
   },

package/shared/localization/locales/ar.json

@@ -2621,6 +2621,66 @@
   "flow-report/src/i18n/ui-strings.js | title": {
     "message": "تقرير تدفق المستخدمين في أداة Lighthouse"
   },
+  "node_modules/@paulirish/trace_engine/models/trace/insights/CLSCulprits.js | description": {
+    "message": "تحدث تغييرات التصميم عندما تتحرك العناصر بدون أي تدخُّل من المستخدم. [تحقَّق من أسباب تغييرات التصميم](https://web.dev/articles/optimize-cls)، مثل إضافة عناصر أو إزالتها أو تغيير خطوطها أثناء تحميل الصفحة."
+  },
+  "node_modules/@paulirish/trace_engine/models/trace/insights/CLSCulprits.js | title": {
+    "message": "أسباب تغييرات التصميم"
+  },
+  "node_modules/@paulirish/trace_engine/models/trace/insights/DocumentLatency.js | description": {
+    "message": "طلب الشبكة الأول هو الأهم.  يمكنك تقليل وقت الاستجابة للطلب عن طريق تجنُّب عمليات إعادة التوجيه وضمان استجابة الخادم بسرعة وتفعيل ميزة ضغط النص."
+  },
+  "node_modules/@paulirish/trace_engine/models/trace/insights/DocumentLatency.js | title": {
+    "message": "وقت الاستجابة لطلب المستند"
+  },
+  "node_modules/@paulirish/trace_engine/models/trace/insights/FontDisplay.js | description": {
+    "message": "يمكنك ضبط [font-display](https://developer.chrome.com/blog/font-display) على swap أو optional لضمان ظهور النص بشكل ثابت. ويمكن تحسين swap بشكل أكبر للتخفيف من تغييرات التصميم باستخدام [إجراءات تجاوز مقاييس الخطوط](https://developer.chrome.com/blog/font-fallbacks)."
+  },
+  "node_modules/@paulirish/trace_engine/models/trace/insights/FontDisplay.js | title": {
+    "message": "عرض الخط"
+  },
+  "node_modules/@paulirish/trace_engine/models/trace/insights/InteractionToNextPaint.js | description": {
+    "message": "ابدأ بالتحقيق في المرحلة الأطول. [يمكن تقليل التأخيرات](https://web.dev/articles/optimize-inp#optimize_interactions). ولتقليل مدة المعالجة، [حسِّن تكاليف سلسلة التعليمات الرئيسية](https://web.dev/articles/optimize-long-tasks)، والتي تكون في الغالب بيانات JavaScript."
+  },
+  "node_modules/@paulirish/trace_engine/models/trace/insights/InteractionToNextPaint.js | title": {
+    "message": "مدى استجابة الصفحة لتفاعلات المستخدم (INP) حسب المرحلة"
+  },
+  "node_modules/@paulirish/trace_engine/models/trace/insights/LCPDiscovery.js | description": {
+    "message": "يمكنك تحسين مقياس سرعة عرض أكبر محتوى مرئي (LCP) من خلال جعل صورة مقياس LCP [قابلة للاكتشاف](https://web.dev/articles/optimize-lcp#1_eliminate_resource_load_delay) من HTML على الفور، و[تجنُّب التحميل الكسول](https://web.dev/articles/lcp-lazy-loading)."
+  },
+  "node_modules/@paulirish/trace_engine/models/trace/insights/LCPDiscovery.js | title": {
+    "message": "الاطّلاع على طلبات LCP"
+  },
+  "node_modules/@paulirish/trace_engine/models/trace/insights/LCPPhases.js | description": {
+    "message": "لكل [مرحلة استراتيجيات تحسين محدَّدة](https://web.dev/articles/optimize-lcp#lcp-breakdown). ومن الأفضل أن يتم قضاء معظم وقت سرعة عرض أكبر محتوى مرئي (LCP) في تحميل الموارد، وليس في التأخيرات."
+  },
+  "node_modules/@paulirish/trace_engine/models/trace/insights/LCPPhases.js | title": {
+    "message": "سرعة عرض أكبر محتوى مرئي (LCP) حسب المرحلة"
+  },
+  "node_modules/@paulirish/trace_engine/models/trace/insights/RenderBlocking.js | description": {
+    "message": "تؤدي الطلبات إلى حظر العرض الأوّلي للصفحة، ما قد يُبطئ سرعة عرض أكبر محتوى مرئي (LCP). ويمكن [تأجيل هذه الطلبات](https://web.dev/learn/performance/understanding-the-critical-path#render-blocking_resources/) أو تضمينها لإخراجها من المسار الحرج."
+  },
+  "node_modules/@paulirish/trace_engine/models/trace/insights/RenderBlocking.js | title": {
+    "message": "طلبات حظر العرض"
+  },
+  "node_modules/@paulirish/trace_engine/models/trace/insights/SlowCSSSelector.js | description": {
+    "message": "إذا ظلت تكاليف ميزة \"إعادة احتساب النمط\" مرتفعة، يمكن أن يؤدي تحسين أداة الاختيار إلى خفضها. يمكنك [تحسين أدوات الاختيار](https://developer.chrome.com/docs/devtools/performance/selector-stats) من خلال زيادة الوقت المنقضي وزيادة النسبة المئوية للمسار البطيء. وسيؤدي استخدام أدوات الاختيار الأبسط وعدد أدوات الاختيار الأقل ونموذج DOM الأصغر ونموذج DOM الأقل تعقيدًا إلى تقليل تكاليف المطابقة."
+  },
+  "node_modules/@paulirish/trace_engine/models/trace/insights/SlowCSSSelector.js | title": {
+    "message": "تكاليف أداة اختيار لغة CSS"
+  },
+  "node_modules/@paulirish/trace_engine/models/trace/insights/ThirdParties.js | description": {
+    "message": "يمكن أن يؤثر الرمز البرمجي التابع لجهة خارجية بشكل كبير في أداء التحميل. [يمكنك تقليل تحميل الرموز البرمجية التابعة لجهات خارجية وتأجيله](https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/loading-third-party-javascript/)، ومنح الأولوية لمحتوى صفحتك."
+  },
+  "node_modules/@paulirish/trace_engine/models/trace/insights/ThirdParties.js | title": {
+    "message": "الجهات الخارجية"
+  },
+  "node_modules/@paulirish/trace_engine/models/trace/insights/Viewport.js | description": {
+    "message": "إنّ إطار عرض الصفحة غير محسّن للأجهزة الجوّالة، لذا قد يتم [تأخير التفاعلات التي تتم من خلال النقر بمقدار 300 ملي ثانية على الأكثر](https://developer.chrome.com/blog/300ms-tap-delay-gone-away/)."
+  },
+  "node_modules/@paulirish/trace_engine/models/trace/insights/Viewport.js | title": {
+    "message": "إطار العرض غير محسَّن للأجهزة الجوّالة"
+  },
   "node_modules/lighthouse-stack-packs/packs/amp.js | efficient-animated-content": {
     "message": "بالنسبة إلى المحتوى الذي يتضمن صورًا متحركة، يمكنك استخدام [`amp-anim`](https://amp.dev/documentation/components/amp-anim/) لتقليل استخدام وحدة المعالجة المركزية (CPU) عندما يكون المحتوى خارج الشاشة."
   },