Next.js Discord

Discord Forum

How to make website smoother

Unanswered
Giant panda posted this in #help-forum
Open in Discord
Giant pandaOP
I hosted a website on vercel, it is an ecom website and hence has a couple of images to display.
It looks really choppy when scrolling, I fixed the styling to get rid of layout shifts. What else is possible, to optimise the website and make it faster. I need the tips n tricks.

30 Replies

Giant pandaOP
https://pif-stationery-ecommerce.vercel.app/
here's the link
James4u
@Giant panda I hosted a website on vercel, it is an ecom website and hence has a couple of images to display. It looks really choppy when scrolling, I fixed the styling to get rid of layout shifts. What else is possible, to optimise the website and make it faster. I need the tips n tricks.
B33fb0n3
you can use suspense boundaries as well. Like that you can display different content while your products are loading.

Also make sure that you use a cdn for your images and also optimize your images. As you can see attached: some images are pretty large and some others take a long time to load. So: server though a CDN & optimize them
James4u
I don't think you are using image/next properly
@James4u I don't think you are using `image/next` properly
Giant pandaOP
How do i calculate the right width and height to provide to my next image
inspect it and do it manually like you showed?
That's how I change the intrisic size right?
James4u
are you using next/image btw?
caleb
The intrinsic size of an image is the original size of the image where it's being served from, the rendered size is the result of CSS/resizing on the DOM. So in your example the image being loaded is larger than being displayed
next/image is not responsive by default, try this out
@James4u are you using `next/image` btw?
Giant pandaOP
i wasnt using it for that component
but I am using it for this component
the header with sliding images
I will learn how to use it and then use them on other components as well
James4u
yeah https://nextjs.org/docs/app/api-reference/components/image take a deep look on this page
Giant pandaOP
This is better right?
<Image
                src={product.imageUrl || "/placeholder.svg"}
                alt={product.title}
                width={500}
                height={400}
                className="object-fill w-full h-64"
                style={{ aspectRatio: "500/400", objectFit: "cover" }}
              />
@James4u
Am I doing it the right way?
James4u
yeah it must be better than before
@James4u Click to see attachment
James4u
before it was 800kb
Giant pandaOP
alr
@James4u before it was 800kb
Giant pandaOP
is it necessary to use the sizes prop?
@Giant panda is it necessary to use the sizes prop?
James4u
sizes property is for resposiveness
you may need smaller images in the mobile, right? then can use that property
James4u
@Giant panda plz mark solution to close this thread if you have no other questions
Giant pandaOP
yeah ok