Web性能优化：Core Web Vitals全攻略

// 4. Inline critical CSS to avoid render-blocking
// Use tools like critters or critical to extract above-the-fold CSS

// next.config.js (Next.js auto-optimizes fonts)
const nextConfig = {
  experimental: {
    optimizeCss: true, // Uses critters for critical CSS
  },
};

// BAD: Long task blocks main thread
button.addEventListener('click', () => {
  // 200ms synchronous computation
  const result = heavyComputation(data);
  updateDOM(result);
});

// GOOD: Break into smaller tasks with scheduler
button.addEventListener('click', async () => {
  // Yield to main thread between tasks
  const chunk1 = processChunk(data.slice(0, 1000));
  await scheduler.yield(); // or use setTimeout(0) as fallback

  const chunk2 = processChunk(data.slice(1000, 2000));
  await scheduler.yield();

  updateDOM([...chunk1, ...chunk2]);
});

// GOOD: Use Web Worker for heavy computation
const worker = new Worker('/compute-worker.js');
button.addEventListener('click', () => {
  worker.postMessage(data);
});
worker.addEventListener('message', (e) => {
  updateDOM(e.data);
});

// 5. Handle web font loading to avoid FOUT/FOIT
// Use font-display: swap with size-adjust
const fontFace = new FontFace('CustomFont', 'url(/fonts/custom.woff2)', {
  display: 'swap',
});

document.fonts.add(fontFace);
fontFace.load();

// Next.js Image component handles all of this automatically
import Image from 'next/image';

function HeroSection() {
  return (
    <Image
      src="/images/hero.jpg"
      alt="Hero"
      width={1200}
      height={600}
      priority // For LCP image — disables lazy loading
      sizes="(max-width: 768px) 100vw, 50vw"
      quality={85}
    />
  );
}

// React lazy + Suspense
import { lazy, Suspense } from 'react';

const Dashboard = lazy(() => import('./pages/Dashboard'));
const Settings = lazy(() => import('./pages/Settings'));
const Analytics = lazy(() =>
  import('./pages/Analytics').then(module => ({
    default: module.AnalyticsPage, // Named export
  }))
);

function App() {
  return (
    <Suspense fallback={<PageSkeleton />}>
      <Routes>
        <Route path="/dashboard" element={<Dashboard />} />
        <Route path="/settings" element={<Settings />} />
        <Route path="/analytics" element={<Analytics />} />
      </Routes>
    </Suspense>
  );
}

// Heavy component — only load when visible
const HeavyChart = lazy(() => import('./components/HeavyChart'));

function DashboardPage() {
  const [showChart, setShowChart] = useState(false);

  return (
    <div>
      <button onClick={() => setShowChart(true)}>显示图表</button>
      {showChart && (
        <Suspense fallback={<ChartSkeleton />}>
          <HeavyChart />
        </Suspense>
      )}
    </div>
  );
}

// Dynamic import for libraries
async function handleExport() {
  // xlsx library only loaded when user clicks export
  const XLSX = await import('xlsx');
  const workbook = XLSX.utils.book_new();
  // ...
}

// sw.js — Service Worker with Workbox patterns
import { precacheAndRoute } from 'workbox-precaching';
import { registerRoute } from 'workbox-routing';
import {
  CacheFirst,
  StaleWhileRevalidate,
  NetworkFirst,
} from 'workbox-strategies';
import { ExpirationPlugin } from 'workbox-expiration';
import { CacheableResponsePlugin } from 'workbox-cacheable-response';

// Precache app shell
precacheAndRoute(self.__WB_MANIFEST);

// Cache-First: static assets (fonts, images)
registerRoute(
  ({ request }) =>
    request.destination === 'image' || request.destination === 'font',
  new CacheFirst({
    cacheName: 'static-assets',
    plugins: [
      new CacheableResponsePlugin({ statuses: [0, 200] }),
      new ExpirationPlugin({ maxEntries: 100, maxAgeSeconds: 30 * 24 * 3600 }),
    ],
  })
);

// Stale-While-Revalidate: CSS and JS
registerRoute(
  ({ request }) =>
    request.destination === 'style' || request.destination === 'script',
  new StaleWhileRevalidate({
    cacheName: 'static-resources',
  })
);

// Network-First: API calls
registerRoute(
  ({ url }) => url.pathname.startsWith('/api/'),
  new NetworkFirst({
    cacheName: 'api-cache',
    networkTimeoutSeconds: 3,
    plugins: [
      new ExpirationPlugin({ maxEntries: 50, maxAgeSeconds: 5 * 60 }),
    ],
  })
);

// Performance monitoring with web-vitals library
import { onLCP, onINP, onCLS, onFCP, onTTFB } from 'web-vitals';

function sendToAnalytics(metric) {
  const body = JSON.stringify({
    name: metric.name,
    value: metric.value,
    rating: metric.rating, // 'good' | 'needs-improvement' | 'poor'
    delta: metric.delta,
    id: metric.id,
    navigationType: metric.navigationType,
    url: window.location.href,
    timestamp: Date.now(),
  });

  // Use sendBeacon for reliability during page unload
  if (navigator.sendBeacon) {
    navigator.sendBeacon('/api/analytics/vitals', body);
  } else {
    fetch('/api/analytics/vitals', {
      method: 'POST',
      body,
      keepalive: true,
    });
  }
}

onLCP(sendToAnalytics);
onINP(sendToAnalytics);
onCLS(sendToAnalytics);
onFCP(sendToAnalytics);
onTTFB(sendToAnalytics);

// Long Task detection
const longTaskObserver = new PerformanceObserver((list) => {
  for (const entry of list.getEntries()) {
    if (entry.duration > 50) {
      console.warn('Long Task detected:', {
        duration: entry.duration,
        startTime: entry.startTime,
        name: entry.name,
      });
    }
  }
});

longTaskObserver.observe({ type: 'longtask', buffered: true });

// Resource loading performance
const resourceObserver = new PerformanceObserver((list) => {
  for (const entry of list.getEntries()) {
    if (entry.duration > 1000) {
      console.warn('Slow resource:', {
        name: entry.name,
        duration: entry.duration,
        transferSize: entry.transferSize,
        type: entry.initiatorType,
      });
    }
  }
});

resourceObserver.observe({ type: 'resource', buffered: true });