chore: add web vitals

icco · Dec 7, 2024 · 70a3509 · 70a3509
1 parent f4ea891
commit 70a3509
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 0 deletions.
diff --git a/templates/index.tmpl b/templates/index.tmpl
@@ -13,6 +13,23 @@
         max-width: 1200px;
       }
     </style>
+
+    <script type="module">
+      import { onCLS, onINP, onLCP, onFCP, onFID, onTTFB } from 'https://unpkg.com/web-vitals@4?module';
+
+      function sendToAnalytics(metric) {
+        const body = JSON.stringify(metric);
+        (navigator.sendBeacon && navigator.sendBeacon('https://reportd.natwelch.com/analytics/resume', body)) ||
+          fetch('https://reportd.natwelch.com/analytics/resume', { body, method: 'POST', keepalive: true });
+      }
+
+      onCLS(sendToAnalytics);
+      onFCP(sendToAnalytics);
+      onFID(sendToAnalytics);
+      onINP(sendToAnalytics);
+      onLCP(sendToAnalytics);
+      onTTFB(sendToAnalytics);
+    </script>
   </head>
 
   <body class="mx-auto p-6 md:p-24 bg-black text-white">

diff --git a/templates/view.tmpl b/templates/view.tmpl
@@ -13,6 +13,23 @@
         max-width: 1200px;
       }
     </style>
+
+    <script type="module">
+      import { onCLS, onINP, onLCP, onFCP, onFID, onTTFB } from 'https://unpkg.com/web-vitals@4?module';
+
+      function sendToAnalytics(metric) {
+        const body = JSON.stringify(metric);
+        (navigator.sendBeacon && navigator.sendBeacon('https://reportd.natwelch.com/analytics/reportd', body)) ||
+          fetch('https://reportd.natwelch.com/analytics/reportd', { body, method: 'POST', keepalive: true });
+      }
+
+      onCLS(sendToAnalytics);
+      onFCP(sendToAnalytics);
+      onFID(sendToAnalytics);
+      onINP(sendToAnalytics);
+      onLCP(sendToAnalytics);
+      onTTFB(sendToAnalytics);
+    </script>
   </head>
 
   <body class="mx-auto p-6 md:p-24 bg-black text-white">