[Support request] Bad Core Web Vitals

[Sonja]

Hello,

In the Search Console, all my Desktop URLs have Bad Core Web Vitals. The mobile pages have good web core vitals.

What can I do, to turn the desktop URLs too good web vitals?

I have WP-Rpcket, but no lazy loading and only css minify.

[David]

Hi there,

few things to be improved. One of the major issues is the Image sizes in your Blog.
If you go to Customizer > Layout > Blog –> Featured Images >> Archives.
Set the Media Attachment size to Medium and remove the Width value.

Let us know after that change is made.

[Sonja]

Hi David,

I have looked into that. There was no width value.

I have set the media attachment size to medium.

And now they have smaller size in archives. That is good. I did not know, that this was possible with this setting. Is this a new feature?

And do you think, that the image size on archives has something to do wit the bad core web vitals score?

Because all the errors are CLS Errors, according to google search console.

[David]

OK – thats good , and yes we updated featured images in GPP 1.10:
https://generatepress.com/gp-premium-1-10-0/

Changing it to medium will make them load quicker and they no longer require CSS which can affect CLS.

Next step is the WPSP block in the hero – there creating some shift.
Simple fix is to give the Hero a min-height with this CSS:

.tvhero {
    min-height: 141px;
}

[Sonja]

Hi David,

okay, I set the css, that you provided. I did not noticed any changes. But of course I trust your advice, that this does soemthing right 🙂

I have a question to the former topic. How did GPP or WP know the right image size with this “medium” setting fot the archive images?

I mean the pics looks exactly as before, but now they have the exact rigt size and the browser does not have to scale them down. This is perfect.

Is this medium setting a specific size, that fits accidentally right? Or how does that magic works?

As an exampe: I mostly load images in WP withthe size 1024 x 576. This is also my featured image. In the archive this image is with the medium setting now 300 x 169. But i did not make any setting, where this size is selected.

EDIT:
But now I have an issue with this “medium” setting. Because if I make the browser window smaller, then the archive images are to small. Also on mobile. With the former settings, they adapt exactly on the nedded size, But not anymore.

This looks bad in my opinion. What to do about this?

[Tom]

Hi there,

The medium size is set in Settings > Media – it’s likely just a coincidence that it matched exactly.

The images are now that width (300px wide), so they will display at that width no matter what and may appear too small on tablet/mobile.

The only solution here is to load a larger image and use CSS to size it down on desktop. That way the larger image will display on tablet/mobile. Doing this isn’t great for performance, as the larger image needs to be downloaded.

Let us know if you need the necessary CSS 🙂

[Sonja]

Hi Tom,

normally i do it like this: I upload an 1024 x 576 Image in my post and also set this image as featured image.

I think on marketer site, you do pretty much the same.

So it is always in the correct size on every device. But I never use a special css for that. So I am not sure, what you mean with “necessary CSS” for that.

[Tom]

Yes, so using an image that big will look good on all devices, as it’s wide enough to fill the available space regardless of the screen.

However, it’s not great to load an image that big if it doesn’t have to show as that size. You basically want to use an image that is as wide as necessary – no wider.

Your images are now 300px wide, which is great for performance and for the desktop look. However, if your device is 700px wide and the image is set to display full width, it’s not going to fill the entire 700px space. So, your image should start out as 700px wide (or whatever) and you should use CSS to resize it down where needed.

Let me know if that makes more sense or not 🙂

[Author]

Posts