Suddenly to high LCP - what is causing it?

Hi Kathrin,

I ran a lighthouse test for your site (homepage and the other page) , it gets 100/99 on desktop and 98 on mobile, there's no issue on LCP or anything else in terms of performance as far as I can see.
https://www.screencast.com/t/mbxYNAZXWPV
https://www.screencast.com/t/9tkSmxNNYMIn

I don't see any console as well.

Not sure why would your test gave out that result.

Thank you very much! Maybe there was an issue before updating the theme. I think it was gone after doing that.

But thank very much that you took a closer look :)

Greetings Kathrin

You are welcome and good job on building that website :)

The performance is very impressive!

Thank you very much for that compliment! But unfortunately there is really a problem with the LCP.

When I open the homepage in my browser and check the WCV-Extension in Chrome the LCP is always to high. The problem should be a ViewBox with the URL: {
"name": "",
"entryType": "largest-contentful-paint",
"startTime": 3933.899,
"duration": 0,
"size": 462663,
"renderTime": 3933.899,
"loadTime": 1097.299,
"id": "",
"url": "data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20940%20788'%3E%3C/s"
}

But I don't know where this ViewBox should be. I'm not using any ViewBox on my Homepage or on the Blog. So I can't identify the problem and solve it. When I check Page Speed Insights the issue is not mentioned, because the value is about 1,6 s but it shows up in the User Experience.

Greetings Kathrin

Hi there,

this element:

data:image/svg+xml,%3Csvg%20xmlns=’http://www.w3.org/2000/svg’%20viewBox=’0%200%201200%20800’%3E%3C/”

is the placeholder image your lazy loading plugin is inserting.

However if i check the Origin summary in Google Page Speed insights i don't see an LCP issue.

Ok, thank you very much! Thank you very much, that was a great help. The LCP issue appears in the Chrome Web Core Vitals extension and I can see that more and more people have a too high LCP in the Chrome User Report. Can I do something to avoid that problem? Can it be caused because Flying Images and Smush are running at the same time?

Greetings Kathrin

Sorry for reaching out again, but I think the problem with the LCP is connected with the fact the featured image is loaded. When I buildet the website I got the following code from you:

function skip_lazy_class_first_featured_image($attr) {
    global $wp_query;
    if ( (!is_single() && 0 == $wp_query->current_post) || is_single()  ) {
        $attr['class'] .= ' skip-lazy';  
    }
    return $attr;
}
add_filter('wp_get_attachment_image_attributes', 'skip_lazy_class_first_featured_image' );

I have added that class to Flying Images in the exceptions for lazy loading.

But since one of the last updates the following happens:

At first the LCP on desktop and tablet devices is green. It stays green until you move the mouse. Than the LCP turns orange or red. The LCP element is always the featured image. But in the console I get the message that is lazy loaded:

element: img.attachment-full.size-full.skip-lazy.wp-post-image.entered.lazyloaded
classList: DOMTokenList(6)
0: "attachment-full"
1: "size-full"
2: "skip-lazy"
3: "wp-post-image"
4: "entered"
5: "lazyloaded"
length: 6

https://imgur.com/a/1KFuGwN

There is no such problem on mobile devices and here is just captured one LCP even it seems to be lazyloaded too..
https://imgur.com/a/xHYLBSK

On my site there is also WP Rocket running and the Lazy Load is turned on - could there be a conflict or do I need a new code für skipping lazy load?

Greetings Kathrin

The PHP snippet adds the skip-lazy class to the featured image. You can use that class to exclude the image in whatever lazy loading plugin you're using now

Ok David, I already did that, but when I look in the console it seems (as you can see on the Attachments) that the exclusion doesn't work the right way and the featured image is still lazy loaded. What can I do?

Hi Kathrin,

To clarify: after adding the PHP snippet, did you add the class skip-lazy to the WP Rocket lazy load exclusion list?
https://docs.wp-rocket.me/article/15-disabling-lazy-load-on-specific-images

The exclusion is just added to Flying Images. The technichal support who solved the problem with the FID on mobile devices told me that it wouldn't be necessary to exclude it also in WP Rocket where he also activated Lazy Loading. Since April there was no problem but now it seems that something has changed and the exclusion doesn't work the right way only in Flying Images. Should I exclude it also in WP Rocket?

Greetings Kathrin

Should I exclude it also in WP Rocket?

Yes :)

Thank you very much! The featured image isn't lazy loaded anymore now but the LCP problem still remains. It's a little bit weird. At first the LCP is green, when I move the mouse and it that moment the Cookie Consent is loaded the LCP turns red. It is something that can't be measured with Page Speed Insights. I think that something that is needed for displaying / loading the Cookie Consent tool isn't loaded at the right time. Could this be?

Greetings Kathrin

You can try making the Cookie consent banner/popup smaller first if possible. :D

Also, if you're using a plugin to display it, it's worth a try asking it's plugin support/developer if they have some sort of workaround for it. (the theme doesn't control third-party plugin scripts)