跳到主要内容

Performance Basics

Performance = fast load + smooth interaction

Core Metrics​

FCP · LCP · FID · CLS

Web Vitals:

  • FCP (First Contentful Paint): First content appears
  • LCP (Largest Contentful Paint): Main content loads
  • FID (First Input Delay): Time to interactivity
  • CLS (Cumulative Layout Shift): Visual stability

"Core Web Vitals measure loading performance (LCP), interactivity (FID), and visual stability (CLS)."

Loading Performance​

Reduce bundle size + optimize assets

Strategies:

  • Code splitting
  • Tree shaking
  • Minification
  • Compression (gzip/brotli)
  • Image optimization
  • Lazy loading

"Loading performance improves by reducing bundle sizes, optimizing assets, and implementing code splitting."

Code Splitting​

Split code by route or feature

  • Route-based splitting
  • Component-based splitting
  • Dynamic imports
  • Reduces initial bundle

"Code splitting loads only necessary code, reducing initial bundle size and improving load times."

Image Optimization​

Right format + size + lazy load

  • Use modern formats (WebP, AVIF)
  • Responsive images (srcset)
  • Lazy loading
  • Compression
  • CDN delivery

"Image optimization uses modern formats, responsive sizing, lazy loading, and compression to improve performance."

Caching Strategies​

Browser cache + CDN + Service Workers

  • Browser caching (Cache-Control headers)
  • CDN caching
  • Service Worker caching
  • HTTP caching headers

"Caching reduces server load and improves repeat visit performance through browser, CDN, and Service Worker caching."

Rendering Performance​

Minimize reflows and repaints

  • Avoid layout thrashing
  • Use CSS transforms (GPU-accelerated)
  • Virtual scrolling for long lists
  • Debounce/throttle events
  • Use requestAnimationFrame

"Rendering performance improves by minimizing DOM manipulations, using GPU-accelerated CSS, and optimizing event handlers."

JavaScript Performance​

Efficient algorithms + avoid memory leaks

  • Avoid memory leaks
  • Use efficient algorithms
  • Debounce/throttle
  • Web Workers for heavy tasks
  • Avoid blocking main thread

"JavaScript performance requires efficient code, proper memory management, and avoiding blocking the main thread."

Network Optimization​

Reduce requests + compress + HTTP/2

  • Minimize HTTP requests
  • Use HTTP/2 multiplexing
  • Enable compression
  • Use CDN
  • Preconnect/prefetch

"Network optimization reduces requests, uses HTTP/2, enables compression, and leverages CDNs for faster delivery."

9️⃣ Monitoring Tools​

Lighthouse + DevTools + Real User Monitoring

  • Chrome DevTools
  • Lighthouse
  • WebPageTest
  • Real User Monitoring (RUM)
  • Performance API

"Performance monitoring uses tools like Lighthouse, DevTools, and RUM to measure and optimize web performance."

Best Practices​

✅ Minimize bundle size ✅ Optimize images ✅ Use code splitting ✅ Implement caching ✅ Minimize reflows/repaints ✅ Lazy load content ✅ Use CDN ✅ Monitor Core Web Vitals

"Web performance focuses on Core Web Vitals (LCP, FID, CLS) and involves optimizing loading through code splitting and asset optimization, improving rendering by minimizing reflows, optimizing JavaScript execution, and using caching strategies. Tools like Lighthouse and DevTools help measure and improve performance."

🧠 Ultra-Short Cheat Sheet​

Core Web Vitals (LCP/FID/CLS)
Code splitting
Image optimization
Caching (browser/CDN/SW)
Minimize reflows/repaints
Bundle size reduction
Network optimization
Monitoring tools