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