-1

hello everyone I am working on a big react app and my new task is about optimizing it's performance to get a better performance score in lighthouse the big issue that i have is about lcp(largest contentfull paint) the element that now is known as our page lcp is a div that has an image background , i've read many articles about how to optimize that image but all of talk about static assets that can't be my option , my app uses dynamic rendering for elements and also all images are dynamic , never mind , the issue that i just want to solve is how to preload that background image while my script still don't parse it , if i want to make it clear i want to preload a url with webpack when the element that render that image isn't painted on screen , doe's webpack support something like this ? i've read previousely something about dynamic import for the main bundle of react app

i need webpack to start fething my url and cache the response (as its default behavior) and when i need the url it instanly load and be painted on the screen

hamid-beigi
  • 23
  • 5
  • Are you using Next.js or create-react-app like structure ? Did you try [Code Splitting using `React.lazy`](https://reactjs.org/docs/code-splitting.html#reactlazy) ? – Shivam Jha Dec 29 '22 at 10:15
  • we use custom webpack config and also our bundle is completely splited in a good approach as our unused script is minimum , the main problem is the time between the script arives and the image url load starts i can't use static assest and also can't ignore the image it's a main section of our web app – hamid-beigi Dec 29 '22 at 10:23

1 Answers1

0

Well, if you are using react purely client-side, then you can give a shot to link rel preconnect. It will pre-connect to given domain, and should improve performance. You might also google search for link rel prefetch and link rel preload.

While using react client side, other options is you using prefetching using somthing like react-query if the image link is coming as a result of API response from server (JSON, etc.)

Shivam Jha
  • 3,160
  • 3
  • 22
  • 36