Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Performance improvements #102

Open
wants to merge 7 commits into
base: stage
Choose a base branch
from
Open

Performance improvements #102

wants to merge 7 commits into from

Conversation

mokimo
Copy link

@mokimo mokimo commented Aug 21, 2024

There are a few discussions about preloading, as well as after this initial research, I'll open a discussion based on the advantages of parallelizing loading.

As project unity will only display POST-LCP, we can parallelize as much as the browser allows us to do, as we will need the assets anyway. I tried to keep this PR "unintrusive" by not changing any order of JS operations and simply moving a few imports and loading actions around.

Observable improvements:

I've used local overwrites to test this on the prod pages behind akamai:

  • Prod before, desktop: 1.73s

  • Prod after, desktop: 1.31s

  • Prod before, fast 4G (mobile): 3.34s

  • Prod after, fast 4G (mobile) 2.13s

There is a bit of jitter within this data, but there should be general improvements. I'd love to see us observing the improvements using CRUM and collect valuable data about this use-case. Numbers tested locally are usually optimistic (e.g. 1.73s or 1.31s both sound too good for desktop) - so I'd love to follow those numbers.

Future enhancement suggestions

  • Method 1: Load a "facade" of the project unity so you don't even need most the logic components, JS, SVGs, CSS until after the LCP and the base buttons will do.
  • Method 2: Load project unity after the LCP (this might need some styling changes to reserve the necessary space to avoid CLS)

The general aim here is, we want to show the marquee (or any) image as fast as we can. Everything that is not part of the LCP block // image can be delayed. The user will not instantly click the buttons within the marquee and even if an event listener to detect the click and loading the rest of the logic is good enough (gnav does that)

Deep dive into what changed

Let’s establish the baseline, we queue a lot of imports. Each import // load needs to (a)wait for the response to be returned:
1-combine-load-before

1 - We can combine loading styles & workflow:
Screenshot 2024-08-17 at 07 46 42

2 - Move loading product workflow together with the base workflow

3-combine-load-workflows

3 - Require workflow step assets (upload-bin, app-connector) earlier within the product workflow, to start loading them whenever the product workflow has been loaded

4-normal-import-for-required-assets

4 - Loading all assets (svgs) concurrently and re-use them. IMO We can be even smarter here in the future by only loading the SVGs that are initially visible, we might end up loading too much. But this PR should serve as a good inspiration and good first batch of improvements.

5-parallelize-PS-WF

Test URLs:

Copy link

aem-code-sync bot commented Aug 21, 2024

Hello, I'm the AEM Code Sync Bot and I will run some actions to deploy your branch and validate page speed.
In case there are problems, just click a checkbox below to rerun the respective action.

  • Re-run PSI checks
  • Re-sync branch
Commits

@mokimo mokimo requested review from amitbikram, sanjayms01, aishwaryamathuria and Ruchika4 and removed request for amitbikram and sanjayms01 August 21, 2024 09:56
@mokimo
Copy link
Author

mokimo commented Aug 21, 2024

Here's some numbers that I've observed locally. There is some jitter/flakiness, but there is a general improvement.

Prod before: 1.73s
prod 1 73 before desktop

Prod after: 1.31s
prod 1 31 after desktop

Prod before mobile: 3.34s
prod fast 4g 3 34 - mobile

Prod after mobile: 2.13s
prod fast 4g 2 13mobile

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants