🔮 Sanity Create is here. Writing is reinvented. Try now, no developer setup

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.
Jul 5, 2022, 5:36 PM
Please DM your project ID and I can take a look.
Jul 5, 2022, 5:46 PM
user A
I see a lot of posts like this, is there a typical reason why this happens?
Jul 5, 2022, 6:03 PM
Jul 5, 2022, 6:28 PM
Typically either an aggressive useEffect or unoptimized images.
Jul 5, 2022, 8:15 PM
to keep track of this, i implemented logging on my end
Jul 5, 2022, 8:22 PM
user J
What Kitty said. Those are probably the most common.
Jul 7, 2022, 9:00 PM
user A
Jul 7, 2022, 9:12 PM
user N
, sorry for the late reply, I drafted up a response and then got distracted. 🙏You seem to be using a
for responsive images in nuxt. The polyfill (or possibly a lazy load library) is incorrectly downloading the
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
attribute as normal.
So, there are two problems:
1. Your
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
attribute for every browser (not just browsers that don’t support responsive images with
).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!
Jul 15, 2022, 8:16 AM
And here is a useful tip by
user E

Folks have used the
hack for lazy loading, because the browser will automatically download a
attribute. By hacking it to be
, you can control when it loads with JS. It’s not really needed now, because we have native lazy loading in the browser
Jul 15, 2022, 8:18 AM
thank you
user J
Jul 15, 2022, 4:56 PM
user J
user E
here is sample of a image call for our current site

  <SanityImage v-if="assetId" :asset-id="assetId" auto="format">
    <template #default="{ src }">
        :srcset="lqip || transparentPixel"
        :class="['lazyload', { 'fade-up': !lqip }]"

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()
Jul 15, 2022, 5:07 PM
We will have a look 😊
Jul 17, 2022, 2:44 PM

Sanity– build remarkable experiences at scale

Sanity is a modern headless CMS that treats content as data to power your digital business. Free to get started, and pay-as-you-go on all plans.

Was this answer helpful?