How to speed up image serving using Imgix?
Unanswered
Selkirk Rex posted this in #help-forum
Selkirk RexOP
I'm using the <Image /> component with an Imgix Loader (https://nextjs.org/docs/app/api-reference/next-config-js/images#imgix) and in Imgix I'm setting up remote sources. It's all working but when I request an image that isn't already cached, it takes just over 8 seconds before the image is served on the page.
I presume that's because when the image is requested it makes a request to Imgix, Imgix makes an onward request to the remote source and then prepares the various sizes for img srcset. Finally the img is returned and loaded.
Is there any way I can speed this process up?
I presume that's because when the image is requested it makes a request to Imgix, Imgix makes an onward request to the remote source and then prepares the various sizes for img srcset. Finally the img is returned and loaded.
Is there any way I can speed this process up?
4 Replies
Asian black bear
Imgix is not that slow, like 8 seconds slow
what are you using for the source?
is the raw image extremely enormous or something?
Selkirk RexOP
After a lot of experimentation I managed to get this fine-tuned. Now it's down to the milliseconds and no noticeable delay in navigating between images in a gallery.
priority made a big difference as did a way to effectively pre-load the images. I did that by including thumbnails to make a background request to the image so the cache was primed prior to loading as the main image.