Page performance: reduce time to paint

[w-m]

The page takes several seconds to show up currently. Can be 5..7 seconds, PageSpeed measures e.g. 5.3s to Largest Contentful Paint on Desktop:

https://pagespeed.web.dev/analysis/https-w-m-github-io-3dgs-compression-survey/yc4hidmskn?form_factor=desktop

And 29 seconds on Mobile 😬.

Our goal should be to have the first contentful paint well below 1 second on Desktop and Mobile. Going through the diagnostics step from PageSpeed step by step should help. Focus should be on displaying the table as fast as possible (as it's the top visible element), and then getting started on adding in the plots, hopefully on a background thread.

The plot drawing needs some investigation. Why does the main script.js spend 4.5s in the main thread. At 12 plots, that's 375 ms per plot, that seems a lot for these few 2D lines?

• [x] eliminate render-blocking resources (PageSpeed)
• [x] remove unused JavaScript (PageSpeed)
• [x] investigate how to start drawing plots after page load (requires placeholder not to move page layout after?)
• [x] the table styling is currently applied after the table has shown up for the first time. can this be improved, to show the table instantly in the final style?
• [x] profile scripts.js to find why it takes 4.5s to draw the plots
• [x] prioritize PSNR plot drawing -> should show up as soon as they are done, LPIPS and SSIM can be done after
• [ ] investigate excessive DOM size (PageSpeed) -> artefact of plotly, or can we reduce this?
• [ ] properly size images (PageSpeed)
• [x] serve images in next-gen formats (PageSpeed)
• [x] explicit width and height for image elements to reduce layout shifts (PageSpeed)

[w-m]

It’s great that the page now loads quickly. But if I scroll down, the images appear one by one. Is it possible to download the images after the first render, so they are already loaded when I scroll down but don't slow down the initial load?

In any case, the images should get explicit widths and heights so that the design doesn’t jump when the image is loaded.