[Resolved] Cumulative Layout Shift (CLS) 0.33

Home Forums Support [Resolved] Cumulative Layout Shift (CLS) 0.33

Home Forums Support Cumulative Layout Shift (CLS) 0.33

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
  • #2261899

    Hi, the CLS has been very high when I’m using the layout and there is a big gap before the picture is loaded.

    Customer Support

    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


    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

    Customer Support

    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

    Customer Support

    You’re welcome Wayne!

Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.