Cross origin fonts significantly slow down rendering

Hi,

First of all, thank you for offering such a high quality rendering library! I have realized an issue that concerns Plotly loading cross origin fonts that significantly slows down rendering upon a visitor's first visit. The caching solves the problem which is why it may be hard to detect on often visited websites. Precisely, I am trying to use the following example: https://plotly.com/javascript/3d-surface-plots/

Loading from disk vs requesting from a web server

If one creates a minimal working example (just bare HTML and JavaScript) and loads the HTML directly from disk, the rendering is almost immediate. If however, one loads the same HTML via a web server, the time taken for the page to load is extremely slow, hinting towards cross origin requests. For reproducibility, one can create a web server from a directory fairly quickly using Python using python -m http.server 8000. Also, make sure that you load the minimal working example in a Private browser window, to ensure that the cache is not used, which will mask the problem.

Partial fix

To confirm that the issue is indeed due to Plotly's use of fonts, I was able to mitigate it by wrapping the plot command as follows. This workaround does not speed up the rendering of the Plotly plot, it only ensures that the rest of the page is not withheld from rendering due to this plot. Plotly figure shows up later.

requestIdleCallback(() => {
    document.fonts.ready.then(() => {
        Plotly.newPlot('plot3d', data, layout);
    });
});

Without document.fonts.ready, the browser continues to show the loading icon. After adding it, the page load completes reasonably fast, but until we wrap with requestIdleCallback, the browser withholds the entire webpage from rendering due to just the Plotly plot. Note that Safari does not natively have requestIdleCallback and it must be defined manually.

Reproducibility

I suggest using the Private mode of your browser to reproduce this issue (since cache masks it). I personally found the issue more pronounced in Safari rather than Firefox. Also, as mentioned earlier, Safari does not natively have requestIdleCallback and it must be defined manually.

Ideal fix

Since there is no computational bottleneck in the rendering (as evidenced by the fact that loading from disk is fairly fast), there should be a convenient way to make Plotly fall back to system fonts (so far I have been unsuccessful in getting Plotly to use system fonts). Additionally, the document.fonts.ready + requestIdleCallback workaround is only partial. It lets the rest of the page to load, but ideally we still want everything (including the Plotly plot) to load fast. It is clearly possible, as evidenced by the fact that rendering happens immediately when loading from disk.

Any help is greatly appreciated. Thank you very much!

Reproduisez l’exemple de graphique de surface 3D disponible à l’adresse https://plotly.com/javascript/3d-surface-plots/ via python -m http.server 8000 dans une fenêtre de navigation privée, en comparant le chargement depuis le disque au chargement via un serveur web. Commencez au point d’entrée Plotly.newPlot et étudiez d’abord le chargement des polices cross-origin. Le travail est considéré comme terminé lorsque le graphique et la page environnante sont rendus rapidement sans dépendre de la solution de contournement utilisant document.fonts.ready et requestIdleCallback.