Archive: Preload first image -- Core Web Vitals

[mmprep]

On archive pages (categories and tags) it would be optimal to add rel="preload" as="image" to the first image.
Now, after the Google December 2020 Core Update, Core Web Vitals metrics are more important than ever.
In any case, Google PageSpeed suggests a significant reduction in LCP: Preload Largest Contentful Paint image.

Moreover, Google is announcing Core Web Vitals will become ranking signals in May 2021.

For categories, see for example:
https://developers.google.com/speed/pagespeed/insights/?hl=en&url=https%3A%2F%2Fmosmedpreparaty.ru%2Fnews%2Fclinical-trials

For tags, see for example:
https://developers.google.com/speed/pagespeed/insights/?hl=en&hl=en&url=https%3A%2F%2Fmosmedpreparaty.ru%2Fsemaglutid-semaglutide

https://developers.google.com/speed/pagespeed/insights/?hl=en&hl=en&url=https%3A%2F%2Fmosmedpreparaty.ru%2Fpfajzer-pfizer

[mmprep]

Hi @laurelfulford,

This is a really big problem with Core Web Vitals scores at archive pages on mobile devices.

PageSpeed Insights for example for https://mosmedpreparaty.ru/semaglutid-semaglutide has generated a list of opportunities, which contains suggestions about Preload Largest Contentful Paint image. Here you can save an impressive 0.48 s.

See: https://developers.google.com/speed/pagespeed/insights/?hl=en&url=https%3A%2F%2Fmosmedpreparaty.ru%2Fsemaglutid-semaglutide

According to a just completed check of Core Web Vitals in Google Search Console, ALL pages with archives (categories and tags) need to optimize the loading of the very first image.

There are quite a few methods on how to do this, see:

https://perishablepress.com/3-ways-preload-images-css-javascript-ajax/
https://perishablepress.com/a-way-to-preload-images-without-javascript-that-is-so-much-better/
https://perishablepress.com/pure-css-better-image-preloading-without-javascript/

However, since my images are processed by Jetpack CDN and get the https://i1.wp.com/mosmedpreparaty.ru/wp-content/uploads/2020/08/ozempic.jpg?zoom=2&resize=1200%2C819&ssl=1 link format, I have no control over the preloading.

In addition, it's interesting to see how featured image positioning in post affects Largest Contentful Paint (LCP) and Cumulative Layout Shift (CLS) scores on mobile devices. Let's run the corresponding tests within PageSpeed Insights that show the relationship between Featured Image Default Position in Newspack settings and LCP -- CLS -- Total Score.

https://mosmedpreparaty.ru/news/18587

Large: 1.7 s -- 0 -- 99
Small: 1.7 s -- 0 -- 99
Behind article title: 2.4 s -- 0 -- 98
Beside article title: 1.7 s -- 0 -- 99
Above article title: 2.2 s -- 0.094 -- 97
Hidden: 1.7 s -- 0 -- 99

https://mosmedpreparaty.ru/news/22041

Large: 1.5 s -- 0 -- 100
Small: 1.5 s -- 0 -- 100
Behind article title: 2.1 s -- 0 -- 99
Beside article title: 1.5 s -- 0 -- 100
Above article title: 2.1 s -- 0.109 -- 98
Hidden: 1.5 s -- 0 -- 100

As you can see, the lowest performance in PageSpeed Insights is for posts whose featured image is Behind article title or Above article title. At the same time, however, it is well known that a large, eye-catching image in the most prominent place of the post is always better than a small or non-existent one.

Please help me to solve this issue.

I hasten to point out that very soon Core Web Vitals will become unequivocally critical and primary for ranking in Google search results.

[mmprep]

Hi @laurelfulford!

A possible solution 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'm not sure exactly where it should (and can?) be used.