[Resolved] Once more LCP optimization and featured image sizes

[David]

You’re welcome

[Bernhard]

Hello,
just one question: I inserted the class crazy-load for the featured images and the loading="lazy" tag is now away.

Looking into the waterfall the featured image is loaded at (22), discovered: 2.990 s, later than other images. The logo is loaded at (12), discovered: 1.558 s, so I would expect also the featured image to load then.

In particular, the green image below (19), discovered: 2.301 s, is loaded before the featured image. I looked into the developer tools and saw much more steps to the featured image than to the green image screenshots .

Could this be the reason and is there a way to preload the featured image?

[Bernhard]

Hello,
I tested now also the featured image without grid. Without grid the dynamic-featured-image class is automatically added. For the featured images in the grid I added the class crazy-load manually. But the (late) loading behaviour is the same.
Hero block with grid
Hero block without grid

[David]

Have you spoken to Ezoic about the large amount of JS files they load in the head of the site ?

They occupy a huge amount of the initial request time.
And if you scroll to the foot of the waterfall, you will see Long Tasks which are marked by the red lines.
Those Long Tasks are caused by Javascripts taking up all the Browsers bandwidth, during which time the browser cannot do anything else.

So even if we were to preload the featured image, it would still probably get caught up in that bottleneck.

[Bernhard]

Hi David,
yes, I’m in contact with Ezoic to solve it, and their JS is random in size as it depends from the Ads they load.

But in most of the cases only a few tenth of seconds are missing to comply with the CLS requirements and so I think preloading the featured image would help. Actually the green image below is visible before the featured image and within 2.5″.

[David]

Give this snippet a try:

add_action( 'wp_head', function() {
    if( is_single() ) {
        $featured_img_url_small = get_the_post_thumbnail_url(get_the_ID(),'medium');
        echo '<link rel="preload" as="image" href="'.$featured_img_url_small.'"/>';
    }		
},1000);

Note here: get_the_post_thumbnail_url(get_the_ID(),'medium'); the medium is the attachment size, make sure that matches the one you set in the Image Block for displaying the featured image.

[Bernhard]

Hi David,
ok, now the featured image loads really fast. Can I use the snippet permanently or are there contraindications?

I hope that Ezoic can solve the problems with the JS soon.

Thank you for your help 🙂

[David]

You can use the snippet permanently.
The only possible issues are:

1. If you change how the featured image is being displayed, eg. change the Attachment size of the GB Image Block.
2. If any optimisations are used to convert the image eg. into webP.

Glad to be of help 🙂

[Bernhard]

Hi David, I want to say thank you to you and the whole team. Your support is so valuable. I know that I am often annoying but every time I get your full support. Thank you so much.

Bernhard

View post on imgur.com

[David]

Hi Bernhard,

that is an absolutely great result. And seeing this absolutely makes my day!!!

[Author]

Posts