@Xover Can you send some details about a specific case where you see this (preferably including browser versions if possible).

Also if you are familiar with DevTools, could you generate a har of the requests of a specific session where you observe this behaviour

In T338155#8902964, @Soda wrote:

@Xover Can you send some details about a specific case where you see this (preferably including browser versions if possible).

My daily driver is most recent Safari on macOS.

I typically see this when opening multiple Page:-namespace pages in tabs. When switching to a tab the static page image is usually loaded (barring Thumbor slowness) because it's included in the HTML, but then OpenSeaDragon kicks in and replaces the image element while it loads the full-resolution thumb from JavaScript. This typically takes anything from "noticeable" to "ages" to do, so it certainly isn't pulling from the browser cache and doesn't seem likely to be a pre-rendered thumb from Thumbor.

You could probably lessen the impact of this by making the OSD image load async (don't overwrite the image element until the new thumb has finished loading). But better if it could load it from browser cache of course.

@Xover, just checking: do you have the high-res image function in "jump to file" turned on?

In T338155#8904993, @Inductiveload wrote:

@Xover, just checking: do you have the high-res image function in "jump to file" turned on?

Now I'm afraid to check, because that would leave me with a rather spectacular amount of egg on my face, wouldn't it? 😝

In T338155#8904993, @Inductiveload wrote:

@Xover, just checking: do you have the high-res image function in "jump to file" turned on?

Ah that would explain some of the weird caching behaviour. Also, I assume you are visiting the pages out of order ? (i.e. not sequentially one after another) [Asking this since our current caching strategy works best when sequentially viewing pages one after the other, the previous page preloads the next page etc]

In T338155#8904993, @Inductiveload wrote:

@Xover, just checking: do you have the high-res image function in "jump to file" turned on?

Nope. JSON.parse(mw.user.options.get("userjs-JumpToFile")).loadHighres is false.

In T338155#8906080, @Xover wrote:

In T338155#8904993, @Inductiveload wrote:

@Xover, just checking: do you have the high-res image function in "jump to file" turned on?

Nope. JSON.parse(mw.user.options.get("userjs-JumpToFile")).loadHighres is false.

@Xover Is this similar to the experience that you have ? Or do you see two specific image loads after the blue background of the Wikieditor appears ?

In T338155#8910994, @Soda wrote:

Is this similar to the experience that you have ? Or do you see two specific image loads after the blue background of the Wikieditor appears ?

That looks similar. To illustrate specifically:

Multiple Page: pages loaded in tabs:

Tab preview shows page image has loaded:

Switching to the tab shows the page image for a very brief moment:

Then it is replaced by the blue background when the PRP chrome loads:

Eight seconds later the new page image shows up:

I'm having trouble capturing this in a sensible way since Safari's Web Inspector is per-tab, but the above screenshots show roughly what's visibly happening. When switching to the tab the image has loaded, but without the PRP chrome, and then immediately (a matter of milliseconds, but enough to see it) disappears as the PRP chrome loads. This is presumably because Safari throttles JS in background tabs, but the second I make it active it starts running the event loop. At that point it sits waiting for the new page image for, in this case, 8 seconds or so. When Commons is slow it is, of course, longer. i.e. we're definitely waiting for Thumbor to generate a new thumb and fetching it over the network.

I can't get a full trace on this, but just looking at the resources loaded it has downloaded two thumbs: 1536px and 2048px versions of the current page (/1), and no version of the next page (/2). Neither page image is cached (this holds for subsequent pages too, I had 5+ in sequence open in tabs).

However, when I navigate to a page (/539) directly (in the same tab) the Web Inspector shows it loads three thumbs: 1535px and 2047px versions of the current page (/539) and a 1024px version of the next page (/540). When I navigate to the next page (/540) it loads 1536px and 2048px versions of that page (/540), and a 1024px version of the following page (/541). Every single image is loaded over the network. Note also the off-by-one pixel sizes of the two first thumbs here. In any case, it only preloads a 1024px version of the next page, so any other resolution thumb will always need to be generated and fetched over the network.

Oooh, here's a thought. If you're on a Mac, you probably have a retina screen and then you're using one of the 1.5x or 2x srcset URLs (1536, 2048), but sounds like only the 1x is pre-fetched.

Confirmed. 1024px is pre-fetched from looking at the previous page in the "Page" namespace. It does preload 1024px even if you use an higher resolution. Making it dynamic/calculated from the users resolution would fix the issue.

It would be nice to fetch the first page thumbnail up on visiting the Index page, using the same method as with the "Page" namespace. The "Page" namespace preloads 1024px for the previous and next page. That way, an user can upload PDF/DjVu, create an index and the first page is ready when the user saves the index.

In T338155#8957723, @Snaevar wrote:

Confirmed. 1024px is pre-fetched from looking at the previous page in the "Page" namespace. It does preload 1024px even if you use an higher resolution. Making it dynamic/calculated would fix the issue.

I mean yes that is definitely the correct solution for this problem, unfortunately, I don't/didn't see a way to deterministically figure out on the server-side a) what image size will be loaded due the srcset images b) what image will get loaded by Openseadragon.

EIS solves this by just forcibly loading/caching all possible size of the image, I wonder if we should do this any-way for the normal interface ?