Stepper: Performance fine-tuning #99352

alshakero · 2025-02-05T15:06:20Z

Changes

Fix preloading

In light of #99158, I investigated why loading states appear between steps when the next step should be preloaded. Turns out, preloading the step that comes after the user step was broken, since #97841.

#97841 broke the assumption that the user step comes at the start of the flow, and this broke the preloading logic. It's my bad because didn't catch that even though I reviewed it. I now shifted to the new design of the user step being at the end.

Annotate all the steps with chunk names

I added chunk names for every step for easier debugging.

Upgrade onboarding flow to the steps list

I moved the onboarding flow to use the steps list so it gets the labeled chunks.

Help Center

The Help Center was being loaded and doing many requests in vain. I delayed its loading until a user is created.

Testing steps

With goals first

Go to 22180-explat-experiment
Save the treatment_cumulative bookmarklet.
While incognito, go to /setup/onboarding.
You should be redirected to goals.
Skip it. You should see some loading unrelated to this change. The design step has its own loading logic.
Skip the design step. The user step should appear instantly.
Sign up via email, the domain step should render instantly.
Pick a domain, the plans step should render instantly.

Without goals first

Go to 22180-explat-experiment
Save the control bookmarklet.
While incognito, go to /setup/onboarding.
You should be redirected to the user step.
Sign up via email, the domain step should render instantly.
Pick a domain, the plans step should render instantly.

github-actions · 2025-02-05T15:06:36Z

Calypso Live (direct link)

	https://calypso.live?image=registry.a8c.com/calypso/app:build-132324

Jetpack Cloud live (direct link)

	https://calypso.live?image=registry.a8c.com/calypso/app:build-132324&env=jetpack

Automattic for Agencies live (direct link)

	https://calypso.live?image=registry.a8c.com/calypso/app:build-132324&env=a8c-for-agencies

matticbot · 2025-02-05T15:14:02Z

This PR modifies the release build for the following Calypso Apps:

For info about this notification, see here: PCYsg-OT6-p2

notifications
wpcom-block-editor

To test WordPress.com changes, run install-plugin.sh $pluginSlug fix/preload-after-user on your sandbox.

matticbot · 2025-02-05T15:15:35Z

Here is how your PR affects size of JS and CSS bundles shipped to the user's browser:

App Entrypoints (~2468 bytes removed 📉 [gzipped])

name                   parsed_size           gzip_size
entry-main                -14990 B  (-0.7%)    -2103 B  (-0.4%)
entry-login               -14774 B  (-0.7%)    -2029 B  (-0.3%)
entry-domains-landing     -14700 B  (-2.1%)    -2021 B  (-1.0%)
entry-subscriptions       -14648 B  (-0.8%)    -2000 B  (-0.4%)
entry-browsehappy         -14648 B  (-6.9%)    -2000 B  (-3.2%)
entry-stepper             -13504 B  (-1.0%)    -2344 B  (-0.6%)

Common code that is always downloaded and parsed every time the app is loaded, no matter which route is used.

Sections (~1309257 bytes added 📈 [gzipped])

name                                                          parsed_size             gzip_size
async-step-design-setup                                        +2677098 B      (new)  +769660 B      (new)
async-step-unified-domains                                     +1164862 B      (new)  +323248 B      (new)
async-step-launchpad                                           +1138605 B      (new)  +343315 B      (new)
async-step-readymade-template-generate-content                 +1047753 B      (new)  +316051 B      (new)
async-step-importer-wordpress                                  +1043895 B      (new)  +307808 B      (new)
async-step-celebration-step                                    +1020470 B      (new)  +307892 B      (new)
async-step-domains                                             +1000015 B      (new)  +301586 B      (new)
async-step-plans                                                +956301 B      (new)  +266560 B      (new)
async-step-unified-plans                                        +923963 B      (new)  +257983 B      (new)
async-step-use-my-domain                                        +581343 B      (new)  +166955 B      (new)
async-step-site-picker                                          +568535 B      (new)  +174114 B      (new)
async-step-importer-squarespace                                 +558975 B      (new)  +163957 B      (new)
async-step-importer-blogger                                     +558959 B      (new)  +163953 B      (new)
async-step-importer-medium                                      +558955 B      (new)  +163952 B      (new)
async-step-importer-wix                                         +503823 B      (new)  +148774 B      (new)
async-step-site-migration-upgrade-plan                          +426853 B      (new)  +125431 B      (new)
async-step-new-or-existing-site                                 +378006 B      (new)  +113925 B      (new)
async-step-subscribers                                          +376133 B      (new)  +123269 B      (new)
async-step-import-ready                                         +359192 B      (new)  +105201 B      (new)
async-step-site-picker-list                                     +356742 B      (new)  +111275 B      (new)
async-step-import-ready-preview                                 +352981 B      (new)  +103163 B      (new)
async-step-import-ready-wpcom                                   +352506 B      (new)  +102955 B      (new)
async-step-import-ready-not                                     +352140 B      (new)  +102809 B      (new)
async-step-goals                                                +351568 B      (new)  +101945 B      (new)
async-step-difm-starting-point                                  +332824 B      (new)   +96405 B      (new)
async-step-design-choices                                       +331638 B      (new)   +94890 B      (new)
async-step-site-migration-import-or-migrate                     +330262 B      (new)   +96682 B      (new)
async-step-site-migration-how-to-migrate                        +319821 B      (new)   +92365 B      (new)
async-step-trial-acknowledge                                    +315287 B      (new)   +91148 B      (new)
async-step-migration-handler                                    +303063 B      (new)   +86699 B      (new)
async-step-import-verify-email                                  +291335 B      (new)   +83268 B      (new)
async-step-free-post-setup                                      +265115 B      (new)   +87793 B      (new)
async-step-newsletter-setup                                     +262645 B      (new)   +86289 B      (new)
stepper-user-step                                               -253704 B  (deleted)   -80302 B  (deleted)
async-step-user-step                                            +253305 B      (new)   +79516 B      (new)
async-step-bundle-install-plugins                               +205389 B      (new)   +57590 B      (new)
async-step-courses                                              +200563 B      (new)   +63389 B      (new)
async-step-site-migration-credentials                           +200240 B      (new)   +64141 B      (new)
async-step-business-info                                        +199844 B      (new)   +63902 B      (new)
async-step-launch-big-sky                                       +190769 B      (new)   +51272 B      (new)
async-step-site-migration-already-wpcom                         +190761 B      (new)   +61996 B      (new)
async-step-site-migration-fallback-credentials                  +186948 B      (new)   +60157 B      (new)
async-step-site-migration-instructions                          +186588 B      (new)   +59758 B      (new)
async-step-segmentation-survey                                  +186445 B      (new)   +59808 B      (new)
async-step-store-address                                        +183760 B      (new)   +59728 B      (new)
async-step-platform-identification                              +181193 B      (new)   +57110 B      (new)
async-step-import-list                                          +180715 B      (new)   +57024 B      (new)
async-step-newsletter-goals                                     +180504 B      (new)   +58983 B      (new)
async-step-import-light                                         +171905 B      (new)   +53957 B      (new)
async-step-create-site                                          +165892 B      (new)   +53176 B      (new)
async-step-site-migration-support-instructions                  +164550 B      (new)   +53032 B      (new)
async-step-import                                               +163452 B      (new)   +51684 B      (new)
async-step-site-options                                         +159845 B      (new)   +50073 B      (new)
async-step-intent-step                                          +159578 B      (new)   +50041 B      (new)
async-step-bundle-confirm                                       +159525 B      (new)   +51864 B      (new)
async-step-blogger-starting-point                               +159010 B      (new)   +49214 B      (new)
async-step-importer-migrate-message                             +155615 B      (new)   +49170 B      (new)
async-step-site-migration-application-password-authorization    +154882 B      (new)   +48667 B      (new)
async-step-processing-step                                      +152457 B      (new)   +49464 B      (new)
async-step-site-migration-started                               +148064 B      (new)   +46623 B      (new)
async-step-site-migration-other-platform-detected-import        +146014 B      (new)   +46313 B      (new)
async-step-site-migration-identify                              +145784 B      (new)   +46595 B      (new)
async-step-error-step                                           +145481 B      (new)   +46771 B      (new)
async-step-site-migration-source-url                            +139507 B      (new)   +44174 B      (new)
async-step-sites-checker                                        +132396 B      (new)   +41571 B      (new)
async-step-intro                                                +129825 B      (new)   +40978 B      (new)
async-step-migration-error                                      +127400 B      (new)   +39909 B      (new)
async-step-assign-trial-plan                                    +126870 B      (new)   +39963 B      (new)
async-step-site-launch                                          +126164 B      (new)   +39709 B      (new)
async-step-wait-for-atomic                                       +31010 B      (new)    +9749 B      (new)
onboarding-flow                                                   -6827 B    (-3.2%)    -1147 B    (-2.0%)
async-step-site-migration-assign-trial-plan                       +3940 B      (new)    +1572 B      (new)
async-step-bundle-transfer                                        +3808 B      (new)    +1613 B      (new)
async-step-wait-for-plugin-install                                +2041 B      (new)    +1079 B      (new)
link-in-bio-tld-flow                                              -1891 B    (-0.1%)     +319 B    (+0.0%)
signup                                                            -1744 B    (-0.6%)     -769 B    (-1.2%)
update-design-flow                                                -1600 B    (-0.1%)      +45 B    (+0.0%)
async-step-site-migration-plugin-install                          +1249 B      (new)     +696 B      (new)
design-first-flow                                                  -909 B    (-3.2%)     -155 B    (-2.7%)
site-setup-wg                                                      -894 B    (-0.3%)      -18 B    (-0.0%)
site-setup-flow                                                    -894 B    (-0.3%)      -18 B    (-0.0%)
start-writing-flow                                                 -884 B    (-3.2%)     -138 B    (-2.5%)
newsletter-flow                                                    -498 B    (-2.2%)      -73 B    (-1.4%)
reblogging-flow                                                    -319 B    (-4.3%)      -70 B    (-3.6%)
earn                                                               -217 B    (-0.0%)      -37 B    (-0.0%)
write-flow                                                         -216 B    (-0.0%)      -31 B    (-0.0%)
build-flow                                                         -216 B    (-0.0%)      -29 B    (-0.0%)
newsletter-post-setup-flow                                         -206 B    (-0.1%)      -46 B    (-0.1%)
link-in-bio-post-setup-flow                                        -206 B    (-0.1%)      -46 B    (-0.1%)
domain-user-transfer-flow                                          -206 B    (-0.1%)      -29 B    (-0.0%)
hundred-year-plan                                                  -182 B    (-0.1%)      -65 B    (-0.1%)
hundred-year-domain                                                -182 B    (-0.1%)      -70 B    (-0.1%)
entrepreneur-flow                                                  -173 B    (-0.1%)      -52 B    (-0.1%)
copy-site-flow                                                     -155 B    (-0.0%)     -148 B    (-0.0%)
accept-invite                                                      -154 B    (-0.1%)     -810 B    (-1.5%)
hundred-year-domain-transfer                                       -131 B    (-2.0%)      -37 B    (-2.0%)
google-transfer                                                    -131 B    (-2.4%)      -37 B    (-2.3%)
domain-transfer                                                    -131 B    (-2.6%)      -38 B    (-2.5%)
themes                                                             -114 B    (-0.0%)      -18 B    (-0.0%)
staging-site                                                       -114 B    (-0.0%)      -18 B    (-0.0%)
site-tools                                                         -114 B    (-0.0%)      -18 B    (-0.0%)
site-settings                                                      -114 B    (-0.0%)      -22 B    (-0.0%)
site-marketing                                                     -114 B    (-0.0%)      -28 B    (-0.0%)
settings-security                                                  -114 B    (-0.0%)      -24 B    (-0.0%)
settings-podcast                                                   -114 B    (-0.0%)      -17 B    (-0.0%)
settings-performance                                               -114 B    (-0.0%)      -25 B    (-0.0%)
settings                                                           -114 B    (-0.0%)      -22 B    (-0.0%)
posts-custom                                                       -114 B    (-0.0%)      -20 B    (-0.0%)
posts                                                              -114 B    (-0.0%)      -20 B    (-0.0%)
plugins                                                            -114 B    (-0.0%)      -21 B    (-0.0%)
marketing                                                          -114 B    (-0.0%)      -28 B    (-0.0%)
jetpack-cloud-plugin-management                                    -114 B    (-0.0%)      -21 B    (-0.0%)
hosting                                                            -114 B    (-0.0%)      -22 B    (-0.0%)
domains                                                            -114 B    (-0.0%)      -21 B    (-0.0%)
activity                                                           -114 B    (-0.0%)      -19 B    (-0.0%)
a8c-for-agencies-plugins                                           -114 B    (-0.0%)      -21 B    (-0.0%)
transferring-hosted-site-flow                                      -103 B    (-0.0%)     -224 B    (-0.3%)
subscribers                                                        -103 B    (-0.0%)      -16 B    (-0.0%)
site-blocks                                                        -103 B    (-0.0%)      -11 B    (-0.0%)
security                                                           -103 B    (-0.0%)      -10 B    (-0.0%)
readymade-template-flow                                            -103 B    (-0.1%)      -11 B    (-0.0%)
privacy                                                            -103 B    (-0.0%)      -13 B    (-0.0%)
plugin-bundle-flow                                                 -103 B    (-0.0%)     -220 B    (-0.1%)
notification-settings                                              -103 B    (-0.0%)      -12 B    (-0.0%)
new-hosted-site-flow-user-included                                 -103 B    (-0.1%)      -39 B    (-0.1%)
jetpack-cloud-manage-pricing                                       -103 B    (-0.0%)      -36 B    (-0.0%)
import-hosted-site-flow                                            -103 B    (-0.0%)      -17 B    (-0.0%)
import-flow                                                        -103 B    (-0.1%)      -39 B    (-0.1%)
import                                                             -103 B    (-0.0%)      -16 B    (-0.0%)
email                                                              -103 B    (-0.0%)      -23 B    (-0.0%)
developer                                                          -103 B    (-0.0%)      -13 B    (-0.0%)
connect-domain                                                     -103 B    (-0.1%)      -44 B    (-0.1%)
assembler-first-flow                                               -103 B    (-0.1%)      -11 B    (-0.0%)
account-close                                                      -103 B    (-0.0%)      -12 B    (-0.0%)
tailored-ecommerce-flow                                             -79 B    (-1.2%)      -12 B    (-0.5%)
new-hosted-site-flow                                                -52 B    (-0.0%)      -32 B    (-0.1%)
preview                                                             -22 B    (-0.0%)       -3 B    (-0.0%)
example-flow                                                        -22 B    (-0.2%)       -6 B    (-0.2%)

Sections contain code specific for a given set of routes. Is downloaded and parsed only when a particular route is navigated to.

Async-loaded Components (~3670 bytes added 📈 [gzipped])

name                                                                              parsed_size           gzip_size
async-load-signup-steps-site-options                                                   -206 B  (-0.3%)      -74 B  (-0.3%)
async-load-signup-steps-site                                                           -206 B  (-0.3%)      -58 B  (-0.2%)
async-load-design-playground                                                           -206 B  (-0.0%)      -38 B  (-0.0%)
async-load-design                                                                      -206 B  (-0.0%)      -38 B  (-0.0%)
async-load-signup-steps-page-picker                                                    -145 B  (-0.0%)     -602 B  (-0.4%)
async-load-purchase-modal-wrapper                                                      -145 B  (-0.0%)     -603 B  (-0.5%)
async-load-my-sites-checkout-purchase-modal-is-eligible-for-one-click-checkou...       -145 B  (-0.0%)     -544 B  (-0.5%)
async-load-design-blocks                                                               -114 B  (-0.0%)      -20 B  (-0.0%)
async-load-calypso-reader-sidebar                                                      -114 B  (-0.1%)      -19 B  (-0.1%)
async-load-calypso-my-sites-current-site-notice                                        -114 B  (-0.2%)      -18 B  (-0.1%)
async-load-calypso-components-web-preview-component                                    -114 B  (-0.0%)      -20 B  (-0.0%)
async-load-calypso-blocks-jitm-templates-sidebar-banner                                -114 B  (-0.2%)      -20 B  (-0.1%)
async-load-calypso-blocks-jitm-templates-notice                                        -114 B  (-0.2%)      -20 B  (-0.1%)
async-load-calypso-blocks-jitm-templates-default                                       -114 B  (-0.2%)      -20 B  (-0.1%)
async-load-signup-steps-woocommerce-install-transfer                                   -103 B  (-0.2%)      -31 B  (-0.1%)
async-load-signup-steps-woocommerce-install-step-store-address                         -103 B  (-0.1%)      -32 B  (-0.1%)
async-load-signup-steps-woocommerce-install-step-business-info                         -103 B  (-0.1%)      -32 B  (-0.1%)
async-load-signup-steps-woocommerce-install-confirm                                    -103 B  (-0.1%)      -32 B  (-0.1%)
async-load-signup-steps-website-content                                                -103 B  (-0.0%)      -48 B  (-0.1%)
async-load-signup-steps-theme-selection                                                -103 B  (-0.0%)      -36 B  (-0.0%)
async-load-signup-steps-test-step                                                      -103 B  (-0.2%)      -37 B  (-0.2%)
async-load-signup-steps-social-profiles                                                -103 B  (-0.2%)      -35 B  (-0.2%)
async-load-signup-steps-rewind-were-backing                                            -103 B  (-0.2%)      -35 B  (-0.2%)
async-load-signup-steps-rewind-form-creds                                              -103 B  (-0.1%)      -34 B  (-0.1%)
async-load-signup-steps-initial-intent                                                 -103 B  (-0.1%)      -27 B  (-0.1%)
async-load-signup-steps-hosting-decider                                                -103 B  (-0.2%)      -33 B  (-0.2%)
async-load-signup-steps-emails                                                         -103 B  (-0.1%)      -35 B  (-0.1%)
async-load-signup-steps-design-picker                                                  -103 B  (-0.1%)      -29 B  (-0.1%)
async-load-signup-steps-creds-permission                                               -103 B  (-0.1%)      -34 B  (-0.1%)
async-load-signup-steps-creds-confirm                                                  -103 B  (-0.1%)      -35 B  (-0.1%)
async-load-signup-steps-courses                                                        -103 B  (-0.1%)      -38 B  (-0.1%)
async-load-signup-steps-clone-start                                                    -103 B  (-0.2%)      -36 B  (-0.2%)
async-load-signup-steps-clone-ready                                                    -103 B  (-0.1%)      -36 B  (-0.1%)
async-load-signup-steps-clone-point                                                    -103 B  (-0.0%)      -35 B  (-0.0%)
async-load-signup-steps-clone-destination                                              -103 B  (-0.2%)      -36 B  (-0.2%)
async-load-signup-steps-clone-credentials                                              -103 B  (-0.1%)      -35 B  (-0.1%)
async-load-signup-steps-clone-cloning                                                  -103 B  (-0.2%)      -32 B  (-0.2%)
async-load-calypso-my-sites-checkout-modal                                              -52 B  (-0.0%)      -25 B  (-0.0%)
async-load-signup-steps-domains                                                         -42 B  (-0.0%)     -165 B  (-0.1%)
async-load-signup-steps-new-or-existing-site                                            +13 B  (+0.0%)       +8 B  (+0.0%)

React components that are loaded lazily, when a certain part of UI is displayed for the first time.

Legend

What is parsed and gzip size?

Parsed Size: Uncompressed size of the JS and CSS files. This much code needs to be parsed and stored in memory.
Gzip Size: Compressed size of the JS and CSS files. This much data needs to be downloaded over network.

Generated by performance advisor bot at iscalypsofastyet.com.

youknowriad

Thanks for following up in this. I do see a difference in experience. Not everything is preloaded yet in some flows but it's better.

I don't know the code base enough to be able to give a deep review.

One question is whether it's possible to avoid future similar regressions. Are we safe now? Do we need a custom lint rule or something to ensure the chunk names are not forgotten...?

escapemanuele · 2025-02-06T10:51:41Z

That's great Omar!

Is it expected that, if I have the goals-first version, I see the loading before domains?

alshakero · 2025-02-06T14:04:57Z

One question is whether it's possible to avoid future similar regressions. Are we safe now? Do we need a custom lint rule or something to ensure the chunk names are not forgotten...?

Chunk names are just there to help be debugging, they don't make a difference otherwise. The fix is really this. I could write a complicated unit test to test for it, but this part of the code very rarely changes. I doubt it will be worth writing and maintaining.

alshakero · 2025-02-06T14:10:03Z

Is it expected that, if I have the goals-first version, I see the loading before domains?

It's possibly related to the StepContainer being async. Because the domains and the plans steps are shared between /start and /setup, and each of these uses different StepContainer. We had to load the StepContainer asynchronously in both cases, which shows loading. I may have a fix for that.

…ypso into fix/preload-after-user

alshakero · 2025-02-06T16:55:32Z

@escapemanuele I made this PR much simpler, and it now only fixes the steps preloading logic and the Help Center preloading. I tested the onboarding flow and no loadings at anymore (besides the one in the design step).

Prelaod the step after the user step

af21617

alshakero requested a review from a team as a code owner February 5, 2025 15:06

matticbot added [Status] Needs Review The PR is ready for review. This also triggers e2e canary tests and wp-desktop tests automatically. labels Feb 5, 2025

More performance fine-tuning

815125b

alshakero changed the title ~~Stepper: Prelaod the step after the user step~~ Stepper: Performance fine-tuning Feb 5, 2025

Change debug tag

4489aa8

alshakero requested review from escapemanuele and arthur791004 February 5, 2025 21:41

alshakero mentioned this pull request Feb 5, 2025

Stepper: Unify loading states #99158

Merged

Merge branch 'trunk' into fix/preload-after-user

f8f4d7f

youknowriad reviewed Feb 6, 2025

View reviewed changes

escapemanuele assigned alshakero Feb 6, 2025

alshakero marked this pull request as draft February 6, 2025 15:57

alshakero added 6 commits February 6, 2025 17:08

Revert first step hook changes - it assumes auth will always come first

452caae

Merge branch 'fix/preload-after-user' of github.com:Automattic/wp-cal…

a0a4bf8

…ypso into fix/preload-after-user

Further tuning

449a737

Further tuning

2dea134

Code comment

999bda1

Merge branch 'trunk' into fix/preload-after-user

5ecb85a

alshakero marked this pull request as ready for review February 6, 2025 17:22

alshakero removed the request for review from arthur791004 February 6, 2025 17:22

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Stepper: Performance fine-tuning #99352

Stepper: Performance fine-tuning #99352

alshakero commented Feb 5, 2025 •

edited

Loading

github-actions bot commented Feb 5, 2025 •

edited by matticbot

Loading

matticbot commented Feb 5, 2025 •

edited

Loading

matticbot commented Feb 5, 2025 •

edited

Loading

youknowriad left a comment

escapemanuele commented Feb 6, 2025

alshakero commented Feb 6, 2025

alshakero commented Feb 6, 2025

alshakero commented Feb 6, 2025

Stepper: Performance fine-tuning #99352

Are you sure you want to change the base?

Stepper: Performance fine-tuning #99352

Conversation

alshakero commented Feb 5, 2025 • edited Loading

Changes

Fix preloading

Annotate all the steps with chunk names

Upgrade onboarding flow to the steps list

Help Center

Testing steps

With goals first

Without goals first

github-actions bot commented Feb 5, 2025 • edited by matticbot Loading

matticbot commented Feb 5, 2025 • edited Loading

matticbot commented Feb 5, 2025 • edited Loading

youknowriad left a comment

Choose a reason for hiding this comment

escapemanuele commented Feb 6, 2025

alshakero commented Feb 6, 2025

alshakero commented Feb 6, 2025

alshakero commented Feb 6, 2025

alshakero commented Feb 5, 2025 •

edited

Loading

github-actions bot commented Feb 5, 2025 •

edited by matticbot

Loading

matticbot commented Feb 5, 2025 •

edited

Loading

matticbot commented Feb 5, 2025 •

edited

Loading