Netlify Large Media: Avoid enormous network payloads

Hello!

I was testing my site out with Chrome Light House and was given this diagnostic.

Avoid enormous network payloads
image

What I see is that these are urls to the original images. It goes like this.

mysite.netlify.app/img/name-of-file.jpg?__WB_REVISION__=XXX

Despite this, the images are correctly sized on my site when I use Netlify Large Media and I don’t get any errors about it in Light House.

So is there a way to change the WB_REVISION files by either removing them or only have the largest transforms be listed instead of the original image?

Hi @byebyers, can you describe how you’re getting the Lighthouse report in the image?
Regardless, __WB_REVISION__ seems to originate from Google Workbox which might be related to Gatsby offline plugin. Maybe you can debug the issue by removing it:

1 Like

That did work for me. I did some reading about the plugin hoping to find a way to exclude images but did not find anything. I did find an open issue here that I will be able to follow-up on. Hopefully, that functionality will be added in the future.

Does Netlify have other ways to cache a website that works with Netlify Large Media? I can make it work without it now but would love to have it eventually.

Haven’t tried it, but looks like you can override the config for the plugin here:

You can read more about caching and large media here:

However, I think the offline plugin is more about making the site work when a network connection is not available than caching images (browsers handle caching regardless if you have a service worker installed).

I would actually try installing the plugin again (after the service work was removed an cached was cleared). Maybe those requests were coming from a stale cache.

That worked as well. I ran a test by adding new images and I did not have the same issue. Maybe it really was stale cache of images before adding Netlify Large Media. I’ll keep an eye on my setup for now in case those errors come back.

Thank you so much for your help!

1 Like