SPA Performance — Optimizing Load Time, Runtime, and Perceived Performance

// Measure Core Web Vitals programmatically
function measurePerformance() {
    const metrics = {};

    // First Contentful Paint
    const paintEntries = performance.getEntriesByType('paint');
    paintEntries.forEach(entry => {
        metrics[entry.name] = entry.startTime.toFixed(2) + 'ms';
    });

    // Largest Contentful Paint
    const observer = new PerformanceObserver((list) => {
        const entries = list.getEntries();
        const lastEntry = entries[entries.length - 1];
        metrics['LCP'] = lastEntry.startTime.toFixed(2) + 'ms';
        console.log('LCP:', metrics['LCP']);
    });
    observer.observe({ type: 'largest-contentful-paint', buffered: true });

    // First Input Delay (approximation)
    const fidObserver = new PerformanceObserver((list) => {
        list.getEntries().forEach(entry => {
            metrics['FID'] = entry.processingStart - entry.startTime + 'ms';
            console.log('FID:', metrics['FID']);
        });
    });
    fidObserver.observe({ type: 'first-input', buffered: true });

    // Cumulative Layout Shift
    const clsObserver = new PerformanceObserver((list) => {
        let clsValue = 0;
        list.getEntries().forEach(entry => {
            if (!entry.hadRecentInput) {
                clsValue += entry.value;
            }
        });
        metrics['CLS'] = clsValue.toFixed(3);
        console.log('CLS:', metrics['CLS']);
    });
    clsObserver.observe({ type: 'layout-shift', buffered: true });

    // Resource timing
    const resources = performance.getEntriesByType('resource');
    resources.forEach(resource => {
        if (resource.initiatorType === 'script') {
            console.log(`Script: ${resource.name} — ${resource.duration.toFixed(2)}ms`);
        }
    });

    // Bundle size check
    const totalScriptSize = resources
        .filter(r => r.initiatorType === 'script')
        .reduce((sum, r) => sum + r.transferSize, 0);
    console.log(`Total JS size: ${(totalScriptSize / 1024).toFixed(1)} KB`);
}

// Expected output:
// LCP: 2450.32ms
// FID: 12ms
// CLS: 0.045
// Script: /static/js/main.abc123.js — 1234.56ms
// Total JS size: 456.7 KB

// React — lazy load routes
import { lazy, Suspense, Component } from 'react';
import { Routes, Route } from 'react-router-dom';

// These components are loaded on demand
const Dashboard = lazy(() => import('./pages/Dashboard'));
const Products = lazy(() => import('./pages/Products'));
const Analytics = lazy(() => import('./pages/Analytics'));
const Settings = lazy(() => import('./pages/Settings'));

// Preload on hover for instant navigation
function preloadOnHover(preloadFn) {
    let preloaded = false;
    return {
        onMouseEnter: () => {
            if (!preloaded) {
                preloaded = true;
                preloadFn();
            }
        }
    };
}

function AppRoutes() {
    return (
        <Suspense fallback={
            <div className="skeleton-screen">
                <div className="skeleton-header" />
                <div className="skeleton-content" />
            </div>
        }>
            <Routes>
                <Route path="/" element={<Dashboard />} />
                <Route
                    path="/products"
                    element={
                        <div {...preloadOnHover(() => import('./pages/Analytics'))}>
                            <Products />
                        </div>
                    }
                />
                <Route path="/analytics" element={<Analytics />} />
                <Route path="/settings" element={<Settings />} />
            </Routes>
        </Suspense>
    );
}

import { useState, useRef, useCallback, useEffect } from 'react';

// Virtual scroll — only renders visible rows
function VirtualList({ items, itemHeight, containerHeight }) {
    const [scrollTop, setScrollTop] = useState(0);
    const containerRef = useRef(null);

    const startIndex = Math.floor(scrollTop / itemHeight);
    const visibleCount = Math.ceil(containerHeight / itemHeight);
    const endIndex = Math.min(startIndex + visibleCount + 2, items.length);

    const visibleItems = items.slice(startIndex, endIndex);
    const offsetY = startIndex * itemHeight;

    const handleScroll = useCallback(() => {
        requestAnimationFrame(() => {
            setScrollTop(containerRef.current.scrollTop);
        });
    }, []);

    return (
        <div
            ref={containerRef}
            onScroll={handleScroll}
            style={{
                height: containerHeight,
                overflow: 'auto',
                position: 'relative'
            }}
        >
            <div style={{
                height: items.length * itemHeight,
                position: 'relative'
            }}>
                <div style={{
                    position: 'absolute',
                    top: offsetY,
                    left: 0,
                    right: 0
                }}>
                    {visibleItems.map((item, index) => (
                        <div
                            key={item.id}
                            style={{
                                height: itemHeight,
                                display: 'flex',
                                alignItems: 'center',
                                padding: '0 16px'
                            }}
                        >
                            {item.name}
                        </div>
                    ))}
                </div>
            </div>
        </div>
    );
}

// Performance comparison:
// 10,000 items, each 40px height
// Without virtual scroll: 10,000 DOM nodes
// With virtual scroll: ~20 DOM nodes (visible + buffer)
// Memory reduction: ~98%
// Render time per scroll: <16ms (60fps)