LCP & CLS Fail On Desktop

Hi there,

the lab tests pass CWV but the real world results don't so something is amiss when it comes to some users visiting the site. Try adding this CSS to your site:

.left-sidebar .site-content .content-area {
    margin-left: auto;
}

Let me know when its added and ill do some performance tests to see if that helps

HI David! I have just added the code now! thanks for taking a look :)

let's see how things go from there! :) talk soon!

OK so with the CSS my throttled network tests show a big improvement in the CLS. So thats good.
I replicated it on a webpage test here:

https://www.webpagetest.org/result/220601_BiDcRD_AY7/

You can see the CLS is in the green :)

The FCP and LCP times, thats probably out of our control. If you check the waterfall report in the above test you can see the FCP and LCP times are ridiculously quick on a London server. Same results when i checked it on a California server.

So i am not sure if you have a high visitor rate from a slower network region?

Hi David thanks for checking this out. My visitors are mainly from the US, UK and Australia.

That's really strange.

It really hard to diagnose when the data from the Lab test is so great and theres no obvious issues related to LCP eg. a large featured image file.

So I ran some other tests on the single post to see what was up with the LCP:

https://www.webpagetest.org/vitals.php?test=220602_BiDc99_8GH&run=2&cached=0#lcp

First thing of note is the LCP Element in all my tests is the entry-content container. Its all of your post content.
Lets have a look at the issues that could cause:

https://www.screencast.com/t/RlLjtZIjH6zX

We're interested in whats happening between FCP and LCP times.
And there are two main things that standout to to me.

1. There is the large featured image that is below the fold.
2. There is a Long Task running.

Note that the LCP does not get recorded until #1 and #2 are complete.

The #1 image is below the fold, and yet it still shows up as something that had to be loaded before the LCP could be calculated, which means elements within your content are having an impact on LCP.

#2 the Long Tasks are scripts running that effectively block the browser from doing anything else. When i run the same tests on Mobile i don't see the same issue. So there are some dedicated desktop scripts that are getting in the way.

So how to fix?
hmmmm.... sounds crazy but make sure the LCP element is 100% above the fold.
You could try using a much larger font size for the H1 heading so it becomes the LCP. Or have the featured image above the fold and NOT in the post content.

Other things to check is the Mediavine scripts being loaded. On my other tests i see a LOT of their scripts being injected and is a key cause of the Long Tasks.

Hi My friend

thanks for all your information and thanks for checking this out for me I really appreciate that!

I was running the minimal ads before I switched to the default frequency and the problem was still there.

Another thing is, that I was having smaller images as well, and still had the same problem. The thing is, I cannot take the ads away, and as a beauty blogger, the site relies on images... So you can imagine my situation :D

I think that making the h1 text bigger will not look good, but I can try having a featured image above the fold.

How do I do it? And what would you advise for me to diminish the impact of ads?

Many thanks! Patricia.

Regarding Mediavine - i am not sure how those scripts are loaded, but i believe there is an option in Perfmatters to defer their loading.

The Featured image. How is the image currently being added to your posts ? Are you adding it in the editor ?

HI David! Thanks again!

There is a defer option on perf matters which is not enabled. I think I didn't enable this because I had some problems
with another plugin (wp rocket), which I believe was affecting google analytics loading time. here is the screenshot https://ibb.co/c140T6N

Do you think If I defer it, it won't affect GA?

About the image, I currently have a featured image on the post deactivated. I was simply uploading the images directly on the post area. Should I enable it?

Many many thanks!

Might be worth testing out the defer code first, before messing with the image.
Ask over at Perfmatters support, Brian is really good, and explain the issue as he should be able to assist deferring just the necessary codes.

OK will do it and then will let you know! Many thanks! Patricia.

You're welcome

Hello David, I hope you're having a great week so far! I contacted Perfmatters, and they said I already have the delay script activated, so I don't need to defer. Should I defer instead of delay?

Also, on the lighthouse, it is pointing to some changes I could make to have improvements as I show in this image https://ibb.co/KFwV81t

Another question I have is, having in mind how my site looks, Is there a way to delete from the theme, all the parts that I Don't need, like customization options CSS files, and javascript files that I won't use. All I need is the header, sidebar, main content, footer, the post linking index page, pages, and single post page. just the basic. Is that possible? Do you know what I mean? thank you a million for that!

Thank you!!!

Patricia,

Hi Patricia,

defer is to delay the script from loading, so no need to change anything.... did you ( could you ) ask them to do a web page test on the single post? As i am at a loss as to why there is such a difference between the Lab and Real User data.

The lighthouse changes, those resorces are tiny, if they were a main issue then the lab data would show it when we do a PageSpeed test.

Last question - with GP we try our very best to only load the resources you use.
So if you don't have a module enabled or a setting selected in the Customizer then it does not load any of the HTML, CSS or JS that it would use.
There are very few instances where some combined CSS may contain something you don't require but believe me it would make no difference removing those few lines.

Hello David, I asked them what would they advise me to do, so I am waiting for their response thank you!