Resolving CLS issues in Sassafras

Questions › Category: Hello Sassafras › Resolving CLS issues in Sassafras
0 Vote Up Vote Down
Adam Dobay asked 4 years ago

Hi team,
Thanks to your help I’ve now been able to optimise our Sassafras install to pass 2 of the 3 Core Web Vitals for Google’s new Page Experience ranking factor. (Plus the WPEngine hosting really helps with those load times!)

My goal with this optimisation work is to make sure that Sassafras, a theme we’ve loved for years and use across all our main sites, is able to pass these new metrics proving that not only pared-down minimal themes can pass these tests.

My only remaining issue is the Cumulative Layout Shift, which is getting a Poor result. I’ve dug into two instances, the home page and a blog post, to show what in the theme are causing the large layout shifts that impede these scores, I’ve attached them.

Basically, it seems like the loading of the Home-About section is causing the most issues on the Home Page, and on blog posts the H1 and the first paragraph seems to shift too much for Google’s liking.

I’ve read Google’s recommended guide to CLS optimisation but it’s going way over my head.

(Also, Lighthouse lists two random menu items as causing a layout shift, even though they’re snugly tucked inside the hamburger menu?)

I know the CLS metric is quite new, but I’m wondering if you have any thoughts or advice on how to approach solving this. Is it about better structuring of CSS that could be resolved with custom CSS, or is it the way elements are loaded by the theme code itself? Is there anything I can do to get the layout shift down to an acceptable level?
Many thanks,
Adam

Attachments
cls-sassafras-urban-eve-homepage.jpg
cls-sassafras-urban-eve-blogpost.jpg
Adam Dobay replied 4 years ago

Hi, are there any updates on this issue, please? Was Jennifer able to look into it?
I’d love to be able to move forward with this as all our sites run on Sassafras.
Many thanks,
Adam

2 Answers
1 Vote Up Vote Down
Best Answer
Jennifer Staff answered 4 years ago

At this time we do not have a solution.  It may be something we look into for the next theme update.

Adam Dobay replied 4 years ago

Dear Jennifer,
No worries, it’s good knowing that you’re considering it for a later update.
Many thanks,
Adam

1 Vote Up Vote Down
Support Team Staff answered 4 years ago

I do not believe the tests above are accurate.  When I view your site on mobile, nothing is shifting.  It is in place and in the frame width.  

Support Team Staff replied 4 years ago

This is above my knowledge. I've attached a note to Jennifer. She should get back to you.

Adam Dobay replied 4 years ago

Both of my screenshots are from Google's official PageSpeed Insights site. You can run it yourselves here:

For the home page: https://developers.google.com/speed/pagespeed/insights/?url=https%3A%2F%2Fwww.urban-eve.hu

For the blog post: https://developers.google.com/speed/pagespeed/insights/?url=https%3A%2F%2Fwww.urban-eve.hu%2F2020%2F06%2F26%2Fblogolni-miert

I've looked at the data some more and my current understanding of the issue is that when you look at the visual render stages of the site that is visible under the "Lab data" section just above "Opportunities", the first stage of rendering the site has the menu loading in full, with the home-about area under it. In the second stage, the menu disappears into the hamburger menu used on mobile, thereby forcing a big vertical shift upwards of the rest of the site. I think that's what Google is interpreting as a "large layout shift".

(Here's a new screenshot that shows this: <a href="https://www.urban-eve.hu/media/cls-sassafras-homepage-render.jpg&quot; rel="nofollow">https://www.urban-eve.hu/media/cls-sassafras-homepage-render.jpg</a&gt; )

In the tests I ran on my own phone, this shift happens in less than a second, but it looks like that is enough for Google. And strict as they are, these new metrics come into effect as a new critical ranking factors in 2021.