Archived topic
Site LCP/CLS
5 replies · Started by Dan on October 14, 2021
Hi -
A couple months ago, I reached out to discuss LCP and CLS.
https://generatepress.com/forums/topic/lcp-high-for-hero-image/#post-1894323
We arrived at a solution that produced a better number in PageSpeed Insights (PSI) lab data for the front page. In the two months since, it looks like field data has improved, generally. Unfortunately, we were largely focused on the front page and even though I've been trying a number of things in the meantime for the rest of the site, Google Search Console (GSC) is still reporting LCP/CLS issues across the whole site.
In the private data, I've included a specific post that I'm looking at as an example (but the problem appears to apply to dozens of posts).
There are five elements that are causing a non-zero CLS. The largest is this one:
If I'm reading this report correctly, PSI is referring to the entire post. How can this be? I'm using regular GeneratePress for the body with GP Elements for the post header/footer and sidebar.
I'm also still getting the "longer than 2.5s" LCP issue in GSC for a dozen or so pages even though when I run PSI on those pages, the LCP is in the green (i.e. under the 2.5s). I've left an example URL in the private data section also. I intentionally waited a couple months just to see if the validations in GSC would return the improvements, but I'm not seeing much different in GSC to align with what I'm seeing in PSI.
While we're on this topic, I noticed a new note in PSI to "avoid non-composited animation".
https://web.dev/non-composited-animations/
Do you know if that's something that could be affecting LCP/CLS in this case?
Thoughts?
Thanks for your time.
Hi there,
i ran a performance test on a throttled 3G network to show whats the cause of the CLS on the first link. See the video recording ( note theres some waiting time as the profile is loaded ):
https://www.screencast.com/t/NjpjghM01
The issues look related to WP Rockets Optimized CSS Delivery ( aka Critical CSS and Font Swapping etc ). You can see on initial load there is no styles for the Top Bar banner, and also the fonts are being swapped, which is causing the various layout shifts.
This really is something that needs to be addressed with WP Rocket. I personally never use those options, and in a large amount of support topics here, the only solution was to NOT use them.
RE: the LCP issue, hard to explain that one, as you said the PSI report doesn't generate the issue. My only consideration here is related to the end user on a slower network on lower end devices that would take longer to load and execute the resources before the image can be rendered.
Hi David -
Unchecking "Optimize CSS delivery" seems to have made a difference. Thanks for making the connection to that setting. I played around with those WPRocket settings months ago and thought they were all good when the front page started performing better. Evidently, not.
Let's hope GSC looks better in the coming days/month.
Thanks for your prompt effort.
Oh, on a possibly related note, I noticed that PSI field data is reporting the FCP as yellow (2.3s), but the LCP is green (2.5s) for the front page. Do you think that's anything to be concerned over considering the LCP is barely in the green? Or give it a month since it's field data?
Glad to hear that worked.
RE: FCP - the Lab Data results are great, so you should see Field Data improve over time.
There will always be some differences as you can't account for whats happening at the users end. The spec of their device and their networks speed may vary ( good or bad ) in comparison to the Google simulated Lab Data.
Other things like Browser Extensions on an end user device can also impact timings. DebugBear wrote a great report on Extension impact if you fancy some 'fun' bedtime reading :)
Thank you for your time and effort in this matter.
You're welcome
