-
Posts
-
Hi there,
I run a WooCommerce store using Enfold.
Since the Core Web Vitals metrics have been introduced, my site has been scoring poorly on CLS (Cumulative Layout Shift). This is due to the way that Enfold manages the product page load; there are a few events during page load that cause shifts of content elements, namely
1. top bar logo loads after menu
2. product description tab takes a long time to load
3. product image fades inNone of these are site specific, they happen on all Enfold sites.
These three things lead to a very high CLS and subsequently the whole site scores poorly on Core Web Vitals.
Is this something you plan to fix in coming releses?
Hey Jason,
We apologize for the delayed response.
Can you give us a link to the page mentioned? so we can inspect further.
Cumulative Layout Shifts measures visual stability and common issues are images having no width and height (because of the responsive image trend) I think the top bar shouldn’t contribute to it since it’s height is specified, product image fading should also not be a factor, but I think description tab is a huge factor.
The future updates should add some improvements to it.Best regards,
NikkoHi Jason,
Thanks for the link.
I have checked your site in GTMetrix even Google’s Lighthouse and the CLS is ranging from 0 to 0.04 (you can check GTMetrix results in private content)
As for performance, it seems good with GTMetrix probably because of the location but on my end, it’s a bit slow around 7s because of the blocking time.Best regards,
NikkoYou’ll need to use Chrome Lighthouse, or the 3G throttling mode to see what I am referring to. On that page or related ones, with a 3G throttle:
– logo loads after menu
– all the related product thumbnails load before the main image (because they are above the fold due to description tag not yet expanding)
– +/- buttons for quantity load
– description tab loads pushing thumbnails below the fold
– then main product image loadsThe core web vitals scores in Lighthouse demonstrate this with very different scores compared to an unthrottled test like GTMetrix.
Thanks,
JasonHi,
Thank you for the update.
This is the result that we got when we checked the product page on Lighthouse. It is not that bad, but not great either. However, the CLS score, which is what you are more concerned about based on your posts above, is very low 0.048, which according to the web vitals documentation is quite good because it is less than 0.1.
Screenshot: moved to private field
What is a good CLS score? #
To provide a good user experience, sites should strive to have a CLS score of less than 0.1. To ensure you’re hitting this target for most of your users, a good threshold to measure is the 75th percentile of page loads, segmented across mobile and desktop devices.// https://web.dev/cls/#what-is-a-good-cls-score
You are probably just asking for unnecessary pain when you check the site performance on a throttled connection, and maybe try to lower your expectation a bit when doing so.
Best regards,
IsmaelThanks Ismael,
Would appreciate you putting the screenshot in private links.
I don’t think your score in Chrome on a fast PC is indicative of a mobile device on a real world connection. Google use a throttled test when doing their scoring for Mobile, this is documented in many analysis’ of Core Web Vitals.
If you use Pagespeed Insights on the same page you see a score of 30 overall for Mobile. And maybe you are right, CLS is not the issue, it’s FCP.
Are you able to look at these metrics and provide some performance fixes for the theme? Google have been signalling very clearly that Core Web Vitals is going to become a ranking signal in 2021.
Thanks,
JasonHi,
I don’t think your score in Chrome on a fast PC is indicative of a mobile device on a real world connection.
Simulated throttling is enabled by default, so the result above is actually from a slowed connection and hardware performance, but you are right, the score on mobile is pretty low, with CLS hovering around 0.377. According to the result, the images in the gallery do not have explicit width and height and they are lazy loaded, which caused layout shifts. The CLS score might improve if you switch to the default gallery from the theme instead of using the Woocommerce 3.0 Gallery, and disable lazy loading.
Best regards,
IsmaelThanks Ismael,
When I test from the Pagespeed website the score is very different. I always assumed this was Chrome not being throttled.
I tried swapping to the Enfold gallery and it is marginally better. I also have the problem where all media on the page (eg. youtube videos in footer) appear in the gallery for the main product image. How can they be filtered?
With the Woocommerce gallery, the main image is not lazyloaded, only the thumbnails which should be below the fold. They appear above the fold due to the description tab taking so long to load.
Is there a way to make the description tab display immediately on pageload instead of it waiting on whatever event is drawing the tabs & +/- buttons currently?
Jason
Hi,
description tab display immediately on pageload
That is not possible because of how Woocommerce created the tabs, at least not without editing the tab script directly. The script sets the display property of the description tab on page load, and the only way to make it display immediately without waiting for the script is by overriding the display property using css. However, this will cause the description tab to display indefinitely, which is not what we want because there are other tabs.
The quantity button script can be modified in the enfold > config-woocommerce > woocommerce-mod.js file. Look for the avia_apply_quant_btn function around line 32, but I think this is not necessary because the layout shift cause by these buttons, if there is any, is very minimal.
Best regards,
IsmaelThanks Ismael. Do you have any tips for FCP? I am trying to make sure my site is ready for mobile first indexing. My desktop score is great but my mobile score is below 30 for over 500 pages :(
Edit: Another thing telling me Core Web Vitals is off — GSC says CLS is bad on 600 pages.
Thanks,
JasonHi,
Are majority of those product pages? If yes, then our previous suggestion to switch to the default theme gallery should help.
According to the result, the images in the gallery do not have explicit width and height and they are lazy loaded, which caused layout shifts. The CLS score might improve if you switch to the default gallery from the theme instead of using the Woocommerce 3.0 Gallery, and disable lazy loading.
Best regards,
IsmaelHi Ismael,
Yes they are mostly product pages.
As I said above, changing the gallery did not have much of an impact when I did a test. I don’t believe the Woocommerce gallery images are not lazy loaded, not sure how you’re seeing this?
I am happy to try it globally for a few weeks, but I’d need a fix that stops all images on the page (inc images/videos on the footer) appearing in the default gallery widget as I mentioned above.
Cheers,
JasonHi,
t. I don’t believe the Woocommerce gallery images are not lazy loaded,
Actually, the problem is that the images in the default Woocommerce gallery are lazy loaded, but they do not have the width and height attributes, which is readily available in the default gallery. According to the web vitals documentation, doing lazy load is fine as long as you are not doing it for the images above the fold, which is what we have here in the product pages, and it is alright as long as the width and height attributes of the images are specified. So using the default Woocommerce 3.0 gallery is not helping at all in this case, because for some reason the width and height attributes of the images are not available.
Best regards,
IsmaelThanks Ismael,
I am not sure how you are getting that info – the main image was 100% NOT lazy loaded as it did not have the lazy-load class.
I have switched to the Enfold gallery. I stopped using it because the Gallery slideshow includes all the images on the page including my footer etc, not just product images.
Can you help me remove this & also re-measure the Core Web Vitals to see what’s improved? I find them so variable when I use Lighthouse, but Search Console has our site consistently failing CLS and LCP for Mobile on the whole site. I want to improve this!
Cheers,
JasonHi,
Sorry for the delay. The CLS score in the product page above, which is using the default gallery with lazy loading is now 0.002, which is better than the previous scores, but most of the metrics like LCP are still lower than they should be. You have to follow the recommendations listed below to improve those scores.
– Ensure text remains visible during webfont load
– Does not use passive listeners to improve scrolling performance
– Image elements do not have explicit width and height
– Minimize main-thread work 6.5 s
– Serve static assets with an efficient cache policy 40 resources found
– Reduce JavaScript execution time 4.3 s
– Avoid an excessive DOM size 1,414 elements
– Eliminate render-blocking resources
– Remove unused JavaScript
– Reduce initial server response time
– Remove unused CSS
– Defer offscreen images
– Serve images in next-gen formatsThese articles should help with the site optimization.
// https://kriesi.at/archives/scoring-100-100-in-google-pagespeed-insights-gtmetrix-pagespeed-and-yslow
// https://gtmetrix.com/wordpress-optimization-guide.htmlOne thing that you could try immediately is to use a different cache and minification plugin, just play around with the options until you get the best results. You may also need to upgrade hosting plan to ensure that the server response time to the client is decreased.
For additional inquiries, please open another thread because this one is getting quite long. Thank you.
Best regards,
Ismael
- The topic ‘Enfold and Google Core Web Vitals’ is closed to new replies.