Magento 2 Luma top menu loads very slow

[cptX]

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.
• 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]

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.
⚠️ According to the Magento Contribution requirements, all issues must go through the Community Contributions Triage process. Community Contributions Triage is a public meeting.
🕙 You can find the schedule on the Magento Community Calendar page.
📞 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]

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: 👇

• 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]

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

Screen.Recording.2024-05-17.at.8.mp4

[cptX]

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]

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]

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

magento_slow_menus_01-2024-05-30_10.12.13.mp4

[engcom-Delta]

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]

@magento give me 2.4-develop instance

[magento-deployment-service]

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

[magento-deployment-service]

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]

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.

Screen.Recording.2024-06-03.at.8.mp4

[cptX]

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]

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.

Screen.Recording.2024-06-04.at.1.mp4

[cptX]

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]

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...