Correct TTFB breakdown

Author: tunetheweb

pages/Loading/TTFB.mdx

@@ -39,23 +39,23 @@ This snippet is part of [pagespeed](https://github.com/corewebvitals/pagespeed)
 
     // timing start times are relative
     const activationStart = pageNav.activationStart || 0;
-    const workerStart = Math.max(pageNav.workerStart - activationStart, activationStart);
-    const dnsStart = Math.max(pageNav.domainLookupStart - activationStart, workerStart);
-    const tcpStart = Math.max(pageNav.connectStart - activationStart, dnsStart);
-    const sslStart = Math.max(pageNav.secureConnectionStart - activationStart, tcpStart);
-    const requestStart = Math.max(pageNav.requestStart - activationStart, sslStart);
-    const responseStart = Math.max(pageNav.responseStart - activationStart, requestStart);
+    const waitEnd = Math.max((pageNav.workerStart || pageNav.fetchStart) - activationStart, 0);
+    const dnsStart = Math.max(pageNav.domainLookupStart - activationStart, 0);
+    const tcpStart = Math.max(pageNav.connectStart - activationStart, 0);
+    const sslStart = Math.max(pageNav.secureConnectionStart - activationStart, 0);
+    const tcpEnd = Math.max(pageNav.connectEnd - activationStart, 0);
+    const responseStart = Math.max(pageNav.responseStart - activationStart, 0);
 
     // attribution based on https://www.w3.org/TR/navigation-timing-2/#processing-model
     // use associative array to log the results more readable
     let attributionArray = [];
-    attributionArray['Redirect Time'] = {'time in ms':formatTime(workerStart - activationStart)};
-    attributionArray['Worker and Cache Time'] = {'time in ms':formatTime(dnsStart - workerStart)};
-    attributionArray['DNS Time'] = {'time in ms':formatTime(tcpStart - dnsStart)};
-    attributionArray['TCP Time'] = {'time in ms':formatTime(sslStart - tcpStart)};
-    attributionArray['SSL Time'] = {'time in ms':formatTime(requestStart - sslStart)};
-    attributionArray['Request Time'] = {'time in ms':formatTime(responseStart - requestStart)};
-    attributionArray['Total TTFB'] = {'time in ms':formatTime(responseStart - activationStart)};
+    attributionArray['Redirect and Waiting duration'] = {'time in ms':formatTime(waitEnd)};
+    attributionArray['Worker and Cache duration'] = {'time in ms':formatTime(dnsStart - waitEnd)};
+    attributionArray['DNS duration'] = {'time in ms':formatTime(tcpStart - dnsStart)};
+    attributionArray['TCP duration'] = {'time in ms':formatTime(sslStart - tcpStart)};
+    attributionArray['SSL duration'] = {'time in ms':formatTime(tcpEnd - sslStart)};
+    attributionArray['Request duration'] = {'time in ms':formatTime(responseStart - tcpEnd)};
+    attributionArray['Total TTFB'] = {'time in ms':formatTime(responseStart)};
 
     // log the results
     console.log('%cTime to First Byte ('+formatTime(responseStart - activationStart)+'ms)', 'color: blue; font-weight: bold;');
@@ -71,7 +71,6 @@ This snippet is part of [pagespeed](https://github.com/corewebvitals/pagespeed)
 })();
 ```
 
-
 ## Measure the time to first byte of all the resources loaded
 
 #### Snippet