Next.js Discord

Discord Forum

Anyone tips to load images faster

Unanswered
XottikMW | skinvaults.online posted this in #help-forum
Open in Discord
XottikMW | skinvaults.onlineOP
Hi everyone i need help i have build a website with next.js and typescript but everytime it can take up to 10 seconds to load images.

For a better view: https://www.skinvaults.online

I really need help since we get more people with the minutes, for the people that loves the project i do search for a few people that can help me make it even better it isnt paid job rn but just a hobby when you have time.

Let me know by leaving a response

8 Replies

XottikMW | skinvaults.onlineOP
here is a part of the code i use
Little Shearwater
loading a lot of images/data initial is always kind of challenging. I dont know your complete code and data structure, but if you don't have any way to load your data step by step (virtualization), then maybe show something different in the initial loading process and save the images and data in a local storage like zustand or something else to avoid refetching every time the user reload/navigate to the page
XottikMW | skinvaults.onlineOP
Alr thanks will try it out
Sun bear
I think your main issue here is that you are not caching the searching of the items
try the following:
1. cache the initial getItems() function
2. load images at lower resolution using width and height
3. mess around with blurry image loading so you have something to show the user while the higher resolution is loading blurDataURL

https://nextjs.org/docs/app/getting-started/images#remote-images
XottikMW | skinvaults.onlineOP
Alr really thx
I will code in a few hours
So i will leave a respond if it helped a bit