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
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" />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
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
Sorry for late response , but I use map function to display all that img so can I add that ?
you can use the map index to define it for the first image.
Something like this (obviously depends on your actual 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
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
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.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
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.
It kinda took the first img only
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
Yep I removed it , since it is a first page
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" metaReact performance... 😂 Best way to improve it is not to use it.
Yeah
Thanks