chrome-devtools-frontend 1.0.1525561 → 1.0.1526203

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (46) hide show
  1. package/front_end/core/common/Settings.ts +1 -1
  2. package/front_end/core/sdk/PreloadingModel.ts +3 -0
  3. package/front_end/core/sdk/ResourceTreeModel.ts +1 -1
  4. package/front_end/core/sdk/SourceMapScopesInfo.ts +57 -0
  5. package/front_end/generated/InspectorBackendCommands.js +4 -4
  6. package/front_end/generated/SupportedCSSProperties.js +0 -19
  7. package/front_end/generated/protocol-mapping.d.ts +1 -1
  8. package/front_end/generated/protocol-proxy-api.d.ts +1 -1
  9. package/front_end/generated/protocol.ts +9 -8
  10. package/front_end/models/ai_assistance/data_formatters/PerformanceInsightFormatter.snapshot.txt +43 -8
  11. package/front_end/models/ai_assistance/data_formatters/PerformanceInsightFormatter.ts +50 -32
  12. package/front_end/models/ai_assistance/data_formatters/PerformanceTraceFormatter.snapshot.txt +29 -29
  13. package/front_end/models/javascript_metadata/NativeFunctions.js +3 -8
  14. package/front_end/models/trace/handlers/UserTimingsHandler.ts +1 -1
  15. package/front_end/models/trace/insights/CLSCulprits.ts +2 -1
  16. package/front_end/models/trace/insights/Cache.ts +2 -1
  17. package/front_end/models/trace/insights/DOMSize.ts +2 -1
  18. package/front_end/models/trace/insights/DocumentLatency.ts +2 -1
  19. package/front_end/models/trace/insights/DuplicatedJavaScript.ts +2 -1
  20. package/front_end/models/trace/insights/FontDisplay.ts +2 -1
  21. package/front_end/models/trace/insights/ForcedReflow.ts +2 -1
  22. package/front_end/models/trace/insights/INPBreakdown.ts +2 -1
  23. package/front_end/models/trace/insights/ImageDelivery.ts +2 -1
  24. package/front_end/models/trace/insights/LCPBreakdown.ts +2 -1
  25. package/front_end/models/trace/insights/LCPDiscovery.ts +2 -1
  26. package/front_end/models/trace/insights/LegacyJavaScript.ts +2 -1
  27. package/front_end/models/trace/insights/ModernHTTP.ts +2 -1
  28. package/front_end/models/trace/insights/NetworkDependencyTree.ts +2 -1
  29. package/front_end/models/trace/insights/RenderBlocking.ts +2 -1
  30. package/front_end/models/trace/insights/SlowCSSSelector.ts +2 -1
  31. package/front_end/models/trace/insights/ThirdParties.ts +2 -1
  32. package/front_end/models/trace/insights/Viewport.ts +2 -1
  33. package/front_end/models/trace/insights/types.ts +2 -1
  34. package/front_end/panels/application/ReportingApiView.ts +8 -7
  35. package/front_end/panels/application/StorageView.ts +2 -1
  36. package/front_end/panels/application/preloading/components/PreloadingString.ts +2 -0
  37. package/front_end/panels/console/ConsolePrompt.ts +24 -4
  38. package/front_end/panels/timeline/TimelinePanel.ts +10 -8
  39. package/front_end/panels/timeline/components/ExportTraceOptions.ts +1 -1
  40. package/front_end/third_party/chromium/README.chromium +1 -1
  41. package/front_end/ui/components/buttons/Button.ts +17 -0
  42. package/front_end/ui/legacy/SearchableView.ts +1 -1
  43. package/front_end/ui/legacy/components/data_grid/DataGridElement.ts +48 -5
  44. package/front_end/ui/legacy/components/perf_ui/FlameChart.ts +2 -2
  45. package/front_end/ui/legacy/components/source_frame/JSONView.ts +28 -0
  46. package/package.json +22 -22
@@ -1009,55 +1009,73 @@ ${this.#links()}`;
1009
1009
  }
1010
1010
 
1011
1011
  #links(): string {
1012
+ const links = [];
1013
+
1014
+ if (this.#insight.docs) {
1015
+ links.push(this.#insight.docs);
1016
+ }
1017
+
1012
1018
  switch (this.#insight.insightKey) {
1013
1019
  case 'CLSCulprits':
1014
- return `- https://web.dev/articles/cls
1015
- - https://web.dev/articles/optimize-cls`;
1020
+ links.push('https://web.dev/articles/cls');
1021
+ links.push('https://web.dev/articles/optimize-cls');
1022
+ break;
1016
1023
  case 'DocumentLatency':
1017
- return '- https://web.dev/articles/optimize-ttfb';
1024
+ links.push('https://web.dev/articles/optimize-ttfb');
1025
+ break;
1018
1026
  case 'DOMSize':
1019
- return '- https://developer.chrome.com/docs/lighthouse/performance/dom-size/';
1020
- case 'DuplicatedJavaScript':
1021
- return '';
1027
+ links.push('https://developer.chrome.com/docs/lighthouse/performance/dom-size/');
1028
+ break;
1022
1029
  case 'FontDisplay':
1023
- return `- https://web.dev/articles/preload-optional-fonts
1024
- - https://fonts.google.com/knowledge/glossary/foit
1025
- - https://developer.chrome.com/blog/font-fallbacks`;
1030
+ links.push('https://web.dev/articles/preload-optional-fonts');
1031
+ links.push('https://fonts.google.com/knowledge/glossary/foit');
1032
+ links.push('https://developer.chrome.com/blog/font-fallbacks');
1033
+ break;
1026
1034
  case 'ForcedReflow':
1027
- return '- https://developers.google.com/web/fundamentals/performance/rendering/avoid-large-complex-layouts-and-layout-thrashing#avoid-forced-synchronous-layouts';
1035
+ links.push(
1036
+ 'https://developers.google.com/web/fundamentals/performance/rendering/avoid-large-complex-layouts-and-layout-thrashing#avoid-forced-synchronous-layouts');
1037
+ break;
1028
1038
  case 'ImageDelivery':
1029
- return '- https://developer.chrome.com/docs/lighthouse/performance/uses-optimized-images/';
1039
+ links.push('https://developer.chrome.com/docs/lighthouse/performance/uses-optimized-images/');
1040
+ break;
1030
1041
  case 'INPBreakdown':
1031
- return `- https://web.dev/articles/inp
1032
- - https://web.dev/explore/how-to-optimize-inp
1033
- - https://web.dev/articles/optimize-long-tasks
1034
- - https://web.dev/articles/avoid-large-complex-layouts-and-layout-thrashing`;
1035
- case 'LCPDiscovery':
1036
- return `- https://web.dev/articles/lcp
1037
- - https://web.dev/articles/optimize-lcp`;
1042
+ links.push('https://web.dev/articles/inp');
1043
+ links.push('https://web.dev/explore/how-to-optimize-inp');
1044
+ links.push('https://web.dev/articles/optimize-long-tasks');
1045
+ links.push('https://web.dev/articles/avoid-large-complex-layouts-and-layout-thrashing');
1046
+ break;
1038
1047
  case 'LCPBreakdown':
1039
- return `- https://web.dev/articles/lcp
1040
- - https://web.dev/articles/optimize-lcp`;
1041
- case 'NetworkDependencyTree':
1042
- return `- https://web.dev/learn/performance/understanding-the-critical-path
1043
- - https://developer.chrome.com/docs/lighthouse/performance/uses-rel-preconnect/`;
1048
+ case 'LCPDiscovery':
1044
1049
  case 'RenderBlocking':
1045
- return `- https://web.dev/articles/lcp
1046
- - https://web.dev/articles/optimize-lcp`;
1050
+ links.push('https://web.dev/articles/lcp');
1051
+ links.push('https://web.dev/articles/optimize-lcp');
1052
+ break;
1053
+ case 'NetworkDependencyTree':
1054
+ links.push('https://web.dev/learn/performance/understanding-the-critical-path');
1055
+ links.push('https://developer.chrome.com/docs/lighthouse/performance/uses-rel-preconnect/');
1056
+ break;
1047
1057
  case 'SlowCSSSelector':
1048
- return '- https://developer.chrome.com/docs/devtools/performance/selector-stats';
1058
+ links.push('https://developer.chrome.com/docs/devtools/performance/selector-stats');
1059
+ break;
1049
1060
  case 'ThirdParties':
1050
- return '- https://web.dev/articles/optimizing-content-efficiency-loading-third-party-javascript/';
1061
+ links.push('https://web.dev/articles/optimizing-content-efficiency-loading-third-party-javascript/');
1062
+ break;
1051
1063
  case 'Viewport':
1052
- return '- https://developer.chrome.com/blog/300ms-tap-delay-gone-away/';
1064
+ links.push('https://developer.chrome.com/blog/300ms-tap-delay-gone-away/');
1065
+ break;
1053
1066
  case 'Cache':
1054
- return '- https://web.dev/uses-long-cache-ttl/';
1067
+ links.push('https://web.dev/uses-long-cache-ttl/');
1068
+ break;
1055
1069
  case 'ModernHTTP':
1056
- return '- https://developer.chrome.com/docs/lighthouse/best-practices/uses-http2';
1070
+ links.push('https://developer.chrome.com/docs/lighthouse/best-practices/uses-http2');
1071
+ break;
1057
1072
  case 'LegacyJavaScript':
1058
- return `- https://web.dev/articles/baseline-and-polyfills
1059
- - https://philipwalton.com/articles/the-state-of-es5-on-the-web/`;
1073
+ links.push('https://web.dev/articles/baseline-and-polyfills');
1074
+ links.push('https://philipwalton.com/articles/the-state-of-es5-on-the-web/');
1075
+ break;
1060
1076
  }
1077
+
1078
+ return links.map(link => '- ' + link).join('\n');
1061
1079
  }
1062
1080
 
1063
1081
  #description(): string {
@@ -516,20 +516,20 @@ Metrics (lab / observed):
516
516
  Metrics (field / real users): n/a – no data for this page in CrUX
517
517
  Available insights:
518
518
  - insight name: LCPBreakdown
519
- description: Each [subpart has specific improvement strategies](https://web.dev/articles/optimize-lcp#lcp-breakdown). Ideally, most of the LCP time should be spent on loading the resources, not within delays.
519
+ description: Each [subpart has specific improvement strategies](https://developer.chrome.com/docs/performance/insights/lcp-breakdown). Ideally, most of the LCP time should be spent on loading the resources, not within delays.
520
520
  relevant trace bounds: {min: 1020034834921, max: 1020034953358}
521
521
  example question: Help me optimize my LCP score
522
522
  example question: Which LCP phase was most problematic?
523
523
  example question: What can I do to reduce the LCP time for this page load?
524
524
  - insight name: DocumentLatency
525
- description: Your first network request is the most important. Reduce its latency by avoiding redirects, ensuring a fast server response, and enabling text compression.
525
+ description: Your first network request is the most important. [Reduce its latency](https://developer.chrome.com/docs/performance/insights/document-latency) by avoiding redirects, ensuring a fast server response, and enabling text compression.
526
526
  relevant trace bounds: {min: 1020034836013, max: 1020034892491}
527
527
  estimated metric savings: FCP 0 ms, LCP 0 ms
528
528
  estimated wasted bytes: 52.1 kB
529
529
  example question: How do I decrease the initial loading time of my page?
530
530
  example question: Did anything slow down the request for this document?
531
531
  - insight name: ThirdParties
532
- description: 3rd party code can significantly impact load performance. [Reduce and defer loading of 3rd party code](https://web.dev/articles/optimizing-content-efficiency-loading-third-party-javascript/) to prioritize your page's content.
532
+ description: 3rd party code can significantly impact load performance. [Reduce and defer loading of 3rd party code](https://developer.chrome.com/docs/performance/insights/third-parties) to prioritize your page's content.
533
533
  relevant trace bounds: {min: 1020034871372, max: 1020035171789}
534
534
  example question: Which third parties are having the largest impact on my page performance?
535
535
  === end content
@@ -551,44 +551,44 @@ Metrics (lab / observed):
551
551
  Metrics (field / real users): n/a – no data for this page in CrUX
552
552
  Available insights:
553
553
  - insight name: LCPBreakdown
554
- description: Each [subpart has specific improvement strategies](https://web.dev/articles/optimize-lcp#lcp-breakdown). Ideally, most of the LCP time should be spent on loading the resources, not within delays.
554
+ description: Each [subpart has specific improvement strategies](https://developer.chrome.com/docs/performance/insights/lcp-breakdown). Ideally, most of the LCP time should be spent on loading the resources, not within delays.
555
555
  relevant trace bounds: {min: 157423488682, max: 157423953162}
556
556
  example question: Help me optimize my LCP score
557
557
  example question: Which LCP phase was most problematic?
558
558
  example question: What can I do to reduce the LCP time for this page load?
559
559
  - insight name: CLSCulprits
560
- description: Layout shifts occur when elements move absent any user interaction. [Investigate the causes of layout shifts](https://web.dev/articles/optimize-cls), such as elements being added, removed, or their fonts changing as the page loads.
560
+ description: Layout shifts occur when elements move absent any user interaction. [Investigate the causes of layout shifts](https://developer.chrome.com/docs/performance/insights/cls-culprit), such as elements being added, removed, or their fonts changing as the page loads.
561
561
  relevant trace bounds: {min: 157425604232, max: 157426760958}
562
562
  example question: Help me optimize my CLS score
563
563
  example question: How can I prevent layout shifts on this page?
564
564
  - insight name: NetworkDependencyTree
565
- description: [Avoid chaining critical requests](https://developer.chrome.com/docs/lighthouse/performance/critical-request-chains) by reducing the length of chains, reducing the download size of resources, or deferring the download of unnecessary resources to improve page load.
565
+ description: [Avoid chaining critical requests](https://developer.chrome.com/docs/performance/insights/network-dependency-tree) by reducing the length of chains, reducing the download size of resources, or deferring the download of unnecessary resources to improve page load.
566
566
  relevant trace bounds: {min: 157423489126, max: 157426527569}
567
567
  example question: How do I optimize my network dependency tree?
568
568
  - insight name: ImageDelivery
569
- description: Reducing the download time of images can improve the perceived load time of the page and LCP. [Learn more about optimizing image size](https://developer.chrome.com/docs/lighthouse/performance/uses-optimized-images/)
569
+ description: Reducing the download time of images can improve the perceived load time of the page and LCP. [Learn more about optimizing image size](https://developer.chrome.com/docs/performance/insights/image-delivery)
570
570
  relevant trace bounds: {min: 157423794709, max: 157424082831}
571
571
  estimated metric savings: FCP 0 ms, LCP 0 ms
572
572
  estimated wasted bytes: 97.8 kB
573
573
  example question: What should I do to improve and optimize the time taken to fetch and display images on the page?
574
574
  example question: Are all images on my site optimized?
575
575
  - insight name: FontDisplay
576
- description: 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).
576
+ description: Consider setting [font-display](https://developer.chrome.com/docs/performance/insights/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).
577
577
  relevant trace bounds: {min: 157425661196, max: 157425696387}
578
578
  estimated metric savings: FCP 20 ms
579
579
  example question: How can I update my CSS to avoid layout shifts caused by incorrect `font-display` properties?
580
580
  - insight name: ThirdParties
581
- description: 3rd party code can significantly impact load performance. [Reduce and defer loading of 3rd party code](https://web.dev/articles/optimizing-content-efficiency-loading-third-party-javascript/) to prioritize your page's content.
581
+ description: 3rd party code can significantly impact load performance. [Reduce and defer loading of 3rd party code](https://developer.chrome.com/docs/performance/insights/third-parties) to prioritize your page's content.
582
582
  relevant trace bounds: {min: 157423742399, max: 157427277086}
583
583
  example question: Which third parties are having the largest impact on my page performance?
584
584
  - insight name: Cache
585
- description: A long cache lifetime can speed up repeat visits to your page. [Learn more](https://web.dev/uses-long-cache-ttl/).
585
+ description: A long cache lifetime can speed up repeat visits to your page. [Learn more about caching](https://developer.chrome.com/docs/performance/insights/cache).
586
586
  relevant trace bounds: {min: 157423742399, max: 157426980482}
587
587
  estimated metric savings: FCP 0 ms, LCP 0 ms
588
588
  estimated wasted bytes: 847.4 kB
589
589
  example question: What caching strategies can I apply to improve my page performance?
590
590
  - insight name: LegacyJavaScript
591
- description: Polyfills and transforms enable older browsers to use new JavaScript features. However, many aren't necessary for modern browsers. Consider modifying your JavaScript build process to not transpile [Baseline](https://web.dev/articles/baseline-and-polyfills) features, unless you know you must support older browsers. [Learn why most sites can deploy ES6+ code without transpiling](https://philipwalton.com/articles/the-state-of-es5-on-the-web/)
591
+ description: Polyfills and transforms enable older browsers to use new JavaScript features. However, many aren't necessary for modern browsers. Consider modifying your JavaScript build process to not transpile [Baseline](https://web.dev/articles/baseline-and-polyfills) features, unless you know you must support older browsers. [Learn why most sites can deploy ES6+ code without transpiling](https://developer.chrome.com/docs/performance/insights/legacy-javascript)
592
592
  relevant trace bounds: {min: 157423489126, max: 157426132225}
593
593
  estimated metric savings: FCP 0 ms, LCP 0 ms
594
594
  estimated wasted bytes: 126.9 kB
@@ -613,49 +613,49 @@ Metrics (lab / observed):
613
613
  Metrics (field / real users): n/a – no data for this page in CrUX
614
614
  Available insights:
615
615
  - insight name: Cache
616
- description: A long cache lifetime can speed up repeat visits to your page. [Learn more](https://web.dev/uses-long-cache-ttl/).
616
+ description: A long cache lifetime can speed up repeat visits to your page. [Learn more about caching](https://developer.chrome.com/docs/performance/insights/cache).
617
617
  relevant trace bounds: {min: 59728702014, max: 59728867430}
618
618
  estimated metric savings: FCP 0 ms, LCP 150 ms
619
619
  estimated wasted bytes: 971.5 kB
620
620
  example question: What caching strategies can I apply to improve my page performance?
621
621
  - insight name: ImageDelivery
622
- description: Reducing the download time of images can improve the perceived load time of the page and LCP. [Learn more about optimizing image size](https://developer.chrome.com/docs/lighthouse/performance/uses-optimized-images/)
622
+ description: Reducing the download time of images can improve the perceived load time of the page and LCP. [Learn more about optimizing image size](https://developer.chrome.com/docs/performance/insights/image-delivery)
623
623
  relevant trace bounds: {min: 59728701403, max: 59729395208}
624
624
  estimated metric savings: FCP 0 ms, LCP 100 ms
625
625
  estimated wasted bytes: 2 MB
626
626
  example question: What should I do to improve and optimize the time taken to fetch and display images on the page?
627
627
  example question: Are all images on my site optimized?
628
628
  - insight name: LCPBreakdown
629
- description: Each [subpart has specific improvement strategies](https://web.dev/articles/optimize-lcp#lcp-breakdown). Ideally, most of the LCP time should be spent on loading the resources, not within delays.
629
+ description: Each [subpart has specific improvement strategies](https://developer.chrome.com/docs/performance/insights/lcp-breakdown). Ideally, most of the LCP time should be spent on loading the resources, not within delays.
630
630
  relevant trace bounds: {min: 59728649746, max: 59729312744}
631
631
  example question: Help me optimize my LCP score
632
632
  example question: Which LCP phase was most problematic?
633
633
  example question: What can I do to reduce the LCP time for this page load?
634
634
  - insight name: LCPDiscovery
635
- description: Optimize LCP by making the LCP image [discoverable](https://web.dev/articles/optimize-lcp#1_eliminate_resource_load_delay) from the HTML immediately, and [avoiding lazy-loading](https://web.dev/articles/lcp-lazy-loading)
635
+ description: [Optimize LCP](https://developer.chrome.com/docs/performance/insights/lcp-discovery) by making the LCP image discoverable from the HTML immediately, and avoiding lazy-loading
636
636
  relevant trace bounds: {min: 59728656735, max: 59729209036}
637
637
  example question: Suggest fixes to reduce my LCP
638
638
  example question: What can I do to reduce my LCP discovery time?
639
639
  example question: Why is LCP discovery time important?
640
640
  - insight name: CLSCulprits
641
- description: Layout shifts occur when elements move absent any user interaction. [Investigate the causes of layout shifts](https://web.dev/articles/optimize-cls), such as elements being added, removed, or their fonts changing as the page loads.
641
+ description: Layout shifts occur when elements move absent any user interaction. [Investigate the causes of layout shifts](https://developer.chrome.com/docs/performance/insights/cls-culprit), such as elements being added, removed, or their fonts changing as the page loads.
642
642
  relevant trace bounds: {min: 59729100192, max: 59730317334}
643
643
  example question: Help me optimize my CLS score
644
644
  example question: How can I prevent layout shifts on this page?
645
645
  - insight name: DocumentLatency
646
- description: Your first network request is the most important. Reduce its latency by avoiding redirects, ensuring a fast server response, and enabling text compression.
646
+ description: Your first network request is the most important. [Reduce its latency](https://developer.chrome.com/docs/performance/insights/document-latency) by avoiding redirects, ensuring a fast server response, and enabling text compression.
647
647
  relevant trace bounds: {min: 59728651057, max: 59728790724}
648
648
  estimated metric savings: FCP 0 ms, LCP 0 ms
649
649
  estimated wasted bytes: 1.6 kB
650
650
  example question: How do I decrease the initial loading time of my page?
651
651
  example question: Did anything slow down the request for this document?
652
652
  - insight name: Viewport
653
- description: Tap interactions may be [delayed by up to 300 ms](https://developer.chrome.com/blog/300ms-tap-delay-gone-away/) if the viewport is not optimized for mobile.
653
+ description: Tap interactions may be [delayed by up to 300 ms](https://developer.chrome.com/docs/performance/insights/viewport) if the viewport is not optimized for mobile.
654
654
  relevant trace bounds: {min: 59728649746, max: 59734400108}
655
655
  estimated metric savings: INP 0 ms
656
656
  example question: How do I make sure my page is optimized for mobile viewing?
657
657
  - insight name: ThirdParties
658
- description: 3rd party code can significantly impact load performance. [Reduce and defer loading of 3rd party code](https://web.dev/articles/optimizing-content-efficiency-loading-third-party-javascript/) to prioritize your page's content.
658
+ description: 3rd party code can significantly impact load performance. [Reduce and defer loading of 3rd party code](https://developer.chrome.com/docs/performance/insights/third-parties) to prioritize your page's content.
659
659
  relevant trace bounds: {min: 59728701403, max: 59729465969}
660
660
  example question: Which third parties are having the largest impact on my page performance?
661
661
  === end content
@@ -684,49 +684,49 @@ Metrics (field / real users):
684
684
  - Lab metrics describe how this specific page load performed, while field metrics are an aggregation of results from real-world users. Best practice is to prioritize metrics that are bad in field data. Lab metrics may be better or worse than fields metrics depending on the developer's machine, network, or the actions performed while tracing.
685
685
  Available insights:
686
686
  - insight name: Cache
687
- description: A long cache lifetime can speed up repeat visits to your page. [Learn more](https://web.dev/uses-long-cache-ttl/).
687
+ description: A long cache lifetime can speed up repeat visits to your page. [Learn more about caching](https://developer.chrome.com/docs/performance/insights/cache).
688
688
  relevant trace bounds: {min: 59728702014, max: 59728867430}
689
689
  estimated metric savings: FCP 0 ms, LCP 150 ms
690
690
  estimated wasted bytes: 971.5 kB
691
691
  example question: What caching strategies can I apply to improve my page performance?
692
692
  - insight name: ImageDelivery
693
- description: Reducing the download time of images can improve the perceived load time of the page and LCP. [Learn more about optimizing image size](https://developer.chrome.com/docs/lighthouse/performance/uses-optimized-images/)
693
+ description: Reducing the download time of images can improve the perceived load time of the page and LCP. [Learn more about optimizing image size](https://developer.chrome.com/docs/performance/insights/image-delivery)
694
694
  relevant trace bounds: {min: 59728701403, max: 59729395208}
695
695
  estimated metric savings: FCP 0 ms, LCP 100 ms
696
696
  estimated wasted bytes: 2 MB
697
697
  example question: What should I do to improve and optimize the time taken to fetch and display images on the page?
698
698
  example question: Are all images on my site optimized?
699
699
  - insight name: LCPBreakdown
700
- description: Each [subpart has specific improvement strategies](https://web.dev/articles/optimize-lcp#lcp-breakdown). Ideally, most of the LCP time should be spent on loading the resources, not within delays.
700
+ description: Each [subpart has specific improvement strategies](https://developer.chrome.com/docs/performance/insights/lcp-breakdown). Ideally, most of the LCP time should be spent on loading the resources, not within delays.
701
701
  relevant trace bounds: {min: 59728649746, max: 59729312744}
702
702
  example question: Help me optimize my LCP score
703
703
  example question: Which LCP phase was most problematic?
704
704
  example question: What can I do to reduce the LCP time for this page load?
705
705
  - insight name: LCPDiscovery
706
- description: Optimize LCP by making the LCP image [discoverable](https://web.dev/articles/optimize-lcp#1_eliminate_resource_load_delay) from the HTML immediately, and [avoiding lazy-loading](https://web.dev/articles/lcp-lazy-loading)
706
+ description: [Optimize LCP](https://developer.chrome.com/docs/performance/insights/lcp-discovery) by making the LCP image discoverable from the HTML immediately, and avoiding lazy-loading
707
707
  relevant trace bounds: {min: 59728656735, max: 59729209036}
708
708
  example question: Suggest fixes to reduce my LCP
709
709
  example question: What can I do to reduce my LCP discovery time?
710
710
  example question: Why is LCP discovery time important?
711
711
  - insight name: CLSCulprits
712
- description: Layout shifts occur when elements move absent any user interaction. [Investigate the causes of layout shifts](https://web.dev/articles/optimize-cls), such as elements being added, removed, or their fonts changing as the page loads.
712
+ description: Layout shifts occur when elements move absent any user interaction. [Investigate the causes of layout shifts](https://developer.chrome.com/docs/performance/insights/cls-culprit), such as elements being added, removed, or their fonts changing as the page loads.
713
713
  relevant trace bounds: {min: 59729100192, max: 59730317334}
714
714
  example question: Help me optimize my CLS score
715
715
  example question: How can I prevent layout shifts on this page?
716
716
  - insight name: DocumentLatency
717
- description: Your first network request is the most important. Reduce its latency by avoiding redirects, ensuring a fast server response, and enabling text compression.
717
+ description: Your first network request is the most important. [Reduce its latency](https://developer.chrome.com/docs/performance/insights/document-latency) by avoiding redirects, ensuring a fast server response, and enabling text compression.
718
718
  relevant trace bounds: {min: 59728651057, max: 59728790724}
719
719
  estimated metric savings: FCP 0 ms, LCP 0 ms
720
720
  estimated wasted bytes: 1.6 kB
721
721
  example question: How do I decrease the initial loading time of my page?
722
722
  example question: Did anything slow down the request for this document?
723
723
  - insight name: Viewport
724
- description: Tap interactions may be [delayed by up to 300 ms](https://developer.chrome.com/blog/300ms-tap-delay-gone-away/) if the viewport is not optimized for mobile.
724
+ description: Tap interactions may be [delayed by up to 300 ms](https://developer.chrome.com/docs/performance/insights/viewport) if the viewport is not optimized for mobile.
725
725
  relevant trace bounds: {min: 59728649746, max: 59734400108}
726
726
  estimated metric savings: INP 0 ms
727
727
  example question: How do I make sure my page is optimized for mobile viewing?
728
728
  - insight name: ThirdParties
729
- description: 3rd party code can significantly impact load performance. [Reduce and defer loading of 3rd party code](https://web.dev/articles/optimizing-content-efficiency-loading-third-party-javascript/) to prioritize your page's content.
729
+ description: 3rd party code can significantly impact load performance. [Reduce and defer loading of 3rd party code](https://developer.chrome.com/docs/performance/insights/third-parties) to prioritize your page's content.
730
730
  relevant trace bounds: {min: 59728701403, max: 59729465969}
731
731
  example question: Which third parties are having the largest impact on my page performance?
732
732
  === end content
@@ -743,13 +743,13 @@ Metrics (lab / observed):
743
743
  Metrics (field / real users): n/a – no data for this page in CrUX
744
744
  Available insights:
745
745
  - insight name: INPBreakdown
746
- description: Start investigating with the longest subpart. [Delays can be minimized](https://web.dev/articles/optimize-inp#optimize_interactions). To reduce processing duration, [optimize the main-thread costs](https://web.dev/articles/optimize-long-tasks), often JS.
746
+ description: Start investigating [how to improve INP](https://developer.chrome.com/docs/performance/insights/inp-breakdown) by looking at the longest subpart.
747
747
  relevant trace bounds: {min: 337944870984, max: 337945010222}
748
748
  example question: Suggest fixes for my longest interaction
749
749
  example question: Why is a large INP score problematic?
750
750
  example question: What's the biggest contributor to my longest interaction?
751
751
  - insight name: ThirdParties
752
- description: 3rd party code can significantly impact load performance. [Reduce and defer loading of 3rd party code](https://web.dev/articles/optimizing-content-efficiency-loading-third-party-javascript/) to prioritize your page's content.
752
+ description: 3rd party code can significantly impact load performance. [Reduce and defer loading of 3rd party code](https://developer.chrome.com/docs/performance/insights/third-parties) to prioritize your page's content.
753
753
  relevant trace bounds: {min: 337944792445, max: 337944809570}
754
754
  example question: Which third parties are having the largest impact on my page performance?
755
755
  === end content
@@ -986,7 +986,7 @@ export const NativeFunctions = [
986
986
  {
987
987
  name: "from",
988
988
  signatures: [["value"]],
989
- receivers: ["Observable"]
989
+ receivers: ["Observable","Origin"]
990
990
  },
991
991
  {
992
992
  name: "drawArraysInstancedANGLE",
@@ -5356,19 +5356,14 @@ export const NativeFunctions = [
5356
5356
  },
5357
5357
  {
5358
5358
  name: "createImageBitmap",
5359
- signatures: [["image","?options"],["image","sx","sy","sw","sh","?options"]],
5359
+ signatures: [["image","?options"],["imageBitmap","?options"],["image","sx","sy","sw","sh","?options"],["imageBitmap","sx","sy","sw","sh","?options"]],
5360
5360
  receivers: ["Window","WorkerGlobalScope"]
5361
5361
  },
5362
5362
  {
5363
5363
  name: "createImageBitmap",
5364
- signatures: [["image","?options"],["imageBitmap","?options"],["image","sx","sy","sw","sh","?options"],["imageBitmap","sx","sy","sw","sh","?options"]],
5364
+ signatures: [["image","?options"],["image","sx","sy","sw","sh","?options"]],
5365
5365
  receivers: ["Window"]
5366
5366
  },
5367
- {
5368
- name: "createImageBitmap",
5369
- signatures: [["imageBitmap","?options"],["imageBitmap","sx","sy","sw","sh","?options"]],
5370
- receivers: ["WorkerGlobalScope"]
5371
- },
5372
5367
  {
5373
5368
  name: "fetch",
5374
5369
  signatures: [["input","?init"]],
@@ -151,7 +151,7 @@ function getEventTrack(event: Types.Events.SyntheticEventPair|Types.Events.Conso
151
151
  }
152
152
 
153
153
  /**
154
- * Similar to the default {@see Helpers.Trace.eventTimeComparator}
154
+ * Similar to the default {@link Helpers.Trace.eventTimeComparator}
155
155
  * but with a twist:
156
156
  * In case of equal start and end times, put the second event (within a
157
157
  * track) first.
@@ -25,7 +25,7 @@ export const UIStrings = {
25
25
  * This is displayed after a user expands the section to see more. No character length limits.
26
26
  */
27
27
  description:
28
- 'Layout shifts occur when elements move absent any user interaction. [Investigate the causes of layout shifts](https://web.dev/articles/optimize-cls), such as elements being added, removed, or their fonts changing as the page loads.',
28
+ 'Layout shifts occur when elements move absent any user interaction. [Investigate the causes of layout shifts](https://developer.chrome.com/docs/performance/insights/cls-culprit), such as elements being added, removed, or their fonts changing as the page loads.',
29
29
  /**
30
30
  * @description Text indicating the worst layout shift cluster.
31
31
  */
@@ -583,6 +583,7 @@ function finalize(partialModel: PartialInsightModel<CLSCulpritsInsightModel>): C
583
583
  strings: UIStrings,
584
584
  title: i18nString(UIStrings.title),
585
585
  description: i18nString(UIStrings.description),
586
+ docs: 'https://developer.chrome.com/docs/performance/insights/cls-culprit',
586
587
  category: InsightCategory.CLS,
587
588
  state,
588
589
  ...partialModel,
@@ -27,7 +27,7 @@ export const UIStrings = {
27
27
  * @description Text to tell the user about how caching can help improve performance.
28
28
  */
29
29
  description:
30
- 'A long cache lifetime can speed up repeat visits to your page. [Learn more](https://web.dev/uses-long-cache-ttl/).',
30
+ 'A long cache lifetime can speed up repeat visits to your page. [Learn more about caching](https://developer.chrome.com/docs/performance/insights/cache).',
31
31
  /**
32
32
  * @description Column for a font loaded by the page to render text.
33
33
  */
@@ -67,6 +67,7 @@ function finalize(partialModel: PartialInsightModel<CacheInsightModel>): CacheIn
67
67
  strings: UIStrings,
68
68
  title: i18nString(UIStrings.title),
69
69
  description: i18nString(UIStrings.description),
70
+ docs: 'https://developer.chrome.com/docs/performance/insights/cache',
70
71
  category: InsightCategory.ALL,
71
72
  state: partialModel.requests.length > 0 ? 'fail' : 'pass',
72
73
  ...partialModel,
@@ -25,7 +25,7 @@ export const UIStrings = {
25
25
  * @description Description of an insight that recommends reducing the size of the DOM tree as a means to improve page responsiveness. "DOM" is an acronym and should not be translated. "layout reflows" are when the browser will recompute the layout of content on the page.
26
26
  */
27
27
  description:
28
- 'A large DOM can increase the duration of style calculations and layout reflows, impacting page responsiveness. A large DOM will also increase memory usage. [Learn how to avoid an excessive DOM size](https://developer.chrome.com/docs/lighthouse/performance/dom-size/).',
28
+ 'A large DOM can increase the duration of style calculations and layout reflows, impacting page responsiveness. A large DOM will also increase memory usage. [Learn how to avoid an excessive DOM size](https://developer.chrome.com/docs/performance/insights/dom-size).',
29
29
  /**
30
30
  * @description Header for a column containing the names of statistics as opposed to the actual statistic values.
31
31
  */
@@ -97,6 +97,7 @@ function finalize(partialModel: PartialInsightModel<DOMSizeInsightModel>): DOMSi
97
97
  strings: UIStrings,
98
98
  title: i18nString(UIStrings.title),
99
99
  description: i18nString(UIStrings.description),
100
+ docs: 'https://developer.chrome.com/docs/performance/insights/dom-size',
100
101
  category: InsightCategory.INP,
101
102
  state: relatedEvents.length > 0 ? 'informative' : 'pass',
102
103
  ...partialModel,
@@ -27,7 +27,7 @@ export const UIStrings = {
27
27
  * @description Description of an insight that provides a breakdown for how long it took to download the main document.
28
28
  */
29
29
  description:
30
- 'Your first network request is the most important. Reduce its latency by avoiding redirects, ensuring a fast server response, and enabling text compression.',
30
+ 'Your first network request is the most important. [Reduce its latency](https://developer.chrome.com/docs/performance/insights/document-latency) by avoiding redirects, ensuring a fast server response, and enabling text compression.',
31
31
  /**
32
32
  * @description Text to tell the user that the document request does not have redirects.
33
33
  */
@@ -182,6 +182,7 @@ function finalize(partialModel: PartialInsightModel<DocumentLatencyInsightModel>
182
182
  strings: UIStrings,
183
183
  title: i18nString(UIStrings.title),
184
184
  description: i18nString(UIStrings.description),
185
+ docs: 'https://developer.chrome.com/docs/performance/insights/document-latency',
185
186
  category: InsightCategory.ALL,
186
187
  state: hasFailure ? 'fail' : 'pass',
187
188
  ...partialModel,
@@ -26,7 +26,7 @@ export const UIStrings = {
26
26
  * @description Description of an insight that identifies multiple copies of the same JavaScript sources, and recommends removing the duplication.
27
27
  */
28
28
  description:
29
- 'Remove large, duplicate JavaScript modules from bundles to reduce unnecessary bytes consumed by network activity.',
29
+ 'Remove large, [duplicate JavaScript modules](https://developer.chrome.com/docs/performance/insights/duplicated-javascript) from bundles to reduce unnecessary bytes consumed by network activity.',
30
30
  /** Label for a column in a data table; entries will be the locations of JavaScript or CSS code, e.g. the name of a Javascript package or module. */
31
31
  columnSource: 'Source',
32
32
  /** Label for a column in a data table; entries will be the number of wasted bytes due to duplication of a web resource. */
@@ -53,6 +53,7 @@ function finalize(partialModel: PartialInsightModel<DuplicatedJavaScriptInsightM
53
53
  strings: UIStrings,
54
54
  title: i18nString(UIStrings.title),
55
55
  description: i18nString(UIStrings.description),
56
+ docs: 'https://developer.chrome.com/docs/performance/insights/duplicated-javascript',
56
57
  category: InsightCategory.LCP,
57
58
  state: Boolean(partialModel.duplication.values().next().value) ? 'fail' : 'pass',
58
59
  relatedEvents: [...new Set(requests)],
@@ -23,7 +23,7 @@ export const UIStrings = {
23
23
  * @description Text to tell the user about the font-display CSS feature to help improve a the UX of a page.
24
24
  */
25
25
  description:
26
- '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).',
26
+ 'Consider setting [`font-display`](https://developer.chrome.com/docs/performance/insights/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).',
27
27
  /** Column for a font loaded by the page to render text. */
28
28
  fontColumn: 'Font',
29
29
  /** Column for the amount of time wasted. */
@@ -50,6 +50,7 @@ function finalize(partialModel: PartialInsightModel<FontDisplayInsightModel>): F
50
50
  strings: UIStrings,
51
51
  title: i18nString(UIStrings.title),
52
52
  description: i18nString(UIStrings.description),
53
+ docs: 'https://developer.chrome.com/docs/performance/insights/font-display',
53
54
  category: InsightCategory.INP,
54
55
  state: partialModel.fonts.find(font => font.wastedTime > 0) ? 'fail' : 'pass',
55
56
  ...partialModel,
@@ -27,7 +27,7 @@ export const UIStrings = {
27
27
  * @description Text to describe the forced reflow.
28
28
  */
29
29
  description:
30
- 'A forced reflow occurs when JavaScript queries geometric properties (such as `offsetWidth`) after styles have been invalidated by a change to the DOM state. This can result in poor performance. Learn more about [forced reflows](https://developers.google.com/web/fundamentals/performance/rendering/avoid-large-complex-layouts-and-layout-thrashing#avoid-forced-synchronous-layouts) and possible mitigations.',
30
+ 'A forced reflow occurs when JavaScript queries geometric properties (such as `offsetWidth`) after styles have been invalidated by a change to the DOM state. This can result in poor performance. Learn more about [forced reflows](https://developer.chrome.com/docs/performance/insights/forced-reflow) and possible mitigations.',
31
31
  /**
32
32
  * @description Title of a list to provide related stack trace data
33
33
  */
@@ -144,6 +144,7 @@ function finalize(partialModel: PartialInsightModel<ForcedReflowInsightModel>):
144
144
  strings: UIStrings,
145
145
  title: i18nString(UIStrings.title),
146
146
  description: i18nString(UIStrings.description),
147
+ docs: 'https://developer.chrome.com/docs/performance/insights/forced-reflow',
147
148
  category: InsightCategory.ALL,
148
149
  state: partialModel.aggregatedBottomUpData.length !== 0 ? 'fail' : 'pass',
149
150
  ...partialModel,
@@ -21,7 +21,7 @@ export const UIStrings = {
21
21
  * @description Text to tell the user about the longest user interaction.
22
22
  */
23
23
  description:
24
- 'Start investigating with the longest subpart. [Delays can be minimized](https://web.dev/articles/optimize-inp#optimize_interactions). To reduce processing duration, [optimize the main-thread costs](https://web.dev/articles/optimize-long-tasks), often JS.',
24
+ 'Start investigating [how to improve INP](https://developer.chrome.com/docs/performance/insights/inp-breakdown) by looking at the longest subpart.',
25
25
  /**
26
26
  * @description Title for the performance insight "INP breakdown", which shows a breakdown of INP by subparts / sections.
27
27
  */
@@ -83,6 +83,7 @@ function finalize(partialModel: PartialInsightModel<INPBreakdownInsightModel>):
83
83
  strings: UIStrings,
84
84
  title: i18nString(UIStrings.title),
85
85
  description: i18nString(UIStrings.description),
86
+ docs: 'https://developer.chrome.com/docs/performance/insights/inp-breakdown',
86
87
  category: InsightCategory.INP,
87
88
  state,
88
89
  ...partialModel,
@@ -25,7 +25,7 @@ export const UIStrings = {
25
25
  * @description Description of an insight that recommends ways to reduce the size of images downloaded and used on the page.
26
26
  */
27
27
  description:
28
- 'Reducing the download time of images can improve the perceived load time of the page and LCP. [Learn more about optimizing image size](https://developer.chrome.com/docs/lighthouse/performance/uses-optimized-images/)',
28
+ 'Reducing the download time of images can improve the perceived load time of the page and LCP. [Learn more about optimizing image size](https://developer.chrome.com/docs/performance/insights/image-delivery)',
29
29
  /**
30
30
  * @description Message displayed in a chip explaining that an image file size is large for the # of pixels it has and recommends possible adjustments to improve the image size.
31
31
  */
@@ -166,6 +166,7 @@ function finalize(partialModel: PartialInsightModel<ImageDeliveryInsightModel>):
166
166
  strings: UIStrings,
167
167
  title: i18nString(UIStrings.title),
168
168
  description: i18nString(UIStrings.description),
169
+ docs: 'https://developer.chrome.com/docs/performance/insights/image-delivery',
169
170
  category: InsightCategory.LCP,
170
171
  state: partialModel.optimizableImages.length > 0 ? 'fail' : 'pass',
171
172
  ...partialModel,
@@ -28,7 +28,7 @@ export const UIStrings = {
28
28
  * This is displayed after a user expands the section to see more. No character length limits.
29
29
  */
30
30
  description:
31
- 'Each [subpart has specific improvement strategies](https://web.dev/articles/optimize-lcp#lcp-breakdown). Ideally, most of the LCP time should be spent on loading the resources, not within delays.',
31
+ 'Each [subpart has specific improvement strategies](https://developer.chrome.com/docs/performance/insights/lcp-breakdown). Ideally, most of the LCP time should be spent on loading the resources, not within delays.',
32
32
  /**
33
33
  * @description Time to first byte title for the Largest Contentful Paint's subparts timespan breakdown.
34
34
  */
@@ -197,6 +197,7 @@ function finalize(partialModel: PartialInsightModel<LCPBreakdownInsightModel>):
197
197
  strings: UIStrings,
198
198
  title: i18nString(UIStrings.title),
199
199
  description: i18nString(UIStrings.description),
200
+ docs: 'https://developer.chrome.com/docs/performance/insights/lcp-breakdown',
200
201
  category: InsightCategory.LCP,
201
202
  state,
202
203
  ...partialModel,
@@ -27,7 +27,7 @@ export const UIStrings = {
27
27
  * @description Description of an insight that provides details about the LCP metric, and the network requests necessary to load it.
28
28
  */
29
29
  description:
30
- 'Optimize LCP by making the LCP image [discoverable](https://web.dev/articles/optimize-lcp#1_eliminate_resource_load_delay) from the HTML immediately, and [avoiding lazy-loading](https://web.dev/articles/lcp-lazy-loading)',
30
+ '[Optimize LCP](https://developer.chrome.com/docs/performance/insights/lcp-discovery) by making the LCP image discoverable from the HTML immediately, and avoiding lazy-loading',
31
31
  /**
32
32
  * @description Text to tell the user how long after the earliest discovery time their LCP element loaded.
33
33
  * @example {401ms} PH1
@@ -83,6 +83,7 @@ function finalize(partialModel: PartialInsightModel<LCPDiscoveryInsightModel>):
83
83
  strings: UIStrings,
84
84
  title: i18nString(UIStrings.title),
85
85
  description: i18nString(UIStrings.description),
86
+ docs: 'https://developer.chrome.com/docs/performance/insights/lcp-discovery',
86
87
  category: InsightCategory.LCP,
87
88
  state: partialModel.lcpRequest && partialModel.checklist &&
88
89
  (!partialModel.checklist.eagerlyLoaded.value || !partialModel.checklist.requestDiscoverable.value ||
@@ -28,7 +28,7 @@ export const UIStrings = {
28
28
  * @description Description of an insight that identifies polyfills for modern JavaScript features, and recommends their removal.
29
29
  */
30
30
  description:
31
- 'Polyfills and transforms enable older browsers to use new JavaScript features. However, many aren\'t necessary for modern browsers. Consider modifying your JavaScript build process to not transpile [Baseline](https://web.dev/articles/baseline-and-polyfills) features, unless you know you must support older browsers. [Learn why most sites can deploy ES6+ code without transpiling](https://philipwalton.com/articles/the-state-of-es5-on-the-web/)',
31
+ 'Polyfills and transforms enable older browsers to use new JavaScript features. However, many aren\'t necessary for modern browsers. Consider modifying your JavaScript build process to not transpile [Baseline](https://web.dev/articles/baseline-and-polyfills) features, unless you know you must support older browsers. [Learn why most sites can deploy ES6+ code without transpiling](https://developer.chrome.com/docs/performance/insights/legacy-javascript)',
32
32
  /** Label for a column in a data table; entries will be the individual JavaScript scripts. */
33
33
  columnScript: 'Script',
34
34
  /** Label for a column in a data table; entries will be the number of wasted bytes (aka the estimated savings in terms of bytes). */
@@ -65,6 +65,7 @@ function finalize(partialModel: PartialInsightModel<LegacyJavaScriptInsightModel
65
65
  strings: UIStrings,
66
66
  title: i18nString(UIStrings.title),
67
67
  description: i18nString(UIStrings.description),
68
+ docs: 'https://developer.chrome.com/docs/performance/insights/legacy-javascript',
68
69
  category: InsightCategory.ALL,
69
70
  state: requests.length ? 'fail' : 'pass',
70
71
  relatedEvents: [...new Set(requests)],
@@ -27,7 +27,7 @@ export const UIStrings = {
27
27
  * @description Description of an insight that recommends recommends using HTTP/2 over HTTP/1.1 because of the performance benefits. "HTTP" should not be translated.
28
28
  */
29
29
  description:
30
- 'HTTP/2 and HTTP/3 offer many benefits over HTTP/1.1, such as multiplexing. [Learn more about using modern HTTP](https://developer.chrome.com/docs/lighthouse/best-practices/uses-http2/).',
30
+ 'HTTP/2 and HTTP/3 offer many benefits over HTTP/1.1, such as multiplexing. [Learn more about using modern HTTP](https://developer.chrome.com/docs/performance/insights/modern-http).',
31
31
  /**
32
32
  * @description Column header for a table where each cell represents a network request.
33
33
  */
@@ -220,6 +220,7 @@ function finalize(partialModel: PartialInsightModel<ModernHTTPInsightModel>): Mo
220
220
  strings: UIStrings,
221
221
  title: i18nString(UIStrings.title),
222
222
  description: i18nString(UIStrings.description),
223
+ docs: 'https://developer.chrome.com/docs/performance/insights/modern-http',
223
224
  category: InsightCategory.LCP,
224
225
  state: partialModel.http1Requests.length > 0 ? 'fail' : 'pass',
225
226
  ...partialModel,