Wp-rocket: Preload LCP Hero Image

[NicoCaldo]

Is your feature request related to a problem? Please describe.
Preload LCP Hero Image

Describe the solution you'd like
Load the hero image as <link rel="preload" as="image" href="hero-image.jpg">

Additional context
It seems Google has changed something on the PageSpeed Insights and now it displays an error saying to preload the LCP hero image. Currently, the images are loaded via (I use jetpack CDN)

<img width="1920" height="1280" src="https://i1.wp.com/mysite/hero-image.jpg" class="flipboard-image wp-post-image lazyloaded" alt="image" sizes="(max-width: 1920px) 100vw, 1920px" srcset="//https://i1.wp.com/mysite/hero-image.jpg" data-ll-status="loaded">

[mdrejhon]

I simply manually edited my header.php to preload my LCP image. That fixed it.

The problem is you need to run an external benchmark program (PageSpeed) to determine the specific image that is the winning "LCP hero".

Theoretically WP Rocket could make it easier by also saying you can preload images as well as fonts by entering the image URL in this section of WP Rocket:

So future versions of WP Rocket can mention "You may also enter image URLs here too, but be sparing such as only LCP-impacting images, or performance may actually end up worse". (You don't want to preload too many images, but this can make it easier by not needing to manually edit header.php of your theme manually)

[NicoCaldo]

Do you have the code used on the header.php to preload the LCP image?

The problem is you need to run an external benchmark program (PageSpeed) to determine the specific image that is the winning "LCP hero". You don't want to preload too many images

I just need to pre-load the featured image/header image of each post as the other images in the post/s are lazyloaded and not visible on page load.

[mdrejhon]

(These instructions will help WP Rocket team figure out why image preload feature is useful)

1. Go to Google PageSpeed and benchmark

Figure out what image file it keeps complaining about:

2. Go to Appearance -> Theme Editor

3. Click Theme Header

4. Edit the source

(This only works if you have a common sitewide LCP image though like a background, not a per-page LCP image)

5. However, WP Rocket should make this easier for users ;)

Because when upgrading stock themes, it will overwrite your change.

So, it is an easy feature request for WP Rocket to let users specify which images to preload!

1. Textbox to let users enter list of images to preload
2. Checkbox to enable preload of the specific page's featured image

[NicoCaldo]

Thanks for the in-depth explanation.

Unfortunately, your method works only if every page has the same header image.

I was trying to have a dynamic PHP code that, given a certain post, detects which is the featured image and adds the preload image code on it.

[kashishkumawat]

Thanks for the in-depth explanation.

Unfortunately, your method works only if every page has the same header image.

I was trying to have a dynamic PHP code that, given a certain post, detects which is the featured image and adds the preload image code on it.

The following code should work. But I believe it could be improved further.

<?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.'"/>';
}
?>

[mdrejhon]

Thanks for the contribution!

Google SEO is going to get worse soon (May 2021)

https://www.searchenginejournal.com/largest-contentful-paint-lcp/374690/

Proposal: Changes to WP Rocket as follows:

Because Google SEO is going to get worse beginning ~May 2021 if people don't fix their LCP statistics, it becomes necessary to preload certain images.

It might potentially be an easy feature request for WP Rocket to let users specify which images to preload

1. A text box that users can enter URLs global images to preload (e.g. a background image, top banner image)
2. A checkbox whether to preload the page's own featured image, and which size to preload

(And obviously, ideally automatically select the WebP version instead of PNG/JPG if one exists, perhaps by a [X] Load WebP checkbox).

cc: @GeekPress -- is this within scope of wp-rocket's mission?

[NicoCaldo]

The following code should work. But I believe it could be improved further.

<?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.'"/>';
}
?>

The code works very well. It could be a solution on WP Rocket

[GeekPress]

cc: @GeekPress -- is this within scope of wp-rocket's mission?

Everything to improve PSI in our score ;)

I'm going to close this request as we are currently trying to find a more general solution to preload critical images.

[mdrejhon]

One very big caveat, in my situation, @GeekPress -- is that my background image was in a CSS file. So it also ended up being a long critical chain too (HTML -> CSS -> image).

You will have to worry about:

1. In-HTML image request for LCP
2. In-CSS image request for LCP (e.g. my background image)
3. Javascript-triggered image request for LCP (e.g. ribbon bar at top of www.blurbusters.com) since it's a slick ribbon control;

I had problems with both item 2 and 3.

A universal situation doing all of 1/2/3 may be difficult -- I've seen PageSpeed squeal about LCP problems in all of these cases.

Just some food for thought as you design a universal solution;

[GeekPress]

@mdrejhon Thanks for the extra info. Indeed, we will try to cover all cases ;)