CLS Shift Above the Fold

Hi there,

Can you try adding this PHP snippet?

add_filter( 'generate_google_font_display', function() {
    return 'swap';
} );

Here's how to add PHP codes - https://docs.generatepress.com/article/adding-php/

For other CLS issues:

You seem to be using WP Show Posts. Can you edit its WPSP list setting so there's no image height and width values assigned to its post thumbnail? this causes the "Image elements do not have explicit width and height" flag on Google PageSpeed Insight and can contribute to CLS.

If I may suggest:

I recommend using a caching/optimization plugin to improve this further.

Hi Elvin,

When I remove the height and width in the images in Show Post, they show up as differently sized on the page (see below).

What is the fix to have them all show up the same size?

Thanks!

Hi there,

you can try adding this CSS:

@media(min-width: 768px) {
  .wp-show-posts-columns .wp-show-posts-single:not(.wp-show-posts-masonry-block) .wp-show-posts-image img {
    height: 200px;
    width: 100%;
    object-fit: cover;
  }
}

However this may cause the same issue you were having previously. The ultimate fix is to always upload the same sized images.

Elvin,

What does the PHP snippet you suggested do?

I changed my font to System Stack for everything: body, heading etc. I am still getting this render-blocking services error:

/css?family=…(fonts.googleapis.com) 2.8 KiB 780 ms

What should I do to eliminate it? I have WP Rocket.

Thanks!

I am still seeing Roboto as the selected font for some of your headings.
Can you check the Customizer > Typography > Headings and make sure they are all set to System Stack. Then clear any cache plugins ( like WP Rocket )

Thanks, David. You are correct. I have changed them all now and cleared WP Rocket Cache. Is there anything else that needs to be done? Thanks.

I checked your site and there are no more Google Fonts being loaded - so nothing more to do there! Also checked for CLS and that is reporting 0

Thank you.

You're welcome