Performance optimizations for mobile

Author: @bronzeagecto

src/js/graph.ts

@@ -131,20 +131,22 @@ interface HashTarget {
   element: Selection<SVGGElement, GraphNode, SVGGElement, unknown>;
 }
 
-function initGlyphs(rootElement: Element): void {
+function initGlyphs(rootElement: Element, options?: { reduced?: boolean }): void {
   const glyphContainer = rootElement.querySelector('.graph-glyphs');
   if (!glyphContainer) {
     return;
   }
 
+  const reduced = Boolean(options?.reduced);
   const glyphSets = [
     '∆ ƒ π λ ξ 0 1 2 3 5 8 A C E G H K',
     'β γ ζ ψ Ω 7 9 B D F J L N Q Z',
     '▮ ▯ ▰ ϟ ψ Ω ≡ ≣ ≠ ✶ ✷ ✸ ✹ ✺',
     '0 1 0 1 0 1 0 1 0 1 0 1 0 1',
   ];
 
-  const totalClusters = 16;
+  const totalClusters = reduced ? 6 : 16;
+  const baseTimeout = reduced ? 2600 : 1500;
   const fragment = document.createDocumentFragment();
   const clusters: HTMLElement[] = [];
 
@@ -161,9 +163,9 @@ function initGlyphs(rootElement: Element): void {
   function randomizeCluster(cluster: HTMLElement): void {
     const left = Math.random() * 100;
     const top = Math.random() * 100;
-    const scale = 0.6 + Math.random() * 1.4;
-    const flicker = `${3.5 + Math.random() * 3}s`;
-    const hue = `${6 + Math.random() * 5}s`;
+    const scale = reduced ? 0.8 + Math.random() * 0.8 : 0.6 + Math.random() * 1.4;
+    const flicker = reduced ? `${4.5 + Math.random() * 2.5}s` : `${3.5 + Math.random() * 3}s`;
+    const hue = reduced ? `${8 + Math.random() * 4}s` : `${6 + Math.random() * 5}s`;
     const text = glyphSets[Math.floor(Math.random() * glyphSets.length)];
 
     cluster.style.setProperty('left', `${left}%`);
@@ -192,7 +194,7 @@ function initGlyphs(rootElement: Element): void {
     cluster.style.transition = 'opacity 0.35s ease';
     cluster.style.opacity = '0';
 
-    const timeout = 1500 + Math.random() * 2500;
+    const timeout = baseTimeout + Math.random() * (reduced ? 2200 : 2500);
 
     window.setTimeout(() => {
       randomizeCluster(cluster);
@@ -201,7 +203,7 @@ function initGlyphs(rootElement: Element): void {
   }
 
   for (let i = 0; i < clusters.length; i += 1) {
-    const delay = (i / clusters.length) * 2000;
+    const delay = reduced ? 0 : (i / clusters.length) * 2000;
     window.setTimeout(() => loopCluster(i), delay);
   }
 }
@@ -212,7 +214,14 @@ export async function initGraph(containerSelector: string, dataUrl: string): Pro
     return;
   }
 
-  initGlyphs(rootElement);
+  const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+  const isSmallScreen = window.matchMedia('(max-width: 768px)').matches;
+  const extendedNavigator = navigator as Navigator & { connection?: { saveData?: boolean } };
+  const hasSaveDataPreference = Boolean(extendedNavigator.connection?.saveData);
+  const isLowConcurrency = typeof navigator.hardwareConcurrency === 'number' && navigator.hardwareConcurrency > 0 && navigator.hardwareConcurrency <= 4;
+  const shouldReduceMotion = prefersReducedMotion || hasSaveDataPreference || isSmallScreen || isLowConcurrency;
+
+  initGlyphs(rootElement, { reduced: shouldReduceMotion });
 
   const response = await fetch(dataUrl);
   if (!response.ok) {
@@ -263,32 +272,35 @@ export async function initGraph(containerSelector: string, dataUrl: string): Pro
       default:
         customColor = NODE_COLORS[node.type];
     }
-    nodes.push({
+    const nodeEntry: GraphNode = {
       ...node,
       radius,
       chargeStrength,
       color: customColor,
-      pulse: {
+      spinAngle: 0,
+    };
+    if (!shouldReduceMotion) {
+      nodeEntry.pulse = {
         baseRadius: radius,
         amplitude: radius * ((PULSE_SCALE[node.type] ?? 1.7) - 1) * (0.6 + Math.random() * 1.2),
         speed: 0.003 + Math.random() * 0.005,
         phase: Math.random() * Math.PI * 2,
         baseCharge: chargeStrength,
-      },
-      drift: {
+      };
+      nodeEntry.drift = {
         amplitudeX: 18 + Math.random() * 26,
         amplitudeY: 12 + Math.random() * 18,
         speedX: 0.00008 + Math.random() * 0.00012,
         speedY: 0.00008 + Math.random() * 0.00012,
         phaseX: Math.random() * Math.PI * 2,
         phaseY: Math.random() * Math.PI * 2,
-      },
-      spin: {
+      };
+      nodeEntry.spin = {
         speed: 0.00012 + Math.random() * 0.00025,
         phase: Math.random() * Math.PI * 2,
-      },
-      spinAngle: 0,
-    });
+      };
+    }
+    nodes.push(nodeEntry);
   }
 
   for (let i = 0; i < data.links.length; i += 1) {
@@ -321,18 +333,20 @@ export async function initGraph(containerSelector: string, dataUrl: string): Pro
   linkGradient.append('stop').attr('offset', '55%').attr('stop-color', 'rgba(113, 213, 255, 0.52)');
   linkGradient.append('stop').attr('offset', '100%').attr('stop-color', 'rgba(140, 91, 250, 0.55)');
 
-  const glowFilter = defs
-    .append('filter')
-    .attr('id', 'node-glow')
-    .attr('x', '-50%')
-    .attr('y', '-50%')
-    .attr('width', '200%')
-    .attr('height', '200%');
-
-  glowFilter.append('feGaussianBlur').attr('stdDeviation', 18).attr('result', 'coloredBlur');
-  const feMerge = glowFilter.append('feMerge');
-  feMerge.append('feMergeNode').attr('in', 'coloredBlur');
-  feMerge.append('feMergeNode').attr('in', 'SourceGraphic');
+  if (!shouldReduceMotion) {
+    const glowFilter = defs
+      .append('filter')
+      .attr('id', 'node-glow')
+      .attr('x', '-50%')
+      .attr('y', '-50%')
+      .attr('width', '200%')
+      .attr('height', '200%');
+
+    glowFilter.append('feGaussianBlur').attr('stdDeviation', 18).attr('result', 'coloredBlur');
+    const feMerge = glowFilter.append('feMerge');
+    feMerge.append('feMergeNode').attr('in', 'coloredBlur');
+    feMerge.append('feMergeNode').attr('in', 'SourceGraphic');
+  }
 
   const zoomBehavior = zoom<SVGSVGElement, unknown>()
     .scaleExtent([0.5, 2])
@@ -356,9 +370,12 @@ export async function initGraph(containerSelector: string, dataUrl: string): Pro
     .attr('stroke-opacity', 0.72)
     .attr('stroke', 'url(#link-gradient)');
 
-  const nodeSelection = g
-    .append('g')
-    .attr('filter', 'url(#node-glow)')
+  const nodesGroup = g.append('g');
+  if (!shouldReduceMotion) {
+    nodesGroup.attr('filter', 'url(#node-glow)');
+  }
+
+  const nodeSelection = nodesGroup
     .selectAll<SVGGElement, GraphNode>('g')
     .data(nodes)
     .join('g')
@@ -400,14 +417,16 @@ export async function initGraph(containerSelector: string, dataUrl: string): Pro
     .attr('opacity', 0.92)
     .attr('data-node-id', (d) => d.id);
 
-  nodeSelection
-    .append('circle')
-    .attr('r', (d) => (d.radius ?? NODE_RADIUS[d.type]) * 1.25)
-    .attr('fill', 'none')
-    .attr('stroke', (d) => (d as GraphNode & { color?: string }).color ?? NODE_COLORS[d.type])
-    .attr('stroke-width', 3.5)
-    .attr('opacity', 0.36)
-    .attr('class', 'graph-node__glow');
+  if (!shouldReduceMotion) {
+    nodeSelection
+      .append('circle')
+      .attr('r', (d) => (d.radius ?? NODE_RADIUS[d.type]) * 1.25)
+      .attr('fill', 'none')
+      .attr('stroke', (d) => (d as GraphNode & { color?: string }).color ?? NODE_COLORS[d.type])
+      .attr('stroke-width', 3.5)
+      .attr('opacity', 0.36)
+      .attr('class', 'graph-node__glow');
+  }
 
   nodeSelection
     .append('text')
@@ -445,10 +464,10 @@ export async function initGraph(containerSelector: string, dataUrl: string): Pro
       }),
     )
     .force('center', forceCenter(width / 2, height / 2))
-    .force('collision', forceCollide().radius((d) => (d.radius ?? 10) + 28).strength(1.5))
+    .force('collision', forceCollide().radius((d) => (d.radius ?? 10) + (shouldReduceMotion ? 18 : 28)).strength(shouldReduceMotion ? 1 : 1.5))
     .force('x', forceX(width / 2).strength(0.008))
     .force('y', forceY(height / 2).strength(0.008))
-    .alphaDecay(0.04);
+    .alphaDecay(shouldReduceMotion ? 0.08 : 0.04);
 
   simulation
     .force('type-position', forceY<GraphNode>().strength(0.035).y((d) => TYPE_FORCE_TARGETS[d.type] ?? height / 2));
@@ -634,7 +653,7 @@ export async function initGraph(containerSelector: string, dataUrl: string): Pro
       return null;
     });
 
-    simulation.alpha(0.2).restart();
+    simulation.alpha(shouldReduceMotion ? 0.1 : 0.2).restart();
   }
 
   nodeSelection