- This topic has 14 replies, 2 voices, and was last updated 4 months, 1 week ago by David.
October 16, 2020 at 5:06 am #1491780Jeff
I was hoping to solve this through research but can’t find a solution. About me: I’m not great with WordPress stuff in general. By that I mean I read many support posts of problems/solutions and mostly I don’t know what is being discussed. It’s entirely possible I’m not cut out for this. Regardless, I’m going to describe my current issue as best I can.
My setup is this: I have GP premium and have customized my website setup off of the GP demo site called “Split”. I like the logo in the middle with menu selections on both sides. I’ve gone with minimal plugins and use WP Rocket for improved speed and “The SEO Framework” for SEO things. It’s an E-Commerce site so I use WooCommerce.
I frequently check Google PageSpeed Insights which has given me information on my problems. However, the problems are obvious even without being told. Primarily I’m having CLS difficulties and it appears to me that the culprit pages are all WooCommerce pages which is why I suppose this is so difficult for me to solve considering I can’t do much from my theme tools to address the problems. Anyway here’s what’s happening and the issues seem to be on desktop and not on mobile:
1. When clicking to the following pages the header logo and entire menu shift to the right around 5-10 or so pixels: Shop page, product page for leather, product page for cork, and the cart page.
2. When either of my 2 my product pages load (one is cork, one is leather), there’s a very noticeable shift of the entire page going quickly right and then left. There’s a caveat however. If I remove the images from my product gallery then there is no noticeable shift (except the header items mentioned in number 1 above).
So that this can be viewed I’ve removed all images from the product gallery for “leather” but left in place the product images for “cork”.
I believe that the shifts described in numbers 1 and 2 above are responsible for my poor CLS scores on Google and Lighthouse. It’s visibly obvious. I also want to add that ChromeDev states that it’s due to my images not having size information. Okay, well I don’t know about that. I figure WooCommerce knows the sizes and passes that info along by some means. But somehow apparently that isn’t happening.
Anyway, I’m obviously not savvy at these things and very likely am in over my head and need a website developer that knows what he/she’s doing. But I figured I’d first run this by you. Thanks.October 16, 2020 at 5:59 am #1491830Jeff
I just noticed something NOT related to WooCommerce. The same shift described in number 1 above occurs when going to the “About” subpages “our leather” and “our cork”. So my problems aren’t just a WooCommerce thing.October 16, 2020 at 7:25 am #1491946DavidStaffCustomer SupportOctober 16, 2020 at 5:12 pm #1492653Jeff
Thank you David. No, that’s not it. I deactivated WP Rocket completely, cleared cache, and no difference.October 17, 2020 at 7:33 am #1493139DavidStaffCustomer Support
We found a couple of issues in the way that Woo and theme serves its CSS which has a CLS issue.
Try the CSS i provided to this user as a temporary fix:
Can you test it without the WP Rocket enabled so we can isolate it from any issues that may be cache related.October 17, 2020 at 9:22 am #1493399Jeff
WP Rocket is disabled and the recommended CSS (for temporary fix) has been entered under Additional CSS in Customize. It doesn’t seem to have any impact on the issues and I’m looking in both Chrome and MS Edge.
The header shift issue is also happening in About>Our_Leather and About>Our_Cork, although with those two page occasionally “Our Cork” does not shift.October 18, 2020 at 12:00 am #1493879DavidStaffCustomer Support
I ran a test on Home, About and About > Cork.
All of them have a
0CLS score. The CSS i provided was specifically for Woo pages so didn’t apply to them. Which points the finger at the WP Rocket cache being an issue – which is generally related to the automatic Critical CSS setting.
For the single product page – the CSS i provided did work – it removed one of the issues that theme is in control of ( and will be patched in a later update). The remaining major issue is on the Cork Cat Collar single product. And is related to the Carousel Thumbnails – this is related to how Woo serves up the image HTML. Not found a dynamic solution to that and is something that probably needs addressing by Woocommerce. But i am still looking into that.October 18, 2020 at 3:38 am #1494046Jeff
Hello David. I see what you mean in numbers improvements on CLS since adding the CSS and I see the zero CLS scores when deactivating WP Rocket. So the remaining CLS (with WP Rocket activated) is something I’ll take up with them.
Scores aside, the problems I’ve described that are apparent visually have not changed and remain the same whether WP Rocket is on or off. Those items were described in numbers 1 and 2 in my original post. A couple of those pages have nothing to do with WooCommerce.
Sorry if I’m repeating. Thanks for the time spent.October 18, 2020 at 3:53 am #1494056Jeff
And maybe I don’t know what CLS is. I honestly thought this page was a poster child for CLS: https://www.catcollar.com/shop/cork-cat-collar/ . Considering the extremely ugly load shifting left to right to left inside of a second. But yet Google scores now say (as we’ve both agreed) everything’s great in regards to CLS and the user experience. But yet it sure shifts around a lot on the load. So why the great score? It’s as ugly as it ever was.
I don’t expect an answer David. It’s rhetorical. This is exactly the type of thing that drives me crazy when it comes to building a website. And again, maybe I just am utterly ignorant on what CLS is.October 18, 2020 at 6:45 am #1494187DavidStaffCustomer Support
I am not actually seeing the horizontal shift on my desktop or mobile – i have throttled my network so it loads real slow and no sign of it. Have you tried viewing the site in an Incognito browser as that will not load a cached page.
Aside of being really annoying, CLS is just a measure of how much movement there is in a page after it first loads. Its primarily measured on Vertical Movement, which causes that awful UX event; when your just about to click something on mobile and it suddenly jumps out of the way to accommodate a slow loading advert or image that just decided to pop into play.
Some background on how a site is displayed:
HTML is loaded into memory ( creating the DOM ) it then creates the CSSOM which maps all the Element tags and CSS selectors in the sites HTML to which the CSS styles are applied. Once all those pieces are in play it creates the Critical Render Path (CRP) that renders the ‘first paint’ which is what you see when the site first loads.
If all things are loaded correctly and there is no Dynamic Content ( such as Adverts, Lazy Loaded Images or in your case the Woocommerce Carousel thumbnails ) then there should be no issues.
Couple of main reasons why CLS occurs.:
1. Dynamic Content is injected and the HTML or CRP styles does not pre-empt them and provide the necessary sized space for them to occupy. This is happening with the Woo Carousel thumbnails with is something they should ( and we will ) look into.
2. Deferred Styles – whether it be by design or a cache/optimization plugin some styles are moved outside of the CRP. Both Woocommerces Smallscreen CSS and GPs Woo Mobile CSS are rendered outside of CRP. Which is the issue i provided the CSS fix for and will be patched in GP Premium.
Cache plugins can also affect this – primarily automatic Critical CSS – which strips out what it thinks is the CSS required to render the above the fold content ( for first paint ) and then defers the rest of the CSS. Unfortunately unless every page is identical in its layout then automatic Critical CSS is always going to cause issues.
Hope that at least gives you some insight why this occurs.
Let me know about the horizontal movement.October 18, 2020 at 9:44 pm #1494969Jeff
Hello David. Thanks for the info. Here’s an mp4 video in my onedrive that shows what I see on my desktop: https://1drv.ms/u/s!An2JeS0lVhKZiN1auSCp5GcNeYkSTQ?e=9psV8B
I will check other peoples computers but hard to believe that the only site doing this on my computer is my site. You will see everything described. The header logo and menu items shift to the right when going from one of the “normal” pages to “Shop” or any of it’s submenu items, “About” submenu items (but not “About” itself), and cart. You will also see a quick double shift (left to right to left) when going to Shop>Cork.
I’ve look in incognito mode and it’s the same. Both MS Edge and Chrome.
Please confirm whether you see what I’m talking about in the video. If you don’t it means I’m not explaining the problem well and will try and go into better detail.October 18, 2020 at 10:23 pm #1494987Jeff
As promised I went to another computer (wife’s) and sure enough I do not see the items in the video I sent you. The only problem I see on the other computer is when selecting the shop page (with cache cleared) there’s horizontal shaking during the load. Once cached it’s gone.
Do you at least see the one issue that I see on my wife’s computer? The horizontal shaking when selecting “Shop” after website cache is cleared?
I’m not even sure where to go from here. I have a pretty solid computer without any unusual graphic settings so of course I’m wondering if my computer is the most representative, yours, or my wife’s.October 18, 2020 at 10:35 pm #1495003Jeff
I’m going to try to simplify the header away from the split layout and see what happens. I have a suspension that the current layout just isn’t stable in some way that’s way over my head.October 18, 2020 at 10:36 pm #1495004Jeff
suspicion not suspensionOctober 19, 2020 at 4:05 am #1495287
- You must be logged in to reply to this topic.