Next/Image’s components are too slow to appear

by

I’ve been having trouble with the same issue, mostly in Slider components. Basically, because the image is off-screen until the Slider moves it into view, there is a delay and it doesn’t show for a short time, which looks nasty.

Solution:
Add the sharp package.
The problem comes from the default image processor that NextJS uses. I don’t know if this is good for OP, but in my case, I hadn’t fully read the docs. There is a tip that states:

The next/image component’s default loader uses the ‘squoosh’ library for image resizing and optimization. This library is quick to install and suitable for a dev server environment. For a production environment, it is strongly recommended that you install the optional sharp library by running

yarn add sharp

in your project directory. If sharp is already installed but can’t be resolved you can manually pass the path to it via the NEXT_SHARP_PATH environment variable e.g. NEXT_SHARP_PATH=/tmp/node_modules/sharp

After adding sharp, my images were processed much faster and there is no noticeable delay anymore. I would try adding this before adding priority={true} to every image, as that will impact the site performance.

More Related Contents:

  1. How to add new pages without rebuilding an app with +150k static pages?
  2. useRouter/withRouter receive undefined on query in first render
  3. NEXTJS: getServerSideProps not working into components
  4. Fresh NextJS App throwing errors before any changes
  5. Error: A required parameter (slug) was not provided as a string in getStaticPaths for /posts/[slug]
  6. How can I get (query string) parameters from the URL in Next.js?
  7. Dynamic Importing of an unknown component – NextJs
  8. Next.js SyntaxError “Unexpected token ‘export'”
  9. What is the best way to have a fallback image in NextJS?
  10. Parsing error : Cannot find module ‘next/babel’
  11. Error: Image Optimization using Next.js default loader is not compatible with `next export`
  12. How to use Image component in Next.js with unknown width and height
  13. how to add domains to next.config.js for “next/image” while using a plugin
  14. import Router from ‘next/router’ is it ok?
  15. For Next.js Dynamic Routes, it is possible to combine a string with a [slug]?
  16. Cannot find module or type declarations while it works in local build
  17. Next failed to load SWC binary
  18. Next Image not taking class properties
  19. “Cannot use import statement outside a module” error when importing react-hook-mousetrap in Next.js
  20. How to access files uploaded to the public folder in Next.js?
  21. How to use template literals in tailwindcss to change classes dynamically?
  22. How to inline CSS in the head tag of a NextJS project?
  23. Display Info Window on the multiple coordinates on the arcgis map in Next JS
  24. next-redux-wrapper TypeError: nextCallback is not a function error in wrapper.getServerSideProps
  25. Module not found: Can’t resolve ‘fs’ in Next.js application
  26. NextJs CORS issue
  27. Is it possible to put test files under pages directory in Next.js?
  28. TypeError [ERR_INVALID_URL]: Invalid URL using Next-auth only in Production
  29. Get URL pathname in nextjs
  30. Next.js, getStaticProps not working with component but does with page

Leave a Comment