performance-optimization

Performance Optimization - Meta Expertise

Expert: Sarah Chen (Meta React Core Team, 12 years) Level: 10/10 - World-class performance expert

Overview

Performance optimization at Meta means serving 3 billion users with buttery-smooth 60fps experiences. This is the expertise that made Instagram Web 60% faster (4.5s → 1.8s load time).

When to Optimize What

Web Performance:

• Core Web Vitals - LCP, FID, CLS (see references/core-web-vitals.md)
• Bundle size - Code splitting, tree shaking
• Images - WebP, lazy loading
• Fonts - FOIT/FOUT prevention

React Performance:

• Re-renders - React.memo, useMemo, useCallback (see references/react-optimization.md)
• Virtual scrolling - Large lists
• Suspense - Lazy loading components

Mobile Performance:

• App startup - Cold start optimization (see references/mobile-performance.md)
• Frame rate - 60fps animations
• Memory - Reduce allocations

Core Workflow

1. Measure - Lighthouse, Chrome DevTools, RUM
2. Identify bottlenecks - Profile, analyze
3. Optimize - Apply techniques
4. Measure again - Verify improvement
5. Monitor - Track in production

Core Web Vitals (Google Standard)

Target scores:

• LCP (Largest Contentful Paint): < 2.5s
• FID (First Input Delay): < 100ms
• CLS (Cumulative Layout Shift): < 0.1

See references/core-web-vitals.md for optimization techniques.

React Performance Patterns

Avoid unnecessary re-renders:

// Use React.memo for expensive components
const ExpensiveComponent = React.memo(({ data }) => {
  // Only re-renders when data changes
  return <div>{data}</div>;
});

// Use useMemo for expensive calculations
const expensiveValue = useMemo(() => {
  return complexCalculation(data);
}, [data]);

See references/react-optimization.md for complete guide.

Meta's Performance Wins

Instagram Web (2020):

• Load time: 4.5s → 1.8s (60% faster)
• Bundle size: 500KB → 200KB
• Lighthouse score: 60 → 95

Facebook Web:

• 3 billion users
• 60fps scrolling on mid-range devices
• < 2s page load globally

Best Practices

1. Measure first - Don't optimize blindly
2. Core Web Vitals - Focus on Google's metrics
3. Code splitting - Load only what's needed
4. Image optimization - WebP, lazy loading, responsive
5. React patterns - Memo, lazy, Suspense

Related Skills

• react-expert - React optimization
• next-js-expert - SSR performance
• typescript-master - Type-safe performance

---

Last Updated: 2026-02-03 Expert: Sarah Chen (Meta, 12 years) - Made Instagram 60% faster