WordPress Cumulative Layout Shift

Hi, @akmalhakimi, what is the issue you’re trying to solve?

Kindly, you can click the link “issues”

Thanks, that clarified things ??

You should contact the theme developer to see if they can resolve this. This is not really a major issue, even though it appears as a “red” item in Lighthouse analysis reports.

The following information may be helpful to share with the theme dev to get things started:

What appears to be happening is that the size of .gdlr-core-pbf-wrapper changes when the contents of the three columns are loaded. See this animation for the frames that clearly show the shift: https://cldup.com/198j6sBLTt.gif

Thank you so much but why my website performance really affected if it’s not really a major issue ?

Have you noticed an actual performance issue, or is this inferred due to the CLS score in a PageSpeed/Lighthouse report? (I would encourage you to compare with some articles that question how important some of these metrics are.)

In the meantime, here’s a good resource on CLS: https://web.dev/cls/.

Note that CLS is a perceptual metric, not a typical “performance” metric — i.e. the loading speed of your site isn’t affected by this — loading speed is still the most important factor! Instead, a good general description of CLS is “content shifts on the page in an unexpected way”. The link above shows lots of great examples of how really bad CLS could affect site users.

However, in the case of your site (in my opinion), the shift occurs pretty far down the page, and before the 3 columns’ images/text are displayed. My conclusion is that this is not likely to result in a user reading a paragraph that suddenly moves, causing them to lose their place. The worst CLS offenses are typically async JavaScript injecting content on the page, which isn’t the case here.

Of course, if you have a client or stakeholder who is concerned about this metric, then perhaps your best option is to work with the theme developer to ensure that the height of the container wrapping those 3 columns is sized appropriately on load, so that it doesn’t expand and cause a layout shift. It can probably be addressed through a CSS update.

Good luck!