Next.js Discord

Discord Forum

UI loading

Unanswered
Николя posted this in #help-forum
Open in Discord
НиколяOP
Hello everyone, I’m making my first website, but I ran into a problem that this page is not optimized, it lags at the beginning. I assume that the problem is only with loading buttons for series, because there are a lot of them and a lot of photos, can you tell me how this can be optimized in the best way? I assume that you need to use Suspend, I have also heard about other practices, but perhaps someone can suggest one of the best options in your opinion?
Here is this page https://anime-mushito.vercel.app/choose

30 Replies

Yellow and black potter wasp
Are you using the Image tag from next? And are the images saved locally?
@Yellow and black potter wasp Are you using the Image tag from next? And are the images saved locally?
НиколяOP
Yes, i use Imae tag, images are remotely from google bucket
Yellow and black potter wasp
The Image tag does not optimise the images if the images are stored remotely
If they are stored locally then it will optimise the image
@Yellow and black potter wasp The Image tag does not optimise the images if the images are stored remotely
НиколяOP
But I can’t store them locally, there are too many of them, can I somehow make them load optimized?
Yellow and black potter wasp
Try cloudinary you can upload your image and it will give you an url for the optimised image
НиколяOP
I can only use google bucket to store photos and videos
Yellow and black potter wasp
In cloudinary you can store both
@Yellow and black potter wasp In cloudinary you can store both
НиколяOP
Yes, but I think it will be quite expensive if you store a lot of photos there
Yellow and black potter wasp
But I think that storing them locally would be the best
НиколяOP
And especially if the video is 80GB
Yellow and black potter wasp
Ohhh
Then use lazy loading
It won't optimise the image but you can add some place holder like displaying a blurry image which slowly becomes the original image
@Yellow and black potter wasp Ohhh
НиколяOP
Doesn't Nextjs itself use lazy loading in the Image component?
@Николя Doesn't Nextjs itself use lazy loading in the Image component?
Yellow and black potter wasp
Only if the images are stored locally
@Yellow and black potter wasp Only if the images are stored locally
НиколяOP
I looked, in inspect it shows that it is lazy, or is this not true?
Netherland Dwarf
Also compressing images/videos
@Netherland Dwarf Also compressing images/videos
НиколяOP
I'm thinking of changing their format, they are all in png format, I'm thinking of changing to webp, somehow I missed this point
Is it possible to give the download itself specifically to the blocks with each series?
@Николя Is it possible to give the download itself specifically to the blocks with each series?
English Spot
Yep, just toss an <a> tag with href and download inside each series block.
@English Spot Yep, just toss an <a> tag with href and download inside each series block.
НиколяOP
Does this mean something like this?
<Link><a>Block</a></Link>
@English Spot Yep, just toss an <a> tag with href and download inside each series block.
НиколяOP
As far as I remember, nextjs doesn't like it if there are <a> tags inside the Link
Or am I misunderstanding something?
@Николя Does this mean something like this? <Link><a>Block</a></Link>
English Spot
yes exactly. sorry been a long night 😓
@English Spot yes exactly. sorry been a long night 😓
НиколяOP
It's okay bro, and this will help me optimize this problem so that the blocks don't lag?