Black Lives Matter. Please consider donating to Black Girls Code today.

Speeding partial page load: Async or defer in script for plotly.js?

Hi all, we are using plotly plots in a large web page with a lot of text and bootstrap layout. We have several plots in the page, and are using a tag with the CDN for the plotly.js library. This library takes a bit of time to load on slow connections and the way we have things setup is that we inserted the script tag just before the first plot (for technical reasons in our build chain, we have a processing step with LXML that makes it easy to move things around). However, the delay in loading it prevents the rendering of the text below and bootstrap to do its job until the library is fully loaded. I am looking for tips and tricks to speed things up.

I tried to use the “async” attribute in the script tag, to have the page load and render before the download of the plotly library was finished, but I must have done things wrong, as the plots didn’t seem to work well. Any chance that I can get such functionality to work and if so, how?

I should add that if I do a quick mockup on a local HTML file, things look like they work with “async”. On the actual server, it seemed that things didn’t work. It’s however a complicated environment (secured public-health data, with several layers of security), so I am having a hard time debugging. I’m looking for thoughts on what can go wrong and how to prevent it.