[Resolved] LCP issue, featured image, srcset & scaled images

Home Forums Support [Resolved] LCP issue, featured image, srcset & scaled images

Home Forums Support LCP issue, featured image, srcset & scaled images

Viewing 15 posts - 1 through 15 (of 21 total)
  • Author
    Posts
  • #1367253
    Margaret

    Hello, I am also having an issue with image sizes.

    Google Search Console is giving me the following error: “LCP issue: longer than 4s (mobile).” Google PageSpeed Insights says that the “Largest Contentful Paint element” is the featured image at the top of the page.

    When I inspect that image, I can see that width=”2048″ and height=”869″, and srcset includes the same image URL at 2048w, 300w, 1200w, 768w, and 1536w. In my custom css, I have the featured image width set to 100vw.

    Is there a way that the browser can load only the size of the image needed, rather than loading every size? My overall goal is to solve the LCP issue and achieve faster page speed.

    Thank you!

    #1367511
    David
    Staff
    Customer Support

    Hi there,

    Browsers will (should) only load the src-set image that best fits the visible size required.
    Unless you use CSS to re-size them – then the browser selects the largest available.
    So its best to avoid using CSS to avoid resizing images if you can.

    As the image is above the fold i would also exclude it from lazy loading. This may cause a slight increase in FCP but should reduce your LCP.

    #1367977
    Margaret

    Thanks, I removed the following css:

    .featured-image {
    max-width: 100vw !important;
    }

    Is there a way to set the featured image to full width without using css? I’ve tried expanding the container width, which works, but it also expands the container for the entire site. I’d like to have a full width featured image with a container of 1100 px beneath it.

    #1368039
    Margaret

    I am using WP Rocket to Lazy Load images. I looked up how to disable lazy load for specific images, and found the following resource:

    https://docs.wp-rocket.me/article/15-disabling-lazy-load-on-specific-images#:~:text=Disabling%20LazyLoad%20on%20an%20image,rocket_lazyload_excluded_attributes’%2C%20’rocket_lazyload_exclude_class’%20)%3B

    It says to add class=”skip-lazy” to . How do I access the html tag for the featured image?

    Thanks!

    #1368118
    David
    Staff
    Customer Support

    Try adding this PHP Snippet to add the class:

    function db-add-featured-image-class($attr) {
      remove_filter('wp_get_attachment_image_attributes','db-add-featured-image-class');
      $attr['class'] .= ' skip-lazy';
      return $attr;
    }
    add_filter('wp_get_attachment_image_attributes','db-add-featured-image-class');
    #1368330
    Margaret

    Thanks! Should I add that to functions.php or a different PHP file?

    Regarding the featured image width, is there a way to set the featured image to full width without using css? I’ve tried expanding the container width, which works, but it also expands the container for the entire site. I’d like to have a full width featured image with a container of 1100 px beneath it.

    #1368444
    David
    Staff
    Customer Support

    If you want to maintain the responsive src-set sizing the best you can do is:

    .featured-image {
        max-width: 100% !important;
    }

    But it will only be as wide as the original image size.

    All other methods that force resize the image will break the src-set.

    #1370076
    Margaret

    Thanks very much! Regarding the PHP snippet for the “skip-lazy” class, which PHP file should that be placed in?

    #1370171
    Tom
    Lead Developer
    Lead Developer

    Hi there,

    That code can be added using one of these methods: https://docs.generatepress.com/article/adding-php/

    #1371208
    Margaret

    Thanks! I installed the Code Snippet plugin, and duplicated the “Example JavaScript snippet.” I cleared out everything in the box and pasted in the PHP snippet:

    function db-add-featured-image-class($attr) {
      remove_filter('wp_get_attachment_image_attributes','db-add-featured-image-class');
      $attr['class'] .= ' skip-lazy';
      return $attr;
    }
    add_filter('wp_get_attachment_image_attributes','db-add-featured-image-class');

    It is giving me the following error:

    “The snippet has been deactivated due to an error on line 0:
    Parse error: syntax error, unexpected end of snippet”

    How should I change the PHP to fix this error?

    In addition, for this snippet to work, do I need to manually add the skip-lazy class to the HTML tag for the featured images? If so, how do I access the HTML tag for the featured images?

    #1371432
    Tom
    Lead Developer
    Lead Developer

    Try this instead:

    add_filter( 'wp_get_attachment_image_attributes', function( $attr ) {
        $attr['class'] .= ' skip-lazy';
    
        return $attr;
    } );

    This function should add the class automatically for you.

    #1372667
    Margaret

    Thank you! That snippet seems to have worked.

    Results:
    LCP mobile: 3.2 s
    LCP desktop: 1.1 s

    (Before adding the Code Snippet plugin and PHP snippet, LCP mobile was over 4 seconds, and LCP desktop was over 2.5 seconds.)

    #1373758
    Tom
    Lead Developer
    Lead Developer

    Glad we could help! 🙂

    #1373974
    Margaret

    Hi again,

    Sorry to open this back up — I noticed that the PHP snippet actually added the ‘skip-lazy’ class to all images on the website. I only want to add the ‘skip-lazy’ class to featured images, because they are above the fold. How could I edit the PHP snippet to add the ‘skip-lazy’ class to featured images only, while leaving lazy load enabled for all other images?

    #1374441
    David
    Staff
    Customer Support

    That code should only affect the Featured images.
    Can you re-add the code and let us take a look ?

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