I have this weird side effect when preloading image
When preloading the (LCP) image after the stylesheet and icon font it preloads the icon font ~ 300ms - confirmed by 6 separate test
See:
But when preloading the (LCP) image before the stylesheet and icon font it takes about 900ms - confirmed by 6 separate test
So here’s what I think is happening…
In the example with no preload for the image, the font request is triggered just a hair earlier than the request for the CSS files so even though the CSS files have a request priority of Highest compared to High for the font file, the font is small enough, and there’s nothing else contending for bandwidth, that it can arrive, in full, before the CSS file starts coming back.
In the example where you preload the image, the image gets requested at a Low priority by the browser, but, because of the fact that it’s higher in your head than the font preload (and there’s an inline script sitting between them both), that request goes out earlier and starts to get a response back.
Since the browser is downloading the image already, there’s less room for the data from the font, so you don’t get a full response—you get one chunk before it’s interrupted by the higher priority CSS files.
My recommendation: try moving the preload element for the fonts to sit just ahead of the preload element for your image in the head. That should get the fonts back earlier and while it will result in the image being downloaded a bit later, I think you’ve got enough of a gap right now that it should still arrive in time for the initial render.
Thanks so much
Very interesting and informative
