Preloading Images in NextJS

user_13916559 0
Viewed 16693

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.

next.js reactjs preload
2 Answers

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

user_76829250

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.

user_45578080
Related