Skip to content

Properly defer non-essential actions on load for Issues with designs

Denys Mishunov requested to merge 11918-design-management-single into master

What does this MR do?

In essence, this ~performance MR properly sets the loading sequence for the main components/applications of the Issue view depending on whether we load the issue itself or a single Design element. This is supposed to help reduce LCP for three scenarios:

  • Regular Issue
  • An issue with design files
  • Single Design file

What does this MR REALLY do:

  1. Creates an event bus to communicate between the vanilla JS and the deeply-nested Vue components
  2. Emits an event on image's load event
  3. Moves the DesignManagement application out of dynamic import into the 1st class citizen role of the Issue application bootstrapping process
  4. Manages the order of module's initialization when loading the Issue application depending on whether we load the Issue as normal, or we have to go straight to a single Design file

Screenshots or Screencasts (strongly suggested)

The performance measurements below have been taken in 2 runs (master and this branch) in the local development GDK environment. gdk restart has been run before each performance test run.

View Before After Comment
Regular Issue (no design files) Screenshot_2021-07-29_at_16.56.03 Screenshot_2021-07-29_at_16.56.07
Issue with design files Screenshot_2021-07-29_at_16.56.37 Screenshot_2021-07-29_at_16.56.41 The images do not get downloaded in the sitespeed env
Single Design file within an Issue Screenshot_2021-07-29_at_16.57.28 Screenshot_2021-07-29_at_16.57.32 LCP improvement is about 50% 🎉 🎉 🎉

How to setup and validate locally (strongly suggested)

Does this MR meet the acceptance criteria?

Conformity

Availability and Testing

Security

Does this MR contain changes to processing or storing of credentials or tokens, authorization and authentication methods or other items described in the security review guidelines? If not, then delete this Security section.

  • Label as security and @ mention @gitlab-com/gl-security/appsec
  • The MR includes necessary changes to maintain consistency between UI, API, email, or other methods
  • Security reports checked/validated by a reviewer from the AppSec team

Related to gitlab-com/www-gitlab-com#11918

Edited by Tom Quirk

Merge request reports