Help with WEBP images not loading fast...

[Gary Baker]

Hi everyone,

We have recently changed our website to serve WEBP images on our products instead of JPEGs. For the most part customers see the website load super fast however we have some customers who see them loading super slowly. 

An example of this would be a customer who sent a video over of the load time on this page: https://bltdirect.com/venture-cwa-metal-halide 

Video of loading time: https://drive.google.com/file/d/1jEMEmxamfPAGzkITjJWhWHR3KK8kua0z/view?usp=sharing

As you will see in the video the images take a long time to load. We have attempted to replicate this on other mac devices, windows 10/11 and Linux machines with no luck. 

Does anyone have any idea what could be causing this?

Thanks Gary

[Yannis Guyon]

Thank you for the report.

Do you have any detail about the customer's environment such as OS, browser and versions? It would be difficult to reproduce the issue without this, I agree.

Do you serve only WebP or do you fallback to another format for clients that do not support WebP? Are you using a CMS (Wordpress etc.) or a custom solution?

[Gary Baker]

Hi Its safari on a mac is all i have at the moment. I have asked for the ore specific information. We serve WebP and have a jpg fall back if the browsers doesn't support. Our solution is custom written, we have a CDN in place with our google cloud platform.

I will come back with more info once i have it.

[Yannis Guyon]

Thank you. It would be good to make sure the issue happens with actual WebP served, not with JPEG files sent instead. There might be a format mix-up, too many content negotiation steps etc.

One test you could try is serving a static page with hard-coded WebP images, coming from your CDN and coming from another server. It might help finding the root cause and requesting support to the relevant platform.

One hint I have is that using Chrome Web Developer Tools throttling (right click on your example web page > Inspect > Network tab), I can see images loading

1) Rather late compared to the layout but not as the last items to be refreshed, which seems to be the case in the video,

2) Incrementally (meaning some parts of some images are displayed, then more lines/chunks appear as data comes in) whereas in the video each image "pop up" kind of instantly.

This may be explained by my use of Chrome on Linux compared to Safari on a Mac though, and throttling is not always representative of real-life bandwidth issues.

For the record I took a random image: https://cdn.bltdirect.com/images/175-watt-clear-venture-cwa-2-150x150.webp
webpinfo reports:
File: /home/yguyon/Downloads/watt.webp
RIFF HEADER:
  File size:   3294
Chunk VP8  at offset     12, length   3282
  Width: 150
  Height: 149
  Alpha: 0
  Animation: 0
  Format: Lossy (1)
No error detected.

webp_quality reports:
Estimated quality factor: 84

This image seems appropriately encoded, so unless compression settings change depending on the client environment, we can discard badly encoded WebP files as a potential root cause.