Subrequest Profiling in Headless Shopify: Cutting Hidden Latency

Introduction

Hydrogen storefronts are fast — but only if you manage subrequests.

Every GraphQL call, every API fetch, every chained dependency can spawn subrequests. Left unchecked, they stack up, causing slow product detail pages (PDPs) and collection pages (PLPs).

Subrequest profiling is how agencies uncover these hidden delays — and fix them.

What Are Subrequests?

• Definition: a request triggered as part of another request.
• Example: PDP fetches → product data → variant data → inventory → recommendations.
• Each chain = added latency.

👉 Shopify calls them “hidden waterfalls.”

Why Subrequests Kill Performance

• ❌ PDPs with 9+ subrequests = 1+ second delays.
• ❌ Chained GraphQL queries = sequential latency.
• ❌ Uncached hot queries (inventory, pricing) = repeated overhead.

Profiling Tools

1. Hydrogen Subrequest Profiler
   • Shows request count + duration per page.
   • Identifies repeat queries.
2. Lighthouse / Chrome DevTools
   • See waterfalls in network tab.
3. Batch & Defer Tools
   • GraphQL batching reduces sequential fetches.
   • @defer lets non-critical data stream later.

Fix Patterns

• ✅ Batch Queries → fetch product + variants in one call.
• ✅ Cache Hot Queries → inventory, top sellers.
• ✅ Defer Non-Critical Data → reviews, personalization.
• ✅ Limit Waterfalling → don’t fetch inside components without batching.

Case Example: Electronics PDP

• Pre-optimization: 9 subrequests, ~1.2s latency.
• Fixes: batched GraphQL queries + cached hot inventory checks.
• Post-optimization: 4 subrequests, ~350ms latency.
• Result: +18% PDP conversion rate.

Guardrails

• ✅ Profile subrequests before launch.
• ✅ Document max subrequests per template (e.g., 5 max for PDPs).
• ✅ Train devs to avoid “fetch-in-component” anti-pattern.
• ✅ Cache at edge when possible.

Conclusion

Hydrogen gives control over performance, but with that control comes responsibility. Subrequest profiling helps agencies cut hidden waterfalls and deliver lightning-fast stores.

Every subrequest counts. Fewer is faster.