Cumulative Layout Shift (CLS) 0.33

Hi Wayne,

So, upon testing your site, it seems that on mobile, there’s a moment where your header is wrapping: https://share.getcloudapp.com/5zurBmKX

https://share.getcloudapp.com/o0uG6p0g

Can you try reducing the size of you mobile header’s logo a bit? This can be done through decreasing the Menu Item Height.

Alternatively, you can try adding this CSS in Appearance > Customize> Additional CSS:

@media (max-width: 768px) {
    img.header-image.is-logo-image {
        width: 150px;
    }
}

Let’s see how it goes.

Hi Fernando

I want to ask is the problem of the image in the article

After I added the css, there is no change

Great the Header isn’t wrapping now. The CSS we added was an attempt to fix the header wrapping which was also causing CLS: https://share.getcloudapp.com/RBumYwoN

Now, with regards to the image, it seems that it is being lazily loaded by Jetpack. Above the fold images shouldn’t be lazily loaded: https://share.getcloudapp.com/Jruo4Nd1

So what you can do is try to add this PHP snippet:

function skip_lazy_class_first_featured_image($attr) {
  global $wp_query;
  if ( 0 == $wp_query->current_post ) {
      $attr['class'] .= ' skip-lazy';  
  }
  return $attr;
}
add_filter('wp_get_attachment_image_attributes', 'skip_lazy_class_first_featured_image' );

Adding PHP reference: https://docs.generatepress.com/article/adding-php/#code-snippets

This will add skip-lazy class to the single post featured images and the very first post in your blog/archives as this will generally be towards the top of the page on mobile devices.

As per Jetpack, adding skip-lazy class should stop the image from lazily loading: https://jetpack.com/support/lazy-images/#:~:text=Exclude%20specific%20images

Hope this helps!

wow, I think it has been repaired, thank you.

I bothered my brain for a long time for this problem

You’re welcome Wayne!