Add examples to server timing pages

files/en-us/web/api/performanceresourcetiming/servertiming/index.md

@@ -14,13 +14,62 @@ browser-compat: api.PerformanceResourceTiming.serverTiming
 
 {{APIRef("Performance API")}} {{securecontext_header}}
 
-The **`serverTiming`** read-only property returns an array of
-{{domxref("PerformanceServerTiming")}} entries containing server timing metrics.
+The **`serverTiming`** read-only property returns an array of {{domxref("PerformanceServerTiming")}} entries containing server timing metrics.
+
+Server timing metrics require the server to send the {{HTTPHeader("Server-Timing")}} header. For example:
+
+```http
+Server-Timing: cache;desc="Cache Read";dur=23.2
+```
 
 ## Value
 
 An array of {{domxref("PerformanceServerTiming")}} entries.
 
+## Examples
+
+### Logging server timing entries
+
+You can use a {{domxref("PerformanceObserver")}} to watch for {{domxref("PerformanceServerTiming")}} entries. Each server entry's duration is logged to the console.
+
+```js
+const observer = new PerformanceObserver((list) => {
+  list.getEntries().forEach((entry) => {
+    entry.serverTiming.forEach((serverEntry) => {
+      console.log(`${serverEntry.name} duration: ${serverEntry.duration}`);
+    });
+  });
+});
+
+observer.observe({ entryTypes: ["resource", "navigation"] });
+```
+
+Alternatively, you can use {{domxref("Performance.getEntriesByType()")}} to get performance entries present in the browser's performance timeline at the time you call this method:
+
+```js
+for (const entryType of ["navigation", "resource"]) {
+  for (const { name: url, serverTiming } of performance.getEntriesByType(
+    entryType
+  )) {
+    if (serverTiming) {
+      for (const { name, duration } of serverTiming) {
+        console.log(`${url}: ${name} duration: ${duration}`);
+      }
+    }
+  }
+}
+```
+
+### Cross-origin server timing information
+
+Access to server timing information is restricted to the same origin. To expose cross-origin timing information, the {{HTTPHeader("Timing-Allow-Origin")}} HTTP response header needs to be set.
+
+For example, to allow `https://developer.mozilla.org` to see server timing information, the cross-origin resource should send:
+
+```http
+Timing-Allow-Origin: https://developer.mozilla.org
+```
+
 ## Specifications
 
 {{Specifications}}

files/en-us/web/api/performanceservertiming/description/index.md

@@ -20,6 +20,50 @@ string.
 
 A string.
 
+## Examples
+
+### Logging server timing entries
+
+Server timing metrics require the server to send the {{HTTPHeader("Server-Timing")}} header. For example:
+
+```http
+Server-Timing: cache;desc="Cache Read";dur=23.2
+```
+
+Then use a {{domxref("PerformanceObserver")}} to watch for {{domxref("PerformanceServerTiming")}} entries as they are recorded.
+
+```js
+const observer = new PerformanceObserver((list) => {
+  list.getEntries().forEach((entry) => {
+    entry.serverTiming.forEach((serverEntry) => {
+      console.log(
+        `${serverEntry.name} (${serverEntry.description}) duration: ${serverEntry.duration}`
+      );
+      // Logs "cache (Cache Read) duration: 23.2"
+    });
+  });
+});
+
+observer.observe({ entryTypes: ["resource", "navigation"] });
+```
+
+Alternatively, you can use {{domxref("Performance.getEntriesByType()")}} to get performance entries present in the browser's performance timeline at the time you call this method:
+
+```js
+for (const entryType of ["navigation", "resource"]) {
+  for (const { name: url, serverTiming } of performance.getEntriesByType(
+    entryType
+  )) {
+    if (serverTiming) {
+      for (const { name, description, duration } of serverTiming) {
+        console.log(`${name} (${description}) duration: ${duration}`);
+        // Logs "cache (Cache Read) duration: 23.2"
+      }
+    }
+  }
+}
+```
+
 ## Specifications
 
 {{Specifications}}

files/en-us/web/api/performanceservertiming/duration/index.md

@@ -12,13 +12,56 @@ browser-compat: api.PerformanceServerTiming.duration
 
 {{APIRef("Performance API")}}
 
-The **`duration`** read-only property returns a double that
-contains the server-specified metric duration, or value `0.0`.
+The **`duration`** read-only property returns a double that contains the server-specified metric duration, or the value `0.0`.
 
 ## Value
 
 A number.
 
+## Examples
+
+### Logging server timing entries
+
+Server timing metrics require the server to send the {{HTTPHeader("Server-Timing")}} header. For example:
+
+```http
+Server-Timing: cache;desc="Cache Read";dur=23.2
+```
+
+Then use a {{domxref("PerformanceObserver")}} to watch for {{domxref("PerformanceServerTiming")}} entries as they are recorded.
+
+```js
+const observer = new PerformanceObserver((list) => {
+  list.getEntries().forEach((entry) => {
+    entry.serverTiming.forEach((serverEntry) => {
+      console.log(
+        `${serverEntry.name} (${serverEntry.description}) duration: ${serverEntry.duration}`
+      );
+      // Logs "cache (Cache Read) duration: 23.2"
+    });
+  });
+});
+
+observer.observe({ entryTypes: ["resource", "navigation"] });
+```
+
+Alternatively, you can use {{domxref("Performance.getEntriesByType()")}} to get performance entries present in the browser's performance timeline at the time you call this method:
+
+```js
+for (const entryType of ["navigation", "resource"]) {
+  for (const { name: url, serverTiming } of performance.getEntriesByType(
+    entryType
+  )) {
+    if (serverTiming) {
+      for (const { name, description, duration } of serverTiming) {
+        console.log(`${name} (${description}) duration: ${duration}`);
+        // Logs "cache (Cache Read) duration: 23.2"
+      }
+    }
+  }
+}
+```
+
 ## Specifications
 
 {{Specifications}}

files/en-us/web/api/performanceservertiming/name/index.md

@@ -19,6 +19,50 @@ string value of the server-specified metric name.
 
 A string.
 
+## Examples
+
+### Logging server timing entries
+
+Server timing metrics require the server to send the {{HTTPHeader("Server-Timing")}} header. For example:
+
+```http
+Server-Timing: cache;desc="Cache Read";dur=23.2
+```
+
+Then use a {{domxref("PerformanceObserver")}} to watch for {{domxref("PerformanceServerTiming")}} entries as they are recorded.
+
+```js
+const observer = new PerformanceObserver((list) => {
+  list.getEntries().forEach((entry) => {
+    entry.serverTiming.forEach((serverEntry) => {
+      console.log(
+        `${serverEntry.name} (${serverEntry.description}) duration: ${serverEntry.duration}`
+      );
+      // Logs "cache (Cache Read) duration: 23.2"
+    });
+  });
+});
+
+observer.observe({ entryTypes: ["resource", "navigation"] });
+```
+
+Alternatively, you can use {{domxref("Performance.getEntriesByType()")}} to get performance entries present in the browser's performance timeline at the time you call this method:
+
+```js
+for (const entryType of ["navigation", "resource"]) {
+  for (const { name: url, serverTiming } of performance.getEntriesByType(
+    entryType
+  )) {
+    if (serverTiming) {
+      for (const { name, description, duration } of serverTiming) {
+        console.log(`${name} (${description}) duration: ${duration}`);
+        // Logs "cache (Cache Read) duration: 23.2"
+      }
+    }
+  }
+}
+```
+
 ## Specifications
 
 {{Specifications}}

files/en-us/web/api/performanceservertiming/tojson/index.md

@@ -32,29 +32,35 @@ A {{jsxref("JSON")}} object that is the serialization of the {{domxref("Performa
 
 ## Examples
 
-### Using the toJSON method
+### Logging server timing entries
 
-In this example, calling `serverEntry.toJSON()` returns a JSON representation of the `PerformanceServerTiming` object.
+Server timing metrics require the server to send the {{HTTPHeader("Server-Timing")}} header. For example:
+
+```http
+Server-Timing: cache;desc="Cache Read";dur=23.2
+```
+
+Then use a {{domxref("PerformanceObserver")}} to watch for {{domxref("PerformanceServerTiming")}} entries as they are recorded.
 
 ```js
 const observer = new PerformanceObserver((list) => {
   list.getEntries().forEach((entry) => {
-      entry.serverTiming.forEach((serverEntry) => {
-        console.log(serverEntry.toJSON());
-      });
+    entry.serverTiming.forEach((serverEntry) => {
+      console.log(serverEntry.toJSON());
+    });
   });
 });
 
-observer.observe({ entryTypes: ["resource"] });
+observer.observe({ entryTypes: ["resource", "navigation"] });
 ```
 
 This would log a JSON object like so:
 
 ```json
 {
   "name": "cache",
-  "duration": 0,
-  "description": "hit-front"
+  "duration": 23.2,
+  "description": "Cache Read"
 }
 ```