[Support request] Core Web Vitals for mobile

[Remez Sasson]

Hi,

I have been working on improving the Core Web Vitals.

Now, the desktop passes the Core Web Vitals assessment. However, I have an issue with th mobile, which does not pass.

The lab data show good scores, but the Origin Summary shows:

First Contentful Paint (FCP) 2.1 s
Largest Contentful Paint (LCP) 2.9 s

This happens with all the blog posts.

The largest contentful element is the image at the top of the post. On posts and pages without an image at the top, Largest Contentful Paint is <h1 class=”entry-title” itemprop=”headline”> or sometimes the <p> element.

Can you please suggest a solution?

I am using wp-rocket for caching. Website http://www.SuccessConsciousness.com

Thanks

[David]

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

[Remez Sasson]

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

[Remez Sasson]

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”

[David]

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.

[Author]

Posts