diff --git a/src/plugins/network/RequestDetails.js b/src/plugins/network/RequestDetails.js
index 366049470..3544933ca 100644
--- a/src/plugins/network/RequestDetails.js
+++ b/src/plugins/network/RequestDetails.js
@@ -5,7 +5,7 @@
  * @format
  */
 
-import type {Request, Response, Header} from './types.js';
+import type {Request, Response, Header, Insights} from './types.js';
 
 import {
   Component,
@@ -19,6 +19,7 @@ import {
   colors,
 } from 'flipper';
 import {decodeBody, getHeaderValue} from './utils.js';
+import {formatBytes} from './index.js';
 
 import querystring from 'querystring';
 // $FlowFixMe
@@ -198,6 +199,11 @@ export default class RequestDetails extends Component<
             options={RequestDetails.BodyOptions}
           />
         </Panel>
+        {response && response.insights ? (
+          <Panel heading={'Insights'} floating={false} collapsed={true}>
+            <InsightsInspector insights={response.insights} />
+          </Panel>
+        ) : null}
       </RequestDetails.Container>
     );
   }
@@ -715,3 +721,60 @@ const BodyFormatters: Array<BodyFormatter> = [
 ];
 
 const TextBodyFormatters: Array<BodyFormatter> = [new JSONTextFormatter()];
+
+class InsightsInspector extends Component<{insights: Insights}> {
+  formatTime(value: number): string {
+    return `${value} ms`;
+  }
+
+  formatSpeed(value: number): string {
+    return `${formatBytes(value)}/sec`;
+  }
+
+  buildRow<T>(name: string, value: ?T, formatter: T => string): any {
+    return value
+      ? {
+          columns: {
+            key: {
+              value: <WrappingText>{name}</WrappingText>,
+            },
+            value: {
+              value: <WrappingText>{formatter(value)}</WrappingText>,
+            },
+          },
+          copyText: `${name}: ${formatter(value)}`,
+          key: name,
+        }
+      : null;
+  }
+
+  render() {
+    const insights = this.props.insights;
+    const {buildRow, formatTime, formatSpeed} = this;
+
+    const rows = [
+      buildRow('DNS lookup time', insights.dnsLookupTime, formatTime),
+      buildRow('Connect time', insights.connectTime, formatTime),
+      buildRow('SSL handshake time', insights.sslHandshakeTime, formatTime),
+      buildRow('Pretransfer time', insights.preTransferTime, formatTime),
+      buildRow('Redirect time', insights.redirectsTime, formatTime),
+      buildRow('First byte wait time', insights.timeToFirstByte, formatTime),
+      buildRow('Data transfer time', insights.transferTime, formatTime),
+      buildRow('Post processing time', insights.postProcessingTime, formatTime),
+      buildRow('Bytes transfered', insights.bytesTransfered, formatBytes),
+      buildRow('Transfer speed', insights.transferSpeed, formatSpeed),
+    ].filter(r => r != null);
+
+    return rows.length > 0 ? (
+      <ManagedTable
+        multiline={true}
+        columnSizes={KeyValueColumnSizes}
+        columns={KeyValueColumns}
+        rows={rows}
+        autoHeight={true}
+        floating={false}
+        zebra={false}
+      />
+    ) : null;
+  }
+}
diff --git a/src/plugins/network/types.js b/src/plugins/network/types.js
index e764ad322..e3c254e0f 100644
--- a/src/plugins/network/types.js
+++ b/src/plugins/network/types.js
@@ -23,9 +23,24 @@ export type Response = {|
   reason: string,
   headers: Array<Header>,
   data: ?string,
+  insights: ?Insights,
 |};
 
 export type Header = {|
   key: string,
   value: string,
 |};
+
+export type Insights = {|
+  dnsLookupTime: ?number,
+  connectTime: ?number,
+  sslHandshakeTime: ?number,
+  preTransferTime: ?number,
+  redirectsTime: ?number,
+  timeToFirstByte: ?number,
+  transferTime: ?number,
+  postProcessingTime: ?number,
+  // Amount of transferred data can be different from total size of payload.
+  bytesTransfered: ?number,
+  transferSpeed: ?number,
+|};