Get help on Discord

Troubleshooting high bandwidth usage on a marketing site

12 replies
Last updated: Jul 17, 2022
Looking for the best way to see what is chewing through the bandwidth on one of our website.This seems insane for a marketing site.
AI Update

Based on your concern about bandwidth usage on your marketing site, Sanity has a built-in feature called Request Logs that's perfect for diagnosing exactly what's consuming your bandwidth.

How to Access Request Logs

  1. Go to your project settings at sanity.io/manage
  2. Navigate to the Usage section
  3. Scroll to the bottom where you can download up to 1GB of log data from the last 7 days
  4. You can request a new export every 24 hours

What You'll See

The logs come as gzipped NDJSON files with detailed information about every request, including:

  • Request Type (API, APICDN, or CDN) - helps identify if it's content queries or asset downloads
  • Full URL with query parameters
  • GROQ Query Identifier - groups similar queries together so you can spot repeated patterns
  • Remote IP - identify if traffic is coming from bots or specific sources
  • User Agent and Referrer - understand what's making the requests
  • Timestamp - spot usage spikes
  • Bandwidth usage per request

Analyzing the Data

You can convert the logs to CSV for easier analysis:

gunzip --stdout logfile.ndjson.gz | npx json2csv --ndjson --output output.csv

Then open in Excel/Google Sheets, or use tools like jq, GROQ CLI, or even upload samples to ChatGPT for analysis help.

Common Culprits for High Bandwidth

Based on common issues others have found:

  • Missing dependencies in useEffect hooks causing infinite request loops
  • Bot traffic hitting your site repeatedly
  • Inefficient queries fetching too much data
  • Large images being delivered without optimization
  • CDN not being used when it should be (check if requests show as "API" instead of "APICDN")

Pro tip: Filter out studioRequest entries - those are from your Sanity Studio and don't count toward your bandwidth costs.

The Request Logs should give you a clear picture of what's driving your bandwidth usage so you can optimize accordingly!

Please DM your project ID and I can take a look.
user A
I see a lot of posts like this, is there a typical reason why this happens?
beige-trout
Typically either an aggressive useEffect or unoptimized images.
to keep track of this, i implemented logging on my end
user J
What Kitty said. Those are probably the most common.
Thanks
user A
!
Hello
user N
, sorry for the late reply, I drafted up a response and then got distracted. 🙏You seem to be using a 
polyfill
for responsive images in nuxt. The polyfill (or possibly a lazy load library) is incorrectly downloading the 
data-src
image in all loads, not just for browsers, that don’t support responsive images.According to
the spec :

Older browsers that don’t support these features will just ignore them. Instead, those browsers will go ahead and load the image referenced in the 
src
attribute as normal.
So, there are two problems:
1. Your 
data-src
fallback is requesting the full size image 👉 We recommend setting a width and height for the fallback, so you don’t load the full size.2. The responsive images polyfill or lazy load library is incorrectly downloading the image referenced in the 
data-src
attribute for every browser (not just browsers that don’t support responsive images with 
data-srcset
).It would be helpful to see, how you setup your image component, since this is where we suspect the culprit is
🕵️‍♂️ 🕵️‍♀️
user E
has done some impressive sleuthing on this one!
And here is a useful tip by
user E

Folks have used the 
data-src
hack for lazy loading, because the browser will automatically download a 
src
attribute. By hacking it to be 
data-src
, you can control when it loads with JS. It’s not really needed now, because we have native lazy loading in the browser
thank you
user J
!
user J
user E
here is sample of a image call for our current site

<template>
  <SanityImage v-if="assetId" :asset-id="assetId" auto="format">
    <template #default="{ src }">
      <img
        :data-src="src"
        :data-srcset="generateSrcset(src)"
        :src="src"
        :srcset="lqip || transparentPixel"
        data-sizes="auto"
        :alt="alt"
        :height="height"
        :width="width"
        :class="['lazyload', { 'fade-up': !lqip }]"
      />
    </template>
  </SanityImage>
</template>

<script>
export default {
  props: {
    image: {
      type: Object,
      required: true
    },
    jpeg: {
      type: Boolean,
      default: false
    }
  },
  computed: {
    alt() {
      return this.image?.alt || ''
    },
    asset() {
      return this.image?.asset
    },
    assetId() {
      return this.asset?._id
    },
    dimensions() {
      return this.metadata?.dimensions
    },
    height() {
      return this.dimensions?.height
    },
    lqip() {
      return this.metadata?.lqip
    },
    metadata() {
      return this.asset?.metadata
    },
    transparentPixel() {
      return 'data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=='
    },
    width() {
      return this.dimensions?.width
    }
  },
  methods: {
    generateSrcset(src) {
      const widths = [640, 768, 1024, 1366, 1600, 1960]
      return this.jpeg
        ? widths.map(width => `${src}&w=${width}&fm=jpg ${width}w`).join()
        : widths.map(width => `${src}&w=${width} ${width}w`).join()
    }
  }
}
</script>
We will have a look 😊

Sanity – Build the way you think, not the way your CMS thinks

Sanity is the developer-first content operating system that gives you complete control. Schema-as-code, GROQ queries, and real-time APIs mean no more workarounds or waiting for deployments. Free to start, scale as you grow.

Get started for freeExplore the demo

Was this answer helpful?