Images loading times out randomly in recent Chrome (88 & 89 as far as I know).

[chrizz]

I've recently noticed that some images times out on my site in Google Chrome. The page has many thumbnails and the behaviour seem to be a bit random, but continues with scroll once started. If I close the browser and reopen it, it might work again for some time, but then it again starts behaving like this.

I have not been able to reproduce this in a consistent way, but if I turn of lazyloading all images are loaded instantly and as expected on the site. Tried to reset all history and cache in Chrome, and then it works for some time again, but the issue returns.

I've seen this issue suddenly appear with Chrome 88 on macOS 11.2.1 (and with most recent 89 at the time being), without making changes to site code. I have not seen it at all in Safari 14.0.3, Firefox 86 or Edge 88. Also tried to reproduce it (basically just browsing the site to see if it appears) on Chrome 88 running on Linux without issues. At the same time it worked fine on Linux and Chrome 88 I had issues on every page load on macOS and Chrome 89.

I'm sorry I can't provide more information than this. It might just be an issue with this particular Chrome install, but if you have any ideas of how I could approach this to find out more why the behaviour is, I'm glad to try it out.

Edit: Discovered running 5.2.2, but also present after updating to 5.3.0

[aFarkas]

It's close to impossible to know what the problem is without a test case. I doubt that this is a frontend issue. My first guess is that you should check Req./Res. headers for the images in question. To exclude wether it is a FE you could also generate a site with many external images (i.e.: https://unsplash.com).

[chrizz]

I can't see any difference in request headers for a loaded image and a timed out one. The only difference is in response header (well, the timed out image has no response header :)

I've noticed that if I disable cache in the network tab in developer, there is no issue anymore. Works perfectly.

I still cant wrap my head around why this issue only is on this Chrome on this computer, and not in Safari or anything else I've tried. And the issue disappears if I turn off lazyloading.

[aFarkas]

I can't see any difference in request headers for a loaded image and a timed out one.

It's not about a difference in response headers. It is about some special stuff in response headers of the images that are responding. If you want you can post them here. (+ request too)

[chrizz]

I pulled this while having lazyloading enabled, and from a working image thats been loaded from server (no cache)

Request headers: GET /image.jpg HTTP/1.1 Host: host Connection: keep-alive sec-ch-ua: "Google Chrome";v="89", "Chromium";v="89", ";Not A Brand";v="99" sec-ch-ua-mobile: ?0 User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 11_2_1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/89.0.4389.82 Safari/537.36 Accept: image/avif,image/webp,image/apng,image/svg+xml,image/,/*;q=0.8 Sec-Fetch-Site: same-site Sec-Fetch-Mode: no-cors Sec-Fetch-Dest: image Referer: referer Accept-Encoding: gzip, deflate, br Accept-Language: en-US,en;q=0.9,sv;q=0.8 Cookie: removed

Response headers: HTTP/1.1 200 OK Content-Type: image/jpeg Accept-Ranges: bytes ETag: "2572384886" Last-Modified: Fri, 18 Dec 2020 15:32:11 GMT Expires: Fri, 09 Apr 2021 11:46:03 GMT Cache-Control: max-age=2592000 Content-Length: 375755 Date: Wed, 10 Mar 2021 11:46:03 GMT Server: lighttpd/1.4.53