[marfert]

Hi,

I am aware that performance much increased throughout the last months of theme updates, thank you for that!

But there are two layout shifts while loading pages that keep me from getting good marks in terms of Googles Core Web Vitals.

1. First is that some paddings or margins seem to be applied to the page after the first contentful paint is reached. This causes the headline and the following elements to be slightly jumping.

(how to reproduce: open https://bayze.de/yfood/, in Chrome Dev Tools go to the tab Performance, click Start profiling and reloard page, then in the results under “Experience” click the first red block)

2. The second and bigger CLS issue is that the whole div#container is moving from [0,0] to [0,96]. It seems that it has to do with the way the sticky header is rendered.

(how to reproduce: as in 1 but in the profiling results under “Experience” click the second red block)

It would be great if this could be solved in a future update of the theme or if there would be a quick fix I could apply. Thank you in advance!

[Althemist]

Hello marfert,

Not all layout shifts can be avoided. Some of them are related to the way WP Bakery work (it calculates sizes on the fly) and some of them would depend on your font choices and many other reasons. Basically, there is no way to have layout shifts close to the recommended by Google values if not using simple system fonts and simple HTML.

On this particular page you have 12 progress bars moving (shifting) after the page is loaded as they are controlled by JS and CSS. The font itself is causing a shift, because it have several different font weights. You have images with original size of 1024 px resized by the browser to 595 etc., etc.

Basically the lighthouse recommendations are just this – recommendations. The only thing that’s really important is the total loading time (TTFB, Time To Interactive and Fully Loaded). CLS is just one of the ways to reduce total loading time IF needed. 🙂 As far as I can see your site is pretty fast even now with the unnecessary big images, so there is nothing to worry about.

Here is a test that shows CLS on your site is within the recommended values (0,08 which is less than 0,1)

https://gtmetrix.com/reports/bayze.de/1resElYw/

Best regards,
Dimitar

[marfert]

Hello Dimitar,

thanks for your quick and elaborate answer, I really appreciate it.

The CLS really is only a problem on mobile devices. I understand you don’t consider this a big deal. But on desktop devices all our pages are viewed as “good” by Google Search Console, while on mobile all pages are considered “to be optimized”. And the only thing that is holding us back is the CLS issue.

A lower CLS does not make the page load faster, but it creates a better user experience and that is why Google will also take the CLS into account for ranking of web pages. (“Page Experience Update” that Google will slowly roll out beginning in May 2021)

So yes, even if the site already loads relatively quickly, we still have the CLS issue. So if you see any chance to get rid of the layout shifts I outlined above that would be great.

In the end this would make your them “Core Web Vitals” proof which would also be a great selling point for your theme.

Thank you.

Best regards,
Markus

[Author]

Posts