The 2G Test: How I Build Apps for Real-World Conditions

The Test That Changed Everything

I keep Chrome DevTools set to "Slow 3G" by default. Every feature gets tested there first. This single habit has shaped how I think about product development.

Why 2G?

In Zimbabwe:

• 4G coverage exists mainly in cities
• Rural areas often have 2G only
• Even in cities, tower congestion creates 2G-like conditions
• Users frequently exhaust their data and fall back to throttled speeds

Building for 2G means building for everyone.

The Testing Protocol

Step 1: Throttle Everything

// In Chrome DevTools or using this script
const conditions = {
  offline: false,
  downloadThroughput: 50 * 1024 / 8, // 50 Kbps
  uploadThroughput: 25 * 1024 / 8,   // 25 Kbps
  latency: 2000 // 2 second latency
};

Step 2: Measure Time to Interactive

Not time to first paint. Time to interactive. Can users do what they came for?

// Performance budget
const budget = {
  firstContentfulPaint: 3000,  // 3s
  timeToInteractive: 5000,     // 5s
  totalBundleSize: 100 * 1024, // 100KB
};

Step 3: Test Critical Paths

For FareWise, the critical path is:

1. Open app
2. Select pickup/dropoff
3. See fare comparison

This must work in under 5 seconds on 2G. Everything else is secondary.

What This Means for Architecture

Smaller Bundles

I use route-based code splitting aggressively:

const Calculator = dynamic(() => import('./Calculator'), {
  loading: () => <Skeleton />,
  ssr: false
});

Skeleton States

Never show loading spinners. Show content shapes:

function FareCardSkeleton() {
  return (
    <div className="animate-pulse">
      <div className="h-6 bg-muted rounded w-3/4 mb-2" />
      <div className="h-8 bg-muted rounded w-1/2" />
    </div>
  );
}

Progressive Enhancement

Core functionality works without JavaScript. Enhanced features load progressively.

The Payoff

Apps that pass the 2G test:

• Work everywhere, not just on fiber connections
• Have smaller bundles (better for everyone)
• Handle errors gracefully
• Feel fast even on good connections

Try It Yourself

1. Open Chrome DevTools
2. Go to Network tab
3. Select "Slow 3G" from dropdown
4. Use your own app

The results might surprise you.