[Resolved] CSS Class for Image Lazy-Loading Exclusion

[Puneet]

Hi
Google suggests that the first image on a page be excluded from lazy-loading for a better LCP. There are 2 places I will need to exclude them:-
1. Featured Images on a single post. Screenshot: https://snipboard.io/6gQUlL.jpg Post URL: https://geekyfi.com/tv/lee-childs-reacher-coming-to-prime-video-as-a-tv-series/
2. First Image on the Front Page. Screenshot: https://snipboard.io/t14drk.jpg Frontpage URL: https://geekyfi.com/

I know how to but just need to confirm the CSS class. I inspected through chrome dev tools and could make out the class for featured images for a single post but still would like to be sure. The first image on the front page CSS class is what I am unsure about. Will appreciate your help.

I am not using a static home page atm but if I do, I see that breadcrumbs appear there as well. How do I exclude them from not appearing on a static front page? I am using rankmath pro.

Till the time wp show posts pro features get integrated with generateblocks pro, can you please suggest a free post grid block by which I can replicate the current non-static front page using offset of posts and a load more button? The free wp show posts don’t extend the load more button feature.

Thanks and Regards,
Puneet

[David]

Hi there,

Add this PHP Snippet to your site:

// Add first-featured-image ( or any class ) to featured image of latest post
function skip_lazy_class_first_featured_image($attr) {
  global $wp_query;
  if ( 0 == $wp_query->current_post ) {
      $attr['class'] .= ' first-featured-image';  
  }
  return $attr;
}
add_filter('wp_get_attachment_image_attributes', 'skip_lazy_class_first_featured_image' );

You can then use the first-featured-image class for lazy-load exclusion, for the first post on home ( and archive ) page and your single posts.

Breadrcumbs – how are they being aded to the site ?

Alternative to WPSP – i don’t know of a free plugin that provides those features unfortunately.

[Puneet]

Hi David,
Thanks a ton. Do I add this snippet to functions.php of the child theme or use code snippets?

For Breadcrumbs, I added the following hook to all singular(location) using before_content(settings):-
“<?php if (function_exists(‘rank_math_the_breadcrumbs’)) rank_math_the_breadcrumbs(); ?>”

If I use all posts as locations then it won’t show on category archives. I just want breadcrumbs to not show on the homepage.

Regards,
Puneet

[David]

You can add it to either the child theme functions.php or use code snippets.
If you’re using a child theme then i would go with its functions.php

In your hook element, set the Display Rule > Exclusions to Front Page.

[Puneet]

Oops, sorry the breadcrumb exclusion didn’t strike me on my own…lol. Thanks a lot again.

Regards,
Puneet

[David]

No problems – glad to be of help!

[Puneet]

Hi
I disabled the featured image to show within a single post and added the same image in its place as entry content. The performance of that page improved hugely. I don’t understand why, but it went from 84 to 97 on Google Page Insights. The problem is now it’s being lazy-loaded. How do I modify the code to exclude the first image added manually on the posts from lazyloading? I would start adding images manually instead of featured images showing in a single post with this much benefit. This was the code earlier:-

“// Add first-featured-image ( or any class ) to featured image of latest post
function skip_lazy_class_first_featured_image($attr) {
global $wp_query;
if ( 0 == $wp_query->current_post ) {
$attr[‘class’] .= ‘ first-featured-image’;
}
return $attr;
}
add_filter(‘wp_get_attachment_image_attributes’, ‘skip_lazy_class_first_featured_image’ );”

Screenshot: https://snipboard.io/RYFNdp.jpg

URL: https://geekyfi.com/movies/mary-elizabeth-winstead-is-atomic-in-netflixs-kate/

I would need to exclude the first image on the front page as well. :- https://geekyfi.com/

Regards,
Puneet

[David]

For the single post – if you add the image inside the content, then you will need to select the Image Block, and add your own class in Advanced > Additional CSS Class(es) field.

However i would think carefully about doing this for all of your posts, as in the future if you ever want to replace those images it will have to be done manually… that could be a lot of work.

I can’t see why there would be such a difference between the featured and the image block – happy to look at the featured image to see if theres anything to be done to improve its loading time.

The code i provided above will still work for the front page ie. adds the first-featured-image

[Puneet]

I already optimize all my images. They are below 200KB and much lower at times. I again tried. I put the featured image option on and the performance and LCP went red on Google page insights. I put the featured image off and replaced the same placeholder with the same image in content and they are green. Strange. How would you look into it? I mean what do I need to do? Activate Featured Image again?

Another thing is how do I put something like a subtitle kind of thing above the image? You would see a lot of news websites using that in order to point out what the article is about.

Thanks

Regards
Puneet

[Puneet]

Additionally, I gave first-featured-image class to the first image in the content. Despite that they are showing lazy loaded on inspection.

URL: https://geekyfi.com/movies/charlize-therons-atomic-blonde-is-the-best-james-bond-alternative/

[David]

Sorry don’t know what i was thinking but this…

For the single post – if you add the image inside the content, then you will need to select the Image Block, and add your own class in Advanced > Additional CSS Class(es) field.

… won’t work as WP found it smart to add the Additional CSS Class to the image wrapper and not the img and no lazy loading plugin apart from PerfMatters ( i believe ) has a solution for that.

Ideally you want to keep the Feature Image from a better workflow perspective. If you want to share a post where that is still the case then i can take a look at the other things you want and any performance improvements that can be made.

[Puneet]

Hi David
1. I switched back to displaying featured images in single posts. The LCP has increased drastically from green to close to 4.0. The overall mobile performance went down to 80 something. You can check on my website; featured images are on now with excluding “first-featured-image” from lazyloading. A random post:- https://geekyfi.com/movies/sandra-bullock-interview-the-unforgivable-netflix/. Please advise.

2. How can I display something like this in Generatepress? It’s called subtitle in themes like Newspaper and is inbuilt.

Screenshot: https://snipboard.io/uPAFoY.jpg

[David]

1. Lets see if we can ‘force’ google to load a smaller sized image with this snippet:

function db_modify_srcset_sizes($sizes, $size) {
        $sizes = '(max-width: 360px) 300px, (min-width: 361px) 768px, (min-width: 769px) 1024px, 100vw';
	return $sizes;
}
add_filter('wp_calculate_image_sizes', 'db_modify_srcset_sizes', 10 , 2);

2. Can you raise a new topic for this ?

[Puneet]

Applied the filter but no improvement and opened a new thread for the second request.

[David]

Is the code still added to the site ?

[Author]

Posts