-
Posts
-
I’m running a test to track down a LCP issue reported by PageSpeed Insights. I created a test page with nothing except header, footer, and a layerslider. PSI reports a very high LCP for the logo for the logo the header. For example, it reports this element (actual path in private content):
‘img src=”https://www.site.com/wp-content/uploads/2024/10/website_logo.png” height=”100″ width=”300″ alt=”logo” /’
as being the culprit. The image is exactly 100×300 and about 8Kb in size. But it takes over 2.7 seconds.
Phase/% of LCP/Timing
TTFB/24%/600 ms
Load Delay/16%/400 ms
Load Time/30%/750 ms
Render Delay/30%/730 msI’m struggling to determine way the logo, which is part of the theme’s header, is so slow.
Thanks
Hey TTI,
Thank you for the inquiry.
Did you figure out the issue? The LCP score is now 0, with only a 1010ms delay from the first Layer Slider on the page.Best regards,
IsmaelHey!
Apologies for my previous reply. I was looking at the CLS score, not the LCP. Have you tried preloading the images used as the logo or slider image? You can try this plugin: https://wordpress.org/plugins/preload-lcp-image/
Best regards,
Ismaeli could not imagine that a logo is the reason for bad LCP Values. (maybe if you use a svg Logo with embedded image gradients (like Instagram now did) ) a svg with 10MB 🙂↔️ (https://about.meta.com/brand/resources/instagram/instagram-brand/)
if you got for example a bigger advanced slider – that could cause it
on pagespeed insights – go to the diagnostic part and open the LCP part to see what is responsible for that.Thanks for the replies. The diagnostic part of the LCP is indeed the logo. The logo is only 8Kb in size. The slider is set to not loaded for small screens so it should not be affecting the LCP. I’ve tried preloading (using the WP setting) and that does not improve things significantly. LCP is still high. I’ve started from the beginning with WP rocket disabled – very large LCP for the logo. Then I enabled various optimizations one at a time while making sure my cache was clear. No matter what, LCP is very high for the logo. There’s nothing but a header, footer, and the logo, all part of the Enfold theme. It should pass all diagnostics.
Thank you,
Johnwhat i can see on that page is the layer-slider setting – and on my iPhone this is still there (the layerslider).
Hi,
Thank you for the update.
The diagnostic part of the LCP is indeed the logo
Did you try preloading the images? It seems that LCP is no longer an issue when we checked the site again today. Please review the screenshot in the private field.
Best regards,
IsmaelThank you. I did find the preload image setting in WP Rocket and enabled which did improve the LCP (at least turned it green).But, this is a basic test page with no content. I subsequently found out that the page loads 40+ render blocking CSS calls prior to the logo. The majority of the CSS are never used in the page. The problem with this is, the LCP will easily exceed 2s on other pages of the site for other elements because of the render blocking CSS. Essentially almost 2s worth of blocking that I can’t do anything about, unless I’m missing something.
Hi!
Thank you for the update/
A high LCP score is often caused by large images, which is why preloading helped in this case. While render-blocking resources can also delay it by slowing down image loading, they don’t directly affect the LCP score. Could you provide links to pages with high LCP scores?
Cheers!
Ismael
- You must be logged in to reply to this topic.