a year ago
In my react app, image is taking approx of 2-3 mins to load an img of 400kbs. I want to make ir 4-5 sec without reducing quality of images.
Pinned Solution
a year ago
Serve images from a fast CDN / edge:
Use a global service (like Cloudflare or Cloudinary) that stores copies of your images around the world. This means users download images from the server nearest to them — much faster than your origin server.
For free, use netlify and vercel for this.
Deliver modern formats & responsive images:
Convert images into newer formats like WebP or AVIF (they’re smaller but look the same). Also, serve different image sizes depending on the user’s screen so mobile doesn’t download a big desktop image.
Ensure correct caching & HTTP headers:
Set rules so browsers remember images for a long time (using headers like Cache-Control). Add ETag so browsers know when an image has changed. Enable Brotli compression on your server for smaller, faster files.
Lazy-load offscreen images and preload above-the-fold images:
Only load images when they’re about to appear on the screen (lazy-load). But load the top-of-page images early (preload) so users see them instantly.
For more details you can ask me.
17 Replies
a year ago
Hey there! We've found the following might help you get unblocked faster:
- 📚 Deploy a React App
- 🧵 Environment variables not injected
- 🧵 the bff project works only with public key but not private
- 🧵 Environment Variables in ViteJS Not Available at Build Time on Railway
If you find the answer from one of these, please let us know by solving the thread!
a year ago
This thread has been marked as public for community involvement, as it does not contain any sensitive or personal information. Any further activity in this thread will be visible to everyone.
Status changed to Open brody • 11 months ago
a year ago
convert the image to webp
a year ago
Serve images from a fast CDN / edge:
Use a global service (like Cloudflare or Cloudinary) that stores copies of your images around the world. This means users download images from the server nearest to them — much faster than your origin server.
For free, use netlify and vercel for this.
Deliver modern formats & responsive images:
Convert images into newer formats like WebP or AVIF (they’re smaller but look the same). Also, serve different image sizes depending on the user’s screen so mobile doesn’t download a big desktop image.
Ensure correct caching & HTTP headers:
Set rules so browsers remember images for a long time (using headers like Cache-Control). Add ETag so browsers know when an image has changed. Enable Brotli compression on your server for smaller, faster files.
Lazy-load offscreen images and preload above-the-fold images:
Only load images when they’re about to appear on the screen (lazy-load). But load the top-of-page images early (preload) so users see them instantly.
For more details you can ask me.
a year ago
Hey, I'm unable to access your website. Also, 2-3 minutes is pretty slow for a 400kb image, regardless of its format or whether it's served through a CDN.
a year ago
I am following lazy loading.
Okay I will see about converting to WebP.
passos
Hey, I'm unable to access your website. Also, 2-3 minutes is pretty slow for a 400kb image, regardless of its format or whether it's served through a CDN.
a year ago
Oh! Just noticed trailed expired.
opennmindofficial
Oh! Just noticed trailed expired.
a year ago
If you're able to fix your website, please let me know so I can take a look. My guess is that the problem lies with your browser or ISP, but I'd like to confirm that first.
passos
Hey, I'm unable to access your website. Also, 2-3 minutes is pretty slow for a 400kb image, regardless of its format or whether it's served through a CDN.
a year ago
I attached the photo. It is the svg below highlighted one 780kb in 3.5 mins
Attachments
opennmindofficial
I attached the photo. It is the svg below highlighted one 780kb in 3.5 mins
a year ago
I think the image is cached. try clearing cache. in the network tab, there is disable cache checkbox, enable it and refresh the website, or press ctrl+shift + r
coding-dynasty
I think the image is cached. try clearing cache. in the network tab, there is disable cache checkbox, enable it and refresh the website, or press ctrl+shift + r
a year ago
It is the svg below highlighted one 780kb in 3.5 mins
coding-dynasty
I think the image is cached. try clearing cache. in the network tab, there is disable cache checkbox, enable it and refresh the website, or press ctrl+shift + r
a year ago
The image is not cached according to the dev tools, and even if it were cached, it should not take 3.5 minutes to retrieve it.
m-captain
Serve images from a fast CDN / edge: Use a global service (like Cloudflare or Cloudinary) that stores copies of your images around the world. This means users download images from the server nearest to them — much faster than your origin server. For free, use netlify and vercel for this. Deliver modern formats & responsive images: Convert images into newer formats like WebP or AVIF (they’re smaller but look the same). Also, serve different image sizes depending on the user’s screen so mobile doesn’t download a big desktop image. Ensure correct caching & HTTP headers: Set rules so browsers remember images for a long time (using headers like Cache-Control). Add ETag so browsers know when an image has changed. Enable Brotli compression on your server for smaller, faster files. Lazy-load offscreen images and preload above-the-fold images: Only load images when they’re about to appear on the screen (lazy-load). But load the top-of-page images early (preload) so users see them instantly. For more details you can ask me.
a year ago
I am trying these steps for now
passos
The image is not cached according to the dev tools, and even if it were cached, it should not take 3.5 minutes to retrieve it.
a year ago
yeah true
passos
The image is not cached according to the dev tools, and even if it were cached, it should not take 3.5 minutes to retrieve it.
a year ago
It will be cached after first time but first it took 3.5 mins. Now it takes only 0ms
opennmindofficial
It will be cached after first time but first it took 3.5 mins. Now it takes only 0ms
a year ago
And img won't caches until it got loaded completely. So, It's bad for UI/UX.
opennmindofficial
I am trying these steps for now
a year ago
A CDN might help here, though it depends on your ISP/browser. If you need assistance setting up Cloudflare, please let us know. However, I would still like to confirm access on my browser, as I'm currently unable to reach your website. Also, perhaps you should reconsider avoiding lazy loading if you truly want that image to load quickly.
Attachments
opennmindofficial
And img won't caches until it got loaded completely. So, It's bad for UI/UX.
a year ago
First of all try my steps and make the website live so that we can see it.
Status changed to Solved noahd • 11 months ago