The Homepage hero image uses the CSS background-image property, which is a late discovered resource, as they aren’t discovered until the render tree has been built. This means that their requests aren’t even dispatched until we’re ready to put them on screen.
Potentially use a hidden img element means the browser’s preload scanner will find this image early when loading the DOM and it will get downloaded much sooner (but will not be shown through the img element) when loaded in by the background-image property.
Description
The Homepage hero image uses the CSS
background-imageproperty, which is a late discovered resource, as they aren’t discovered until the render tree has been built. This means that their requests aren’t even dispatched until we’re ready to put them on screen.Potentially use a hidden
imgelement means the browser’s preload scanner will find this image early when loading the DOM and it will get downloaded much sooner (but will not be shown through theimgelement) when loaded in by thebackground-imageproperty.Further reading: https://csswizardry.com/2018/06/image-inconsistencies-how-and-when-browsers-download-images/