前端性能优化指南：识别瓶颈与优化策略，提升LCP、FID、CLS核心指标

🇺🇸English

Identify and fix performance issues to create faster, smoother user experiences.

Assess Performance Issues

Understand current performance and identify problems:

1. Measure current state :

   • Core Web Vitals : LCP, FID/INP, CLS scores
   • Load time : Time to interactive, first contentful paint
   • Bundle size : JavaScript, CSS, image sizes
   • Runtime performance : Frame rate, memory usage, CPU usage
   • Network : Request count, payload sizes, waterfall

2. Identify bottlenecks :

   • What's slow? (Initial load? Interactions? Animations?)
   • What's causing it? (Large images? Expensive JavaScript? Layout thrashing?)
   • How bad is it? (Perceivable? Annoying? Blocking?)
   • Who's affected? (All users? Mobile only? Slow connections?)

CRITICAL : Measure before and after. Premature optimization wastes time. Optimize what actually matters.

Optimization Strategy

Create systematic improvement plan:

Loading Performance

Optimize Images :

• Use modern formats (WebP, AVIF)

• Proper sizing (don't load 3000px image for 300px display)

• Lazy loading for below-fold images

• Responsive images (srcset, picture element)

• Compress images (80-85% quality is usually imperceptible)

• Use CDN for faster delivery

  <img src="hero.webp" srcset="hero-400.webp 400w, hero-800.webp 800w, hero-1200.webp 1200w" sizes="(max-width: 400px) 400px, (max-width: 800px) 800px, 1200px" loading="lazy" alt="Hero image" />

Reduce JavaScript Bundle :

• Code splitting (route-based, component-based)

• Tree shaking (remove unused code)

• Remove unused dependencies

• Lazy load non-critical code

• Use dynamic imports for large components

  // Lazy load heavy component const HeavyChart = lazy(() => import('./HeavyChart'));

Optimize CSS :

• Remove unused CSS
• Critical CSS inline, rest async
• Minimize CSS files
• Use CSS containment for independent regions

Optimize Fonts :

• Use font-display: swap or optional

• Subset fonts (only characters you need)

• Preload critical fonts

• Use system fonts when appropriate

• Limit font weights loaded

  @font-face { font-family: 'CustomFont'; src: url('/fonts/custom.woff2') format('woff2'); font-display: swap; /* Show fallback immediately / unicode-range: U+0020-007F; / Basic Latin only */ }

Optimize Loading Strategy :

• Critical resources first (async/defer non-critical)
• Preload critical assets
• Prefetch likely next pages
• Service worker for offline/caching
• HTTP/2 or HTTP/3 for multiplexing

Rendering Performance

Avoid Layout Thrashing :

// ❌ Bad: Alternating reads and writes (causes reflows)
elements.forEach(el => {
  const height = el.offsetHeight; // Read (forces layout)
  el.style.height = height * 2; // Write
});

// ✅ Good: Batch reads, then batch writes
const heights = elements.map(el => el.offsetHeight); // All reads
elements.forEach((el, i) => {
  el.style.height = heights[i] * 2; // All writes
});

Optimize Rendering :

• Use CSS contain property for independent regions
• Minimize DOM depth (flatter is faster)
• Reduce DOM size (fewer elements)
• Use content-visibility: auto for long lists
• Virtual scrolling for very long lists (react-window, react-virtualized)

Reduce Paint & Composite:

• Use transform and opacity for animations (GPU-accelerated)
• Avoid animating layout properties (width, height, top, left)
• Use will-change sparingly for known expensive operations
• Minimize paint areas (smaller is faster)

Animation Performance

GPU Acceleration :

/* ✅ GPU-accelerated (fast) */
.animated {
  transform: translateX(100px);
  opacity: 0.5;
}

/* ❌ CPU-bound (slow) */
.animated {
  left: 100px;
  width: 300px;
}

Smooth 60fps :

• Target 16ms per frame (60fps)
• Use requestAnimationFrame for JS animations
• Debounce/throttle scroll handlers
• Use CSS animations when possible
• Avoid long-running JavaScript during animations

Intersection Observer :

// Efficiently detect when elements enter viewport
const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      // Element is visible, lazy load or animate
    }
  });
});

React/Framework Optimization

React-specific :

• Use memo() for expensive components
• useMemo() and useCallback() for expensive computations
• Virtualize long lists
• Code split routes
• Avoid inline function creation in render
• Use React DevTools Profiler

Framework-agnostic :

• Minimize re-renders
• Debounce expensive operations
• Memoize computed values
• Lazy load routes and components

Network Optimization

Reduce Requests :

• Combine small files
• Use SVG sprites for icons
• Inline small critical assets
• Remove unused third-party scripts

Optimize APIs :

• Use pagination (don't load everything)
• GraphQL to request only needed fields
• Response compression (gzip, brotli)
• HTTP caching headers
• CDN for static assets

Optimize for Slow Connections :

• Adaptive loading based on connection (navigator.connection)
• Optimistic UI updates
• Request prioritization
• Progressive enhancement

Core Web Vitals Optimization

Largest Contentful Paint (LCP < 2.5s)

• Optimize hero images
• Inline critical CSS
• Preload key resources
• Use CDN
• Server-side rendering

First Input Delay (FID < 100ms) / INP (< 200ms)

• Break up long tasks
• Defer non-critical JavaScript
• Use web workers for heavy computation
• Reduce JavaScript execution time

Cumulative Layout Shift (CLS < 0.1)

• Set dimensions on images and videos

• Don't inject content above existing content

• Use aspect-ratio CSS property

• Reserve space for ads/embeds

• Avoid animations that cause layout shifts

  /* Reserve space for image */ .image-container { aspect-ratio: 16 / 9; }

Performance Monitoring

Tools to use :

• Chrome DevTools (Lighthouse, Performance panel)
• WebPageTest
• Core Web Vitals (Chrome UX Report)
• Bundle analyzers (webpack-bundle-analyzer)
• Performance monitoring (Sentry, DataDog, New Relic)

Key metrics :

• LCP, FID/INP, CLS (Core Web Vitals)
• Time to Interactive (TTI)
• First Contentful Paint (FCP)
• Total Blocking Time (TBT)
• Bundle size
• Request count

IMPORTANT : Measure on real devices with real network conditions. Desktop Chrome with fast connection isn't representative.

NEVER :

• Optimize without measuring (premature optimization)
• Sacrifice accessibility for performance
• Break functionality while optimizing
• Use will-change everywhere (creates new layers, uses memory)
• Lazy load above-fold content
• Optimize micro-optimizations while ignoring major issues (optimize the biggest bottleneck first)
• Forget about mobile performance (often slower devices, slower connections)

Verify Improvements

Test that optimizations worked:

• Before/after metrics : Compare Lighthouse scores
• Real user monitoring : Track improvements for real users
• Different devices : Test on low-end Android, not just flagship iPhone
• Slow connections : Throttle to 3G, test experience
• No regressions : Ensure functionality still works
• User perception : Does it feel faster?

Remember: Performance is a feature. Fast experiences feel more responsive, more polished, more professional. Optimize systematically, measure ruthlessly, and prioritize user-perceived performance.

Weekly Installs

28.3K

Repository

pbakaus/impeccable

GitHub Stars

13.4K

First Seen

Mar 4, 2026

Security Audits

Gen Agent Trust HubPassSocketPassSnykPass

Installed on

codex27.7K

opencode27.5K

github-copilot27.5K

gemini-cli27.5K

cursor27.5K

amp27.4K