[Resolved] Once more LCP optimization and featured image sizes

[Bernhard]

Hello,
Since the LCP values are still not stable, I took another look at the cache settings.

In the past I had identified the featured image size on mobile as a problem. Since in the Page Hero block the image size cannot be changed for the different devices (Tom once said this would be introduced, but when?), I filtered the Hero blocks via !wp_is_mobile. As a result, I had to enable “separate cache files for mobile devices” in WP Rocket.

As it now turns out, this has a negative impact on performance. I am at the end of my ideas on how to load a smaller image on mobile. Shall I load a small image on desktop as well, at the loss of the page layout? Or is there another solution?

Actually I have 3 layouts:
Front page
Pages / posts without sidebar
Posts with sidebar

[David]

Hi there,

the main issue you will face is that all the images are CSS background images.
As they are loaded by CSS, it means the browser has to have parsed the HTML and the CSS before it can download the image. And all of those requirements are getting delayed from other processes happening on the page, such as stylesheets and scripts running.

Aside from preloading the image, there isn’t much that can be done to optimize their loading. And yes you need to selectively preload the CSS that goes with it for the different image sizes as their is no src-set for backgrounds.

Lets tackle this in parts:

If i look a the Posts with Sidebar – is that a common layout ? If so, why not use an Image Block to display the featured image instead of using a background image ?

[Bernhard]

Hi David,
Thank you for the explanation. No problem to pass from background image to image block for the posts. But resizing the image with CSS means that the biggest size must be loaded, correct?

[David]

Yeah – if you use CSS in anyway then the src-set wont work. But you can set which size image you want to load e.g 768px ( medium_large ) image which is an optimal size for smaller size devices.

[Bernhard]

OK, I made now this block with a medium size featured image.

I don’t understand why image and title are not on top or in the center in the desktop view. On mobile it’s ok.

[David]

You don’t need the Grid Block. You can just add the Image Block, and them the H1 Title below that.

[Bernhard]

Hi David,
without grid I would need a background like here, as I would like to load a medium size image only. I use the grid also for the layout without sidebar. In this case there are 3 container in the grid with featured image / title / AD.

One question: If I have now only one hero block for all devices (without !wp_is_mobile), will I still need a separate cache for mobile devices?

[David]

If i can be brutally honest, the Text Over the Image is a big point of pain.
That design is best delivered using a Background Image, but they are a problem for your LCP.

If you try to use an Image as background you end up with new issues:
1. Making it responsive is a nightmare as the Image and Text will vary in size.
2. To make #1 work requires CSS that breaks the browsers ability to use src-set– so it doesn’t matter what device the browser will generally load the largest image.

Is it really important that you have the Text over the Image on your Single Posts ?

[Bernhard]

Hi David,
I don’t know what you see actually. It seems, there is a problem with Cloudflare. This is the live site.

Here are some screenshots from what I see:
Front page, this is made with background image
https://imgur.com/a/JYbcIC8

Pages with and without sidebar, 2 or 3 container in a grid
https://imgur.com/a/duxaTiN

The 3rd container is hidden on mobile and it looks like this
https://imgur.com/a/tWkAIGL

I think, this is the best I can do actually. The only problem is on the front page where it loads a quite big image with 133 k.

[Bernhard]

Now PSI says, Largest Contentful Paint image was lazily loaded. I excluded dynamic-featured-image but now it seems to be different.
Page https://www.tourist-in-rom.com/de/roma-pass-touristenkarte/
<img width="300" height="154" src="https://www.tourist-in-rom.com/wp-content/uploads/2020/02/Roma-Pass-Touris…" class="gb-image-4abe1e75" alt="Roma Pass Touristenkarte" loading="lazy" ezimgfmt="rs rscb2 src ng ngcb2">
https://imgur.com/a/ougXNdt

[Fernando]

Hi Bernhard,

Viewing your site, I’m not seeing the same issue. Were you able to exclude it already from lazy loading?

Another point of improvement is to upload next-gen images. You could try uploading WebP images instead, and this should also improve your site’s performance.

[Bernhard]

Hi Fernando,
the problem is that the featured image is not identified and is loaded somewhen. If you look at https://www.tourist-in-rom.com/en/colosseum/, PSI sees a paragraph as LCP as the image is loaded much later. Is there no way to identify the featured image to exclude it from lazy loading?
The next-gen image problem comes from an external widget. I will go to exclude it.

https://imgur.com/a/WF9owWA

[Bernhard]

Ok, now I was hopefully able to solve the problem following this guide.

But I’m wondering, why the dynamic-featured-image class is not added, when using the new generateblocks image block.

[David]

Sorry, i missed your last reply.
With the GB Image Block, if you select the Block, and in Advanced > Additional CSS Class(es): you can add whatever CSS class you require in that field. And that will be added to the <img> HTML.

[Bernhard]

Hi David,
thank you 🙂

[Author]

Posts