perf: lighthouse optimizations - inline critical CSS, lazy-load routes, WebP images, fix CLS and contrast

js/router.js

@@ -42,10 +42,11 @@ class Router {
      * Register a route
      * @param {string} path - Route path (e.g., '/listing/:id')
      * @param {string} componentTag - Web component tag name
+     * @param {Function} [loader] - Optional dynamic import function for lazy loading
      * @returns {Router} this for chaining
      */
-    register(path, componentTag) {
-        this.routes.set(path, componentTag)
+    register(path, componentTag, loader) {
+        this.routes.set(path, { componentTag, loader })
         return this
     }
 
@@ -70,10 +71,11 @@ class Router {
      */
     matchRoute(path) {
         if (this.routes.has(path)) {
-            return { componentTag: this.routes.get(path), params: {} }
+            const { componentTag, loader } = this.routes.get(path)
+            return { componentTag, loader, params: {} }
         }
         
-        for (const [routePath, componentTag] of this.routes) {
+        for (const [routePath, route] of this.routes) {
             const routeParts = routePath.split('/')
             const pathParts = path.split('/')
             
@@ -92,7 +94,7 @@ class Router {
             }
             
             if (match) {
-                return { componentTag, params }
+                return { componentTag: route.componentTag, loader: route.loader, params }
             }
         }
         
@@ -117,7 +119,11 @@ class Router {
             return
         }
         
-        const { componentTag, params: routeParams } = match
+        const { componentTag, loader, params: routeParams } = match
+        
+        if (loader && !customElements.get(componentTag)) {
+            await loader()
+        }
         
         this.currentRoute = {
             path,
@@ -171,14 +177,25 @@ class Router {
     }
 
     /** @private */
-    renderNotFound() {
+    async renderNotFound() {
         if (!this.outlet) return
         
+        if (!customElements.get('page-not-found') && this._notFoundLoader) {
+            await this._notFoundLoader()
+        }
         this.outlet.innerHTML = ''
         const notFound = document.createElement('page-not-found')
         this.outlet.appendChild(notFound)
     }
 
+    /**
+     * Set the loader for the 404 page
+     * @param {Function} loader - Dynamic import function
+     */
+    setNotFoundLoader(loader) {
+        this._notFoundLoader = loader
+    }
+
     /**
      * Navigate to a path
      * @param {string} path - Target path