Improve product edit page loading speed #37477

densen45 · 2023-05-09T06:53:17Z

Description (*)

Page loading speed for products with many custom options or bundle products with multiple options with many selections is slow.
The more custom options a product has and the more options and selections a bundle product has, the slower the speed becomes.

In the issue addressed below, several experiences were shared about how slow this can get.

With the changes included in this Pull Request, I was able to reduce the page load time for one of my bundle products (10 options, approx. 160 selections in total) from about 1min 20sec to 35sec.

Related Pull Requests

https://github.com/magento-gl/magento2-page-builder/pull/53

Fixed Issues (if relevant)

Fixes [Performance] Slow product edit page with big amount of custom options #29409

Manual testing scenarios (*)

Create a bundle product with one option and add one selection
Load the edit page and measure the time until the page becomes fully responsive (JavaScript finishes)
Add more options (about 5) and several selections (about 20) to each option
Load the page and measure the time again

Another scenario would be to add more and more custom options to a product and note that it takes longer to load the edit page.

Questions or comments

Contribution checklist (*)

Pull request has a meaningful description of its purpose
All commits are accompanied by meaningful commit messages
All new or changed code is covered with unit/integration tests (if applicable)
README.md files for modified modules are updated and included in the pull request if any README.md predefined sections require an update
All automated tests passed successfully (all builds are green)

…rver.js to improve the page load performance for product edit pages.

…dom-observer.js to improve the page load performance for product edit pages.

m2-assistant · 2023-05-09T06:53:20Z

Hi @densen45. Thank you for your contribution!
Here are some useful tips on how you can test your changes using Magento test environment.

Add the comment under your pull request to deploy test or vanilla Magento instance:

@magento give me test instance - deploy test instance based on PR changes
@magento give me 2.4-develop instance - deploy vanilla Magento instance

❗ Automated tests can be triggered manually with an appropriate comment:

@magento run all tests - run or re-run all required tests against the PR changes
@magento run <test-build(s)> - run or re-run specific test build(s)
For example: @magento run Unit Tests

<test-build(s)> is a comma-separated list of build names.

Allowed build names are:

Database Compare
Functional Tests CE
Functional Tests EE
Functional Tests B2B
Integration Tests
Magento Health Index
Sample Data Tests CE
Sample Data Tests EE
Sample Data Tests B2B
Static Tests
Unit Tests
WebAPI Tests
Semantic Version Checker

You can find more information about the builds here
ℹ️ Run only required test builds during development. Run all test builds before sending your pull request for review.

For more details, review the Code Contributions documentation.
Join Magento Community Engineering Slack and ask your questions in #github channel.

densen45 · 2023-05-09T06:54:06Z

@magento run all tests

magento-automated-testing · 2023-05-09T06:54:14Z

The requested builds are added to the queue. You should be able to see them here within a few minutes. Please message the #magento-devops slack channel if they don't show in a reasonable amount of time and a representative will look into any issues.

ihor-sviziev · 2023-05-10T08:44:35Z

@magento run Functional Tests B2B, Functional Tests CE, Functional Tests EE, Static Tests, WebAPI Tests

magento-automated-testing · 2023-05-10T08:44:45Z

The requested builds are added to the queue. You should be able to see them here within a few minutes. Please message the #magento-devops slack channel if they don't show in a reasonable amount of time and a representative will look into any issues.

ihor-sviziev

Hi @densen45,
Looks like your changes caused regression according to functional test results. Could you please double-check it?

densen45 · 2023-05-22T06:03:09Z

Hey @ihor-sviziev,
the error (it's the same for all three functional test suites) refers to the PageBuilder. Unfortunately I don't have an environment running PageBuilder to check this.

Can someone else please check this?

ihor-sviziev · 2023-05-24T07:21:21Z

So for now I'm approving pull request, and someone please help with fixing test failures

…rmance

engcom-Lima · 2023-06-26T13:28:49Z

@magento run all tests

engcom-Echo · 2023-09-07T14:05:06Z

@magento run WebAPI Tests,Functional Tests B2B

magento-automated-testing · 2023-09-07T14:05:18Z

The requested builds are added to the queue. You should be able to see them here within a few minutes. Please message the #magento-devops slack channel if they don't show in a reasonable amount of time and a representative will look into any issues.

engcom-Echo · 2023-09-08T03:43:56Z

@magento run WebAPI Tests

magento-automated-testing · 2023-09-08T03:44:10Z

The requested builds are added to the queue. You should be able to see them here within a few minutes. Please message the #magento-devops slack channel if they don't show in a reasonable amount of time and a representative will look into any issues.

engcom-Echo · 2023-09-08T03:44:40Z

@magento run Functional Tests B2B

magento-automated-testing · 2023-09-08T03:44:47Z

The requested builds are added to the queue. You should be able to see them here within a few minutes. Please message the #magento-devops slack channel if they don't show in a reasonable amount of time and a representative will look into any issues.

engcom-Echo · 2023-09-08T05:33:20Z

WebAPI Tests failure are not related to PR. Functional Tests B2B failure are different on last two run on same commit.
Functional Tests B2B
Run1

Run2

Hence moving to merge in progress

Nuranto · 2023-12-08T09:14:12Z

@densen45 We just applied your fix, and it makes a huge difference (loading time divided by more than 3 in our test case). All our backend team and myself thank you for that !

Nuranto · 2023-12-12T13:15:52Z

Bad news, the fix actually breaks one of my forms. I'm investigating, and keep you informed.

Nuranto · 2023-12-12T13:37:44Z

@densen45 Got it :

With foreach, the return was terminating the foreach callback function. But now with for it's terminating the whole processAdded function. Should be a break.

ihor-sviziev · 2023-12-12T14:53:18Z

@Nuranto, can you please create pull request for this change?
BTW, after this change, still you'll have approximately the same performance? Looks like it might revert approximately to what was in the past

Nuranto · 2023-12-12T15:15:44Z

Done. Will ask my team for more tests with this bug fixed. But @densen45 was saying that this one was not the most valuable change of the PR. So I guess it won't change much from our previous results.

ihor-sviziev · 2024-04-16T07:02:43Z

@densen45 unfortunately, this change caused a regression, see #38622 (related fixes #38276 #38623).
I believe after fixing it, we won't see any performance improvements anymore :(

Dennis Schmitz added 2 commits May 9, 2023 08:23

Replace all forEach Array functions with for...of in the dom-obse…

5b931fe

…rver.js to improve the page load performance for product edit pages.

Replace all a.concat(b) calls on Arrays with a.push(...b) in the …

02c7688

…dom-observer.js to improve the page load performance for product edit pages.

m2-community-project bot added Priority: P3 May be fixed according to the position in the backlog. Severity: S3 Affects non-critical data or functionality and does not force users to employ a workaround. labels May 9, 2023

m2-community-project bot added this to Pending Review in Pull Requests Dashboard May 9, 2023

m2-community-project bot added the Progress: pending review label May 9, 2023

mrtuvn added Area: Perf/Frontend All tickets related with improving frontend performance. Area: Performance and removed Area: Perf/Frontend All tickets related with improving frontend performance. labels May 9, 2023

ihor-sviziev requested changes May 10, 2023

View reviewed changes

m2-community-project bot assigned ihor-sviziev May 10, 2023

m2-community-project bot moved this from Pending Review to Changes Requested in Pull Requests Dashboard May 10, 2023

m2-community-project bot added Progress: needs update and removed Progress: pending review labels May 10, 2023

ihor-sviziev added the help wanted label May 24, 2023

ihor-sviziev approved these changes May 24, 2023

View reviewed changes

m2-community-project bot moved this from Changes Requested to Ready for Testing in Pull Requests Dashboard May 24, 2023

m2-community-project bot added Progress: ready for testing and removed Progress: needs update labels May 24, 2023

Merge branch '2.4-develop' into improve-product-edit-pages-load-perfo…

ea8b8b9

…rmance

m2-community-project bot added Progress: extended testing and removed Progress: ready for testing labels Sep 7, 2023

engcom-Echo self-assigned this Sep 8, 2023

m2-community-project bot moved this from Extended testing (optional) to Ready for Testing in Community Dashboard Sep 8, 2023

m2-community-project bot added Progress: ready for testing and removed Progress: extended testing labels Sep 8, 2023

engcom-Echo moved this from Ready for Testing to Extended testing (optional) in Community Dashboard Sep 8, 2023

m2-community-project bot added Progress: extended testing and removed Progress: ready for testing labels Sep 8, 2023

engcom-Echo moved this from Extended testing (optional) to Merge in Progress in Community Dashboard Sep 8, 2023

m2-community-project bot added Progress: accept and removed Progress: extended testing labels Sep 8, 2023

magento-devops-reposync-svc merged commit 10d15b0 into magento:2.4-develop Oct 20, 2023
10 of 12 checks passed

engcom-Charlie moved this from Merge in Progress to Recently Merged in Community Dashboard Oct 23, 2023

Nuranto mentioned this pull request Dec 12, 2023

Fix already merged PR 37477 : After changing "foreach" to "for", the "return" broke the function logic #38276

Merged

6 tasks

m2-assistant bot mentioned this pull request Dec 20, 2023

[Issue] Fix already merged PR 37477 : After changing "foreach" to "for", the "return" broke the function logic #38305

Closed

5 tasks

LeonidTomashevskyAmasty mentioned this pull request Mar 21, 2024

re-fix PR 37477 : After changing foreach method to for method, the "return" should be replaced with "continue" #38537

Closed

5 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Improve product edit page loading speed #37477

Improve product edit page loading speed #37477

densen45 commented May 9, 2023 •

edited by engcom-Echo

m2-assistant bot commented May 9, 2023

densen45 commented May 9, 2023

magento-automated-testing bot commented May 9, 2023

ihor-sviziev commented May 10, 2023

magento-automated-testing bot commented May 10, 2023

ihor-sviziev left a comment

densen45 commented May 22, 2023 •

edited

ihor-sviziev commented May 24, 2023

engcom-Lima commented Jun 26, 2023

engcom-Echo commented Sep 7, 2023

magento-automated-testing bot commented Sep 7, 2023

engcom-Echo commented Sep 8, 2023

magento-automated-testing bot commented Sep 8, 2023

engcom-Echo commented Sep 8, 2023

magento-automated-testing bot commented Sep 8, 2023

engcom-Echo commented Sep 8, 2023

Nuranto commented Dec 8, 2023

Nuranto commented Dec 12, 2023

Nuranto commented Dec 12, 2023 •

edited

ihor-sviziev commented Dec 12, 2023 •

edited

Nuranto commented Dec 12, 2023

ihor-sviziev commented Apr 16, 2024 •

edited

Improve product edit page loading speed #37477

Improve product edit page loading speed #37477

Conversation

densen45 commented May 9, 2023 • edited by engcom-Echo

Description (*)

Related Pull Requests

Fixed Issues (if relevant)

Manual testing scenarios (*)

Questions or comments

Contribution checklist (*)

m2-assistant bot commented May 9, 2023

densen45 commented May 9, 2023

magento-automated-testing bot commented May 9, 2023

ihor-sviziev commented May 10, 2023

magento-automated-testing bot commented May 10, 2023

ihor-sviziev left a comment

Choose a reason for hiding this comment

densen45 commented May 22, 2023 • edited

ihor-sviziev commented May 24, 2023

engcom-Lima commented Jun 26, 2023

engcom-Echo commented Sep 7, 2023

magento-automated-testing bot commented Sep 7, 2023

engcom-Echo commented Sep 8, 2023

magento-automated-testing bot commented Sep 8, 2023

engcom-Echo commented Sep 8, 2023

magento-automated-testing bot commented Sep 8, 2023

engcom-Echo commented Sep 8, 2023

Nuranto commented Dec 8, 2023

Nuranto commented Dec 12, 2023

Nuranto commented Dec 12, 2023 • edited

ihor-sviziev commented Dec 12, 2023 • edited

Nuranto commented Dec 12, 2023

ihor-sviziev commented Apr 16, 2024 • edited

densen45 commented May 9, 2023 •

edited by engcom-Echo

densen45 commented May 22, 2023 •

edited

Nuranto commented Dec 12, 2023 •

edited

ihor-sviziev commented Dec 12, 2023 •

edited

ihor-sviziev commented Apr 16, 2024 •

edited