Lighhouse problem with "Avoid large layout shifts"

Hello again,

As you can see "Avoid large layout shifts " doesn’t have a bad impact on the rating.
But I have no idea how to fix this.

Does anyone have an idea?

Thank you for your help

Does no one here have an idea?
I don’t even know where to start here?!

1 Like

Not really my are of expertise but often results from pulling in content from external sources like ads etc
Also other content from outside the site or APIs.
The DOM performance is maximised when sequential, placing items above the current position.leads to the need to shift the entire page above the the current position to accomodate the “Late arrivals”

You can reduce this by adding heights /widths to the placeholders so the dom allocates that space prior to the content downloading.
Hope that helps.

I found this, may be helpful for you:

Slightly better one:

1 Like

You may also like to look at bootstrap 5 placeholders on this forum.

So it goes on.
I have to solve the problem now.

For this I would like to give the text fields fixed sizes.
But I have hundreds of pages and need a way to see where I need to change the number of letters.

Is there a way to count and output the letters in a query?

You can select ‘Analyze->Word count’ or ‘Analyze->Length’ if you right click your expression for the dynamic text in your data bindings on the front end.

On all Bootstrap designs you will always see a layout shift as it is grid based, and the whole point of a grid, container, rows, and columns is to be adaptive. If you want to lower the layout shift then you will have to go back to a non grid based layout. Although I could be entirely wrong!

EDIT.
Well scrap that idea. We have 0 delay score for CLS using Bootstrap. Thought I’d check my own ramblings (should have done that first).

Screenshot from 2024-04-19 12-58-38

Further EDIT:
If your CLS speed is greater than that of your First and Largest Contentful Paint speed then your concern would be justified, but as it is considerably lower than both I’d discount it.

1 Like