https://tryhugo.ai/performance-optimization.js

1// Performance optimization script for Hugo
2
3// 1. Lazy load images
4document.addEventListener('DOMContentLoaded', function() {
5  const images = document.querySelectorAll('img[data-src]');
6  const imageObserver = new IntersectionObserver((entries, observer) => {
7    entries.forEach(entry => {
8      if (entry.isIntersecting) {
9        const img = entry.target;
10        img.src = img.dataset.src;
11        img.classList.remove('lazy');
12        observer.unobserve(img);
13      }
14    });
15  });
16
17  images.forEach(img => imageObserver.observe(img));
18});
19
20// 2. Preload critical resources
21const preloadCriticalResources = () => {
22  const criticalResources = [
23    '/static/css/main.css',
24    '/static/js/main.js',
25    '/images/logo.png'
26  ];
27
28  criticalResources.forEach(resource => {
29    const link = document.createElement('link');
30    link.rel = 'preload';
31    link.href = resource;
32    link.as = resource.endsWith('.css') ? 'style' : 'script';
33    document.head.appendChild(link);
34  });
35};
36
37// 3. Service Worker registration is intentionally DISABLED here.
38// The previous /sw.js handler tried to cache.addAll() unhashed asset
39// URLs (/static/css/main.css, /static/js/main.js) which 404 in CRA
40// builds — the install event rejected, the old SW stayed in control,
41// served stale routes, and broke OAuth callbacks. We let CRA's own
42// service-worker registration in src/index.js handle SW lifecycle.
43// sw.js itself is now a self-unregister stub that nukes any old SW
44// any returning client may already have installed.
45if ('serviceWorker' in navigator) {
46  navigator.serviceWorker
47    .getRegistrations()
48    .then((regs) => {
49      regs.forEach((reg) => {
50        if (reg.active && reg.active.scriptURL.endsWith('/sw.js')) {
51          reg.unregister().catch(() => {});
52        }
53      });
54    })
55    .catch(() => {});
56}
57
58// 4. Optimize WebGazer loading
59const optimizeWebGazer = () => {
60  if (window.location.pathname.includes('/question')) {
61    // Only load WebGazer when actually needed
62    const script = document.createElement('script');
63    script.src = 'https://webgazer.cs.brown.edu/webgazer.js';
64    script.async = true;
65    document.head.appendChild(script);
66  }
67};
68
69// Initialize optimizations
70preloadCriticalResources();
71optimizeWebGazer();