Archived topic
Menu item
7 replies · Started by Dong on July 18, 2022
Hi guys,
My site's main nav's items keep shuffling around each time I click on different items. Can you please help? I've done all sorts of things including making exceptions for lazy loading for the logo etc.
the site is at
dongknows.com
Just click around the menu you'll know what I'm talking about.
-Dong.
Hi Dong,
Tried replicating the issue from my end, but couldn’t do so.
See here: https://share.getcloudapp.com/geuR1L1K
Is there a step I’m missing to replicate the issue?
If there isn’t, can you try using a different browser or a different device to test? It might just be a local caching issue.
Kindly let us know.
It happened in your vid, Fernando. Basically the logo and other items moved around very quickly —- they changed their physical sizes — causing the page to move around, or flash, briefly.
Hi Dong,
I see. Sorry for the misunderstanding, I thought your were referring to a change in order of menu items.
I can see the issue more clearly using a slow network: https://share.getcloudapp.com/OAu87YWY
It seems that it’s FOUT - Flash of unstyled text. The font isn’t loading fast enough even though it’s already preloaded and hosted locally.
Might be server related. Even though it’s preloaded and served locally, the server is still the one in charge to serve the fonts.
To be sure, can you try temporarily disabling your caching/optimization plugins and see if there will be a change.
Kindly let us know.
It seems the site has this crazy CLS on the entire site at the beginning:
Here's the link for the test:
https://pagespeed.web.dev/report?url=https%3A%2F%2Fdongknows.com%2F&form_factor=desktop
I'm not sure if all of that is font-related. Basically, the entire page starts up very small and then expands to the regular size.
There are also other elements that behave similarly.
This doesn't happen with every single test but it happens quite often. Can you please check?
I'm not too obsessed about the site speed, but the flash change in the layout of the page is quite annoying sometimes.
Thanks,
-Dong.
Yes, you seem to be correct. The CSS file seems to be loaded a bit late. It’s among the last loaded files. This probably causes the FOUT too. Do you have a CDN? Perhaps you can try using a CDN to serve the CSS files faster.
We’ve had one customer saying she used this and it helped in terms of JS and CSS delivery: https://restorebin.com/free-cdn-css-js/
Kindly let us know how it goes.
Thanks, Fernando.
I tried that -- the new CDN plugin is in and I also remove CSS-related optimization. The CLS issue remains. :(
Hi there,
the film strip in this test will help you identify the cause of the CLS:
https://www.webpagetest.org/video/compare.php?tests=220719_BiDc9A_8PP-r:1-c:0&highlightCLS=1
In the first frames you can see that the Navigation menu is wrapping to two rows, which looks related to the menu being loaded without its styles, later on the styles do load and the navigation reduces to one row.
You can:
a. track down what optimizations that are causing the styles to load later.
and / or
b. make your inside navigation wider, so the menu items have more room. so if you have a flash of styles changing it won't cause the vertical layout shift.
