Request waterfall flattened; critical path under 3 hops

A request waterfall where API B cannot start until API A completes means your page load time is the sum of all sequential fetch durations, not the maximum. A five-hop waterfall with 200ms fetches adds 1 full second of latency that cannot be improved by any infrastructure optimization — it is a code architecture problem. ISO 25010:2011 time-behaviour formalizes the concern; the user-facing result is a page that appears slow even on fast connections because the CPU is idle while waiting for chained network calls to resolve.

Replace sequential await chains with Promise.all for independent fetches. In Next.js Server Components, initiate fetches without await at the top of the component to enable parallel execution.

// app/dashboard/page.tsx — parallel fetches
export default async function DashboardPage() {
  // Start all three fetches simultaneously
  const [user, orders, stats] = await Promise.all([
    fetchUser(),
    fetchOrders(),
    fetchStats(),
  ])
  // ...
}

• ID: performance-deep-dive.network-waterfall.request-waterfall-optimized

• Severity: critical

• What to look for: Count all sequential API call chains in page components. Enumerate chains where request B depends on request A. Open Chrome DevTools → Network tab. Check the request waterfall. Measure the critical path: count the number of sequential request hops required for the page to become interactive. A typical critical path: (1) HTML → (2) CSS + JS → (3) API data. Ideal is under 3 hops. Look for opportunities to parallelize (fetch multiple APIs at once instead of chained requests).

• Pass criteria: The request waterfall shows parallelized requests. Critical path under 3 hops. No request waits for another request before starting.

• Fail criteria: Requests are sequential and dependent (A finishes before B starts). Critical path exceeds 3 hops. Request waterfall shows long idle periods.

• Skip (N/A) when: Never — network optimization applies to all applications.

• Report even on pass: Report the waterfall depth and number of sequential hops: "Critical path: X hops, Y parallel requests."

• Cross-reference: For LCP impact of waterfall depth, see the lcp-optimized check.

• Detail on fail: "Waterfall shows 5 sequential hops: HTML → CSS → JS → API A → API B → Render. Each request waits for previous to complete" or "Long gaps in network activity suggest blocking request dependencies"

• Remediation: Parallelize requests using Promise.all instead of awaiting sequentially. Use prefetch and preconnect links for third-party domains.

  // app/dashboard/page.tsx — parallelize independent fetches
  const [users, products, stats] = await Promise.all([fetchUsers(), fetchProducts(), fetchStats()])