Have Jetpack ignore header images?

  • Resolved Tyrosh

    (@iskmogul)


    3 years, 1 month ago

    I’m currently making optimizations to my site’s performance and have encountered a small issue with header images on posts. When lazy load is active on Jetpack, it attempts to lazy load the header image on a post, causing a cumulative layout shift issue in Pagespeed. I’ve included a page that shows the issue.

    Is there any way to have Jetpack ignore images in a certain element across the site?

    The page I need help with: [log in to see the link]

Viewing 2 replies - 1 through 2 (of 2 total)
  • Thread Starter Tyrosh

    (@iskmogul)

    Think I figured it out, by adding a function to my child theme, it appears fixed:

    
function mysite_customize_lazy_images( $blocked_classes ) {
    $blocked_classes[] = 'attachment-inhype-blog-thumb size-inhype-blog-thumb wp-post-image';
    return $blocked_classes;
}

add_filter( 'jetpack_lazy_images_blocked_classes', 'mysite_customize_lazy_images' );

    Can someone sanity check my usage of the element in blocked_classes? I think I got the right one.

    Plugin Author Jeremy Herve

    (@jeherve)

    Jetpack Mechanic ??

    You found the right filter, yes, but I would suggest one change here. The $blocked_classes array accepts an array of multiple classes, where each class will be ignored by the Lazy Images feature. In your function, you’ve added multiple classes at once. Instead, I would recommend that you do the following:

    function mysite_customize_lazy_images( $blocked_classes ) {
    $blocked_classes[] = 'attachment-inhype-blog-thumb';
    $blocked_classes[] = 'size-inhype-blog-thumb';
    return $blocked_classes;
}

add_filter( 'jetpack_lazy_images_blocked_classes', 'mysite_customize_lazy_images' );

    (I’ve removed the wp-post-image class you had added in there since it was a bit too generic).

    I hope this helps.

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Have Jetpack ignore header images?’ is closed to new replies.