Optimize number js

[rogerdz]

Description (*)

• only execute js with element display in viewport
• only trigger binding with element display in viewport
• add event mousemove for execute for another js

Self test in default magento:

• number of requests reduced 20-30rq when loading page
• Total Blocking Time reduced 20-30ms on Lighthouse
• JavaScript execution time reduced 1s on Lighthouse

For more complex sites, more optimization may be possible.

Related Pull Requests

Fixed Issues (if relevant)

1. Fixes magento/magento2#<issue_number>

Manual testing scenarios (*)

1. ...
2. ...

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)

Resolved issues:

1. resolves [Issue] Optimize number js #39200: Optimize number js

[m2-assistant]

Hi @rogerdz. 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:

1. Database Compare
2. Functional Tests CE
3. Functional Tests EE
4. Functional Tests B2B
5. Integration Tests
6. Magento Health Index
7. Sample Data Tests CE
8. Sample Data Tests EE
9. Sample Data Tests B2B
10. Static Tests
11. Unit Tests
12. WebAPI Tests
13. 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.

[rogerdz]

@magento run all tests

[rogerdz]

@magento run all tests

[engcom-Hotel]

@magento run all tests

[engcom-Hotel]

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

[engcom-Hotel]

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

[Amadeco]

@rogerdz @engcom-Hotel

There is a difference in this PR between Magento version, I presume because with Magento 2.4.7-p3, your modification (lazy loading scripts below viewport) is not working anymore ?

@rogerdz Can you take a look ?

Too bad, I saw a good difference in Lighthouse score and page performance speed with your modifications applied before.

[m2-assistant]

Hi @rogerdz. Thank you for your contribution!
Here are some useful tips on how you can test your changes using Magento test environment.
❗ 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:

1. Database Compare
2. Functional Tests CE
3. Functional Tests EE
4. Functional Tests B2B
5. Integration Tests
6. Magento Health Index
7. Sample Data Tests CE
8. Sample Data Tests EE
9. Sample Data Tests B2B
10. Static Tests
11. Unit Tests
12. WebAPI Tests
13. 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.

[rogerdz]

Hi @engcom-Hotel,

I retest and still get better score in lighthouse

Without PR (test homepage with mobile device):

With PR (test homepage with mobile device):

• Number of js files loaded when no action is performed (scroll, mouse move, key press, ...):
  Without PR:
  

With PR:

When you hover over the site it will load the remaining js file, the number of js files will now be equal to when without PR

• Step before test:

1. Run command: php bin/magento setup:static-content:deploy --refresh-content-version-only -f
2. Run command: php bin/magento cache:clean
3. Open chrome in private mode, load homepage
4. Open lighthouse and test

[engcom-Hotel]

@magento run all tests

[engcom-Hotel]

Hello @rogerdz,

Thanks for retesting the issue at your end!

We have tried again to test this, but the lighthouse returned a similar report with or without PR. Please refer to the screenshot below:

Without PR

With PR

But the number of JS with PR has been improved, please refer to the below screencasts:

Without PR
https://github.com/user-attachments/assets/f4a25d67-9fe4-4f2b-a0ea-2fc11fa21a3f

With PR
https://github.com/user-attachments/assets/c4329172-f316-43af-a8a9-1d2a0098198e

Please let us know if we missed anything in order to perform the testing, we have followed the below steps:

• Run command: php bin/magento setup:static-content:deploy --refresh-content-version-only -f
• Run command: php bin/magento cache:clean
• Open chrome in private mode, load homepage

Thanks

[rogerdz]

@engcom-Hotel: don't know why your score is low ?
Maybe you have any chrome extensions enable in private mode, if so please disable them.
After clean cache, you should load page to save in full page cache before test with lighthouse

[engcom-Hotel]

Hello @rogerdz,

I retested this PR but changed the mode to production this time. This time the result seems better to me for desktop but for mobile devices LightHouse is similar with or without PR. Please refer to the below screenshots:

Without PR Desktop Lighthouse

With PR Desktop Lighthouse

Without PR Mobile Lighthouse

With PR Mobile Lighthouse

Please check with mobile devices.

Thanks

[rogerdz]

@engcom-Hotel seem it still optimize.
Can you compare Total Blocking Time and JavaScript execution time ?

[engcom-Hotel]

Hello @rogerdz,

We have checked the Total Blocking Time for both the 2.4-develop branch and this branch, but it is showing 0 MS for both. Please refer to the below screenshots:

Branch 2.4-develop

Branch requirejs-optimize

Please let us know to get the total JavaScript execution time have you used any extensions?

Thanks

[engcom-Hotel]

Hello @rogerdz,

Have you had a chance to look into this #39132 (comment)?

Thanks

[rogerdz]

Hi @engcom-Hotel,
I checked again and result still same as #39132 (comment).
Can we test on https://pagespeed.web.dev ?

[engcom-Hotel]

@magento run all tests

[engcom-Hotel]

Hello @rogerdz,

We have rechecked this PR on https://pagespeed.web.dev/ and we are still getting similar results:

Without PR Changes: On Mobile Device

Without PR Changes: On Computer

With PR Changes: On Mobile Device

With PR Changes: On Computer

We have followed the same steps as mentioned here #39132 (comment).

Please let us know if we missed anything.

Thanks

[engcom-Hotel]

Hello @rogerdz,

Have you got a chance to look into this #39132 (comment)?

Thanks