-
Posts
-
Hi Guys,
I am having some LCP issues with Enfold accross several sites on my server. Please see below:Generally I can get Enfold sites to pass all Web Vitals Metrics – Even without critical CSS. Just correct setup and caching. But the LCP score has always been boarderline fail.
A couple of sites dont seem to be working properly – The logo is being detected as the LCP element and I cannot work out why.
https://www.ashbybasketball.co.uk – Full width background slider with captions – Fades in. The LOGO is detected as the LCP element. This is incorrect behaviour. The slider should be the LCP. I have even added dimensions as the current Srcset solution does not do this.
You can also see it here:
https://www.doodles-of-art.co.uk – Full screen background image as first element – Logo is LCP.Sites that work correctly:
https://www.burdenbasket.co.uk – Empty ALB color section is correctly detected as LCP when tested in Lighthouse
https://www.brankley-cattery.co.uk/ – Correcly picks another element for LCP
https://www.dunrichsoftfurnishings.co.uk – Correctly picks another element for LCPAny ideas why this might be happening?
I cannot work out why the LCP is the Logo.For Ashby Basketball – I saw an improvement by removing grid.css from script merging. So this site has a slightly different setup for now. But Doodles Of Art is All Enfold with just a Caching Engine and the problem still occurs.
Not sure if WooCommerce is causing problems here or not? I did try disabling it and re-testing but it did not make a difference.
Any help would be appreciated – I am sure this will benefit others struggling with web vitals.
I have just been looking at the performance/network panel in Chrome Lighthouse.
For doodles-of-art.co.uk and ashbybasketball.co.uk after the initial render, the logo then disappears and re-appears at the LCP point. After JS has loaded an animation is triggered and the LCP is recorded as after the animation finishes.
The LOGO recieves a fade in animation in both these examples.
This might be the cause of the issue because the logo does not animate on the burdenbasket.co.uk.
Is there anything I can do to prevent this behaviour?
I’m keen to hear your suggestions.
I’m in a similar situation, trying to determine cause of LCP on some sites (not on all). Still investigating. Interested to see what you find thinkjarvis or the Enfold team’s comments.
Most of the time for my sites it’s either the H1 or the first paragraph that is being flagged as the LCP. Wondering if it is font styling that is rendering late causing that?
I took a quick look at your logo thinkjarvis on the Doodles of Art site, and one thing I noticed is for some reason in responsive mode on Chrome I never get served a smaller image than the original – I only ever get the 790×400 being served. Wondering if that is connected to why it’s being flagged?
If I find anything concrete I will share here.
THP thanks for the suggestion.
If the text is the LCP element try serving your fonts locally and adding preload to the header file (you can do this from functions.php). This will help prevent CLS shift and improve LCP and FCP scores in most cases. If you download the fonts you can use cloud convert to convert a .ttf font to a .woff2 which is much smaller.
I think one of the issues is that when CSS is merged into one file, the page layout is unavailable until this loads – Meaning that any calculated image sizes like the logo with Srcset wont render until the browser gets the size info from the CSS file. The only way around this is to generate critical CSS.
I have tried Jetpack Boost to add critical CSS (new plugin from the official WordPress team). This should fix the problem but I need to experiment more with it yet. Ironically I also tried inlining all of the CSS so there were NO CSS FILES and this actually reduced LCP to a pass score of under 2.5 seconds! But not best practice given the 100kb of CSS in the theme! The TTI score got a lot worse!
Try using Jetpack Boost if you are not already using a plugin that generates critical CSS.
Regarding Doodles Of Art – When you open Chrome it will always load in desktop mode. Even when using dev tools. So it will already have the larger image saved in cache when using dev tools to change screen sizes. If you run Lighthouse in mobile mode – It does render a smaller logo image.
Will wait to see if team Kriesi have any advice on the LCP issue – specifically regarding the logo as the LCP.
THP Studio
As long as your site scores above 90 – Generally speaking the field data will show a pass in web vitals / page speed insights. But if it doesnt try adding WebP support to reduce the size of your images.
WARNING BACK UP YOUR WHOLE INSTALL and DATABASE BEFORE USING THIS PLUGIN. Or set it to skip compression of existing files and just generate WebP so your original images are not affected.
I now add EWWW WEBP plugin if required. It makes the TBT score get worse but helps improve the LCP score.
Use expert mode and exclude the following before running:
/wp-content/themes/YOUR CHILD THEME/
/wp-content/themes/enfold/
/wp-content/themes/
/wp-content/cache/
/wp-content/languages/
/wp-content/plugins/
/wp-content/upgrade/
/wp-content/uploads/avia_instagram_cache/
/wp-includes/
/wp-admin/Set the WebP Compression to 65/100
Turn on both JS method and Picture method. Then enable lazy load and SVG placeholders. Should help keep the LCP score consistent.Jetpack Boost for Critical CSS
You can also try adding JetPack Boost and using it to generate critical CSS. This is a free service from the creators of WordPress.
- You must be logged in to reply to this topic.