Caching and preloading a lot of images
Answered
Bombay posted this in #help-forum
BombayOP
Hey
I have a site that's main job is to show users a lot of images on the page the moment the user joins the page. So lazy loading etc etc won't really help me.
Is there a way to start preloading my cdn images and cache them right away when the user first opens the nextjs app in any route?
These images come from cdn and never change. There is about 300 images so I really don't want to move them to static images to ./public
The point is, these images have to be fast and the cdn urls are known beforehand and they never change. How can I
display these 300 images on my page in the most optimized way?
Can I somehow preload these 300 urls and chace them
I have a site that's main job is to show users a lot of images on the page the moment the user joins the page. So lazy loading etc etc won't really help me.
Is there a way to start preloading my cdn images and cache them right away when the user first opens the nextjs app in any route?
These images come from cdn and never change. There is about 300 images so I really don't want to move them to static images to ./public
The point is, these images have to be fast and the cdn urls are known beforehand and they never change. How can I
display these 300 images on my page in the most optimized way?
Can I somehow preload these 300 urls and chace them
9 Replies
you should use the Image Component from nextjs. That Component fetches the image from your cdn and caches it. Like that you can directly serve a large amount of images cached and optimized for the perfect UX ^^
@B33fb0n3 you should use the Image Component from nextjs. That Component fetches the image from your cdn and caches it. Like that you can directly serve a large amount of images cached and optimized for the perfect UX ^^
BombayOP
Ok, thanks. I am using the Next Image component. Is there anything else I can do? For example if the images are shown in route C, can I somehow "preload" them in route A, or B for example, kind of "ahead-of-time"
Yea, normally a cdn works with a shared cache. So whenever someone is on route c and the next person enter route c then everything is already cached ^^
BombayOP
@B33fb0n3 is this real? Then holy shit.
I'll obviously have to read more on it. Thank you!
I will not forget you beefbone
Yes, that’s crazy 🙈
Please mark solution
Please mark solution
Answer
White-crowned Pigeon
👆This definitely will cache the images on the server/cdn.
But if you are talking about preloading the image client side, then you would need to add a link rel="preload" href="https://yoursite.com/image1.png" to the head.
This is already done automatically for Next Image with the prop
You can do this for almost any asset type. I like to use preload for videos that are very important above the fold. 😎
For most things you should just be preloading stuff that is on the current page though. Next Link will start loading other pages as you hover the links anyways.
But if you are talking about preloading the image client side, then you would need to add a link rel="preload" href="https://yoursite.com/image1.png" to the head.
This is already done automatically for Next Image with the prop
priority added on it, but if you wanted to preload images client side from different pages, then you'd need to manage adding these preload links yourself using ReactDOM.preload() ReactDOM.preload("https://yoursite.com/image1.png", {
as: "image",
fetchPriority: "low", // this can be high, low, auto. Probably use low for assets that are not needed on this current page, high for things needed right away
});You can do this for almost any asset type. I like to use preload for videos that are very important above the fold. 😎
For most things you should just be preloading stuff that is on the current page though. Next Link will start loading other pages as you hover the links anyways.