Performance: Optimize LCP/FCP and implement Service Worker for caching

Author: souravkr529

index.html

@@ -118,13 +118,19 @@
   }
   </script>
 
-  <!-- Local Core Libraries -->
-  <script src="assets/lib/pdf.min.js"></script>
-  <script src="assets/lib/jspdf.umd.min.js"></script>
+  <!-- Resource Hints -->
+  <link rel="preconnect" href="https://slides.zenlytool.com">
+  <link rel="preload" href="assets/fonts/fonts.css" as="style">
+  <link rel="preload" href="assets/fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1ZL7.woff2" as="font" type="font/woff2"
+    crossorigin>
 
-  <!-- Local Fonts: Inter + JetBrains Mono -->
+  <!-- Critical Fonts -->
   <link rel="stylesheet" href="assets/fonts/fonts.css">
 
+  <!-- Heavy Libraries (Deferred for performance) -->
+  <script src="assets/lib/pdf.min.js" defer></script>
+  <script src="assets/lib/jspdf.umd.min.js" defer></script>
+
   <style>
     :root {
       /* Color Palette: Minimalist Black, White, Grey */
@@ -1124,6 +1130,15 @@ <h4>Does it reduce slide quality?</h4>
         if (rect.top < window.innerHeight) el.classList.add('active');
       });
     });
+
+    // --- Service Worker Registration ---
+    if ('serviceWorker' in navigator) {
+      window.addEventListener('load', () => {
+        navigator.serviceWorker.register('./sw.js')
+          .then(reg => console.log('SW Registered', reg))
+          .catch(err => console.log('SW Error', err));
+      });
+    }
   </script>
 
 </body>

sw.js

@@ -0,0 +1,52 @@
+const CACHE_NAME = 'slideclean-v1';
+const ASSETS_TO_CACHE = [
+  '/',
+  '/index.html',
+  '/manifest.json',
+  '/assets/favicon.png',
+  '/assets/og-image.png',
+  '/assets/fonts/fonts.css',
+  '/assets/lib/pdf.min.js',
+  '/assets/lib/jspdf.umd.min.js'
+];
+
+// Install Event
+self.addEventListener('install', (event) => {
+  event.waitUntil(
+    caches.open(CACHE_NAME).then((cache) => {
+      return cache.addAll(ASSETS_TO_CACHE);
+    })
+  );
+  self.skipWaiting();
+});
+
+// Activate Event
+self.addEventListener('activate', (event) => {
+  event.waitUntil(
+    caches.keys().then((cacheNames) => {
+      return Promise.all(
+        cacheNames.map((cache) => {
+          if (cache !== CACHE_NAME) {
+            return caches.delete(cache);
+          }
+        })
+      );
+    })
+  );
+  self.clients.claim();
+});
+
+// Fetch Event (Stale-While-Revalidate)
+self.addEventListener('fetch', (event) => {
+  event.respondWith(
+    caches.match(event.request).then((cachedResponse) => {
+      const fetchPromise = fetch(event.request).then((networkResponse) => {
+        caches.open(CACHE_NAME).then((cache) => {
+          cache.put(event.request, networkResponse.clone());
+        });
+        return networkResponse;
+      });
+      return cachedResponse || fetchPromise;
+    })
+  );
+});