Many blog changes

assets/js/main.js

@@ -388,22 +388,51 @@ document.addEventListener('DOMContentLoaded', function() {
         console.log('Stats section not found');
     }
     
-    // Lazy Loading for Images
+    // Enhanced Lazy Loading for Images with WebP support
     const images = document.querySelectorAll('img[loading="lazy"]');
     
+    // WebP support detection
+    function supportsWebP() {
+        const canvas = document.createElement('canvas');
+        canvas.width = 1;
+        canvas.height = 1;
+        return canvas.toDataURL('image/webp').indexOf('webp') !== -1;
+    }
+    
     if ('IntersectionObserver' in window) {
         const imageObserver = new IntersectionObserver(function(entries) {
             entries.forEach(entry => {
                 if (entry.isIntersecting) {
                     const img = entry.target;
-                    img.src = img.dataset.src || img.src;
+                    
+                    // Handle data-src for lazy loading
+                    if (img.dataset.src) {
+                        img.src = img.dataset.src;
+                    }
+                    
+                    // Handle WebP support
+                    if (img.dataset.webp && supportsWebP()) {
+                        img.src = img.dataset.webp;
+                    }
+                    
                     img.classList.add('loaded');
+                    img.style.opacity = '1';
                     imageObserver.unobserve(img);
                 }
             });
+        }, {
+            rootMargin: '50px 0px',
+            threshold: 0.1
         });
         
-        images.forEach(img => imageObserver.observe(img));
+        images.forEach(img => {
+            // Set initial opacity for lazy images
+            if (img.loading === 'lazy') {
+                img.style.opacity = '0';
+                img.style.transition = 'opacity 0.3s ease';
+            }
+            imageObserver.observe(img);
+        });
     }
     
     // Scroll to Top Button
@@ -468,18 +497,38 @@ document.addEventListener('DOMContentLoaded', function() {
     window.removeEventListener('scroll', handleScrollTopButton);
     window.addEventListener('scroll', throttledScrollHandler);
     
-    // Preload critical resources
-    function preloadResource(href, as = 'image') {
+    // Preload critical resources with WebP support
+    function preloadResource(href, as = 'image', type = null) {
         const link = document.createElement('link');
         link.rel = 'preload';
         link.href = href;
         link.as = as;
+        if (type) {
+            link.type = type;
+        }
         document.head.appendChild(link);
     }
     
-    // Preload hero image and other critical assets
-    // preloadResource('assets/images/hero-data-analytics.svg');
-    // preloadResource('assets/images/logo.svg');
+    // Preload critical images with WebP format preference
+    function preloadCriticalImages() {
+        const criticalImages = [
+            'assets/images/ukds-main-logo.png',
+            'assets/images/hero-data-analytics.svg'
+        ];
+        
+        criticalImages.forEach(imagePath => {
+            // Try WebP first if supported
+            if (supportsWebP()) {
+                const webpPath = imagePath.replace(/\.(jpg|jpeg|png)$/i, '.webp');
+                preloadResource(webpPath, 'image', 'image/webp');
+            } else {
+                preloadResource(imagePath, 'image');
+            }
+        });
+    }
+    
+    // Initialize critical image preloading
+    preloadCriticalImages();
     
     // Initialize tooltips (if needed)
     const tooltipElements = document.querySelectorAll('[data-tooltip]');
@@ -545,5 +594,24 @@ document.addEventListener('DOMContentLoaded', function() {
         });
     }
     
+    // Performance monitoring
+    if ('performance' in window) {
+        window.addEventListener('load', function() {
+            setTimeout(() => {
+                const perfData = performance.getEntriesByType('navigation')[0];
+                if (perfData) {
+                    console.log('Page Load Performance:', {
+                        'DNS Lookup': Math.round(perfData.domainLookupEnd - perfData.domainLookupStart),
+                        'TCP Connection': Math.round(perfData.connectEnd - perfData.connectStart),
+                        'Request/Response': Math.round(perfData.responseEnd - perfData.requestStart),
+                        'DOM Processing': Math.round(perfData.domComplete - perfData.domLoading),
+                        'Total Load Time': Math.round(perfData.loadEventEnd - perfData.navigationStart)
+                    });
+                }
+            }, 0);
+        });
+    }
+    
     console.log('UK Data Services website initialized successfully');
+    console.log('Performance optimizations: Lazy loading, WebP support, and preloading enabled');
 });