LCP, Preload Largest Contentful Paint image with AMP pages

Yes, we did remove image preloading. The reason is that too easily the wrong image could end up getting preloaded. See more reasoning here: https://github.com/ampproject/amp-toolbox/pull/1132

Preloading of hereon images now depends on a media attribute to be defined on the image to guard against this.

Even though the Optimizer doesn’t preload the images by default, that doesn’t mean you can’t continue to do so. Can you share your site URL so we can see how you have your hero images in the template?

It’s https://rebrand.ly/g0lp51g

Thanks for the help.

Thank you for sharing. Is there any particular reason you’ve hidden the underlying URL? I want to reference it in a bug report because I can see there are a couple issues beyond just the preloading issue you brought up. Namely, on the homepage the hero image is not getting prerendered (and isn’t even getting data-hero-candidate) whereas on a single post the featured is getting data-hero-candidate but it is not being made into a hero. So we need to fix those issues which will greatly improve your LCP by not having to wait for the AMP runtime to load in order to render the images.

Once the prerendering is fixed, then we can address the preloading. However, there is one caveat. The only image that would really be eligible for preloading is the logo. This is because the logo doesn’t have a srcset, and preloading images with a srcset is currently only supported in Chromium-based browsers, which you can read about here: https://web.dev/preload-responsive-images/

Are you willing to help us test out plugin builds that address the prerendering issue above? I also have in mind something we can do for preloading. (Thank you for testing RC1!)

Oh, in regards to the featured image not getting prerendered (where it has data-hero-candidate but not data-hero): did you by chance add data-hero manually to the logo? If so, that could be why because if we see that you’ve manually added a data-hero attribute to an image then we will not proceed with prerendering other hero images automatically.

It looks like your logo is not being rendered with the standard the_custom_logo() template tag. Because of this, and because it lacks a class name that has logo in it, then the plugin is not identifying it as a logo automatically (because it is identified as a “tiny” image). I recommend removing data-hero from that image and instead either give it a class name of logo or add the data-hero-candidate attribute instead. This will prevent it from short-circuiting other hero images from being prerendered as well.

In regards to preloading, I’ve opened an amp-toolbox issue to propose this: https://github.com/ampproject/amp-toolbox/issues/1230

We’d then port it over to amp-toolbox-php to be included in the AMP plugin.

Could you also share the logic for how your homepage featured-section is being constructed? For some reason, the image inside of featured-first is not getting identified as a data-hero-candidate whereas the first image in the featured-second is.

I was expecting only the image inside of featured-first to be identified as a data-hero-candidate.

If you create an account on WordPress Slack we’d be able to collaborate more easily, if you’re willing to.

Hey. I’ll sign up now. and yeah I’m willing to test out any builds.

I have three prototype mini plugin extensions to the AMP plugin to experiment with for further improving LCP:

1. Prevent Lazy Loading Primary Featured Image: This doesn’t seem necessary on your homepage since the images in the featured area don’t have loading=lazy. It could help with the featured image on a singular post, however you might as well just pass 'loading' => false instead when you render the image. Regardless of AMP, hero images shouldn’t get lazy-loaded.
2. AMP Force Hero Image Preloading: This will force preload links to be added for the non-lazy-loaded hero images.
3. AMP Elevate Resource Hints: This moves the link elements to Link response headers, which should ensure they start get loading even earlier.

I tried deploying these to my personal site and I didn’t see an improvement, but they may do more for you.

Hey Weston,

Yes I had realized that was happening and disabled lazy loading on the featured section using:
<?php the_post_thumbnail( 'medium', array( 'data-amp-layout' => 'responsive', 'data-hero-candidate' => '', 'loading' => false) ); ?>

I’ll try out these mini plugins and report back.

I have them enabled. Didn’t see any improvement to FCP or LCP.
Maybe in my case the two images should go before the JS load?

Yeah, I’m not sure. Would be good to try. I suggest looking at the waterfall network chart of your site via https://www.webpagetest.org/

I just checked and I see that the logo, font, and featured image are being loaded first followed by the scripts already:

@klark0 As we haven’t received a response, I’ll mark this as resolved. Feel free to open a new support topic if you continue to encounter issues, or reopen this topic and we’d be happy to assist. Thank you!