Details
-
Task
-
Status: Closed (View Workflow)
-
Major
-
Resolution: Done
-
-
Blue Ocean 1.4 - beta 3
Description
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.
Scope:
- 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) ???
Attachments
Activity
| Field | Original Value | New Value |
|---|---|---|
| Epic Link | JENKINS-35761 [ 171656 ] |
| Sprint | Blue Ocean 1.4 - beta 3 [ 416 ] |
| Assignee | Cliff Meyers [ cliffmeyers ] |
| Description |
There are increasing reports that initial loads are worse and worse (looking at master, and 1.3). 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). Scope: * 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. |
There are increasing reports that initial loads are worse and worse (looking at master, and 1.3). 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). Scope: * 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. * Find out why fonts take 4 seconds to load each https://i.imgur.com/679C44p.png |
| Description |
There are increasing reports that initial loads are worse and worse (looking at master, and 1.3). 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). Scope: * 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. * Find out why fonts take 4 seconds to load each https://i.imgur.com/679C44p.png |
There are increasing reports that initial loads are worse and worse (looking at master, and 1.3). 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) ??? Scope: * 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. * Find out why fonts take 4 seconds to load each [https://i.imgur.com/679C44p.png] |
| Attachment | Selection_297.png [ 40674 ] |
Attached my screenshot from Firefox 57, where I am pretty consistently seeing 1s+ load times on .woff files.
Using a Code Valet build, fwiw:
1.4.0-beta-1-SNAPSHOT (private-2c915714-root) · Core 2.95-SNAPSHOT (private-12/12/2017 21:29 GMT-jenkins) · 2c91571 · 12th December 2017 03:37 PM
| Summary | Investigate very slow waterfall loading cold loading of webapp | Investigate very slow cold loading of webapp fonts (and slow water fall) |
Oh, for context on my load times. These are on a Jenkins instance which has *zero* Pipelines or Jobs, so this is how long it's taking (~6s) to load the "Welcome to Jenkins, it's time to create your first Pipeilne" screen in Blue Ocean 
| Labels | codevalet |
| Description |
There are increasing reports that initial loads are worse and worse (looking at master, and 1.3). 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) ??? Scope: * 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. * Find out why fonts take 4 seconds to load each [https://i.imgur.com/679C44p.png] |
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. Scope: * 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 will investigate this further, but off the top of my head, each browser has a limit on how many concurrent background HTTP requests it will make against the same hostname. My recollection is that they're reasonably high (at least 8 in modern browsers?) but I wonder if that limit could be causing issues for us. I will have to do some research and see whether the timeline includes time the request is blocked by this limit, which could be driving the massive load time for fonts (and also explain why it appears fairly fast in Chrome but ridiculous in FFX).
| Rank | Ranked higher |
| Status | Open [ 1 ] | In Progress [ 3 ] |
| Rank | Ranked higher |
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.
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.
| Attachment | 2017-12-28-1-tyler-ffx.png [ 40925 ] | |
| Attachment | 2017-12-28-2-tyler-ffx-dns.png [ 40926 ] | |
| Attachment | 2017-12-28-3-cliff-chrome-throttled.png [ 40927 ] |
| Status | In Progress [ 3 ] | Open [ 1 ] |
| Assignee | Cliff Meyers [ cliffmeyers ] |
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...)
| Resolution | Done [ 10000 ] | |
| Status | Open [ 1 ] | Closed [ 6 ] |
vivek why would font files be served up so slow via stapler?