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.
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>
You should upgrade your Next.js and use Image Component. It will do the following great things -
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
next export makes it unusable in this scenario
<img >
next export- using a cloud provider or a custom loader still works. The image optimization caching has also been improved since then, and should no longer be a deterrent to not use next/image.
next/image build-time optimization is not yet supported.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.
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
getStaticPropsand pass to the page component viaprops.