Browser: Chrome 110 Mobile / Safari / Mozilla
OS: macOS / Windows / Linux /
URL: https://staging.project85.ro
Video: Jam
When adding a nav menu with two dropdowns, there is visible CLS on page load. This happens both with inline styles and without.
Hi,
Welcome to the forum, and thanks so much for your report!
First of all, the performance values for the website are pretty good, and Lighthouse is not criticizing anything in connection with the navbar or the menus.
Nevertheless, your navbar seems to have one or the other problem, which could possibly lead to this effect. I would therefore ask you to gradually remove the elements and/or styles to see if and how it improves.
Best regards,
timmse
Hello @timmse and thank you for your reply!
I tried removing each element separately, and the CLS goes away only after I remove the menu / dropdowns.
We are currently on a very weak staging environment, so the performance indicated by lighthouse will get better, but it’s interesting how it’s not picking up the CLS itself.
Nevertheless, it is very visible upon reloading, or during the first load. We do not have caching enabled, and we are using external files for CSS.
The only thing I notice by eye is that the search field changes when loading, which may cause the menu to shift briefly, and that you may need to specify sans-serif fallback fonts such as Arial, Helvetica, sans-serif, so that you don’t switch from serif font to sans-serif custom font.
Hello @timmse
I removed the search bar completely, and the issue persists. I also applied @swap to font-display
