🖼 If you’re building hero-style content with background images—maybe even through a CMS—you can hugely improve rendering times (LCP) with one additional line of HTML. 
With the before, the browser won’t request the image until it knows it needs it—when the Render Tree is built. The problem is that the Render Tree can’t be built until the CSSOM is built, which means the browser needs to download and (re)calculate all applicable stylesheets.
Your Render Tree is only as fast as your slowest stylesheet.
This makes background images—much like fonts—late discovered resources. To get around it, you can make the request start much earlier by simply moving it to your markup. HTML is fast because its declarative nature means it can be preload-scanned.
The browser is smart enough to de-dupe the request, so there’s no penalty there. So now, even before the Render Tree is constructed, the browser is able to discover and request the image nice and early.
Now, by the time the Render Tree is ready and the browser is ready to display the page, the image should be partially, if not completely, over the wire. Before, it hadn’t even discovered the image until this point—much slower.
Of course, all of the above could be done with preload instead, but that will only work if you have access to the HEAD at the time your application is building the hero component.
For those saying ‘just use object-fit’: Absolutely! If:
1) …you want to (I’m not the boss);
2) …you have time for the slightly larger refactor;
3) …you’re happy to begin absolutely positioning some or all of your content.
1) …you want to (I’m not the boss);
2) …you have time for the slightly larger refactor;
3) …you’re happy to begin absolutely positioning some or all of your content.
