- This topic has 24 replies, 3 voices, and was last updated 1 year, 3 months ago by David.
July 29, 2022 at 2:18 am #2297037Bernhard
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?July 29, 2022 at 5:09 am #2297159DavidStaffCustomer Support
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 ?July 29, 2022 at 6:01 am #2297221Bernhard
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?July 29, 2022 at 6:43 am #2297284DavidStaffCustomer Support
Yeah – if you use CSS in anyway then the
src-setwont 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.July 29, 2022 at 8:24 am #2297487Bernhard
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.July 30, 2022 at 3:50 am #2297939DavidStaffCustomer Support
You don’t need the Grid Block. You can just add the Image Block, and them the H1 Title below that.July 30, 2022 at 9:42 am #2298327Bernhard
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?July 31, 2022 at 7:10 am #2298811DavidStaffCustomer 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 ?July 31, 2022 at 9:14 am #2299058Bernhard
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
Pages with and without sidebar, 2 or 3 container in a grid
The 3rd container is hidden on mobile and it looks like this
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.July 31, 2022 at 1:49 pm #2299154Bernhard
Now PSI says, Largest Contentful Paint image was lazily loaded. I excluded
dynamic-featured-imagebut now it seems to be different.
<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">July 31, 2022 at 8:43 pm #2299298Fernando Customer Support
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.August 1, 2022 at 12:34 am #2299369Bernhard
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.August 1, 2022 at 7:01 am #2299705Bernhard
Ok, now I was hopefully able to solve the problem following this guide.
But I’m wondering, why the
dynamic-featured-imageclass is not added, when using the new generateblocks image block.August 1, 2022 at 7:19 am #2299715DavidStaffCustomer 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.August 1, 2022 at 8:02 am #2299916Bernhard
thank you 🙂
- You must be logged in to reply to this topic.