7

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.

Vat G
  • 71
  • 1
  • 1
  • 4
  • 3
    You may check out [next-optimized-images](https://github.com/cyrilwanner/next-optimized-images) and [lqip-loader](https://github.com/zouhir/lqip-loader). In case you want to have more control over the build process, I wrote this article [Create a Lazy-Loading Image Component with React Hooks](https://hangindev.com/blog/create-a-lazy-loading-image-component-with-react-hooks) which I briefly shared how you may create your own LQIPs(Low-Quality Image Placeholder) with the help of [sharp](https://github.com/lovell/sharp) in Next's `getStaticProps` and pass to the page component via `props`. – hangindev.com Jul 12 '20 at 15:52
  • Thanks for reply but our client didn't agree to Low-Quality Image image to placed as a placeholder until main image gets loaded we need to prerender the main hero image to cut down LCP – Vat G Jul 13 '20 at 04:44
  • Prerender the main hero means to turn it into inline base64? – hangindev.com Jul 13 '20 at 05:27
  • You mean to say that use sharp to generate webp image format during build time as Site is SSG and then inline image by using base64 image. Please correct me if i am wrong. – Vat G Jul 13 '20 at 05:58
  • I was just asking what you do mean by "prerendering the main hero image"? – hangindev.com Jul 13 '20 at 06:26
  • Since images are very heavy in size i meant to Preload the image so that image is availabile even before browser requests for it. – Vat G Jul 13 '20 at 13:08

4 Answers4

5

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>
simlmx
  • 999
  • 12
  • 17
4

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

Gaurav
  • 1,668
  • 1
  • 13
  • 30
  • 7
    The lack of SSG-support / `next export` makes it unusable in this scenario – Mika Feb 01 '21 at 12:49
  • 3
    Unfortunately there’s a poor cache policy that is unable to change yet: https://github.com/vercel/next.js/issues/19914, so for quite a while you might wanna stick to plain `` – Jerry Green Mar 28 '21 at 05:35
  • 2
    To clarify, only the *default loader* is not supported when using `next export`- using a [cloud provider or a custom loader](https://nextjs.org/docs/basic-features/image-optimization#loader) still works. The [image optimization caching](https://nextjs.org/docs/basic-features/image-optimization#caching) has also been improved since then, and should no longer be a deterrent to not use `next/image`. – juliomalves Sep 02 '21 at 10:28
  • @juliomalves Do you use a custom loader that build\creates image sizes\webp on export time? https://twitter.com/rauchg/status/1402613436081528836 – Mostafa abobakr Oct 16 '21 at 23:23
  • `next/image` build-time optimization is not yet supported. – juliomalves Oct 16 '21 at 23:26
  • https://medium.com/ne-digital/how-to-improve-lcp-and-speed-index-for-next-js-websites-f129ae776835. This article helped me in improvising the LCP score. – Salil Sharma Oct 25 '21 at 06:07
2

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.

HawaiiFi
  • 103
  • 2
  • 6
0
<Image
    src="/me.png"
    alt="Picture of the author"
    width={500}
    height={500}
    priority
/>

Next.js

Hugo Nascimento
  • 31
  • 2
  • 8