search

fonsp / Pluto.jl

🎈 Simple reactive notebooks for Julia
https://plutojl.org/
MIT License
4.91k stars 284 forks source link

Static HTML: faster page load by preloading statefile #2887

Closed fonsp closed 2 months ago

fonsp commented 2 months ago

When viewing a static notebook online (like https://featured.plutojl.org/language/structure%20and%20language ), the statefile is downloaded by the editor and displayed. But this can be optimized! We can download the statefile in parallel to the editor!

Before

image

You can see the waterfall effect: the request for the statefile happens after the editor has loaded.

After

EDIT we use preload now, see https://github.com/fonsp/Pluto.jl/pull/2887#issuecomment-2044585483

I didn't take the time to test this on a full setup like featured.plutojl.org but I just tested the PlutoSliderServer test server: https://github.com/JuliaPluto/PlutoSliderServer.jl/blob/1c5423e301f26b20000461127c9ab5a15cbdf829/test/runtests.jl#L4-L7

You can see in the network log that the Size column gives (prefetch cache), and the timings are fast (although localhost will always be fast).

image

Doubts

This article https://web.dev/learn/performance/resource-hints makes me a bit doubtful, it looks like you can easily make the browser download the resource twice... I am not sure when to use the crossorigin attribute. I think this is not a cross-origin request? (Since we are allowed to read the response with JS, unlike an opaque CORS request

I tried preload and prefetch, and preload did not work, prefetch seems to work.

I am also not able to debug this very well, I can't find the prefetch/preload request in the browser dev tools, only the fetch. Maybe just merge and see if featured.plutojl.org is faster?

Maybe the type of prefetch should be a setting in PlutoSliderServer?

github-actions[bot] commented 2 months ago

Try this Pull Request!

Open Julia and type:

  julia> import Pkg
  julia> Pkg.activate(temp=true)
  julia> Pkg.add(url="https://github.com/fonsp/Pluto.jl", rev="prefetch-statefile")
  julia> using Pluto
fonsp commented 2 months ago

Before this PR, I did Chrome clear all cache, then Chrome dev tools > Performance > measure reload with Fast 3G network throttle on https://featured.plutojl.org/basic/images

imagesp1.json imagesp2.json

LCP 7.59s and 7.52s

image

Also did the https://featured.plutojl.org/basic/plutoui.jl

Let me know if you want the trace files

LCP 5.92s and 5.79s and 5.87

fonsp commented 2 months ago

Aha! I was using preload wrong...

preload is a better choice than prefetch because it is designed for resources loaded in the same page, while prefetch is more for resources on the next page after navigation.

I also set the crossorigin settings wrong, but now I followed https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel/preload and it seems to work!

The statefile is being requested even before the editor! And the fetch request does not show up in the Network panel as a second request, so that means the preload is working!

image