Add into to see the num of Long Tasks

Author: nucliweb

pages/Interaction/LongTask.mdx

@@ -5,8 +5,12 @@ To determine when long tasks happen, you can use [PerformanceObserver](https://d
 #### Snippet
 
 ```js copy
+// Count and list all the Long Tasks 
+// https://webperf-snippets.nucliweb.net
 try {
   const po = new PerformanceObserver((list) => {
+    const numLongTasks = list.getEntries().length
+    console.log(`%cNum. Long Tasks: ${numLongTasks}`,'color: #FF4E42; font-weight: bold')
     for (const entry of list.getEntries()) {
       console.table(entry.toJSON());
     }

pages/Loading/TTFB.mdx

@@ -5,6 +5,8 @@
 #### Snippet
 
 ```js copy
+// Measure the time to first byte of all the resources loaded
+// https://webperf-snippets.nucliweb.net
 new PerformanceObserver((entryList) => {
   const [pageNav] = entryList.getEntriesByType("navigation");
   console.log(`TTFB (ms): ${pageNav.responseStart}`);
@@ -19,21 +21,26 @@ new PerformanceObserver((entryList) => {
 #### Snippet
 
 ```js copy
+// Measure the time to first byte of all the resources loaded
+// https://webperf-snippets.nucliweb.net
 new PerformanceObserver((entryList) => {
   const entries = entryList.getEntries();
   const resourcesLoaded = [...entries].map((entry) => {
     let obj = {};
     // Some resources may have a responseStart value of 0, due
     // to the resource being cached, or a cross-origin resource
     // being served without a Timing-Allow-Origin header set.
+    
     if (entry.responseStart > 0) {
       obj = {
-        "TTFB (ms)": entry.responseStart,
+        "TTFB (ms)": +entry.responseStart.toFixed(2),
         Resource: entry.name,
       };
     }
-    return obj;
-  });
+    return Object.keys(obj).length > 0 ? obj : undefined;
+  })
+  .filter((item) => item !== undefined);
+
   console.table(resourcesLoaded);
 }).observe({
   type: "resource",