Posts: Bad LCP in Google PageSpeed Insights on Mobile Devices

[mmprep]

Back to the Largest Contentful Paint (LCP) issue in Google PageSpeed Insights on mobile devices. Just a reminder: Starting in May 2021, Core Web Vitals will become key search ranking factors.

I ask the developers of Newspack to focus their utmost attention on the Core Web Vitals issue on mobile devices.

First, mobile traffic -- the dominant traffic on the web. Second, the vast majority of sites listed in https://newspack.pub/2020/04/16/sites-relaunched-with-newspack/, while not optimized for speed, are characterized by very poor Core Web Vitals. Third, if the Core Web Vitals are bad, all those sites simply won't show up in Google search results. Fourthly, what do these sites have to work for at all and what kind of audience to count on if they are "invisible"?

Let's look at the issue in details. Right now, the Featured Image Default Position for posts is set to Large. All in all, it's not bad. However, some posts are coming in with a high LCP. As I was able to find out, this is directly related to the length of the title and subtitle.

If the title and subtitle (in my case -- excerpt) are relatively short (the featured image already takes up a decent amount of screen space when you open the post), the LCP is too high, and PageSpeed recommends Preload Largest Contentful Paint image.

If the title and subtitle are long enough (the featured image is shown only partially on the screen or even goes completely off the screen when you open the post), the LCP is fine.

I have to COMPLETELY DISABLE the featured image in the posts so that the LCP is normal.

Let's compare LCP:

https://mosmedpreparaty.ru/news/26255 with featured image: 2.6 s without featured image: 1.5 s

https://mosmedpreparaty.ru/news/21584 with featured image: 3.3 s without featured image: 1.7 s

A similar problem of bad LCP for the first image, true for all archives (categories and labels), is raised here -- https://github.com/Automattic/newspack-theme/issues/1268

A possible solution, related to preloading of first image, is suggested here -- wp-media/wp-rocket#3626

The code is as follows:

<?php
if ( has_post_thumbnail() ) {
    $id = get_post_thumbnail_id();
    $src = wp_get_attachment_image_src( $id, 'full' );
    $srcset = wp_get_attachment_image_srcset( $id, 'full' );
    $sizes = wp_get_attachment_image_sizes( $id, 'full' );  
    echo '<link rel="preload" as="image" href="'.$src[0].'" imagesrcset="'.$srcset.'" imagesizes="'.$sizes.'"/>';
}
?>

I understand that the decision-making process is slow and complex, and it takes a very long time from any suggestion to improve Newspack features to implementation in the code. So I would really appreciate it if you could tell me exactly what now I need to do to solve the issue with LCP in posts and archives. This is important for all Newspack users because Google has become very strict about site performance metrics. The solution may be temporary and even sub-optimal, but it will improve search engine rankings. Thank you in advance.

[mdrejhon]

On a related topic:

I also found that good instantaneous PageSpeed scores with very bad Field/Origin Summary is sometimes caused by lack of CDN optimization for the involved images. Seeing 90-100 speeds but very bad FCP/LCP -- either suboptimal Javascript-powered image loads, or lack of CDN, or both (e.g. AJAX loading of image didn't hit the CDN).

Enabling a CDN (very easy to do with CloudFlare) -- sometimes greatly improve Field/Origin Summary because of foreign visitors to the website.

[mmprep]

Hi @mdrejhon,

Don't pay attention to the Field Data or Origin Summary. They are outdated, the site has only recently moved to Newspack, so the data hasn't been updated yet. But they are getting better every day.

As for Lab Data, I don't think the issue I described above has anything to do with CDN, since JetPack is already connected and the images are processed correctly by its servers.

I checked both with and without lazy load enabled.

The bottom line is what PageSpeed considers an element of LCP: text or image. As I said, if the first screen of the mobile device only shows text, then everything is fine. If, however, the text is short and an image is visible underneath, the LCP deteriorates dramatically. Worse is when the image is displayed before the header on the first screen, filling it completely. Accordingly, it is rational to preload this image.

[yogeshbeniwal]

@laurelfulford WordPress is adding loading="lazy" for images. This can be resolved by removing loading="lazy" for above the fold images in theme i.e. Site logo and featured image.