🚀 Performance optimization: Smart caching strategy and safe optimizations

- Update cache headers: CSS/JS to 24h, images to 1 week (from 10min)
- Add safe performance script with font optimization and lazy loading
- Maintain layout integrity while improving page load times
- Estimated savings: 90% reduction in CSS/JS re-downloads

Author: agent-ptolemy

docs/_headers

@@ -17,6 +17,57 @@
   Cross-Origin-Opener-Policy: same-origin
   Cross-Origin-Resource-Policy: same-origin
 
+# Cache headers for different asset types
 /assets/*
+  # Cache static assets for 24 hours (good balance of performance and updateability)
+  Cache-Control: public, max-age=86400, must-revalidate
+  
   # Less restrictive CSP for assets
   Content-Security-Policy: default-src 'self'; script-src 'self' 'unsafe-inline' https://gc.zgo.at https://safeaiaus.goatcounter.com; style-src 'self' 'unsafe-inline' https://fonts.googleapis.com; font-src 'self' https://fonts.gstatic.com; img-src 'self' data: https:; connect-src 'self' https://safeaiaus.goatcounter.com; frame-src 'none'; object-src 'none'; base-uri 'self'; form-action 'self'
+
+# Cache CSS files for 24 hours (good balance)
+*.css
+  Cache-Control: public, max-age=86400, must-revalidate
+
+# Cache JavaScript files for 24 hours (good balance)
+*.js
+  Cache-Control: public, max-age=86400, must-revalidate
+
+# Cache images for 1 week (they change less frequently)
+*.png
+  Cache-Control: public, max-age=604800, must-revalidate
+
+*.jpg
+  Cache-Control: public, max-age=604800, must-revalidate
+
+*.jpeg
+  Cache-Control: public, max-age=604800, must-revalidate
+
+*.gif
+  Cache-Control: public, max-age=604800, must-revalidate
+
+*.svg
+  Cache-Control: public, max-age=604800, must-revalidate
+
+*.webp
+  Cache-Control: public, max-age=604800, must-revalidate
+
+# Cache fonts for 1 week (they rarely change)
+*.woff
+  Cache-Control: public, max-age=604800, must-revalidate
+
+*.woff2
+  Cache-Control: public, max-age=604800, must-revalidate
+
+*.ttf
+  Cache-Control: public, max-age=604800, must-revalidate
+
+*.eot
+  Cache-Control: public, max-age=604800, must-revalidate
+
+# Cache HTML pages for shorter time (1 hour)
+*.html
+  Cache-Control: public, max-age=3600, must-revalidate
+
+*.md
+  Cache-Control: public, max-age=3600, must-revalidate

docs/assets/performance-safe.js

@@ -0,0 +1,64 @@
+// Safe Performance Optimizations for SafeAI-Aus
+// This script only adds lightweight optimizations that won't break the layout
+
+(function() {
+    'use strict';
+    
+    // Safe font optimization - only adds font-display: swap to Google Fonts
+    function optimizeFonts() {
+        const fontLinks = document.querySelectorAll('link[href*="fonts.googleapis.com"]');
+        fontLinks.forEach(link => {
+            if (!link.href.includes('display=')) {
+                link.href += (link.href.includes('?') ? '&' : '?') + 'display=swap';
+            }
+        });
+    }
+    
+    // Safe image optimization - only adds lazy loading to images below the fold
+    function optimizeImages() {
+        const images = document.querySelectorAll('img:not([loading])');
+        images.forEach(img => {
+            // Only add lazy loading to images that are below the fold
+            if (img.offsetTop > window.innerHeight) {
+                img.loading = 'lazy';
+            }
+        });
+    }
+    
+    // Safe resource hints - only adds DNS prefetch for external domains
+    function addResourceHints() {
+        const externalDomains = [
+            'fonts.googleapis.com',
+            'fonts.gstatic.com',
+            'gc.zgo.at',
+            'safeaiaus.goatcounter.com'
+        ];
+        
+        externalDomains.forEach(domain => {
+            if (!document.querySelector(`link[href="//${domain}"]`)) {
+                const link = document.createElement('link');
+                link.rel = 'dns-prefetch';
+                link.href = `//${domain}`;
+                document.head.appendChild(link);
+            }
+        });
+    }
+    
+    // Initialize only safe optimizations
+    function init() {
+        // Run immediately
+        optimizeFonts();
+        addResourceHints();
+        
+        // Run after DOM is ready
+        if (document.readyState === 'loading') {
+            document.addEventListener('DOMContentLoaded', optimizeImages);
+        } else {
+            optimizeImages();
+        }
+    }
+    
+    // Start optimizations
+    init();
+    
+})();

mkdocs.yml

@@ -56,6 +56,7 @@ extra_css:
 
 # Add custom JavaScript for SEO and social media optimization
 extra_javascript:
+  - assets/performance-safe.js
   - assets/extra.js
 
 markdown_extensions: