Kevin Powell - Community•3w ago

how to performance of react

So I made an mern website and use page insights to check the analysis so it shows 55% performance on mobile and 73 on desktop So I reduced the quality compression of images and add lazy components with lazy componentimg using LazyComponentmg Library and Removed that unused dependcies , can anyone give me suggestions how can I improve it , I can send that website link , i was thinking about input fields onChange event to use useRef hook ? https://food-order-c58e.onrender.com/delivery

16 Replies

Chris Bolson•3w ago

It really is just a question of working through the page insights suggestions. For example the first issue is the time it takes to load the first image. This itself is not too large (20kb) but could probably be reduced, especially if you use a webp. However that size does not correspond to the reported 3,390 ms that it takes to load. On closer inspection it appears that you have wrapped the image (all of the ones in the scroll) within a lazy-load wrapper. I suspect that this is actually causing more issues than it resolves as it now has to wait for JavaScript to load the image. The initial images on a page should not have any lazy loading so that the browser gets them as soon as possible. Can you try removeing that lazy loading, at least for the first few images in the scrolled area? I would then look at preloading the initial image using the meta link "preload" tag. <link rel="preload" as="image" href="_your_img_url" />

vic•3w ago

But inside there's alot need to use img , do u want to me change <LazyLoadingImg > on every occasions ? So should I replace this link tag with every img

Chris Bolson•3w ago

No, to start with just the first image as this is the one that is causing the LCP No, just the first image. The idea is to get the first image to load as soon as possible

vic•3w ago

Sorry for late response , but I use map function to display all that img so can I add that ?

Chris Bolson•3w ago

you can use the map index to define it for the first image. Something like this (obviously depends on your actual code)

images.map((img,index) => {
  if (index === 0){
    //define first image preload meta
  }
  // rest of image map code....
})

images.map((img,index) => {
  if (index === 0){
    //define first image preload meta
  }
  // rest of image map code....
})

I couldn't say how you would actually do this as you are using React and I am not overly familiar with React. This should do it

images.map((img,index) => {
  if (index === 0){
    //define first image preload meta
    const link = document.createElement('link');
    link.rel = 'preload';
    link.as = 'image';
    link.href = img; 
    document.head.appendChild(link);
  }
  // rest of image map code....
})

images.map((img,index) => {
  if (index === 0){
    //define first image preload meta
    const link = document.createElement('link');
    link.rel = 'preload';
    link.as = 'image';
    link.href = img; 
    document.head.appendChild(link);
  }
  // rest of image map code....
})

vic•3w ago

Ok I done tis Nice it increases 4% Do u think having alot code line would affect ? Like I kinda reuse same code instead of making as one component

Chris Bolson•3w ago

more code = more time, yes. But you have more imporant things that could be adjusted to get a higher difference. I notice that you have added the preload tag just above the image. This needs to be in the <head> The first image is still wrapped in the lazy-load-image-background blur lazy-load-image-loaded span. I don't know what those classes actually do but I am guessing that they are being used by JS to lazy load the image. You don't want to lazy load the first image.

vic•3w ago

I tried like this Object.entries(objname).map([key,val],index)=>{ return <div> { index===0 && ( <link rel='preload' href={val} as='image' /> } <LazloadImage effect='blur' src={val} onClick={function} /> } Sho I'm thinking maybe I could remove the LazyLoad for the first page of images Yes lazyload is react js library

Chris Bolson•3w ago

as I say, that preload link should really go in the header. I don't know how effective it would be if placed in the middle of the body. yes, I would remove the lazyload for the first couple of images. You could use the same "index" to detect them.

vic•3w ago

vic•3w ago

It kinda took the first img only

Chris Bolson•3w ago

yes, but it should be in the <head> section. As I say, I don't know if it will work if the tag is placed in within the body content

vic•3w ago

Yep I removed it , since it is a first page

Chris Bolson•3w ago

Another thing you can do is add the fetchpriority="high" tag to your first image. This should encourage the browser to load it sooner rather than later. ah, you can have multiple preload images but don't overdo it. On mobile I see that it displays 2 rows so, if possible, the first two images could have the "preload" meta

b1mind•3w ago

React performance... 😂 Best way to improve it is not to use it.

vic•3w ago

Yeah Thanks

Gaming

Programming

how to performance of react