Image Square Attributes feedback needed. (Nop 4.1)

I seriously can't be the only one with this issue.
My client is in the furniture business.
They have a ton of fabric options for their products.

I'm using the Image Square attribute.
One main dropdown and 4 conditional groups (solid, textured, striped and patterned fabrics).

All-in-all, there are about 600 image squares per product.

I'm having major performance issues on those product pages.

Here's what I've done:
- Multiple thumb directories in Media Settings
- Default image quality lowered to 40%
- Super compressed images. 250x250 pixels averaging 5KB.

Analyzing the page, the image square thumbs are less than 1kb so the total load should be around 600kb which isn't great but also isn't bad.

First time opening a product page takes a long time and usually times out.
I understand why - the system creates several thumbs etc.

But next time it still takes up to a minute to open the page which is unacceptable.

So, what can I do?

The minimum would be to at least open the page while the thumbs are loading - not wait until everything has loaded.
That makes no sense to me and page abandonment is naturally way too high.

Ideally, I would like the image square attributes to only load the thumbs when the user takes action on the page - i.e., click the drop down.

Anyone have any suggestions?

What is your nopCommerce version?
What is your image system? DB or file system?

I would prefer you to override that portion of code and load page without image square/default image square then after page load done, populate those images and update image path and related image values from ajax call.

Hello Sir,

I've sent you a recommendation from our side in a private message. We'd like to request you, please  review our email and let us know your thought on the same.

Thank you!

rmahbub63 wrote:

It's a 4.1 installation and I'm storing the images in the database.

I've actually been thinking about using some form of Ajax call or lazy load.
I don't want to touch the core as it will make upgrading Nop a mess but I'm happy to work with the .cshtml files. Just have to figure out where.

Thanks for the suggestion.

Would it be possible to delay the image square attributes load until the customer actually clicks on the drop down?

Alternatively, load the page fully before the attributes load.

Would be a much better user experience.

And in case I'm misunderstanding something, this is the stack trace when the pages times out.

System.Net.WebException: A connection attempt failed because the connected party did not properly respond after a period of time, or established connection failed because connected host has failed to respond A connection attempt failed because the connected party did not properly respond after a period of time, or established connection failed because connected host has failed to respond ---> System.Net.Http.HttpRequestException: A connection attempt failed because the connected party did not properly respond after a period of time, or established connection failed because connected host has failed to respond ---> System.Net.Sockets.SocketException: A connection attempt failed because the connected party did not properly respond after a period of time, or established connection failed because connected host has failed to respond
   at System.Net.Http.ConnectHelper.ConnectAsync(String host, Int32 port, CancellationToken cancellationToken)
   --- End of inner exception stack trace ---
   at System.Net.Http.ConnectHelper.ConnectAsync(String host, Int32 port, CancellationToken cancellationToken)
   at System.Threading.Tasks.ValueTask`1.get_Result()
   at System.Net.Http.HttpConnectionPool.CreateConnectionAsync(HttpRequestMessage request, CancellationToken cancellationToken)
   at System.Threading.Tasks.ValueTask`1.get_Result()
   at System.Net.Http.HttpConnectionPool.WaitForCreatedConnectionAsync(ValueTask`1 creationTask)
   at System.Threading.Tasks.ValueTask`1.get_Result()
   at System.Net.Http.HttpConnectionPool.SendWithRetryAsync(HttpRequestMessage request, Boolean doRequestAuth, CancellationToken cancellationToken)
   at System.Net.Http.RedirectHandler.SendAsync(HttpRequestMessage request, CancellationToken cancellationToken)
   at System.Net.Http.HttpClient.FinishSendAsyncUnbuffered(Task`1 sendTask, HttpRequestMessage request, CancellationTokenSource cts, Boolean disposeCts)
   at System.Net.HttpWebRequest.SendRequest()
   at System.Net.HttpWebRequest.GetResponse()
   --- End of inner exception stack trace ---
   at System.Net.HttpWebRequest.GetResponse()
   at System.Net.WebClient.GetWebResponse(WebRequest request)
   at System.Net.WebClient.DownloadBits(WebRequest request, Stream writeStream)
   at System.Net.WebClient.UploadBits(WebRequest request, Stream readStream, Byte[] buffer, Int32 chunkSize, Byte[] header, Byte[] footer)
   at System.Net.WebClient.UploadValues(Uri address, String method, NameValueCollection data)
   at Nop.Services.Tasks.TaskThread.Run()