Mastering Hygraph API performance: Managing asset traffic

In the previous installment, we covered query optimization and schema design fundamentals. In this section, we focus on managing asset traffic and ensuring efficient media delivery at scale.

Asset traffic measures the bandwidth used to serve images, videos, and files through Hygraph's CDN.

Key point: Each render counts toward your limit. A 10 MB image rendered 1,000 times = 10 GB of asset traffic.

#Optimization strategies

1. Use image transformations

Hygraph supports on-the-fly image optimization. Resize and compress images for their display context:

// Original: 5 MB high-resolution image
const optimizedUrl = `${asset.url}?width=800&quality=80`;
// Delivered: ~100 KB optimized image

2. Implement responsive images

Serve appropriate sizes based on viewport:

<img 
  srcset="
    ${asset.url}?width=400 400w,
    ${asset.url}?width=800 800w,
    ${asset.url}?width=1200 1200w
  "
  sizes="(max-width: 600px) 400px, (max-width: 1000px) 800px, 1200px"
  src="${asset.url}?width=800"
  alt="${asset.altText}"
/>

3. Monitor usage proactively

Check asset traffic in Project Settings → Billing before high-traffic periods like campaigns or launches.

4. Consider external CDN for high-volume assets

For very high-traffic applications, you can serve assets through your own CDN while keeping content management in Hygraph.

#Quick reference: Diagnostic checklist

Images not loading?

#Summary

Hygraph's architecture is designed for performance. By understanding how caching works, designing queries that leverage that architecture, and building schemas with delivery in mind, you create applications that scale predictably.

Key takeaways:

1. Leverage the CDN — Most read traffic should flow through the High Performance endpoint
2. Design cacheable queries — Consistent query shapes maximize cache hits
3. Right-size everything — Fetch sizes, reference depth, and asset dimensions
4. Monitor proactively — Use complexity headers and billing dashboards before issues arise

You can reach out to us at support@hygraph.com for any questions about mastering the Hygraph API.