Uploaded image for project: 'Jenkins'
  1. Jenkins
  2. JENKINS-48528

Investigate very slow cold loading of webapp fonts (and slow water fall)

    XMLWordPrintable

    Details

    • Similar Issues:
    • Epic Link:
    • Sprint:
      Blue Ocean 1.4 - beta 3

      Description

      There are increasing reports that initial loads are worse and worse (looking at master, and 1.3). 

       

      R. Tyler Croy 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 Keith Zantow 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

          Hide
          cliffmeyers Cliff Meyers added a comment -

          R. Tyler Croy 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.

          Show
          cliffmeyers Cliff Meyers added a comment - R. Tyler Croy 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.
          Hide
          rtyler R. Tyler Croy added a comment -

          I haven't yet figured out how to get a .har out of the Developer Tools in Firefox.

          Show
          rtyler R. Tyler Croy added a comment - I haven't yet figured out how to get a .har out of the Developer Tools in Firefox.
          Hide
          cliffmeyers Cliff Meyers added a comment -

          Right click anywhere under the "File" column and then "Save All as HAR"

          Show
          cliffmeyers Cliff Meyers added a comment - Right click anywhere under the "File" column and then "Save All as HAR"
          Hide
          cliffmeyers Cliff Meyers added a comment - - edited

          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:

          1. 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.
          2. 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

          1. Initial page loads
          2. 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
          3. fonts are loaded as side-effect of JDL's CSS loading
          4. SSE connection is initialized as blueocean-core-js initializes
          5. i18n bundle for blueocean-web module (contained in blueocean.js) is loaded as that bundle initializes
          6. 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"
          7. 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)
          8. React bootstraps and renders the matching route which typically is "pipelines"
          9. On initial render of pipelines screen, render of "top" extension point detects dependency on "blueocean-personalization" and loads JS bundle
          10. (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.

          Show
          cliffmeyers Cliff Meyers added a comment - - edited 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.
          Hide
          michaelneale Michael Neale added a comment -

          I am closing this as I consider it done - I know Keith Zantow will have all this in mind with future enhancements. Would be good for Cliff Meyers 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...)

          Show
          michaelneale Michael Neale added a comment - I am closing this as I consider it done - I know Keith Zantow will have all this in mind with future enhancements. Would be good for Cliff Meyers 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...)

            People

            Assignee:
            Unassigned Unassigned
            Reporter:
            michaelneale Michael Neale
            Votes:
            1 Vote for this issue
            Watchers:
            3 Start watching this issue

              Dates

              Created:
              Updated:
              Resolved: