[Resolved] Diagnose cause of CLS

[Ivaylo]

Hi,
I’m trying to find out what is causing the CLS on my website. I’m trying different tools and everytime I see the different things.

1. Sometimes it is the logo ( while it is already with a reserved space via CSS )
2. Sometimes it is the Breadcrumbs or the font they are using.
etc.

Could you please check with your tools and let me know how to fix it?

It is currently around 0.08 and while it is below 0.1 it gets sometimes a way over it.

Thanks!

[David]

Hi there,

One potential issue is the Fonts display property is set to swap you may want to consider NOT doing that, as it can be a leading cause of CLS. As your font that gets loaded later may vary a lot from the users system font, resulting in CLS.

For the logo, don’t lazyload it. It has a CSS class of is-logo-image that you can use in your lazy loaders exclusions. This will reduce the chances of it getting resized on load.

[Ivaylo]

Thanks, David!

1. If I got this right about fonts, my best option is to select a system font for both Breadcrumbs and Author/Update on? am I right? Choosing a system font for both will be the best option, won’t cause any delay and shift?

2. About the logo, I saw it is lazyloaded, but was assured that when there is a space reserved for it, it doesn’t matter. I have the following code in my Additional CSS.

	/* FIXed CLS issues on mobile*/
	@media only screen and (max-width: 600px) {
 
	
		.site-header {
    position: relative;
    min-height: 87px;
}
	}

I have uploaded a png file with 200x87px dimensions.

Thanks!

[David]

1. Correct = that would be the best option.

2. As long as the <img> has width and height attributes ( and your logo does ) then the browser will reserve the correct space for it.
If theres any shifting then some other code is affecting it.
As the image is above the fold, you don’t to lazy load it, and its one less thing that could cause an issue.

[Ivaylo]

1. How can I set a system font to Breadcrumbs ( Generated by RankMath/GPBlocks ) and Author/Updated created by this code:

add_filter( ‘generate_post_date_output’,’tu_add_to_post_date’ );
function tu_add_to_post_date( $output ) {
return ‘<span class=”date-label”>Updated on </span>’ . $output;
}

add_filter( ‘generate_post_date_show_updated_only’, ‘__return_true’ );

2. Thanks, I’ve added an exclusion to the logo, could you please verify on your end if it is still lazy loaded for the below example.

[Fernando]

Hi Ivaylo,

1. You can create a new Typography Rule in Appearance > Customize > Typography > Typography Manager. Set the Target Element to Custom – .content-area nav.rank-math-breadcrumb, .content-area .inside-article .entry-header .entry-meta

After doing so, set the font family to System Default.

2. It seems the logo and CLS are good now with the CSS you’ve added. Upon my latest test, this is the result in terms of CLS: https://share.getcloudapp.com/6quNAzg5

[Geoffrey A.]

Hi David,

I have the same CLS problem. I looked at your links and installed simple CSS, but I do not understand what do I have to add there. Could you please tell me what to do?

[Ying]

Hi Geoffrey,

Can you open your own topic and link us to where David asked you to install simple CSS so we can know what was the conversation before?

[Ivaylo]

Successfully changed the breadcrumbs font to the system default, Thanks!

[David]

Glad to hear that

[Ivaylo]

Resolved

[Author]

Posts