chrome-devtools-frontend 1.0.1518653 → 1.0.1520139

package/front_end/models/ai_assistance/agents/PerformanceAgent.ts

@@ -2,8 +2,6 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-import '../../../ui/components/icon_button/icon_button.js';
-
 import * as Common from '../../../core/common/common.js';
 import * as Host from '../../../core/host/host.js';
 import * as i18n from '../../../core/i18n/i18n.js';
@@ -138,13 +136,23 @@ When referring to a trace event that has a corresponding \`eventKey\`, annotate
 When asking the user to make a choice between multiple options, output a list of choices at the end of your text response. The format is \`SUGGESTIONS: ["suggestion1", "suggestion2", "suggestion3"]\`. This MUST start on a newline, and be a single line.
 `;
 
+const extraPreambleWhenFreshTrace = `Additional notes:
+
+When referring to an element for which you know the nodeId, annotate your output using markdown link syntax:
+- For example, if nodeId is 23: [LCP element](#node-23)
+- This link will reveal the element in the Elements panel
+- Never mention node or nodeId when referring to the element, and especially not in the link text.
+- When referring to the LCP, it's useful to also mention what the LCP element is via its nodeId. Use the markdown link syntax to do so.
+`;
+
 const callFrameDataFormatDescription = `Each call frame is presented in the following format:
 
-'id;name;duration;selfTime;urlIndex;childRange;[S]'
+'id;eventKey;name;duration;selfTime;urlIndex;childRange;[S]'
 
 Key definitions:
 
 * id: A unique numerical identifier for the call frame. Never mention this id in the output to the user.
+* eventKey: String that uniquely identifies this event in the flame chart.
 * name: A concise string describing the call frame (e.g., 'Evaluate Script', 'render', 'fetchData').
 * duration: The total execution time of the call frame, including its children.
 * selfTime: The time spent directly within the call frame, excluding its children's execution.
@@ -154,11 +162,11 @@ Key definitions:
 
 Example Call Tree:
 
-1;main;500;100;;
-2;update;200;50;;3
-3;animate;150;20;0;4-5;S
-4;calculatePosition;80;80;;
-5;applyStyles;50;50;;
+1;r-123;main;500;100;;
+2;r-124;update;200;50;;3
+3;p-49575-15428179-2834-374;animate;150;20;0;4-5;S
+4;p-49575-15428179-3505-1162;calculatePosition;80;80;;
+5;p-49575-15428179-5391-2767;applyStyles;50;50;;
 `;
 
 enum ScorePriority {
@@ -190,7 +198,7 @@ export class PerformanceTraceContext extends ConversationContext<AgentFocus> {
   }
 
   override getOrigin(): string {
-    const {min, max} = this.#focus.data.parsedTrace.data.Meta.traceBounds;
+    const {min, max} = this.#focus.parsedTrace.data.Meta.traceBounds;
     return `trace-${min}-${max}`;
   }
 
@@ -199,7 +207,7 @@ export class PerformanceTraceContext extends ConversationContext<AgentFocus> {
   }
 
   override getTitle(): string {
-    const focus = this.#focus.data;
+    const focus = this.#focus;
 
     let url = focus.insightSet?.url;
     if (!url) {
@@ -210,6 +218,9 @@ export class PerformanceTraceContext extends ConversationContext<AgentFocus> {
     if (focus.insight) {
       parts.push(focus.insight.title);
     }
+    if (focus.event) {
+      parts.push(Trace.Name.forEntry(focus.event));
+    }
     if (focus.callTree) {
       const node = focus.callTree.selectedNode ?? focus.callTree.rootNode;
       parts.push(Trace.Name.forEntry(node.event));
@@ -222,9 +233,9 @@ export class PerformanceTraceContext extends ConversationContext<AgentFocus> {
    * "Ask AI".
    */
   override async getSuggestions(): Promise<ConversationSuggestions|undefined> {
-    const data = this.#focus.data;
+    const focus = this.#focus;
 
-    if (data.callTree) {
+    if (focus.callTree) {
       return [
         {title: 'What\'s the purpose of this work?', jslogContext: 'performance-default'},
         {title: 'Where is time being spent?', jslogContext: 'performance-default'},
@@ -232,17 +243,17 @@ export class PerformanceTraceContext extends ConversationContext<AgentFocus> {
       ];
     }
 
-    if (data.insight) {
-      return new PerformanceInsightFormatter(this.#focus, data.insight).getSuggestions();
+    if (focus.insight) {
+      return new PerformanceInsightFormatter(focus, focus.insight).getSuggestions();
     }
 
     const suggestions: ConversationSuggestions =
         [{title: 'What performance issues exist with my page?', jslogContext: 'performance-default'}];
 
-    if (data.insightSet) {
-      const lcp = data.insightSet ? Trace.Insights.Common.getLCP(data.insightSet) : null;
-      const cls = data.insightSet ? Trace.Insights.Common.getCLS(data.insightSet) : null;
-      const inp = data.insightSet ? Trace.Insights.Common.getINP(data.insightSet) : null;
+    if (focus.insightSet) {
+      const lcp = focus.insightSet ? Trace.Insights.Common.getLCP(focus.insightSet) : null;
+      const cls = focus.insightSet ? Trace.Insights.Common.getCLS(focus.insightSet) : null;
+      const inp = focus.insightSet ? Trace.Insights.Common.getINP(focus.insightSet) : null;
 
       const ModelHandlers = Trace.Handlers.ModelHandlers;
       const GOOD = Trace.Handlers.ModelHandlers.PageLoadMetrics.ScoreClassification.GOOD;
@@ -259,9 +270,9 @@ export class PerformanceTraceContext extends ConversationContext<AgentFocus> {
 
       // Add up to 3 suggestions from the top failing insights.
       const top3FailingInsightSuggestions =
-          Object.values(data.insightSet.model)
+          Object.values(focus.insightSet.model)
               .filter(model => model.state !== 'pass')
-              .map(model => new PerformanceInsightFormatter(this.#focus, model).getSuggestions().at(-1))
+              .map(model => new PerformanceInsightFormatter(focus, model).getSuggestions().at(-1))
               .filter(suggestion => !!suggestion)
               .slice(0, 3);
       suggestions.push(...top3FailingInsightSuggestions);
@@ -280,6 +291,7 @@ const MAX_FUNCTION_RESULT_BYTE_LENGTH = 16384 * 4;
  */
 export class PerformanceAgent extends AiAgent<AgentFocus> {
   #formatter: PerformanceTraceFormatter|null = null;
+  #lastEventForEnhancedQuery: Trace.Types.Events.Event|undefined;
   #lastInsightForEnhancedQuery: Trace.Insights.Types.InsightModel|undefined;
   #hasShownAnalyzeTraceContext = false;
 
@@ -300,6 +312,10 @@ export class PerformanceAgent extends AiAgent<AgentFocus> {
     text: extraPreambleWhenNotExternal,
     metadata: {source: 'devtools', score: ScorePriority.CRITICAL}
   };
+  #freshTraceExtraPreambleFact: Host.AidaClient.RequestFact = {
+    text: extraPreambleWhenFreshTrace,
+    metadata: {source: 'devtools', score: ScorePriority.CRITICAL}
+  };
   #networkDataDescriptionFact: Host.AidaClient.RequestFact = {
     text: PerformanceTraceFormatter.networkDataFormatDescription,
     metadata: {source: 'devtools', score: ScorePriority.CRITICAL}
@@ -373,10 +389,6 @@ export class PerformanceAgent extends AiAgent<AgentFocus> {
    *   1. go to paulirish.com, record a trace
    *   2. say "What performance issues exist with my page?"
    *   3. then say "images"
-   *
-   * TODO(cjamcl): reduce the reliance on this by making sure all URL references
-   * (such as the insight formatters) add the "eventKey" as a suffix, just like all
-   * other events.
    */
   #parseForKnownUrls(response: string): string {
     const focus = this.context?.getItem();
@@ -405,8 +417,7 @@ export class PerformanceAgent extends AiAgent<AgentFocus> {
         return match;
       }
 
-      const request =
-          focus.data.parsedTrace.data.NetworkRequests.byTime.find(request => request.args.data.url === urlText);
+      const request = focus.parsedTrace.data.NetworkRequests.byTime.find(request => request.args.data.url === urlText);
       if (!request) {
         return match;
       }
@@ -420,53 +431,6 @@ export class PerformanceAgent extends AiAgent<AgentFocus> {
     });
   }
 
-  #parseSuggestions(text: string): ParsedResponse {
-    if (!text) {
-      return {answer: ''};
-    }
-
-    const lines = text.split('\n');
-    const answerLines: string[] = [];
-    let suggestions: [string, ...string[]]|undefined;
-
-    for (const line of lines) {
-      const trimmed = line.trim();
-      if (trimmed.startsWith('SUGGESTIONS:')) {
-        try {
-          // TODO: Do basic validation this is an array with strings
-          suggestions = JSON.parse(trimmed.substring('SUGGESTIONS:'.length).trim());
-        } catch {
-        }
-      } else {
-        answerLines.push(line);
-      }
-    }
-
-    // Sometimes the model fails to put the SUGGESTIONS text on its own line. Handle
-    // the case where the suggestions are part of the last line of the answer.
-    if (!suggestions && answerLines.at(-1)?.includes('SUGGESTIONS:')) {
-      const [answer, suggestionsText] = answerLines[answerLines.length - 1].split('SUGGESTIONS:', 2);
-      try {
-        // TODO: Do basic validation this is an array with strings
-        suggestions = JSON.parse(suggestionsText.trim().substring('SUGGESTIONS:'.length).trim());
-      } catch {
-      }
-      answerLines[answerLines.length - 1] = answer;
-    }
-
-    const response: ParsedResponse = {
-      // If we could not parse the parts, consider the response to be an
-      // answer.
-      answer: answerLines.join('\n'),
-    };
-
-    if (suggestions) {
-      response.suggestions = suggestions;
-    }
-
-    return response;
-  }
-
   #parseMarkdown(response: string): string {
     /**
      * Sometimes the LLM responds with code chunks that wrap a text based markdown response.
@@ -482,10 +446,10 @@ export class PerformanceAgent extends AiAgent<AgentFocus> {
   }
 
   override parseTextResponse(response: string): ParsedResponse {
-    response = response.trim();
-    response = this.#parseForKnownUrls(response);
-    response = this.#parseMarkdown(response);
-    return this.#parseSuggestions(response);
+    const parsedResponse = super.parseTextResponse(response);
+    parsedResponse.answer = this.#parseForKnownUrls(parsedResponse.answer);
+    parsedResponse.answer = this.#parseMarkdown(parsedResponse.answer);
+    return parsedResponse;
   }
 
   override async enhanceQuery(query: string, context: PerformanceTraceContext|null): Promise<string> {
@@ -500,13 +464,21 @@ export class PerformanceAgent extends AiAgent<AgentFocus> {
     const focus = context.getItem();
     const selected: string[] = [];
 
-    if (focus.data.callTree) {
+    if (focus.event) {
+      const includeEventInfo = focus.event !== this.#lastEventForEnhancedQuery;
+      this.#lastEventForEnhancedQuery = focus.event;
+      if (includeEventInfo) {
+        selected.push(`User selected an event ${this.#formatter?.serializeEvent(focus.event)}.\n\n`);
+      }
+    }
+
+    if (focus.callTree) {
       // If this is a followup chat about the same call tree, don't include the call tree serialization again.
       // We don't need to repeat it and we'd rather have more the context window space.
       let contextString = '';
-      if (!this.#callTreeContextSet.has(focus.data.callTree)) {
-        contextString = focus.data.callTree.serialize();
-        this.#callTreeContextSet.add(focus.data.callTree);
+      if (!this.#callTreeContextSet.has(focus.callTree)) {
+        contextString = focus.callTree.serialize();
+        this.#callTreeContextSet.add(focus.callTree);
       }
 
       if (contextString) {
@@ -514,17 +486,17 @@ export class PerformanceAgent extends AiAgent<AgentFocus> {
       }
     }
 
-    if (focus.data.insight) {
+    if (focus.insight) {
       // We only need to add Insight info to a prompt when the context changes. For example:
       // User clicks Insight A. We need to send info on Insight A with the prompt.
       // User asks follow up question. We do not need to resend Insight A with the prompt.
       // User clicks Insight B. We now need to send info on Insight B with the prompt.
       // User clicks Insight A. We should resend the Insight info with the prompt.
-      const includeInsightInfo = focus.data.insight !== this.#lastInsightForEnhancedQuery;
-      this.#lastInsightForEnhancedQuery = focus.data.insight;
+      const includeInsightInfo = focus.insight !== this.#lastInsightForEnhancedQuery;
+      this.#lastInsightForEnhancedQuery = focus.insight;
 
       if (includeInsightInfo) {
-        selected.push(`User selected the ${focus.data.insight.insightKey} insight.\n\n`);
+        selected.push(`User selected the ${focus.insight.insightKey} insight.\n\n`);
       }
     }
 
@@ -636,11 +608,16 @@ export class PerformanceAgent extends AiAgent<AgentFocus> {
       this.addFact(this.#notExternalExtraPreambleFact);
     }
 
+    const isFresh = Tracing.FreshRecording.Tracker.instance().recordingIsFresh(focus.parsedTrace);
+    if (isFresh) {
+      this.addFact(this.#freshTraceExtraPreambleFact);
+    }
+
     this.addFact(this.#callFrameDataDescriptionFact);
     this.addFact(this.#networkDataDescriptionFact);
 
     if (!this.#traceFacts.length) {
-      this.#formatter = new PerformanceTraceFormatter(focus);
+      this.#formatter = new PerformanceTraceFormatter(focus, PerformanceInsightFormatter.create);
       this.#createFactForTraceSummary();
       this.#createFactForCriticalRequests();
       this.#createFactForMainThreadBottomUpSummary();
@@ -672,7 +649,7 @@ export class PerformanceAgent extends AiAgent<AgentFocus> {
 
   #declareFunctions(context: PerformanceTraceContext): void {
     const focus = context.getItem();
-    const {parsedTrace, insightSet} = focus.data;
+    const {parsedTrace, insightSet} = focus;
 
     this.declareFunction<{insightName: string}, {details: string}>('getInsightDetails', {
       description:

package/front_end/models/ai_assistance/agents/PerformanceAnnotationsAgent.ts

@@ -116,11 +116,11 @@ export class PerformanceAnnotationsAgent extends AiAgent<AgentFocus> {
     }
 
     const focus = context.getItem();
-    if (!focus.data.callTree) {
+    if (!focus.callTree) {
       throw new Error('unexpected context');
     }
 
-    const callTree = focus.data.callTree;
+    const callTree = focus.callTree;
 
     yield {
       type: ResponseType.CONTEXT,
@@ -140,11 +140,11 @@ export class PerformanceAnnotationsAgent extends AiAgent<AgentFocus> {
     }
 
     const focus = context.getItem();
-    if (!focus.data.callTree) {
+    if (!focus.callTree) {
       throw new Error('unexpected context');
     }
 
-    const callTree = focus.data.callTree;
+    const callTree = focus.callTree;
     const contextString = callTree.serialize();
     return `${contextString}\n\n# User request\n\n${query}`;
   }

package/front_end/models/ai_assistance/agents/StylingAgent.ts

@@ -21,7 +21,6 @@ import {
   type ConversationSuggestions,
   type FunctionCallHandlerResult,
   MultimodalInputType,
-  type ParsedResponse,
   type RequestOptions,
   ResponseType,
 } from './AiAgent.js';
@@ -265,36 +264,6 @@ export class StylingAgent extends AiAgent<SDK.DOMModel.DOMNode> {
   override preambleFeatures(): string[] {
     return ['function_calling'];
   }
-  override parseTextResponse(text: string): ParsedResponse {
-    // We're returning an empty answer to denote the erroneous case.
-    if (!text.trim()) {
-      return {answer: ''};
-    }
-
-    const lines = text.split('\n');
-    const answerLines: string[] = [];
-    let suggestions: [string, ...string[]]|undefined;
-
-    for (const line of lines) {
-      const trimmed = line.trim();
-      if (trimmed.startsWith('SUGGESTIONS:')) {
-        try {
-          // TODO: Do basic validation this is an array with strings
-          suggestions = JSON.parse(trimmed.substring('SUGGESTIONS:'.length).trim());
-        } catch {
-        }
-      } else {
-        answerLines.push(line);
-      }
-    }
-
-    return {
-      // If we could not parse the parts, consider the response to be an
-      // answer.
-      answer: answerLines.join('\n'),
-      suggestions,
-    };
-  }
 
   #execJs: typeof executeJsCode;
 

package/front_end/models/ai_assistance/data_formatters/PerformanceInsightFormatter.snapshot.txt

@@ -7,7 +7,7 @@ This insight is used to analyze the time spent that contributed to the final LCP
 
 ## Detailed analysis:
 The Largest Contentful Paint (LCP) time for this navigation was 240 ms.
-The LCP element (IMG) is an image fetched from `https://creativetouchrotherham.co.uk/images/creative-touch-home/creative_touch_rotherham_homehero/creative_touch_rotherham_homehero_700.webp`.
+The LCP element (IMG, nodeId: 23) is an image fetched from https://creativetouchrotherham.co.uk/images/creative-touch-home/creative_touch_rotherham_homehero/creative_touch_rotherham_homehero_700.webp (eventKey: s-1418).
 ## LCP resource network request: https://creativetouchrotherham.co.uk/images/creative-touch-home/creative_touch_rotherham_homehero/creative_touch_rotherham_homehero_700.webp
 eventKey: s-1418
 Timings:
@@ -68,7 +68,7 @@ This insight is used to analyze the time spent that contributed to the final LCP
 
 ## Detailed analysis:
 The Largest Contentful Paint (LCP) time for this navigation was 129 ms.
-The LCP element is an image fetched from `https://web-dev.imgix.net/image/kheDArv5csY6rvQUJDbWRscckLr1/4i7JstVZvgTFk9dxCe4a.svg`.
+The LCP element is an image fetched from https://web-dev.imgix.net/image/kheDArv5csY6rvQUJDbWRscckLr1/4i7JstVZvgTFk9dxCe4a.svg (eventKey: s-1314).
 ## LCP resource network request: https://web-dev.imgix.net/image/kheDArv5csY6rvQUJDbWRscckLr1/4i7JstVZvgTFk9dxCe4a.svg
 eventKey: s-1314
 Timings:
@@ -186,7 +186,7 @@ It is important that all of these checks pass to minimize the delay between the
 
 ## Detailed analysis:
 The Largest Contentful Paint (LCP) time for this navigation was 1,077 ms.
-The LCP element is an image fetched from `http://localhost:8787/lcp-discovery-delay/lcp-image.jpg`.
+The LCP element is an image fetched from http://localhost:8787/lcp-discovery-delay/lcp-image.jpg (eventKey: s-25281).
 ## LCP resource network request: http://localhost:8787/lcp-discovery-delay/lcp-image.jpg
 eventKey: s-25281
 Timings:
@@ -310,7 +310,7 @@ Layout shifts in this cluster:
 - Start time: 472 ms
 - Score: 0.0003
 - Potential root causes:
-  - A font that was loaded over the network (https://fonts.gstatic.com/s/specialgothicexpandedone/v2/IurO6Zxk74-YaYk1r3HOet4g75ENmBxUmOK61tA0Iu5QmJF_.woff2).
+  - A font that was loaded over the network: https://fonts.gstatic.com/s/specialgothicexpandedone/v2/IurO6Zxk74-YaYk1r3HOet4g75ENmBxUmOK61tA0Iu5QmJF_.woff2 (eventKey: s-1158).
 ### Layout shift 2:
 - Start time: 857 ms
 - Score: 0.0844
@@ -320,12 +320,12 @@ Layout shifts in this cluster:
 - Start time: 1,352 ms
 - Score: 0.0068
 - Potential root causes:
-  - An unsized image (IMG) (url: http://localhost:8000/unsized-image.png).
+  - An unsized image (IMG) (url: http://localhost:8000/unsized-image.png (eventKey: s-4487)).
 ### Layout shift 4:
 - Start time: 1,537 ms
 - Score: 0.3344
 - Potential root causes:
-  - An unsized image (IMG) (url: http://localhost:8000/unsized-image.png).
+  - An unsized image (IMG) (url: http://localhost:8000/unsized-image.png (eventKey: s-4487)).
 ### Layout shift 5:
 - Start time: 2,343 ms
 - Score: 0.3396
@@ -338,6 +338,104 @@ Layout shifts in this cluster:
 - https://web.dev/articles/optimize-cls
 === end content
 
+Title: PerformanceInsightFormatter CLS serializes correctly when there are no layout shifts
+Content:
+## Insight Title: Layout shift culprits
+
+## Insight Summary:
+Cumulative Layout Shifts (CLS) is a measure of the largest burst of layout shifts for every unexpected layout shift that occurs during the lifecycle of a page. This is a Core Web Vital and the thresholds for categorizing a score are:
+- Good: 0.1 or less
+- Needs improvement: more than 0.1 and less than or equal to 0.25
+- Bad: over 0.25
+
+## Detailed analysis:
+No layout shifts were found.
+
+## Estimated savings: none
+
+## External resources:
+- https://wdeb.dev/articles/cls
+- https://web.dev/articles/optimize-cls
+=== end content
+
+Title: PerformanceInsightFormatter CLS outputs information on non-composited animations
+Content:
+## Insight Title: Layout shift culprits
+
+## Insight Summary:
+Cumulative Layout Shifts (CLS) is a measure of the largest burst of layout shifts for every unexpected layout shift that occurs during the lifecycle of a page. This is a Core Web Vital and the thresholds for categorizing a score are:
+- Good: 0.1 or less
+- Needs improvement: more than 0.1 and less than or equal to 0.25
+- Bad: over 0.25
+
+## Detailed analysis:
+The worst layout shift cluster was the cluster that started at 60 ms and ended at 1,243 ms, with a duration of 1,183 ms.
+The score for this cluster is 0.0140.
+
+Layout shifts in this cluster:
+### Layout shift 1:
+- Start time: 60 ms
+- Score: 0.0012
+- No potential root causes identified
+### Layout shift 2:
+- Start time: 76 ms
+- Score: 0.0012
+- No potential root causes identified
+### Layout shift 3:
+- Start time: 93 ms
+- Score: 0.0012
+- No potential root causes identified
+### Layout shift 4:
+- Start time: 110 ms
+- Score: 0.0012
+- No potential root causes identified
+### Layout shift 5:
+- Start time: 126 ms
+- Score: 0.0012
+- No potential root causes identified
+### Layout shift 6:
+- Start time: 143 ms
+- Score: 0.0012
+- No potential root causes identified
+### Layout shift 7:
+- Start time: 160 ms
+- Score: 0.0012
+- No potential root causes identified
+### Layout shift 8:
+- Start time: 176 ms
+- Score: 0.0012
+- No potential root causes identified
+### Layout shift 9:
+- Start time: 193 ms
+- Score: 0.0012
+- No potential root causes identified
+### Layout shift 10:
+- Start time: 210 ms
+- Score: 0.0012
+- No potential root causes identified
+### Layout shift 11:
+- Start time: 226 ms
+- Score: 0.0012
+- No potential root causes identified
+### Layout shift 12:
+- Start time: 243 ms
+- Score: 0.0012
+- Potential root causes:
+  - A non-composited animation:
+- non-composited animation: `change-height`
+    Animation name: change-height
+    Unsupported CSS properties:
+    - height
+    Failure reasons:
+      - TARGET_HAS_INVALID_COMPOSITING_STATE, UNSUPPORTED_CSS_PROPERTY
+
+## Estimated savings: none
+
+## External resources:
+- https://wdeb.dev/articles/cls
+- https://web.dev/articles/optimize-cls
+=== end content
+
 Title: PerformanceInsightFormatter INP breakdown serializes the correct details
 Content:
 ## Insight Title: INP breakdown
@@ -589,16 +687,16 @@ Total legacy JavaScript: 8 files.
 
 Legacy JavaScript by file:
 
-- Script: https://s.yimg.com/aaq/benji/benji-2.2.99.js - Wasted bytes: 37204 bytes
+- Script: https://s.yimg.com/aaq/benji/benji-2.2.99.js (eventKey: s-3387) - Wasted bytes: 37204 bytes
 Matches:
 Line: 0, Column: 133, Name: Promise.allSettled
 
-- Script: https://s.yimg.com/aaq/c/25fa214.caas-news_web.min.js - Wasted bytes: 36084 bytes
+- Script: https://s.yimg.com/aaq/c/25fa214.caas-news_web.min.js (eventKey: s-3412) - Wasted bytes: 36084 bytes
 Matches:
 Line: 0, Column: 13310, Name: Array.from
 Line: 0, Column: 14623, Name: Object.assign
 
-- Script: https://s.yimg.com/du/ay/wnsrvbjmeprtfrnfx.js - Wasted bytes: 12850 bytes
+- Script: https://s.yimg.com/du/ay/wnsrvbjmeprtfrnfx.js (eventKey: s-6273) - Wasted bytes: 12850 bytes
 Matches:
 Line: 111, Column: 7829, Name: @babel/plugin-transform-spread
 Line: 111, Column: 1794, Name: Array.prototype.find
@@ -607,21 +705,21 @@ Line: 111, Column: 2748, Name: Object.values
 Line: 111, Column: 2473, Name: String.prototype.includes
 Line: 111, Column: 2627, Name: String.prototype.startsWith
 
-- Script: https://static.criteo.net/js/ld/publishertag.prebid.144.js - Wasted bytes: 10751 bytes
+- Script: https://static.criteo.net/js/ld/publishertag.prebid.144.js (eventKey: s-257378) - Wasted bytes: 10751 bytes
 Matches:
 Line: 1, Column: 74871, Name: Array.isArray
 Line: 1, Column: 75344, Name: Array.prototype.filter
 Line: 1, Column: 75013, Name: Array.prototype.indexOf
 
-- Script: https://s.yimg.com/oa/consent.js - Wasted bytes: 8157 bytes
+- Script: https://s.yimg.com/oa/consent.js (eventKey: s-3384) - Wasted bytes: 8157 bytes
 Matches:
 Line: 1, Column: 132267, Name: Array.prototype.includes
 
-- Script: https://pm-widget.taboola.com/yahooweb-network/pmk-20220605.1.js - Wasted bytes: 7625 bytes
+- Script: https://pm-widget.taboola.com/yahooweb-network/pmk-20220605.1.js (eventKey: s-52229) - Wasted bytes: 7625 bytes
 Matches:
 Line: 181, Column: 26, Name: Object.keys
 
-- Script: https://news.yahoo.com/ - Wasted bytes: 7141 bytes
+- Script: https://news.yahoo.com/ (eventKey: s-2116) - Wasted bytes: 7141 bytes
 Matches:
 Line: 0, Column: 8382, Name: @babel/plugin-transform-classes
 Line: 0, Column: 107712, Name: Array.prototype.filter
@@ -629,7 +727,7 @@ Line: 0, Column: 107393, Name: Array.prototype.forEach
 Line: 0, Column: 108005, Name: Array.prototype.map
 Line: 0, Column: 108358, Name: String.prototype.includes
 
-- Script: https://cdn.taboola.com/libtrc/yahooweb-network/loader.js - Wasted bytes: 7061 bytes
+- Script: https://cdn.taboola.com/libtrc/yahooweb-network/loader.js (eventKey: s-6352) - Wasted bytes: 7061 bytes
 Matches:
 Line: 0, Column: 390544, Name: Object.entries
 Line: 0, Column: 390688, Name: Object.values
@@ -669,12 +767,12 @@ This insight identifies font issues when a webpage uses custom fonts, for exampl
 ## Detailed analysis:
 The following font display issues were found:
 
- - Font name: jizaRExUiTo99u79D0KExcOPIDU.woff2, URL: https://fonts.gstatic.com/s/ptsans/v17/jizaRExUiTo99u79D0KExcOPIDU.woff2, Property 'font-display' set to: 'auto', Wasted time: 20 ms.
- - Font name: SlGVmQWMvZQIdix7AFxXkHNSbRYXags.woff2, URL: https://fonts.gstatic.com/s/droidsans/v18/SlGVmQWMvZQIdix7AFxXkHNSbRYXags.woff2, Property 'font-display' set to: 'auto', Wasted time: 15 ms.
- - Font name: jizfRExUiTo99u79B_mh0O6tLR8a8zI.woff2, URL: https://fonts.gstatic.com/s/ptsans/v17/jizfRExUiTo99u79B_mh0O6tLR8a8zI.woff2, Property 'font-display' set to: 'auto', Wasted time: 15 ms.
- - Font name: SlGWmQWMvZQIdix7AFxXmMh3eDs1ZyHKpWg.woff2, URL: https://fonts.gstatic.com/s/droidsans/v18/SlGWmQWMvZQIdix7AFxXmMh3eDs1ZyHKpWg.woff2, Property 'font-display' set to: 'auto', Wasted time: 15 ms.
- - Font name: EJRVQgYoZZY2vCFuvAFWzr-_dSb_.woff2, URL: https://fonts.gstatic.com/s/ptserif/v18/EJRVQgYoZZY2vCFuvAFWzr-_dSb_.woff2, Property 'font-display' set to: 'auto', Wasted time: 15 ms.
- - Font name: S6u9w4BMUTPHh6UVSwiPGQ3q5d0.woff2, URL: https://fonts.gstatic.com/s/lato/v24/S6u9w4BMUTPHh6UVSwiPGQ3q5d0.woff2, Property 'font-display' set to: 'auto', Wasted time: 10 ms.
+ - Font name: jizaRExUiTo99u79D0KExcOPIDU.woff2, URL: https://fonts.gstatic.com/s/ptsans/v17/jizaRExUiTo99u79D0KExcOPIDU.woff2 (eventKey: s-5246), Property 'font-display' set to: 'auto', Wasted time: 20 ms.
+ - Font name: SlGVmQWMvZQIdix7AFxXkHNSbRYXags.woff2, URL: https://fonts.gstatic.com/s/droidsans/v18/SlGVmQWMvZQIdix7AFxXkHNSbRYXags.woff2 (eventKey: s-5232), Property 'font-display' set to: 'auto', Wasted time: 15 ms.
+ - Font name: jizfRExUiTo99u79B_mh0O6tLR8a8zI.woff2, URL: https://fonts.gstatic.com/s/ptsans/v17/jizfRExUiTo99u79B_mh0O6tLR8a8zI.woff2 (eventKey: s-5259), Property 'font-display' set to: 'auto', Wasted time: 15 ms.
+ - Font name: SlGWmQWMvZQIdix7AFxXmMh3eDs1ZyHKpWg.woff2, URL: https://fonts.gstatic.com/s/droidsans/v18/SlGWmQWMvZQIdix7AFxXmMh3eDs1ZyHKpWg.woff2 (eventKey: s-5269), Property 'font-display' set to: 'auto', Wasted time: 15 ms.
+ - Font name: EJRVQgYoZZY2vCFuvAFWzr-_dSb_.woff2, URL: https://fonts.gstatic.com/s/ptserif/v18/EJRVQgYoZZY2vCFuvAFWzr-_dSb_.woff2 (eventKey: s-5325), Property 'font-display' set to: 'auto', Wasted time: 15 ms.
+ - Font name: S6u9w4BMUTPHh6UVSwiPGQ3q5d0.woff2, URL: https://fonts.gstatic.com/s/lato/v24/S6u9w4BMUTPHh6UVSwiPGQ3q5d0.woff2 (eventKey: s-5238), Property 'font-display' set to: 'auto', Wasted time: 10 ms.
 
 Consider setting [`font-display`](https://developer.chrome.com/blog/font-display) to `swap` or `optional` to ensure text is consistently visible. `swap` can be further optimized to mitigate layout shifts with [font metric overrides](https://developer.chrome.com/blog/font-fallbacks).
 
@@ -714,28 +812,28 @@ Total potential savings: 2 MB
 
 The following images could be optimized:
 
-### https://images.ctfassets.net/u275ja1nivmq/6T6z40ay5GFCUtwV7DONgh/0e23606ed1692d9721ab0f39a8d8a99e/yeti_cover.jpg
+### https://images.ctfassets.net/u275ja1nivmq/6T6z40ay5GFCUtwV7DONgh/0e23606ed1692d9721ab0f39a8d8a99e/yeti_cover.jpg (eventKey: s-1212)
 - Potential savings: 1.1 MB
 - Optimizations:
 Using a modern image format (WebP, AVIF) or increasing the image compression could improve this image's download size. (Est 1.1 MB)
 
-### https://raw.githubusercontent.com/GoogleChrome/lighthouse/refs/heads/main/cli/test/fixtures/dobetterweb/lighthouse-rotating.gif
+### https://raw.githubusercontent.com/GoogleChrome/lighthouse/refs/heads/main/cli/test/fixtures/dobetterweb/lighthouse-rotating.gif (eventKey: s-1216)
 - Potential savings: 682 kB
 - Optimizations:
 Using video formats instead of GIFs can improve the download size of animated content. (Est 682 kB)
 
-### https://onlinepngtools.com/images/examples-onlinepngtools/elephant-hd-quality.png
+### https://onlinepngtools.com/images/examples-onlinepngtools/elephant-hd-quality.png (eventKey: s-1228)
 - Potential savings: 176 kB
 - Optimizations:
 Using a modern image format (WebP, AVIF) or increasing the image compression could improve this image's download size. (Est 134.1 kB)
 This image file is larger than it needs to be (640x436) for its displayed dimensions (200x136). Use responsive images to reduce the image download size. (Est 162.9 kB)
 
-### https://images.ctfassets.net/u275ja1nivmq/6T6z40ay5GFCUtwV7DONgh/0e23606ed1692d9721ab0f39a8d8a99e/yeti_cover.jpg?fm=webp
+### https://images.ctfassets.net/u275ja1nivmq/6T6z40ay5GFCUtwV7DONgh/0e23606ed1692d9721ab0f39a8d8a99e/yeti_cover.jpg?fm=webp (eventKey: s-1224)
 - Potential savings: 49.8 kB
 - Optimizations:
 Increasing the image compression factor could improve this image's download size. (Est 49.8 kB)
 
-### https://raw.githubusercontent.com/GoogleChrome/lighthouse/refs/heads/main/cli/test/fixtures/byte-efficiency/lighthouse-2048x1356.webp
+### https://raw.githubusercontent.com/GoogleChrome/lighthouse/refs/heads/main/cli/test/fixtures/byte-efficiency/lighthouse-2048x1356.webp (eventKey: s-1226)
 - Potential savings: 41.4 kB
 - Optimizations:
 This image file is larger than it needs to be (2048x1356) for its displayed dimensions (200x132). Use responsive images to reduce the image download size. (Est 41.4 kB)
@@ -852,9 +950,9 @@ The network dependency tree checks found one or more problems.
 Max critical path latency is 5,015 ms
 
 The following is the critical request chain:
-- http://localhost:8787/lcp-iframes/index.html (5,006 ms) (longest chain)
-  - http://localhost:8787/lcp-iframes/app.js (5,015 ms) (longest chain)
-  - http://localhost:8787/lcp-iframes/app.css (5,010 ms)
+- http://localhost:8787/lcp-iframes/index.html (eventKey: s-7103) (5,006 ms) (longest chain)
+  - http://localhost:8787/lcp-iframes/app.js (eventKey: s-7225) (5,015 ms) (longest chain)
+  - http://localhost:8787/lcp-iframes/app.css (eventKey: s-7213) (5,010 ms)
 
 no origins were preconnected.
 
@@ -979,7 +1077,7 @@ This insight identifies static resources that are not cached effectively by the
 ## Detailed analysis:
 The following resources were associated with ineffficient cache policies:
 
-- https://chromedevtools.github.io/performance-stories/lcp-large-image/app.css
+- https://chromedevtools.github.io/performance-stories/lcp-large-image/app.css (eventKey: s-1106)
   - Cache Time to Live (TTL): 600 seconds
   - Wasted bytes: 0 B