CLS Issue on some rows

Hi John

Thanks for getting in touch.

You can perhaps set a min-height for the video row? The video isn’t available immediately which is why the row height changes. That can be done in the Attributes tab > CSS Declarations:

min-height: 522px

If there are another parts of the home you’d like us to take a look at, please, let us know.

Thanks for your quick reply.. The height of the video element is 280 in the shortcode. When I put it 522 then I get a lot of white space below that row…

Also, the google page speed website (https://pagespeed.web.dev/) indicates that the CLS is caused by the first two rows of the page builder.

Please advise.

Thanks for the update.

The rows are full-width, and as a result the video is 456 high on my display. In that case, min-height isn’t suitable.

There isn’t movement immediately visible in the first two rows on my connection. If I slow the page down to Slow 3G, I can see the padding in the first two rows load. The styles are loaded in a style block on the page, so there isn’t any delay waiting for a CSS file to load. If you remove the padding from the Layout section and add it via the CSS Declarations field, the padding will still be added via the siteorigin-panels-layouts-head block in the head. To move the padding inline, you could remove the padding from the Layout section, edit the Editor Widget Text tab and add a wrapping div tag with the padding inline. Here is a thread showing inline padding. You’d be using a div or a span tag instead of the h2 tag being discussed https://stackoverflow.com/questions/31554574/html-padding-style. You could try the same for the padding in both rows.

Thanks for the detailed reply. That seems working for the site origin editor rows. I have a headline row too. There is no option to add padidng inline to the siteorigin headline widget. How can i cater that?

After moving the paddings inline, the CLS has been increased to 0.26. https://prnt.sc/22ZsrmJyWl1G

Unfortunately, at the moment, we don’t have a method for moving row or widget styles from the siteorigin-panels-layouts-head block in the header to inline styles. I’ve passed this on as a suggestion to Alex here at SiteOrigin.

• This reply was modified 1 year, 8 months ago by Andrew Misplon.

Something on the page is causing an overflow scroll bar. You can add overflow-x hidden to the body tag using Custom CSS to hide that. https://css-tricks.com/findingfixing-unintended-body-overflow/.

That worked.. thanks

Thanks for the update; I’m glad to hear you’re making progress.

Hi,

This issue came up again..I don’t know why. Sometimes its 0.39 CLS and sometimes its 0. I want to make sure that everytime it should be 0 as my theme is minimalist so it should be possible.

Please advise.

Thanks

Hi John

Thanks for your reply.

If there is specific Page Builder functionality or widget you’d like us to take a look at, please, let me know.

I’ve passed on your feedback regarding moving styles inline. That’s been logged; it’ll need to be a new filter or setting.

Hi Andrew,

Again the top rows are causing the CLS just like before.. I didn’t do anything. Don’t know why it is coming up again…

Thanks for the update.

To view the page loading slowly using Brave or Chrome, you can right-click in the page, click Inspect Element, and then within the console, click the Network heading. Try Slow 3G and reload the page or click Add to add your own custom very slow speed.

Perhaps the row bottom margins are an issue; it’s hard to say. You can try adding the 30px bottom margin to a div in the row and remove the bottom margin from the Layout > Bottom Margin row styles section. Row bottom margins load in the page head along with the other styles. Until we introduce a setting that would allow users to voluntarily move all those styles inline, we can’t easily offer a solution is the CLS is caused by styles in the page head.

Google page speed (https://pagespeed.web.dev/) show that the first 2 or 3 rows of siteorigin layout contributes to the major CLS shift which is 0.142+0.112 seconds… So shall I contain them in a dive and add bottom marign of 30px with inline styling?

Ideally, try to open the console as described above to see how the first two rows load at very slow speeds. Sure, you can try removing the row bottom margin value and move it inline via a wrapping div for each row’s content.