H3 Resizing causing CLS

[R3dn0ze]

Hi all, my website (gamestore.mt)'s theme is currently changing the 'product-card_title' from H3 to a 14px font size, which is my desired font size. However, during page loading you can see the transformation and has caused some major Content Layout Shift which is both an SEO issue as well as a visual issue, albeit being only for a very short timespan. 

I have successfully managed to bypass this issue by changing the following code from this:

<h3 class="product-card_title">
<a href="{{product.url}}">{{product.title}}</a>
</h3>

to this

<div class="product-card_title">
<a href="{{product.url}}">{{product.title}}</a>
</div>

However, by doing this, I have lost my H3 tag which is another big pitfall for SEO. Is there anyway this can be bypassed so that I keep the H3 tags without causing the visual setbacks? 

Here is the css code file that this specific H3 class tag points to

}

.product-card .product-card_title {
color: var(--product-card-title-cl);
font-size: var(--product-card-title-fs);
font-weight: var(--font-bold);
margin-bottom: 7px;
line-height: 1.4;
}

I was thinking of specifying the font size in the html itself instead of having it pull from the css file, thus reducing load time. However i would probably then lose some attributes of the remaining css properties, unless there is a workaround. I'm not a professional coder so i don't know if this can be done, or whether a better solution is out there.

I have temporarily restored the original code on my website so that you can view the problematic shift.

Your help is truly appreciated.

[dmwwebartisan]

@R3dn0ze 

I checked your store home page found that product title has H3 tag and font size is 14px.

Is that something you would like to do?

Please share screenshot on which page you got issues. It will be helpful to understand.

[R3dn0ze]

Thanks for getting back to me, the issue is that the text first generates at H3 size, then the CSS overrides the font size to 14px. During first load of the page, you can see that the text is huge, but is then resized to 14px. This is causing major Content layout shift, and when i remove the h3 tag the pagespeed score goes up by a lot. Is there any way I can make the H3 tag load into 14px quickly without customers visually seeing the resize in the first 0.5 seconds that the store loads?

This is how it originally loads in the first few fraction of a second

After which, it then transforms into this when the 14px size kicks in

[dmwwebartisan]

@R3dn0ze 

Hmm. I can see that you have problem but I don't have this case in my PC. This time I can see you have put "div" instead of "H3" tag.

Put "H3" again and add the following code at the bottom of your css file.

h3.product-card_title{
font-size: 14px !important;
}

I hope this works. Let me know.

[R3dn0ze]

My apologies, I changed the code back to div to make some comparisons but it seems that you had checked the code at that short time.

I have reverted back to h3 and included your code but the issue is still the same. I am assuming that the HTML is loading much faster than the CSS effects are being taken into consideration and/or maybe a webfont is taking time to load?

I won't be changing it again until you confirm from your end, my apologies.

[dmwwebartisan]

@R3dn0ze 

I got it. I think the code I have given above , just remove it and add the following code at the bottom of your css file.

.h3, h3 {
    font-size: var(--product-card-title-fs) !important;
}

It loads first h3 when page load that time h3 size is 22px and then it will back to 14px. So above code will change h3 directly but my suggestion is this that you can set that from admin(not sure but you can) instead of code.

Hope that works.

[tim · Accepted solution]

If you really see improvements after changing from H3 to div, then you may want to apply proper font-size even before you CSS file loads. You can do this by adding <style>...</style> pieces in your liquid code or using "Custom CSS" setting under Theme settings -- these are also included in your HTML file.

It's also possible that CLS comes from the animated elements you have on the page -- sliders and announcement bars. It may be feasible to not animate  them until visitor interacts with the page. 

Finally, rendering so many sliders on a single page requires a lot of liquid time which affects TTFB. Yes, TTFB is not an important metric by itself anymore, but it actually affects most other metrics.