The New Google "Core Web Vitals" are out. :( How to get a better "CLS" speed

Main things that cause this is images (also iframes, ads etc) without specified dimensions. A responsive placeholder can reduce layout reshuffle. Also downloading fonts can cause reshuffle amongst other things.

well we have no ads, no iframes, and I'll have to double check but we don't use any crazy fonts, just the basics that come with generate press. Could it be that we have too many product images per page?

Hi there,

optimizing a site in general to improve performance would be the place to begin.

The priority being to reduce the number of requests being made. And the size of those requests. Which may include reducing the number of products and images to be loaded.

Further improvements such as combining CSS and JS files may help. See these tips:

https://generatepress.com/fastest-wordpress-theme/

After that look at what is causing the shift when the page is first loaded. And treat them accordingly
E.g Images - use a Lazy Loader with sized image placeholders
Sliders - Reduce the amount of slides

etc.

Most of those thing have been addressed as best as we can. We are talking about milliseconds according to google search console between passing and throwing an error. We run WP rocket and have everything turned on that we can with respect to CSS and Java, lazy load, ect... without making the site not work.

We do have some product sliders running on many pages.

It's a private VPS, with only the one site running and we have some hardware upgrade options we can add if need be.

It could be your server, but it's difficult to tell.

WooCommerce itself isn't great when it comes to performance, which doesn't help.

You could probably help performance a bit by locally hosting your Google fonts, but I doubt it will make a huge impact.

I did some poking around. What was causing the Cumulative Layout Shift (CLS) was mostly Google's reCaptacha Because that little pop out sits on the bottom right corner of all the pages.

I also found that much of the slowdown was from calls to the Google CND from one of the plug ins.

There was another schema plugin calling up Google fonts that really were not needed.

I also ditched the slider program and went with the woocommerce product blocks instead. It's still way faster with neither, but I have to have some jazzy way to display the products on the home page.

I got my desk top score up to 90%, my mobile is still in the yellow in the high 50%'s and I just can not figure out why, hopefully it will at least not flag an error in search console.

I'm still open to any ideas that can boost up the mobile score.

I do find it highly ironic that most of the issues Google has with the speed were directly related to Google products and services literally required to run a Word press site.

Looks like the biggest issue is your TTFB, which I think is likely your server. This article might help: https://kinsta.com/blog/ttfb/

Other than that, Google is saying you should defer offscreen images which is an easy one if you have lazy loading set up.

Well... At first i thought yes that is it. we got a 4200ms response from Bangkok,

But then we did another series of checks on some other web tool sites and the results for TTFB came back very good from mostly everywhere:

Frankfurt: 2.5 s
Amsterdam: 2.1 s
London: 2.2 s
New York: 1.6 s
Dallas: 1.2 s
San Francisco: 1.2 s
Singapore: 1.8 s
Sydney: 1.9 s
Tokyo: 1.7 s
Bangalore: 2 s

Personally I think it's Google itself.... Every year at the end of May they change the rules.