SPIKE: As a member of the public when I am taken to some part of the Christmas tree page, I do not want to wait for a whole page reload so that I can get there quickly.

[ASprinkle]

Notes

• consider improving anchor links in the markdown for the guidelines
• look at performance improvements (gzip, images (create thumbnails), compress fonts for page loads

Acceptance criteria

• site initial loads are as optimized as possible for initial load of js, css, fonts and other common assets

Tasks

• do a performance analysis of page load using chrome dev tool (seth)
• create thumbnails for maps and tree images (seth)
• optimize (fonts for example)
• check all package.json for unused packages (seth)

Definition of Done

• Code unit / e2e tested and comply with QWASP
• No new security vulnerabilities
• Internal team code review
• Documentation / readme.md / CircleCI updated
• Docker updated
• Compare finished design with mockup
• Usability tested

[lauraGgit]

Load times on the packaged master are still at .7 seconds, so we're wondering if there is any way we can see if there are any quick wins for performance optimization to have a faster load time.

[sadlerw]

Is the issue that using the sidebar menu to navigate is reloading the page? Or something else?

[lauraGgit]

not the side bar, it's when you click on some of the static assets like images (like the trees or maps), an internal link in the page to another part of the page, and also for the homepage load time.

[sadlerw]

The internal links that reload the page are due to the link being in markdown and not in an angular template. You'd think that a markdown link like link would work if you had at the target, but angular has broken that, so we are stuck with having to use ui-router tags to do smooth scrolling for internal targets. We might be able to make that work somehow within the markdown processor but it's going to get hacky.

[sethalt]

@lauraGgit The following is a summary of my spike research.

Already optimized:

• The cloud.gov server is handling .gzip compression on the js bundle files.
• The fonts using woff2 format which is already compressed, and cannot be further optimized as far as I can tell.
• Unused dependencies have been removed.
• Task to create thumbnails for trees and maps has been created.

Future optimization suggestions:
From my research, I think the 2 largest improvements that we can make to speed up initial page loading times are enabling ahead of time compilation (AoT) on builds, and lazy-loading modules based on need.

Enabling AoT will require a refactor of nearly all of our form components. The syntax: form.controls.field_name, or form.get('field_name') will need to be replaced by form['controls'].field_name. Once that refactor is made, in theory AoT compilation should work.

Lazy loading modules would be a refactor of the routing so that we load the modules on demand vs. all at once. See example here on implementing lazy-loading components: https://angular-2-training-book.rangle.io/handout/modules/lazy-loading-module.html. In our application, I think the app.module can be loaded on every route, and the site can be configured so that the trees.module only loads on trees routes, and application.module only loads on application forms. It's unknown how much this will improve performance as many of the components are 'common' and imported in all three modules.