Page 1 of 1

Avoid large layout shifts

Posted: Fri Mar 18, 2022 1:17 am
by Lasa
Google Page speed insights indicates 5 large layout shifts on http://www.healthyfitnessexpo.com
The whole page has tons of text all in layergrids but 5 are singled out as having large layout shifts?
I checked all the layergrids / text boxes and they are built the same. Why would some be flagged for large layout shifts?
The over all score on the page speed insight is fine in the 90's... it just has me curious as to why?
Lasa

Re: Avoid large layout shifts

Posted: Fri Mar 18, 2022 6:13 am
by Lasa
Just to tests...
I duplicated a layergrid with text, that had the highest layout shift and placed it at the bottom of the page to see if it would add another large layout shift on the report... it did not show up as a layout shift.
So I deleted the original large layoutgrid with text and placed the duplicate one in its place...
ran the test... again it shows as having the largest layout shift!?
Now this doesn't make sense at all to me.
Lasa

Re: Avoid large layout shifts

Posted: Fri Mar 18, 2022 7:03 am
by Pablo
It maybe be related to the 'max-width' property of the text.
This will be applied after the style sheet has been loaded so this may cause a layout shift.

Re: Avoid large layout shifts

Posted: Fri Mar 18, 2022 11:15 am
by Lasa
Thanks Pablo, I'll look into that... like I said still got great numbers :D
Lasa

Re: Avoid large layout shifts

Posted: Fri Mar 18, 2022 11:31 am
by Lasa
I removed the 'max-width' property on all the text, not only the reported 5, since they are all controlled by the layergrid max-width 1400.
It was worth a try, but the report still shows the same 5 layout shifts!
That's so weird.
Cheers,
Lasa