-
Posts
-
So we have used enfold for years, and we are working toward getting past google search console errors and right now our page speed is good at 91% most of the time or above, and we have structure at 93% and LCP is usually green. What we struggle wit is the CLS shift it says we have.
We have tried a variety of things with the site.
1. Turned on and off lazy load in enfold, no effect.
2. Turned off and on lazy load via wp rocket, no effect
3. removed all page animations with no effect
4. Tried to remove beginning banners, top content, working our way down the page, no effect.What we see is this <div id=”main” class=”all_colors” data-scroll-offset=”0″> in the gtmetrix as a CLS contribution of .22 and yet we even edited header to remove data-scroll-offset, doesn’t matter.
If we start removing say the initial fullwidth slider and just have text header, this CLS error still points to it as the issue, so it doesn’t matter which module we add or remove from our page, we just keep getting this div tag as the leading CLS contributor in the process.
We have read a bunch of previous threads on here, but none really give full solution as I”m sure it’s pretty unique to each site, but this one is pretty solidly pointed as a CLS issue with this main div tag.
Hey Josh,
Thank you for the inquiry.
Layout shifts are usually caused by scripts that dynamically adds content or other elements in the page, and animations that causes existing containers to move. Removing those scripts or decreasing their occurrence should improve the CLS score.
We ran a test using page speed insights tool and it returned very low scores on a lot of criteria, but found a lot of opportunities for optimization. CLS at this moment, should be the least of your concern.
Screenshot: https://imgur.com/m4CCvjN
For more info about site or WordPress optimization, please check the following articles.
// https://gtmetrix.com/wordpress-optimization-guide.html
// https://kriesi.at/archives/scoring-100-100-in-google-pagespeed-insights-gtmetrix-pagespeed-and-yslowBest regards,
IsmaelIsmael:
We understand what layout shifts are, and the response of is a bit ridiculous… ‘CLS at the moment, should be the least of your concerns…’ That’s pretty terrible support response.
1. We use another tool and GTmetrix is giving us 95% across performance and structure, and so is pagespeed at 88% for desktops.
2. We didn’t ask you to analyze mobile, we are concerned with CLS and this main div tag. If you could stay on topic and not tell us to worry about it because of another issue.It’s ok to say you don’t know why this main div tag is continuously showing CLS issue. We have a help tag from Zendesk that shows as .92 CLS score contributor, but even with removed, we get this CLS shift on the ‘id=main’ div element of .22. We can also remove all animation, all full width banners, and we still get that .22 CLS contribution from the div. So it’s not even attached to a certain page layout or module, but rather the main element.
Again, if you don’t know, then maybe someone else can be more helpful than your initial response…
Hi,
Thank you for the update.
Based on our initial test, as you can see in the screenshot above, the site scored poorly on mobile, so we just thought that you should focus on optimizing the site first instead of focusing on the CLS score. We did not mean that you should ignore CLS completely. We did not check or test it on gtmetrix though. And yes, unfortunately, we are not yet sure what is causing the layout shifts in the front page aside from the image animations on every section. We will keep the thread open.
Best regards,
Ismaelany update on this? we have every page in Poor category for one reason, and it’s CLS with search console? All we really use is enfold modules and it seems to bounce around, but we rendered the layout shift regions, even the top menu shows layout shifts? most text elements, special heading elements, image elements, almost every module keeps showing layout shift issues?
We were in the Needs Improvement category, but recently now are all in the Poor region, even though we are scoring some pages very high in lightspeed. and what’s more strange is search console shows CLS shifts in the average of .33 while we run lighthouse and see CLS shifts at .05 or something really low and green.
Hi,
Looks like the biggest contributor to CLS is the container with the pricing container, but it is not the pricing element itself that is causing the layout shift. Please disable all animation inside the section including the animation of the icon at the very bottom.
We can also apply a minimum height to the section to prevent the content from affecting it but you have to apply a custom css class name or ID to the section first.
@media only screen and (max-width: 767px) { #section-id .av-section-color-overlay-wrap { min-height: 2345px; } #section-id .pricing-table li.avia-pricing-row { min-height: 83px; } }Replace “section-id” with the actual ID of the color section. This should set a minimum height to the color section and the pricing row.
Best regards,
IsmaelSo I did try removing that icon animation, but our CLS still is .5 for the whole page… and really for all our other 45 pages… I was going to try the targeted CSS here, but this is a @media targeting only mobile correct? We are working on CLS issues with Desktop in mind right now…
I’m just not sure what it would be, it seems like something global on the theme is causing this, we run enfold on another site, almost same settings and it doesn’t have the issue. We’ve removed all our CSS styles everywhere we personally added and it didn’t’ effect it, we even tried a blank page with just the header and footer and still get some CLS issues on it. Maybe it’s a font load issue?
We tried switching out fonts to differnet ones, defaults as well with no luck.
Right now we are focusing on just one page: https://www.wpeasycart.com/wordpress-shopping-cart-pricing/ but it’s on every page, they all score POOR CLS on every page and in search console.
Hi,
Did you actually try the css code? We cannot find it in the document. Applying a minimum height or specifying the height of the element manually should prevent the next elements from shifting, thus improving the CLS score. For desktop view, you can add this css code to define the height of the pricing row, which seems to be shifting a bit when the font swapped.
li.avia-pricing-row { min-height: 83px; }Best regards,
Ismael
- You must be logged in to reply to this topic.