[Resolved] Once more LCP optimization and featured image sizes

Home Forums Support [Resolved] Once more LCP optimization and featured image sizes

Home Forums Support Once more LCP optimization and featured image sizes

Viewing 15 posts - 1 through 15 (of 17 total)
  • Author
    Posts
  • #2297037
    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

    #2297159
    David
    Staff
    Customer Support

    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 ?

    #2297221
    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?

    #2297284
    David
    Staff
    Customer Support

    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.

    #2297487
    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.

    #2297939
    David
    Staff
    Customer Support

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

    #2298327
    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?

    #2298811
    David
    Staff
    Customer Support

    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 ?

    #2299058
    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

    Front page

    Pages with and without sidebar, 2 or 3 container in a grid

    Desktop with grid withand without sidebar

    The 3rd container is hidden on mobile and it looks like this

    View post on imgur.com

    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.

    #2299154
    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">

    View post on imgur.com

    #2299298
    Fernando
    Customer Support

    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.

    #2299369
    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.

    Waterfall and hero block

    #2299705
    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.

    #2299715
    David
    Staff
    Customer Support

    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.

    #2299916
    Bernhard

    Hi David,
    thank you 🙂

Viewing 15 posts - 1 through 15 (of 17 total)
  • You must be logged in to reply to this topic.