Pre-loading background images during Server Side Rendering

Performance optimisation is one of the key aspects to improve website conversions and gain user traffic.

While running a Google Lighthouse Performance report of a Landing page of the website I was working on; I found that the LCP score was bad. The Lighthouse report provides you the exact cause of the issue. It does the responsible DOM element highlighting, which is just awesome ?? .

From the report I observed that, it was the "hero image" that was taking long to load. I started studying about what is LCP (great resource: https://web.dev/articles/lcp) and how to tackle such issues.

My problem was that, I needed to pre-load the hero image; but:

1. We had three different hero images that were loading: based on devices (mobile, desktops, larger screens: 1400px +).
2. I was using Server Side Rendering using Next.js to pre-construct the page HTML; hence, I dint know before hand which device was the page served to (because the pages were Statically generated and cached).
3. The hero image was a background image.

The Solution I applied:

To Pre-load background images which are Client device specific:

• Add <link> for the images, with their urls as href .
• You need to add a rel=preload to hint the browser to fetch it on priority.
• Add as=image to the <link> tag, to make it accept properties which are supported/ acceptable by image elements.
• Most important one: Add a media attribute which makes it behave like a media query; so that the browser will only pre-load that image which satisfies the media query.

{/* Pre-loading images */}
<link type="image/webp" rel="preload" as="image" href={urlForMobileImage} media="(max-width: 991px)" />
        <link type="image/webp" rel="preload" as="image" href={urlForDesktopImage} media="(max-width: 1399px)" />
  <link type="image/webp" rel="preload" as="image" href={urlForHighResolutionImage} media="(min-width: 1400px)" />

// Iv used 'useMediaQuery' from 'react-responsive' to find the user // device, on component mount.

const backgroundImage = isLargerDevice ? urlForHighResolutionImage
      : isDesktopDevice
      ? urlForDesktopImage
      : urlForMobileImage : urlForMobileImage

// Hero element 

<div className="hero-image" style={{backgroundImage: `url(backgroundImage)})`/>        

This was my approach, there could be many others too: like imageSrcSet, sizes, etc which one can take.

Do let me know if you too have come across, or solved similar issues, thanks for reading.