CODEWITHSUNDEEP
reactjsnext.jspreload
Vat G
Vat G

Reputation: 101

Preloading Images in NextJS

We are using NextJS 9.3.2 Framework with Static Site Generator i.e SSG with the introduction of Google Lighthouse 6 Largest Contentful paint (LCP)is affecting my Site performance score . Most of sites have a Hero Image in above the fold content.

SO i am looking to Preload the image to cut down the time of LCP. Can you guys guide how can i preload big Hero image in NextJS with SSG.

Upvotes: 10

Views: 52117

Answers (4)

Andrew T.
Andrew T.

Reputation: 80

You need to use priority attribute for that image so Next.js will automatically preload it.

 <Image
   src="/image.png"
   alt="hero"
   priority
 />

Explanation from the Next.js documentation:

priority={false} // {false} | {true}

When true, the image will be considered high priority and preload. Lazy loading is automatically disabled for images using priority.

You should use the priority property on any image detected as the Largest Contentful Paint (LCP) element. It may be appropriate to have multiple priority images, as different images may be the LCP element for different viewport sizes.

Should only be used when the image is visible above the fold. Defaults to false.

https://nextjs.org/docs/pages/api-reference/components/image#priority

Upvotes: 0

simlmx
simlmx

Reputation: 1333

As HawaiiFi suggests, you can preload the image.

In Next.js you can achieve this by adding a <link rel="preload" ...> to next.js 's<Head> component.

import Head from "next/head";

// Inside one of the components that loads on your page:
<Head>
  <link
    rel="preload"
    href="/path/to/image.ext"
    as="image"
  />
</Head>

Upvotes: 9

HawaiiFi
HawaiiFi

Reputation: 101

In the component that includes the hero image that needs to be preloaded, use next/head and simply pre-load that image.

I wouldn't use next/image. It's slower than other solutions to server image sizes dynamically.

That's another thing. You should load images based on the browser size using built-in HTML functionality.

Upvotes: 1

Gaurav
Gaurav

Reputation: 2018

You should upgrade your Next.js and use Image Component. It will do the following great things -

  1. Lazy load
  2. new Webp format
  3. Resize image on the fly based on the device sizes
  4. Compress images
  5. Set prirotiy true in props to preload above the fold images.

Implement it to see the magnificent rise in lighthouse score.

Though it has some limitations like static export and placeholder images is not currently available, it still is great to use. For placeholder images, you can use some extra library like https://github.com/joe-bell/plaiceholder

Upvotes: 5

Related Questions