Speed up first load of application

Description

Currently it takes about 2 minutes to load the OpenLMIS UI on a 3g connects with low latency.

An initial list of ideas of what could improve it:

  • getting UI to gzip successfully (might have biggest benefit! but the gzip aspect of does not seem to have worked—maybe need to re-open 1661)

  • Load javascript at bottom of page, add non-js loading modal to screen so there is content immediately

  • Check caching strategy and make sure files are only being download if they are actually different

  • cleaning unused (or barely used) libraries

    • Remove UI-Bootstrap and replace with AngularStrap (UIB is only used from dropdowns)

    • Remove bootbox and ngBootbox, replace with AngularStrap
      (The various modal implementations could also be cleaned up while doing this) -- we could also just toss ngBootbox, we use the library in the same way bootbox works

  • breaking up the UI into minimal ui files, and using webpack or browserify to load more JS as needed

    • Split language strings out of JS files
      As a note, we added all the strings into the javascript at load to get around building a load process that would make sure translation strings are cached... figuring out the real weight of these strings, and if that is a problem, would give us an idea if this is a priority

    • Split HTML files out of JS files (or split into modules that need then)
      We are loading the HTML files into javascript so there is no load time when opening modals and stuff (also because we need to do this for unit tests to work) -- if we took a webpack approach we could bundle more selectively instead of just tossing everything together

Please add suggestions to either the ticket description or in a comment

How to Approach This
Do not file any work directly against this ticket, please make a subtask for the exact work you are going to complete so we can track what optimizations we have done and QA them independently. Any tasks that are too big, or that we don't get to in sprint 20 will become their own tickets.

Please keep all discussion about this issue on this ticket, so everyone can stay in the loop!

Acceptance Criteria

  • Load the UI in less than 1 minute on a high-latency 3g connection (SELV loaded in 1 minute)

Activity

Show:
Nick Reid
February 23, 2017, 5:14 PM

So, I don't think we have expertise with webpack – 30 seconds is good ... that is without latency and packet loss – I'll toss it through the web connection tester that Josh uses...

If we are still over the 1 minute mark in that test ... I think we need to drop extra image files – drop an icon library (I think dropping glyphicon is the way to go... but I'd be open to arguments about dropping font-awesome)

we could also drop sections of bootstrap that we are not using (which ideally we would give an obvious path for implementers to add back what we dropped, but that could happen later)

Brandon Bowersox-Johnson
February 24, 2017, 5:12 AM

I suggest we open a new ticket for WebPack and put that part out of 3.0 scope. If the team starts running out of tickets in the current sprint (in these last 3 days of this sprint), there are a few other 3.0 items to pick up from the Backlog. And if we get all those done, we could attempt webpack then. But right now the performance sounds acceptable for release.

Mateusz Kwiatkowski
February 28, 2017, 10:18 AM

I'm afraid that removing glyphicons from dependencies will break some functionality from external libraries, i.e. datepicker uses glyphicons as well as other things from AngularStrap.

Paulina Borowa
February 28, 2017, 2:17 PM

On a 3g connection UI loading fast enough.

Sebastian Brudziński
February 28, 2017, 2:19 PM
Edited

Do you have the exact time? This can be used for future reference. (and also exact setup for reproducing the same environment)

Assignee

Mateusz Kwiatkowski

Reporter

Nick Reid

Labels

None

Story Points

13

Time tracking

0m

Time remaining

0m

Epic Link

Components

Sprint

None

Fix versions

Priority

Major
Configure