Seeking Optimization Advice for Image Loading Process Involving Uplink

Anvil Q&A
1

Hello Anvil Community,

I am currently facing a performance challenge in my app and would appreciate any insights or suggestions you might have.

The Process: My application involves a significant amount of image processing, which is central to its functionality. The process is as follows:

  • JavaScript in a component calls a function (getFrame) on the client side of Anvil.
  • getFrame then calls a function on the server side of Anvil.
  • The server side function communicates with our uplink.
  • The uplink loads an image and sends it back to the server.
  • The server then sends the image back to the client.
  • Finally, the client passes the image back to the original JavaScript.

This process is summarized as: JavaScript (JS) -> Client Code -> Server Code -> Uplink -> Server Code -> Client Code -> JS.

Performance Issue: The critical issue I’m encountering is with the transfer times between different stages, specifically:

  • The transfer from the uplink back to the server takes about 1 second.
  • However, the transfer from the server back to the client is notably slower, taking approximately 1.7 seconds.

Given the nature of our application, optimizing this image loading process is crucial.

Attempts at Optimization:

  • I have explored standard optimization techniques, but the unique structure of the process and the role of the uplink seem to limit my options.
  • Direct communication between the client and the uplink is not possible, as per Anvil’s architecture.

I am seeking advice or insights on how to optimize this process, especially in reducing the time taken for the image to transfer from the server back to the client.

Thank you in advance for your assistance!

2

Hmm… I have never tried to call an uplink function from the client, but I always assumed it would work. Regardless, even if it works, it would likely go through the server anyway, because the uplink connects with the server, not with every client running the app.

I would first try to test the daisy chain of calls with functions that do nothing and compare the time they take to the same calls with functions that do something. This will give you a baseline and you will know where to set your target.

If there is a substantial difference, then you can work on optimizing what each step does.

If you already optimized the optimizable and are close to the base line time, then you could work on the UI and the user experience while they wait.

Have you already compared the times and found the bottleneck?

1 Like
3

Are you loading these images sequentially? If so then loading many at once is probably what you want, since the delay is probably from each step creating the connection, not transferring the amount of data.

Or is it that the performance issue is that the user does something and has a 2.7 seconds delay every time they click something, and are expected to click many times?