Page 1 of 1

Cumulative Layout Shift (CLS) error.

Posted: Thu Jun 11, 2020 11:42 am
by 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

Re: Cumulative Layout Shift (CLS) error.

Posted: Thu Jun 11, 2020 12:48 pm
by 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.

Re: Cumulative Layout Shift (CLS) error.

Posted: Thu Jun 11, 2020 8:20 pm
by 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

Re: Cumulative Layout Shift (CLS) error.

Posted: Thu Jun 11, 2020 8:48 pm
by 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

Re: Cumulative Layout Shift (CLS) error.

Posted: Thu Dec 17, 2020 10:53 pm
by 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?

Re: Cumulative Layout Shift (CLS) error.

Posted: Fri Dec 18, 2020 7:00 am
by 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?

Re: Cumulative Layout Shift (CLS) error.

Posted: Fri Dec 18, 2020 9:53 am
by 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?

Re: Cumulative Layout Shift (CLS) error.

Posted: Fri Dec 18, 2020 10:01 am
by 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.