Skip to content

Commit 2d4484a

Browse files
jackfranklinjackfranklin
authored
fix: ordering of information in performance trace summary (#334)
Fixes a bug where the output contained "this is a high level summary" before then outputting the call frame / network format information before then outputting the trace summary. With this commit, we now output the summary & insights before ending with the format information.
1 parent 9111e2c commit 2d4484a

File tree

4 files changed

+97
-97
lines changed

4 files changed

+97
-97
lines changed

‎src/tools/performance.ts‎

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -167,9 +167,6 @@ async function stopTracingAndAppendOutput(
167167
response.appendResponseLine('The performance trace has been stopped.');
168168
if (traceResultIsSuccess(result)) {
169169
context.storeTraceRecording(result);
170-
response.appendResponseLine(
171-
'Here is a high level summary of the trace and the Insights that were found:',
172-
);
173170
const traceSummaryText = getTraceSummary(result);
174171
response.appendResponseLine(traceSummaryText);
175172
} else {

‎src/trace-processing/parse.ts‎

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -77,15 +77,17 @@ const extraFormatDescriptions = `Information on performance traces may contain m
7777
7878
${PerformanceTraceFormatter.callFrameDataFormatDescription}
7979
80-
${PerformanceTraceFormatter.networkDataFormatDescription}
81-
`;
80+
${PerformanceTraceFormatter.networkDataFormatDescription}`;
81+
8282
export function getTraceSummary(result: TraceResult): string {
8383
const focus = AgentFocus.fromParsedTrace(result.parsedTrace);
8484
const formatter = new PerformanceTraceFormatter(focus);
85-
const output = formatter.formatTraceSummary();
86-
return `${extraFormatDescriptions}
85+
const summaryText = formatter.formatTraceSummary();
86+
return `## Summary of Performance trace findings:
87+
${summaryText}
8788
88-
${output}`;
89+
## Details on call tree & network request formats:
90+
${extraFormatDescriptions}`;
8991
}
9092

9193
export type InsightName = keyof TraceEngine.Insights.Types.InsightModels;

‎tests/tools/performance.test.js.snapshot‎

Lines changed: 45 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -50,7 +50,51 @@ No buffer was provided.
5050

5151
exports[`performance > performance_stop_trace > returns the high level summary of the performance trace 1`] = `
5252
The performance trace has been stopped.
53-
Here is a high level summary of the trace and the Insights that were found:
53+
## Summary of Performance trace findings:
54+
URL: https://web.dev/
55+
Bounds: {min: 122410994891, max: 122416385853}
56+
CPU throttling: none
57+
Network throttling: none
58+
Metrics (lab / observed):
59+
- LCP: 129 ms, event: (eventKey: r-6063, ts: 122411126100), nodeId: 7
60+
- LCP breakdown:
61+
- TTFB: 8 ms, bounds: {min: 122410996889, max: 122411004828}
62+
- Load delay: 33 ms, bounds: {min: 122411004828, max: 122411037986}
63+
- Load duration: 15 ms, bounds: {min: 122411037986, max: 122411052690}
64+
- Render delay: 73 ms, bounds: {min: 122411052690, max: 122411126100}
65+
- CLS: 0.00
66+
Metrics (field / real users): n/a – no data for this page in CrUX
67+
Available insights:
68+
- insight name: LCPBreakdown
69+
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.
70+
relevant trace bounds: {min: 122410996889, max: 122411126100}
71+
example question: Help me optimize my LCP score
72+
example question: Which LCP phase was most problematic?
73+
example question: What can I do to reduce the LCP time for this page load?
74+
- insight name: LCPDiscovery
75+
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)
76+
relevant trace bounds: {min: 122411004828, max: 122411055039}
77+
example question: Suggest fixes to reduce my LCP
78+
example question: What can I do to reduce my LCP discovery time?
79+
example question: Why is LCP discovery time important?
80+
- insight name: RenderBlocking
81+
description: Requests are blocking the page's initial render, which may delay LCP. [Deferring or inlining](https://web.dev/learn/performance/understanding-the-critical-path#render-blocking_resources) can move these network requests out of the critical path.
82+
relevant trace bounds: {min: 122411037528, max: 122411053852}
83+
example question: Show me the most impactful render blocking requests that I should focus on
84+
example question: How can I reduce the number of render blocking requests?
85+
- insight name: DocumentLatency
86+
description: Your first network request is the most important. Reduce its latency by avoiding redirects, ensuring a fast server response, and enabling text compression.
87+
relevant trace bounds: {min: 122410998910, max: 122411043781}
88+
estimated metric savings: FCP 0 ms, LCP 0 ms
89+
estimated wasted bytes: 77.1 kB
90+
example question: How do I decrease the initial loading time of my page?
91+
example question: Did anything slow down the request for this document?
92+
- insight name: ThirdParties
93+
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.
94+
relevant trace bounds: {min: 122411037881, max: 122416229595}
95+
example question: Which third parties are having the largest impact on my page performance?
96+
97+
## Details on call tree & network request formats:
5498
Information on performance traces may contain main thread activity represented as call frames and network requests.
5599

56100
Each call frame is presented in the following format:
@@ -105,48 +149,4 @@ Durations (all in milliseconds):
105149
- \`responseHeaders\`: A list (separated by '|') of values for specific, pre-defined response headers, enclosed in square brackets.
106150
The order of headers corresponds to an internal fixed list. If a header is not present, its value will be empty.
107151

108-
109-
110-
URL: https://web.dev/
111-
Bounds: {min: 122410994891, max: 122416385853}
112-
CPU throttling: none
113-
Network throttling: none
114-
Metrics (lab / observed):
115-
- LCP: 129 ms, event: (eventKey: r-6063, ts: 122411126100), nodeId: 7
116-
- LCP breakdown:
117-
- TTFB: 8 ms, bounds: {min: 122410996889, max: 122411004828}
118-
- Load delay: 33 ms, bounds: {min: 122411004828, max: 122411037986}
119-
- Load duration: 15 ms, bounds: {min: 122411037986, max: 122411052690}
120-
- Render delay: 73 ms, bounds: {min: 122411052690, max: 122411126100}
121-
- CLS: 0.00
122-
Metrics (field / real users): n/a – no data for this page in CrUX
123-
Available insights:
124-
- insight name: LCPBreakdown
125-
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.
126-
relevant trace bounds: {min: 122410996889, max: 122411126100}
127-
example question: Help me optimize my LCP score
128-
example question: Which LCP phase was most problematic?
129-
example question: What can I do to reduce the LCP time for this page load?
130-
- insight name: LCPDiscovery
131-
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)
132-
relevant trace bounds: {min: 122411004828, max: 122411055039}
133-
example question: Suggest fixes to reduce my LCP
134-
example question: What can I do to reduce my LCP discovery time?
135-
example question: Why is LCP discovery time important?
136-
- insight name: RenderBlocking
137-
description: Requests are blocking the page's initial render, which may delay LCP. [Deferring or inlining](https://web.dev/learn/performance/understanding-the-critical-path#render-blocking_resources) can move these network requests out of the critical path.
138-
relevant trace bounds: {min: 122411037528, max: 122411053852}
139-
example question: Show me the most impactful render blocking requests that I should focus on
140-
example question: How can I reduce the number of render blocking requests?
141-
- insight name: DocumentLatency
142-
description: Your first network request is the most important. Reduce its latency by avoiding redirects, ensuring a fast server response, and enabling text compression.
143-
relevant trace bounds: {min: 122410998910, max: 122411043781}
144-
estimated metric savings: FCP 0 ms, LCP 0 ms
145-
estimated wasted bytes: 77.1 kB
146-
example question: How do I decrease the initial loading time of my page?
147-
example question: Did anything slow down the request for this document?
148-
- insight name: ThirdParties
149-
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.
150-
relevant trace bounds: {min: 122411037881, max: 122416229595}
151-
example question: Which third parties are having the largest impact on my page performance?
152152
`;

‎tests/trace-processing/parse.test.js.snapshot‎

Lines changed: 45 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,49 @@
11
exports[`Trace parsing > can format results of a trace 1`] = `
2+
## Summary of Performance trace findings:
3+
URL: https://web.dev/
4+
Bounds: {min: 122410994891, max: 122416385853}
5+
CPU throttling: none
6+
Network throttling: none
7+
Metrics (lab / observed):
8+
- LCP: 129 ms, event: (eventKey: r-6063, ts: 122411126100), nodeId: 7
9+
- LCP breakdown:
10+
- TTFB: 8 ms, bounds: {min: 122410996889, max: 122411004828}
11+
- Load delay: 33 ms, bounds: {min: 122411004828, max: 122411037986}
12+
- Load duration: 15 ms, bounds: {min: 122411037986, max: 122411052690}
13+
- Render delay: 73 ms, bounds: {min: 122411052690, max: 122411126100}
14+
- CLS: 0.00
15+
Metrics (field / real users): n/a – no data for this page in CrUX
16+
Available insights:
17+
- insight name: LCPBreakdown
18+
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.
19+
relevant trace bounds: {min: 122410996889, max: 122411126100}
20+
example question: Help me optimize my LCP score
21+
example question: Which LCP phase was most problematic?
22+
example question: What can I do to reduce the LCP time for this page load?
23+
- insight name: LCPDiscovery
24+
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)
25+
relevant trace bounds: {min: 122411004828, max: 122411055039}
26+
example question: Suggest fixes to reduce my LCP
27+
example question: What can I do to reduce my LCP discovery time?
28+
example question: Why is LCP discovery time important?
29+
- insight name: RenderBlocking
30+
description: Requests are blocking the page's initial render, which may delay LCP. [Deferring or inlining](https://web.dev/learn/performance/understanding-the-critical-path#render-blocking_resources) can move these network requests out of the critical path.
31+
relevant trace bounds: {min: 122411037528, max: 122411053852}
32+
example question: Show me the most impactful render blocking requests that I should focus on
33+
example question: How can I reduce the number of render blocking requests?
34+
- insight name: DocumentLatency
35+
description: Your first network request is the most important. Reduce its latency by avoiding redirects, ensuring a fast server response, and enabling text compression.
36+
relevant trace bounds: {min: 122410998910, max: 122411043781}
37+
estimated metric savings: FCP 0 ms, LCP 0 ms
38+
estimated wasted bytes: 77.1 kB
39+
example question: How do I decrease the initial loading time of my page?
40+
example question: Did anything slow down the request for this document?
41+
- insight name: ThirdParties
42+
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.
43+
relevant trace bounds: {min: 122411037881, max: 122416229595}
44+
example question: Which third parties are having the largest impact on my page performance?
45+
46+
## Details on call tree & network request formats:
247
Information on performance traces may contain main thread activity represented as call frames and network requests.
348

449
Each call frame is presented in the following format:
@@ -53,48 +98,4 @@ Durations (all in milliseconds):
5398
- \`responseHeaders\`: A list (separated by '|') of values for specific, pre-defined response headers, enclosed in square brackets.
5499
The order of headers corresponds to an internal fixed list. If a header is not present, its value will be empty.
55100

56-
57-
58-
URL: https://web.dev/
59-
Bounds: {min: 122410994891, max: 122416385853}
60-
CPU throttling: none
61-
Network throttling: none
62-
Metrics (lab / observed):
63-
- LCP: 129 ms, event: (eventKey: r-6063, ts: 122411126100), nodeId: 7
64-
- LCP breakdown:
65-
- TTFB: 8 ms, bounds: {min: 122410996889, max: 122411004828}
66-
- Load delay: 33 ms, bounds: {min: 122411004828, max: 122411037986}
67-
- Load duration: 15 ms, bounds: {min: 122411037986, max: 122411052690}
68-
- Render delay: 73 ms, bounds: {min: 122411052690, max: 122411126100}
69-
- CLS: 0.00
70-
Metrics (field / real users): n/a – no data for this page in CrUX
71-
Available insights:
72-
- insight name: LCPBreakdown
73-
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.
74-
relevant trace bounds: {min: 122410996889, max: 122411126100}
75-
example question: Help me optimize my LCP score
76-
example question: Which LCP phase was most problematic?
77-
example question: What can I do to reduce the LCP time for this page load?
78-
- insight name: LCPDiscovery
79-
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)
80-
relevant trace bounds: {min: 122411004828, max: 122411055039}
81-
example question: Suggest fixes to reduce my LCP
82-
example question: What can I do to reduce my LCP discovery time?
83-
example question: Why is LCP discovery time important?
84-
- insight name: RenderBlocking
85-
description: Requests are blocking the page's initial render, which may delay LCP. [Deferring or inlining](https://web.dev/learn/performance/understanding-the-critical-path#render-blocking_resources) can move these network requests out of the critical path.
86-
relevant trace bounds: {min: 122411037528, max: 122411053852}
87-
example question: Show me the most impactful render blocking requests that I should focus on
88-
example question: How can I reduce the number of render blocking requests?
89-
- insight name: DocumentLatency
90-
description: Your first network request is the most important. Reduce its latency by avoiding redirects, ensuring a fast server response, and enabling text compression.
91-
relevant trace bounds: {min: 122410998910, max: 122411043781}
92-
estimated metric savings: FCP 0 ms, LCP 0 ms
93-
estimated wasted bytes: 77.1 kB
94-
example question: How do I decrease the initial loading time of my page?
95-
example question: Did anything slow down the request for this document?
96-
- insight name: ThirdParties
97-
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.
98-
relevant trace bounds: {min: 122411037881, max: 122416229595}
99-
example question: Which third parties are having the largest impact on my page performance?
100101
`;

0 commit comments

Comments
 (0)