Hi,
I am using Dash to build a financial analytical tool that is accessed from different regions in the world. The application’s server is deployed in Kubernetes and hosted in the US (in Azure). The application works ok when accessing it in America, but it is extremely slow when loading from another location, like India. The problem is the speed when rendering the application.
After doing some testing, I realized from the developers’ tools in Chrome that a significant portion of the loading time was attributed to importing the JS libraries. These components accounted for approximately 13 MB in size (which seems substantial).
My question is how can I optimize the loading speed by caching all these libraries (JS files) into a CDN or a server closer to India? I would like to make them available to clients in regions like India to reduce the rendering time.
What steps should I take to set up this caching mechanism effectively, and are there any best practices or specific CDN providers you would recommend for this scenario? Additionally, are there any potential challenges or considerations I should be aware of when implementing this solution?
Your insights and guidance on this matter would be greatly appreciated.
Hi @cfloressuazo - welcome to the Plotly forum!
Have you tried app = Dash(serve_locally=False)? That will use the unpkg CDN for all the JS assets. I don’t know how well unpkg works in India specifically, but it claims to be global, managed by Cloudflare. I see you’re using a lot of 3rd-party libraries, which is great! Just be aware that serve_locally=False only works with libraries that are published to NPM - it’s not hard to do but we can’t guarantee that all package authors have done that.
The app is still going to need to come back to your server for server-side callbacks - so there the main strategy you can use to reduce network lag is converting as many as possible to client-side callbacks.
Hope that helps!
1 Like
I’m not as familiar with Azure but AWS has CloudFront where you can cache applications (among other things) closer to the region you want to serve so it’s less round trips back to home. Does Azure have something similar?
Hi @alexcjohnson , thank you for the reply!
Yes we have the parameter serve_locally=False and for some of the packages we are able to load from the CDN, but for other packages, as you mentioned, the authors have not published it to NPM. I am not very familiar with this process and the information I find online is not helping much, do you know a place where I can submit a merge request to the packages that don’t have their JS in UNPKG to upload?
I would like to also know how to upload the dash components to UNPKG and to another CDN, in the future case that we decide to create and manage our own CDN to upload the dash components there.
Looking forward to your reply!
Re: getting packages into unpkg - assuming the name field in the package.json file is an available name on https://www.npmjs.com/, the maintainers just need to include npm publish in their release process (which means creating a free account there but I think that’s it, the first time you publish a package with a given name, it becomes owned by your user. See eg How to Create and Publish an NPM Package – a Step-by-Step Guide). Aside from that, there’s a one-time change to add external_url into each _js_dist entry, like this for dash-ag-grid. The link between npmjs.com and unpkg.com is automatic.
Re: packages that haven’t done that yet but you want to push them somewhere yourself - you can grab the files from the local server you’re running, or by pulling them out of the package in your site-packages folder, upload them to your favorite CDN, and then manually add the links into _js_dist for those packages in the setup code for your app. Kind of annoying but it should work.
1 Like
