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

This issue is archived. You can view it, but you can't modify it. Learn more

XMLWordPrintable

      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) ??? 

       

       

        1. 2017-12-28-1-tyler-ffx.png
          484 kB
          Cliff Meyers
        2. 2017-12-28-2-tyler-ffx-dns.png
          497 kB
          Cliff Meyers
        3. 2017-12-28-3-cliff-chrome-throttled.png
          496 kB
          Cliff Meyers
        4. Screen Shot 2017-12-13 at 1.45.40 pm.png
          498 kB
          Michael Neale
        5. Selection_297.png
          159 kB
          R. Tyler Croy

            Assignee:
            Unassigned
            Reporter:
            Michael Neale
            Archiver:
            Jenkins Service Account

              Created:
              Updated:
              Resolved:
              Archived: