Skip to content

Speed Up QC App Load Time #463

Description

@daniel-slaugh

I've been running the QC app in a local dev environment and it takes about 8 seconds to load the initial page. This should be sped up before we release it in v1.11. Potential bottlenecks to start with:

  • Remove redundant Font Awesome loading. QC doesn’t use Font Awesome, but loads it three times: CDN stylesheet in index.html, Blocking Font Awesome kit in index.html, Bundled CSS in plugins/vuetify.ts
  • In main.ts, user loading and workspace loading are currently sequential. Wrap them in Promise.all()
  • Workspaces are loaded in main.ts, then loaded again when Workspaces.vue mounts. Skip the second request when availableWorkspaces is already populated, or add a cache guard
  • Add a loading shell to index.html. This doesn't speed up the initial page load, but it prevents the long blank screen
  • Similarly, consider skeleton loaders
  • Replace static plotly.js-dist imports with a cached dynamic loader such as getPlotly(). Lazy-loading the Plot.vue component alone is insufficient while stores and plotting utilities still import Plotly statically
  • Consider a new server endpoint specifically for the QC app. The app's initial page over-fetches a bit with a half dozen concurrent requests. It would be better to have a single lean request
  • Replace the 403 KB MDI font with tree-shaken SVG icons

Metadata

Metadata

Labels

QC appAssociated with the quality control appenhancementNew feature

Type

No type

Fields

No fields configured for issues without a type.

Projects

No projects

Milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions