👋 Next.js Conf 2024: Come build, party, run, and connect with us! See all events

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
beige-trout
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
Thanks
user A
!
Jul 7, 2022, 9:12 PM
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!
Jul 15, 2022, 8:16 AM
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
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

<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>
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?