- This topic has 44 replies, 6 voices, and was last updated 2 years, 5 months ago by Elvin.
-
AuthorPosts
-
September 12, 2021 at 5:19 pm #1928179ElvinStaffCustomer Support
Hi ETO,
Looking directly at the site, the most obvious cause of CLS is the ads. Specifically, the ad slot before the entry-content.
Check this screen capture – https://share.getcloudapp.com/lluoXJ5z
When I refresh the page, on initial page load, the ad doesn’t immediately load. When it loads, you can see that the content shifts down because it’s being pushed down when the ad fully loads.
That said, I’d suggest trying to find a way to make the ads load faster. Or at least, try to know the size these ads occupy and load their CSS early so the space for the ads is “reserved” so when they load, they don’t shift the elements around them.
September 12, 2021 at 8:03 pm #1928281TomLead DeveloperLead DeveloperIn addition to the above (nice find, Elvin!), if you believe it’s your CSS I would narrow down which part of the CSS is causing the issue (removing bit by bit). That may help really nail down what’s going on.
September 12, 2021 at 9:39 pm #1928320ETO@Elvin, there is no effect of the ads on the CLS because the ads are delayed and only load on mouse hover. You can see in the video I sent that although I disabled the ad and then tested the page speed, there is no change with the CLS.
Moreover, I have another live site with the same settings except for the custom additional CSS and there is no CLS issue.
As far as I can see and you can also see in the videos and links I sent you, the cause of CLS is that I use the left sidebar and when sites load, it first loads the sidebar and then the main content. I am not sure if I expressed it correctly.
So could you please have a closer look at my additional CSS and think if using a left sidebar cause such an issue.
September 13, 2021 at 7:56 pm #1929570TomLead DeveloperLead DeveloperHere’s one thing you can try:
.left-sidebar .site-content { justify-content: flex-end; }
Let me know if you notice any difference 🙂
September 14, 2021 at 10:25 am #1930515ETOThanks a lot, Tom. After adding that code, the CLS problem finally disappeared, which proved that I was right about the cause of the problem.
Will you add this piece of code to the core codes in the next update?
September 14, 2021 at 8:15 pm #1930847TomLead DeveloperLead DeveloperWe’ll need to test this quite a bit to prevent it from causing any issues with existing sites. 3.1 is currently in alpha, so I’m not sure it will make it in this version.
If not, we’ll be sure to test and implement it in 3.2. You’re 100% safe to keep the custom CSS as is and remove it once we do add something similar to the theme.
Thanks!
September 22, 2021 at 10:58 pm #1939880ETOHi, @Tom
Now CLS issue appears only on mobile with this warning:<main id="main" class="site-main">
and as far as I can see the CLS problem is only on the homepage, which I created using the GenerateBlocks plugin.Could you please have a look at it?
September 23, 2021 at 5:05 am #1940188DavidStaffCustomer SupportHi there,
i tested the home page on mobile and got this result:
ie.
0
CLS on Lab Data.Things to note. Lab Data results are only measured on Site Loading.
Field Data is captured from CRUX ( Real User Experience ) so will measure CLS that occurs after the site has loaded and the user is scrolling/navigating the site. Any element that gets injected, removed or expanded that was not Triggered by a valid User input such as clicking a toggle will register CLS. Note: Hover events are not counted as valid user inputs.First issue:
1. The advert that Elvin mentions is loading later and shifting the #main container down.
2. You have a slide down advert container ( slide up on desktop ) this is registering CLS.So on Load there is no CLS, but field data will collect CLS events because of those two events.
September 23, 2021 at 5:13 am #1940195BasI’ve had the same problem, the Google Ads were the problem. Install the Flying Scripts plugin to defer the loading of the Adsense block with a few seconds, see if that helps.
September 23, 2021 at 1:26 pm #1940890ETOThank you, David. I see what you mean. Actually, I reserve space for Adsense ads in order to prevent CLS.
According to this post, I use the codes below:
<div id="ad-slot" style="min-width: 300px; min-height: 250px;">Adsense code...</div>
@media screen and (max-width: 960px) { #ad-slot { min-height: 100px; } }
Despite reserving space with the codes above, I do not know if there is anything else I can do to fix the problem caused by the two events you mentioned.
By the way, would you mind removing my site’s link as I do not want it to be public?
I’ve had the same problem, the Google Ads were the problem. Install the Flying Scripts plugin to defer the loading of the Adsense block with a few seconds, see if that helps.
I have already used the Perfmatters plugin to delay ads. Thanks anyway.
September 24, 2021 at 4:08 am #1941299DavidStaffCustomer SupportURL removed 🙂
You can try increasing the min-height of the ad-slot container so there isn’t a noticeable change in height when the advert loads.For the slideup/down advert banner – several other users were experiencing high CLS because of them. The only solution was to remove them.
September 24, 2021 at 4:41 am #1941327ETOThanks a lot.
September 24, 2021 at 6:33 am #1941446DavidStaffCustomer SupportYou’re welcome
October 26, 2021 at 10:44 pm #1977237ETOWe’ll need to test this quite a bit to prevent it from causing any issues with existing sites. 3.1 is currently in alpha, so I’m not sure it will make it in this version.
If not, we’ll be sure to test and implement it in 3.2. You’re 100% safe to keep the custom CSS as is and remove it once we do add something similar to the theme.
Hi, there!
Has this issue been fixed with the last update?October 26, 2021 at 11:38 pm #1977327ElvinStaffCustomer SupportHi there,
Are you pertaining to the CSS Tom provided here? https://generatepress.com/forums/topic/cls-issue-on-desktop-2/page/3/#post-1929570
If so,
I checked the GP theme and GPP plugin files and I didn’t find it implemented on the latest version (3.1.0).
It’s likely going to be implemented on 3.2 as Tom mentioned on his reply. 😀
-
AuthorPosts
- You must be logged in to reply to this topic.