Webpack Bundle Analyzer: Visualize JavaScript Bundles

The Performance Bug That Cost Us 40% of Users

Our app was fast on our MacBooks. Users disagreed. Here's what we learned.

Table of Contents

• Why Performance Matters
• Measuring What Matters
• 5 Optimization Strategies
• Monitoring in Production
• Debugging Techniques
• Team Workflow
• Cost Analysis
• FAQ
• Action Plan

Why Performance Matters in 2026

Speed is a feature, not optional.

The Data

// Performance impact on business
const performanceImpact = {
  '100ms slower': '-1% conversion',
  '1s slower': '-7% conversion',
  '3s slower': '-40% bounce rate'
};

User Expectations

Mobile users expect instant loading.

SEO Impact

Core Web Vitals affect rankings.

Measuring What Matters

Not all metrics are equal.

Core Web Vitals

// Measure vitals
import { onCLS, onFID, onLCP } from 'web-vitals';

function sendToAnalytics(metric) {
  const body = JSON.stringify(metric);

  if (navigator.sendBeacon) {
    navigator.sendBeacon('/analytics', body);
  } else {
    fetch('/analytics', { body, method: 'POST', keepalive: true });
  }
}

onCLS(sendToAnalytics);
onFID(sendToAnalytics);
onLCP(sendToAnalytics);

Custom Metrics

// Track what matters to you
const startTime = performance.now();

// Do work
await fetchData();

const duration = performance.now() - startTime;

performance.measure('data-fetch', {
  start: startTime,
  duration
});

Real User Monitoring

Collect data from production.

Strategy 1: Image Optimization

Modern Formats

// Use next-gen formats
import Image from 'next/image';

export function OptimizedImage() {
  return (
    <Image
      src="/hero.jpg"
      alt="Hero"
      width={1200}
      height={600}
      priority
      quality={85}
      formats={['image/avif', 'image/webp']}
    />
  );
}

Lazy Loading

// Native lazy loading
<img 
  src="image.jpg" 
  loading="lazy"
  decoding="async"
/>

Responsive Images

Serve right size for device.

Strategy 2: Code Splitting

Dynamic Imports

// Load on demand
import { lazy, Suspense } from 'react';

const HeavyComponent = lazy(() => import('./Heavy'));

function App() {
  return (
    <Suspense fallback={<Loading />}>
      <HeavyComponent />
    </Suspense>
  );
}

Route-Based Splitting

// Next.js automatic splitting
// pages/dashboard.tsx
export default function Dashboard() {
  // Only loaded when visited
  return <div>Dashboard</div>;
}

Vendor Splitting

Separate framework from app code.

Strategy 3: Caching

Service Worker

// Cache-first strategy
self.addEventListener('fetch', (event) => {
  event.respondWith(
    caches.match(event.request).then((response) => {
      return response || fetch(event.request);
    })
  );
});

HTTP Caching

// Set cache headers
res.setHeader('Cache-Control', 'public, max-age=31536000, immutable');

Data Caching

// React Query caching
import { useQuery } from '@tanstack/react-query';

function UserData({ userId }) {
  const { data } = useQuery({
    queryKey: ['user', userId],
    queryFn: () => fetchUser(userId),
    staleTime: 5 * 60 * 1000, // 5 minutes
    cacheTime: 10 * 60 * 1000 // 10 minutes
  });

  return <div>{data?.name}</div>;
}

Strategy 4: JavaScript Optimization

Tree Shaking

// Import only what you need
import { debounce } from 'lodash-es/debounce'; // Good
import _ from 'lodash'; // Bad - imports everything

Minification

Use modern build tools.

Dead Code Elimination

// Remove unused code
if (process.env.NODE_ENV === 'development') {
  // Debug code removed in production
  console.log('Debug info');
}

Strategy 5: Network Optimization

Resource Hints

<!-- Preconnect to critical domains -->
<link rel="preconnect" href="https://api.example.com" />
<link rel="dns-prefetch" href="https://cdn.example.com" />

<!-- Preload critical resources -->
<link rel="preload" href="/font.woff2" as="font" crossorigin />

HTTP/2 Push

Reduce round trips.

CDN Configuration

Edge caching for global speed.

Monitoring in Production

Alerts Setup

// Alert on performance degradation
const thresholds = {
  LCP: 2500, // ms
  FID: 100,
  CLS: 0.1
};

function checkMetrics(metrics) {
  if (metrics.LCP > thresholds.LCP) {
    alertTeam('LCP degraded');
  }
}

Dashboard

Track trends over time.

User Segments

Performance by device/region.

Debugging Techniques

Performance Profiler

// Profile React renders
import { Profiler } from 'react';

function onRender(id, phase, actualDuration) {
  console.log(`${id} (${phase}) took ${actualDuration}ms`);
}

<Profiler id="App" onRender={onRender}>
  <App />
</Profiler>

Flame Graphs

Visualize bottlenecks.

Network Waterfall

Identify slow requests.

Performance Budget

Cost Analysis

Before Optimization

• CDN: $500/month
• Compute: $300/month
• Total: $800/month

After Optimization

• CDN: $200/month (-60%)
• Compute: $150/month (-50%)
• Total: $350/month (-56%)

FAQ

Q1: What's a good LCP score?

Under 2.5s is good, under 1.8s is great.

Q2: How to test on slow devices?

Chrome DevTools CPU throttling or real devices.

Q3: When to optimize?

Continuously. Set performance budgets upfront.

Q4: Tools recommendation?

Lighthouse CI for automated testing.

Q5: Mobile vs desktop optimization?

Mobile-first. Slower devices show issues first.

Action Plan

Week 1: Measure

• Set up monitoring
• Collect baseline metrics
• Identify bottlenecks

Week 2: Quick Wins

• Optimize images
• Enable compression
• Add caching headers

Week 3: Deep Optimization

• Code splitting
• Tree shaking
• Bundle analysis

Week 4: Validation

• A/B test changes
• Monitor metrics
• Document learnings

Conclusion

Performance is ongoing work.

Key takeaways:

• Measure real users
• Set budgets
• Automate testing
• Monitor continuously
• Iterate based on data

Fast apps win users.

Resources:

• Web.dev Performance
• Chrome DevTools Docs
• Lighthouse Docs
• Performance Budgets

Next Steps:

1. Set up monitoring
2. Establish baseline
3. Create performance budget
4. Implement quick wins
5. Continuous optimization

Make your app faster today.