Cumulative Layout Shift (CLS) error.

[cmartins]

Dear Pablo,

Looking at my site on Google Search Console, I noticed that many pages on my site have the Cumulative Layout Shift (CLS) error. The pages of my website are basically made with simple text inside the Grid Layout of the WWB. Please, is there any solution to this CLS problem?

As always, thanks for your valuable help.

Carlos Martins

(*) https://search.google.com/search-consol ... D&hl=pt-BR

[Pablo]

I'm sorry, but I am not familiar with Cumulative Layout Shift (CLS) errors.
Can you please be more specific?

Note that the specified URL does not work for me.

[cmartins]

Dear Pablo,

As explained by Google Search Console, 42 pages of my site are with CLS error.

As explained by https://web.dev/cls/ a page with CLS presents some problems ... But I can't see these problems!

My page https://www.carlosmartins.com.br/curriculo.htm is presented as an example of the other 42 pages of my site that are with CLS error.

I don't know if this error can be corrected...

As always, thanks for your valuable help,

Carlos Martins

[Pablo]

The reason why the content moves, is because the layout is flexible.
There are large images so it will take some time to load them.
After the image has been loaded, the browser will adjust the content based on the image's size.

Possible solution:
- use smaller images so the layout will load faster.
or
- set the height of layout grid to 'fixed'
or
- use absolute layout, of course in that case the layout will no longer be flexible

[cmartins]

"The reason why the content moves, is because the layout is flexible."...

Dear Pablo,

I made my website initially using a WWB template. Now, when I use Google Search Console to analyze my site, many pages need improvement because of CLS (a problem when the page layout changes during the loading phase). I imagine this is because the layout is flexible.

Please, does Wysywyg allow me to migrate my website using another template? Is there a tutorial on the WWB website?

[Pablo]

The behavior is logical, because the size of the image is unknown before the page is loaded.
You cannot easily use another template, because each template has a complete different structure.
However, you can create a fixed layout by replacing all layout grids with layers or absolute positioned elements.

But why is this such a problem? Isn't this with almost any website?

[cmartins]

Friend Pablo,
If I "scroll" down any page on my site I notice that the site menu changes position (skips to the left side). I can't seem to solve this. Please, would you know how to help me?

[Pablo]

This is because you have enabled 'affix' for the menu.
That will not work if the menu is already fixed by the page header.