search

cs10 / bjc-r

The Beauty and Joy of Computing public resource repository.
https://beautyjoy.github.io/bjc-r
30 stars 98 forks source link

Avoid flashing and slow page loading by inlining stype sheets and widgets on the main page #797

Closed chrishtr closed 3 years ago

chrishtr commented 3 years ago

Currently, bjc-r pages are very slow to load and have a lot of flashing-of-unstyled-content. This is because all of the stylesheets, as well as some HTML content, is dynamically inserted by loader.js. Browsers will then do this:

  1. Load initial HTML, and kick off request for loader.js
  2. Render what they have (unstyled content, because there are no style sheets
  3. loader.js loads and executes, which inserts styles sheets and widgets on the homepage
  4. Browser kicks off requests for style sheets, and renders what it has (now with widgets, but still unstyled)
  5. Style sheets load and the page renders its final, correct version

All of this can be avoided with a very simple edit - simply inline the style sheets and widgets in the page.

chrishtr commented 3 years ago

Here is an example in action:

https://chrishtr.github.io/bjc-r/course/berkeley_bjc.html?

compare with:

https://beautyjoy.github.io/bjc-r/course/berkeley_bjc.html?

chrishtr commented 3 years ago

The actual pages on deployed site are much worse - it depends on the round-trip time to the HTTP server. Compare with:

https://bjc.edc.org/bjc-r/course/bjc4nyc.html

Also, I looked for bjc4ync.html all over https://github.com/beautyjoy/beautyjoy.github.io and other repos, and coudn't find it yet...