CSS question to solve CLS in a Colossus

[ids]

I was able to solve a significant portion, 0.8 to 0.2, of CLS by adding a min-height to the Header in the Global Header. Not sure if that was the correct way to solve it but it seems to work. If that's right, the lesson is that simply adding height and width and an aspect ratio style element won't cover it all.

I am still trying to address the last 0.1 or more where I am seeing a logo shift. The global header is nearly stock Colossus. The logo for this store has more height than the demo for example. The logo's height and width are set, but the container is appearing collapsed until it's time to render the logo. (btw: there are is a tag line below the logo that illustrates the shift ). The img tag has width/height but space isn't allocated. I've attempted to use a min-height for the anchor tag (the logo is also a link) and the div the image resides in. Again, not sure if I'm doing this correctly. I am still wondering how to make sure space is allocated so it passes Google's CLS calculator.

Thanks,

Scott

[Matt Zimmermann]

Hi Scott,

Sadly, the new metrics Google is putting out are still a moving target. They keep making tweaks to it so coming up with a "best-practice" is still a bit off, IMO. Using "min" dimensions is a good way to start. I am still working on better ways to approach this in Shadows which will then be applied to Colossus.

[lesliekirk]

Hi Scott,

Sadly, the new metrics Google is putting out are still a moving target. They keep making tweaks to it so coming up with a "best-practice" is still a bit off, IMO. Using "min" dimensions is a good way to start. I am still working on better ways to approach this in Shadows which will then be applied to Colossus.

While it's still a moving target there are stores being penalized

[Matt Zimmermann]

While Core Web Vitals are important to address in a site, there are still 200+ ranking factors and Google is using them all to rank websites. These factors don’t go away, and you should keep paying attention to them. Yes, getting your CLS as close to zero will be a goal, but making sure it is loading quickly and mobile friendly are more important.

Other things can affect your rankings even more like:

• High-quality content is still one of the primary aspects determining how well your site ranks on the search. If the created content is low-quality, but the site passes CWV, it still won’t outrank the pages with high-quality content.
• Keep an eye on your site’s metrics like bounce rate, click-through rate (CTR), and page views per session.
• Make your site mobile-friendly. It will help to increase your rankings. Google prioritizes mobile-friendly sites on their search.
• Implement lazy load for ads and content below the first screen.
• Reduce the number of HTTP requests (eliminate unused scripts, images, plugins, etc.). It will help your page load faster–the fewer elements there are, the faster it takes for the page to load.
• Try to limit the number of third-party scripts loaded in as they can dramatically affect the CLS rating on your site.

[lesliekirk]

While Core Web Vitals are important to address in a site, there are still 200+ ranking factors and Google is using them all to rank websites. These factors don’t go away, and you should keep paying attention to them. Yes, getting your CLS as close to zero will be a goal, but making sure it is loading quickly and mobile friendly are more important.

Other things can affect your rankings even more like:

• High-quality content is still one of the primary aspects determining how well your site ranks on the search. If the created content is low-quality, but the site passes CWV, it still won’t outrank the pages with high-quality content.
• Keep an eye on your site’s metrics like bounce rate, click-through rate (CTR), and page views per session.
• Make your site mobile-friendly. It will help to increase your rankings. Google prioritizes mobile-friendly sites on their search.
• Implement lazy load for ads and content below the first screen.
• Reduce the number of HTTP requests (eliminate unused scripts, images, plugins, etc.). It will help your page load faster–the fewer elements there are, the faster it takes for the page to load.
• Try to limit the number of third-party scripts loaded in as they can dramatically affect the CLS rating on your site.

Agreed - good ol' fashioned "SEO" is still very important. Something that I thought was contradictory to Google's thinking is dinging a site for having a third-party app that allows for real-time help and communication between the customer and customer service. I commented out one of those "top-rated" apps I saw an overall increase of 20 points (in the mobile view). You'd think it would be considering something of value for the customer experience.

[ids]

My CSS question is still pending for the mobile test, but I can be more specific I guess. The min-height is currently redundant. Tag lines 1 and 2 initial render is at the top instead of waiting until the image conditional result is rendered. Do I need to wrap the anchor with a div to assign a min-height?

<div style="min-height: 113px;" class="o-layout__item u-width-6 u-width-7--m u-width-2--l u-text-center t-site-header__logo">
   <a style="min-height: 113px;" href="&mvte:urls:SFNT:auto;" title="&mvt:global:store:name;" rel="nofollow">
   <mvt:if expr="l.settings:readytheme:logo_type EQ 'text'">
      <div style="min-height: 113px;" class="t-site-header__store-name">&mvt:readytheme:logo_name;</div>
        <small class="t-site-header__store-tagline">&mvt:readytheme:logo_tagline;</small>
   <mvt:elseif expr="l.settings:readytheme:logo_type EQ 'image'">
        <img style="min-height: 113px;" width="235" height="113" src="&mvte:readytheme:logo_image;" alt="&mvt:readytheme:logo_alt;">
   </mvt:if>
   </a>
   <div class="u-font-medium"><strong>Tag line 1</strong></div>
   <div class="u-font-tiny"><strong>"Tag line 2"</strong></div>
</div>

Scott

[Matt Zimmermann]

Hi Scott,

Looking at your code, your wrapping DIV should have a minimum height greater than 113px since that is also the minimum height of the link. The minimum height for the wrapper should take into account the tag lines as well.

[afiumano]

I was wondering if you got this working? I had a CLS issue with the header as well - although I did not have text under my logo. I was able to fix mine simply by putting width and height dimensions on the img src for the logo. But another issue I am having, which may be affecting you as well, is text rendering. Since I am using an external webfont - the layout shifts slightly when the correct font loads. I have set some min-width & min-heights but it hasn't corrected it 100%.

[Matt Zimmermann]

I was wondering if you got this working? I had a CLS issue with the header as well - although I did not have text under my logo. I was able to fix mine simply by putting width and height dimensions on the img src for the logo. But another issue I am having, which may be affecting you as well, is text rendering. Since I am using an external webfont - the layout shifts slightly when the correct font loads. I have set some min-width & min-heights but it hasn't corrected it 100%.

To help with external webfonts, try to make sure you have the call set to "swap" and that your local fallback font is very close to the size of your webfont.

https://developer.mozilla.org/en-US/...e/font-display

https://web.dev/font-display/

[ids]

It's working partially for me. I did have the logo with the larger height and width assigned on the image tag. I think it was the text below that was being detected with the significant shift. Adding a min-height to the logo's container did help. I haven't addressed any font improvements if they're needed. This store is using the default fonts from the theme.

Scott

[afiumano]

Thanks. I switched the font-display from 'auto' to 'swap'. I found some websafe fonts as close to the external fonts as I could but of course things still shift since they are not the same.