Status: Closed (View Workflow)
There are increasing reports that initial loads are worse and worse (looking at master, and 1.3).
rtyler reported that loading 2 fonts is taking 4 seconds (each, in parallel, even though they are only 70KB each). They must be some amazing fonts.
- Find out why fonts take 4 seconds to load each https://i.imgur.com/679C44p.png
- Mostly investigation. Result may be that we need "sane" code splitting and then minification, tree shaking etc(things I know kzantow wants to take a look at) but may be lower hanging fruit in short term so it doesn't appear so bad.
A tool like https://gtmetrix.com/reports/ci.blueocean.io/FI3cg80T shows cold load analysis. The time shown is more ideal for low latency connection, in reality can be up to a minute for people on modest connections. So anytime there is a delay in the waterfall, you can magnify that for users who have no ideal latency
Take a look at the waterfall on that link. Note there is a cascade in the middle with loading the dashboard and other plugins and localisation files it looks like - that seems new (ish).
Note this network timeline from Tyler: https://i.imgur.com/679C44p.png - fon'ts are taking 4 seconds to load (70kb each) ???
I haven't yet figured out how to get a .har out of the Developer Tools in Firefox.
Right click anywhere under the "File" column and then "Save All as HAR"
I spent some time analyzing the .har that Tyler sent me privately, and also performing some throttled loading ("Fast 3G" speed) of the app locally in Chrome. The TL;DR is:
- I don't think anything odd is going on with the fonts. I don't see any slowdown with them locally (throttled) or in Tyler's .har.
- The rest of the staggered waterfall is a symptom really of how Blue Ocean loads assets which I know Keith is aiming to fix sometime "soon." In 1.4 this got slightly worse since JDL and CoreJS are split out from the main blueocean.js as their own bundles.
For those interested here's an explanation of the waterfall
- Initial page loads
- script tags (for JS) and link tags (for CSS) for the JDL, blueocean-core-js and blueocean are added to document body, triggering load of those assets
- fonts are loaded as side-effect of JDL's CSS loading
- SSE connection is initialized as blueocean-core-js initializes
- i18n bundle for blueocean-web module (contained in blueocean.js) is loaded as that bundle initializes
- blueocean-web init continues and programatically loads any bundles that contribute to "routes" XP: this triggers loading JS for blueocean-dashboard and blueocean-pipeline-editor because those plugins contribute routes. You can see this linkage by examining script tag within head written by preloader that dumps out js-extensions; "jenkins.main.routes"
- Async loading of those plugins CSS and i18N bundles begin (note: not 100% confident whether this is triggered at same time as JS loads, as as a side-effect of the JS having loaded)
- React bootstraps and renders the matching route which typically is "pipelines"
- On initial render of pipelines screen, render of "top" extension point detects dependency on "blueocean-personalization" and loads JS bundle
- (also possibly loads CSS and I18N)
I think there are some open questions about exactly what triggers CSS and I18N loading: I thought Tom had implemented a change to force it to be loaded at the same time as the JS bundle and block init of the JS until it was loaded (to avoid screen repainting) but I think this was either not implemented or may have bugs based on some of the screen flicker bugs we've seen and order of things in network panel.
I am closing this as I consider it done - I know kzantow will have all this in mind with future enhancements. Would be good for cliffmeyers to keep a mental/paper note of the findings here so we can revisit in in future (but any fixes will be intuitively obvious anyway...)
rtyler if you could export a .har of your Firefox network snapshot it'd be helpful. I'm going to try to repro on my own anyhow.