Note from 3 November 2023

Let's say a SPA first load has been optimized with SSR and the LCP image is loaded pretty fast because it's in the HTML.

But the JavaScript then builds a carousel in the DOM, which initially shows the very same image.

I guess there's a second render of the image. How can I check this easily?

Would it make sense that the LCP takes the late second render of the image, instead of the fast first one?

  1. Note from 4 April 2024

    Most mentions of the magical CSS object-fit: cover; in development tutorials should be accompanied by a warning: in most situations, it means the browser will download an image that is larger than required (at least in one direction), and optimization on the server side could be a better option.