Core Web Vitals for mobile

Hi there,

i ran a test on a single post and the LCP element was the featured image. Which is being Lazy Loaded.
You can try the following topic to exclude the featured image from lazy loading:

https://generatepress.com/forums/topic/how-to-make-wp-rocket-not-to-lazy-load-featured-image/#post-1793582

Hi David,

I have added the code in code snippets plugin, saved and activated it.

// 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' );

Then, added "first-featured-image" class to wp-rocket. However, this did not improve anything.

1. The image still shows "lazyloaded".

2. The First Contentful Paint (FCP) and the Largest Contentful Paint (LCP) did not improve.

3. The score for mobile dropped from 92 to 87.

4. The mobile now shows large Cumulative Layout Shift caused by

Following my previous message, I would like to add that I have checked several pages without an image and I got the same results with Google Page Speed Insights. So, I don't think that the LCP is not due to lazy loading of the image.

The strange thing is that with pages without an image at the top there is also a Cumulative Layout Shift related to div class="entry-content" itemprop="text"

I ran this webpagetest on the site - across a mobile 3G network to match Googles PSI simulated test:

https://www.webpagetest.org/result/210601_BiDcT7_7635c197949dcf603bfa1b3cbed0b0b0/1/details/#waterfall_view_step1

Things to note:

1. Fonts - you have a quite a few requests being made to Google fonts which require additional DNS lookups and the time to complete the request, recommendation is to server them locally - which can be don manially:

https://docs.generatepress.com/article/adding-local-fonts/

OR Automatically with this plugin:

https://wordpress.org/plugins/host-webfonts-local/

2. Probably the bigger issue - you see on Line 2 - the matomo.js which looks to be related to Analytics. You'll notice no other requests are being processed until that is complete - and if you look at the bottom of the graph you will see Red Blocks in the Long Tasks - which basically stop the browser from doing anything else. Not sure how that JS is being loaded... you may want to check with the developer to see if that JS can be deferred.