Archived topic
Cumulative layout shift from 0 to 0.64 in the last few days
7 replies · Started by Carlo on August 5, 2021
Hi there,
please see the urls in the private window. This website's core web vitals used to be fine until few days ago. Now I notice a huge increase of the CLS from 0 to 0.64.
From the video in gtmetrix I can guess it is caused by the huge shift in the menu and maybe the logo has something to do with it too.
I don't recall I did any changes there and I cannot understand why it appears now.
Can you help me fix it?
Thank you. Carlo
Hi there,
You fonts have the font-display: swap attribute being applied. Which means the browser will display its system font ( first frame in the GTMetrix film strip ) whilst the google font is downloaded, which then changes the layout of the menu asd the system font is wider then the google font.
Try disabling the Font Display Swap on the font to see if that resolves the issue.
Hi David,
Thank you for your reply.
I have tried disabling that option. The result is the same layout shift but this time with no text shown until the Google fonts are loaded. (see new gtmetrix link in the private info window).
Please consider as a further note that the fallback fonts option has been on for weeks with no layout shift effect.
Could it be something in my style.css that changes the width of the menu elements? (it would be odd anyway, since it's not a recent change too).
In this case would it be possible to set it directly in gp pro settings instead of waiting for the custom css to be loaded?
What else could be?
Thank you. Carlo
So the other issue, is the CSS for the logo sizing is loaded after the image has been displayed.
You will need to check with the optimization plugin author how to make sure that CSS is loaded first.
Hi David
I have checked with the caching plugin excluded.
There is a query string to do that. Please see the private info window.
As you can see, the CLS issue is still there. The cause is that the menu items at first go on two rows and eventually are adjusted to 1 row (one row is the correct result expected).
Thank you again. Carlo
I ran a PSI and Dev tools performance test on the site, with and without the no_optimize and neither of them are showing any CLS issues related to the logo / navigation anymore.
And also just tested it on GTMetrix, and again no CLS.
I assume you fixed it ?
I've temporarily fixed it reducing the font size for laptops (style.css file,up to 1366px width) by 1px.(from 14 to 13px)
My guess is that until Google fonts are loaded, and then the space of the menu strings taken by the actually width that that specific Google font "needs", the theme is calculating a needed width larger than the actual final one.
If we could avoid or fix this first step, I could set the font size back to 14px.
Do you think this is possible?
The font resizing will be nothing to do with the theme.
The two main causes are:
1. The font display swap - mentioned above:
https://generatepress.com/forums/topic/cumulative-layout-shift-from-0-to-0-64-in-the-last-few-days/#post-1884680
2. An Optimization plugin changing the loading order of the CSS.
If neither of those can be changed (?) then you can try:
1. Giving the menu some more room.
a) reduce the font size as you have
b) reduce the menu item width
c) reduce the left and right padding in the header.
2. Improve the font loading speed by serving the fonts locally:
https://docs.generatepress.com/article/adding-local-fonts/
