- This topic has 22 replies, 2 voices, and was last updated 2 years, 4 months ago by David.
-
AuthorPosts
-
December 6, 2021 at 4:43 am #2039841Puneet
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,
PuneetDecember 6, 2021 at 4:52 am #2039856DavidStaffCustomer SupportHi 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.
December 6, 2021 at 5:06 am #2039876PuneetHi 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,
PuneetDecember 6, 2021 at 5:15 am #2039882DavidStaffCustomer SupportYou 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.phpIn your hook element, set the Display Rule > Exclusions to Front Page.
December 6, 2021 at 5:18 am #2039884PuneetOops, sorry the breadcrumb exclusion didn’t strike me on my own…lol. Thanks a lot again.
Regards,
PuneetDecember 6, 2021 at 5:58 am #2039937DavidStaffCustomer SupportNo problems – glad to be of help!
December 12, 2021 at 1:46 am #2046240PuneetHi
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,
PuneetDecember 12, 2021 at 9:53 am #2046649DavidStaffCustomer SupportFor 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
December 12, 2021 at 10:27 am #2046685PuneetI 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
PuneetDecember 12, 2021 at 10:55 am #2046711PuneetAdditionally, 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/
December 13, 2021 at 4:28 am #2047326DavidStaffCustomer SupportSorry 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.
December 13, 2021 at 5:04 am #2047357PuneetHi 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
December 13, 2021 at 6:56 am #2047483DavidStaffCustomer Support1. 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 ?
December 13, 2021 at 7:16 am #2047514PuneetApplied the filter but no improvement and opened a new thread for the second request.
December 13, 2021 at 2:20 pm #2047952DavidStaffCustomer SupportIs the code still added to the site ?
-
AuthorPosts
- You must be logged in to reply to this topic.