Threat Monitoring Performance Optimization: Async load echarts
Why are we doing this work
The performance of our Threat Monitoring page is not meeting the standards set across our product for page load times. This is based on the following sources:
- Webpack analysis: https://gitlab-org.gitlab.io/-/gitlab/-/jobs/1106660481/artifacts/bundle-size-review/comparison.html
- Sitespeed report: https://dashboards.gitlab.net/d/000000043/sitespeed-page-summary?from=now-7d&orgId=1&to=now&var-base=sitespeed_io&var-path=desktop&var-group=gitlab_com&var-page=Protect_Threat_Monitoring&var-browser=chrome&var-connectivity=cable&var-function=median
Proposal
When the Threat Monitoring page loads, all three tabs load together even though only one is showing. We could reduce the number of DOM elements that need to be painted by ensuring only the first tab is loaded.
Additionally, this will have the added benefit of creating URLs for each tab so that a user can navigate straight to the policy tab via a specific url
Potential Problem
Though, DAST_Profiles has a similar setup to ours and they do not have loading problems AND they have links to their tabs, so this may not work. Their page is different by that it uses pretty much the same component for each tab while we use drastically different components, so we have to load more
Alternative
We could do more code splitting
Relevant links
Non-functional requirements
-
Documentation: -
Feature flag: -
Performance: -
Testing:
Implementation plan
-
frontend Asynchronously load both statistics-historyandstatistics-summaryor at least break them out into their own bundle as they both containecharts, which, based on the analysis below, is the fourth largest part of the bundle and it is not always needed.
