Magento 2 Luma top menu loads very slow

cptX commented 5 months ago

Preconditions and environment

Magento version 2.4.6
Anything else that would help a developer reproduce the bug

Steps to reproduce

Load the home page in Luma theme from a pc. You will notice that the menu is ready for clicking only after everything is loaded in the page. If you have many images or other stuff in the front page and in a very slow connection this is significantly noticeable and gives the feeling of a very unresponsive and slow site.

Expected result

Menu should be ready immediately after the first page draw.

Actual result

Top Menu loads very slowly because it is javascript dependent and its javascript is probably loaded at the end of the page.

Additional information

I don't understand why the top menu is javascript dependent in Luma Theme? It is so simple that it should be pure html and php, we don't need js at all here. Also, the corresponding js probably loads after everything else in the page making the menu very unresponsive and slow. Any suggestions to make it pure html?

Release note

No response

Triage and priority

[ ] Severity: S0 - Affects critical data or functionality and leaves users without workaround.
[ ] Severity: S1 - Affects critical data or functionality and forces users to employ a workaround.
[X] Severity: S2 - Affects non-critical data or functionality and forces users to employ a workaround.
[ ] Severity: S3 - Affects non-critical data or functionality and does not force users to employ a workaround.
[ ] Severity: S4 - Affects aesthetics, professional look and feel, “quality” or “usability”.

m2-assistant[bot] commented 5 months ago

Hi @cptX. Thank you for your report. To speed up processing of this issue, make sure that the issue is reproducible on the vanilla Magento instance following Steps to reproduce. To deploy vanilla Magento instance on our environment, Add a comment to the issue:

@magento give me 2.4-develop instance - upcoming 2.4.x release
For more details, review the Magento Contributor Assistant documentation.
Add a comment to assign the issue: @magento I am working on this
To learn more about issue processing workflow, refer to the Code Contributions.

Join Magento Community Engineering Slack and ask your questions in #github channel. :warning: According to the Magento Contribution requirements, all issues must go through the Community Contributions Triage process. Community Contributions Triage is a public meeting. :clock10: You can find the schedule on the Magento Community Calendar page. :telephone_receiver: The triage of issues happens in the queue order. If you want to speed up the delivery of your contribution, join the Community Contributions Triage session to discuss the appropriate ticket.

m2-assistant[bot] commented 5 months ago

Hi @engcom-Delta. Thank you for working on this issue. In order to make sure that issue has enough information and ready for development, please read and check the following instruction: :point_down:

[ ] 1. Verify that issue has all the required information. (Preconditions, Steps to reproduce, Expected result, Actual result).
[ ] 2. Verify that issue has a meaningful description and provides enough information to reproduce the issue.
[ ] 3. Add Area: XXXXX label to the ticket, indicating the functional areas it may be related to.
[ ] 4. Verify that the issue is reproducible on 2.4-develop branch
Details
- Add the comment @magento give me 2.4-develop instance to deploy test instance on Magento infrastructure.
- If the issue is reproducible on 2.4-develop branch, please, add the label Reproduced on 2.4.x.
- If the issue is not reproducible, add your comment that issue is not reproducible and close the issue and stop verification process here!
[ ] 5. Add label Issue: Confirmed once verification is complete.
[ ] 6. Make sure that automatic system confirms that report has been added to the backlog.

engcom-Delta commented 5 months ago

Hi @cptX ,

Thanks for reporting and collaboration.

Verified the issue in magento 2.4-develop instance and the issue is not reproducible.

Steps to reproduce:-

1.Add many images, videos and other stuff in the front page 2.Load the home page in Luma theme from a pc. 3.Verify if the loading is very slow and gives the feeling of a very unresponsive and slow site.

Its not significantly noticeable, magento with without videos. images, banner, slider has the same loading time as magento without anything.

In the video 1st i am showing loading of magento without anything, in the 2nd it has many thing on home screen

https://github.com/magento/magento2/assets/51681379/1f8e1b42-6480-4e4c-85ca-294686837b4b

cptX commented 5 months ago

Probably you didn't get my point. The issue is that the top menu is javascript based and is slow loading after the whole page is finished. In your video you should focus on the top menu and wait to see when the drop down arrows will be visible and available in the top menu. Then you will realize that they are slow, the menus not the whole page. Your video is just scrolling down so it doesn't show my point.

I'll send you a video in the next days from a slow computer to show you the issue.

engcom-Delta commented 5 months ago

Hi @cptX ,

Thanks for reporting and collaboration.

Can you send the video evidence that you have mentioned above ,to speed up the process in this issue.

Thanks,

cptX commented 5 months ago

Hi, I'm uploading here the video that shows that the top menu is ready only after several seconds and after the full load of the page, leaving the menus unusable during this time, in a slow machine or in a slow connection. The video you see is through a 100Mbps connection but on a slow dual core machine. It's clearly visible that several seconds are required in every page load until the top menu is usable...

You can test yourself here: https://electrons.gr

https://github.com/magento/magento2/assets/9040042/03708d9c-aeed-4872-a004-96716311772e

engcom-Delta commented 5 months ago

Hi @cptX ,

I have checked your video attached , but it is not related to magento core.However i have checked the link you have shared and i didn't find any slowness although i am using 60 mbps internet.

Can you let us know the detailed steps to reproduce and any other setting required to confirm this issue.Also let us know if this issue is about core magento or websites created using magento.

Thanks,

engcom-Hotel commented 5 months ago

@magento give me 2.4-develop instance

magento-deployment-service[bot] commented 5 months ago

Hi @engcom-Hotel. Thank you for your request. I'm working on Magento instance for you.

magento-deployment-service[bot] commented 5 months ago

Hi @engcom-Hotel, here is your Magento Instance: https://f5a9c356f02266b44fcd9eb2e069ae95.instances-prod.magento-community.engineering Admin access: https://f5a9c356f02266b44fcd9eb2e069ae95.instances-prod.magento-community.engineering/admin_8b42 Login: d6da931c Password: 9729deb6ee3b

engcom-Delta commented 5 months ago

Hi @cptX ,

I have checked with magento test instance and the issue is not reproducible.It is not taking that much time to load

Attaching the video for your reference.

https://github.com/magento/magento2/assets/51681379/55d339d9-41f6-4e45-bc07-049acdbc74c1

cptX commented 5 months ago

Hi @engcom-Delta, I think the problem is mainly depending on the slow CPU than the slow connection. The top menu is javascript based so it requires good CPU to load. At the moment my test happened with AMD Athlon(tm) 64 X2 Dual Core Processor 5600+ which is a very old pc. My connection is 100Mbps. I'm using Luma theme customized, but I don't think my customizations affected this... I just ran the same test on the test instance you provided and I saw exactly the same slow behavior on my pc, so this proves that depends on CPU and also is not affected by my theme customizations. So the question is why this top menu requires a fast CPU to be responsive, and why is it loading at the end of the page?

I don't consider the current implementation acceptable...

engcom-Delta commented 5 months ago

Hi @cptX ,

We have again checked on magento instance by setting the network to slow 3G.

After flushing the cache on the magento instance , when we have refreshed the local instance , the top menu's are only available only after full load of the instance.

Attaching the screen recording for your reference.Please confirm if you are talking about this issue.

https://github.com/magento/magento2/assets/51681379/c75c1f91-27bd-4572-aac1-29d40b1efabe

cptX commented 5 months ago

Hi @engcom-Delta, in my last post I underlined that the problem is mainly CPU dependant and not so network speed dependant. You are testing with slower network speed and fast processor and not with CPU throttling. Of course with Network throttling you will realize too that the top menus are loaded very late during the page load, which in my eyes is not optimal because the user cannot interact with the page if not all elements are loaded. Also in your tests you should always check the "Disable Cache" option, because if you don't do this what is the point of setting the speed connection to slow... Please repeat your test with CPU throttling and disable cache. In Google Chrome go to Dev Tools > Performance tab and select CPU 6x slowdown. If you want you can add from the same tab network throttling too. PCs and mobiles are nowadays fast but this hides the real problem of the magento/luma implementation, which loads the top menus at the end of the page and very slow. Also in my opinion these menus could be completely html/css based, without any js need...

cptX commented 5 months ago

Just for your information I just discovered another report referring to the same issue here https://magento.stackexchange.com/questions/347524/magento-2-mobile-navigation-menu-respond-too-late

Issue is that the Top Menu js files are loaded very late in page load. They should be loaded closer to the start. This also can affect Google Web Vitals...

engcom-Delta commented 5 months ago

Hi @cptX ,

Verified the issue on 2.4-develop, it is reproducible.

Hence, Confirming the issue.

Preconditions:-

1.In Google Chrome go to Dev Tools > Performance tab and select CPU 6x slowdown. 2.In network throttling select slow 3G.

Steps to reproduce:-

1.Add many images, videos and other stuff in the front page 2.Load the home page in Luma theme from a pc. 3.Verify if the loading is very slow and gives the feeling of a very unresponsive and slow site.

Top Menu loads very slowly

https://github.com/magento/magento2/assets/51681379/397808d0-173c-4e70-90a6-b1f71e327b29

github-jira-sync-bot commented 5 months ago

:white_check_mark: Jira issue https://jira.corp.adobe.com/browse/AC-12091 is successfully created for this GitHub issue.

m2-assistant[bot] commented 5 months ago

:white_check_mark: Confirmed by @engcom-Delta. Thank you for verifying the issue.
Issue Available: @engcom-Delta, You will be automatically unassigned. Contributors/Maintainers can claim this issue to continue. To reclaim and continue work, reassign the ticket to yourself.

github-jira-sync-bot commented 5 months ago

:x: You don't have permission to export this issue.

magento / magento2