I had to do a change of theme from DIVI to Estatik Portal Theme, which uses Page Builder. Since I’ve done this, I noticed that the CLS time on Page Speed Insights has increased about 100 fold, from 0.08s to 0.8s. The overall score also came down from mid/high 80’s to low/mid 70’s on desktop for the homepage. This is with the page looking visually identical and with same features.
Other pages score actually improved, although CLS still an issue.
Any suggestions on what else can be done, if anything to improve CLS?
Hi, thanks for reaching out.
Would it perhaps be possible to share a link to your home page? We’ll take a look and advise from there.
The site is http://www.portuguesedream.com Thanks.
Thanks for the link.
The issue arises from Full Width Stretched rows. Page Builder uses JavaScript to accomplish this. The advantage is that it works with any theme without setup or compatibility needed. We have a feature request logged to introduce a global setting that will allow Page Builder users to change the Full Width Stretched method assuming they know the container class names of their theme. For now, what you can try is the following:
Try changing all Full Width Stretched rows to Full Width. You’ll find that setting by clicking the wrench icon on the right then LayoutRow Layout. Next, go to AppearanceCustom CSS or Customize > Additional CSS if you aren’t using SiteOrigin CSS. Insert the following:
@media (min-width: 1200px) .home .container { max-width: none; } }This will probably need a further look but it’s a place to start. (We aren’t usually able to offer Custom CSS assistance within our free support scope due to resource limitations.)
Please, let us know how you get on.
Hi
The row was already set to Full Width, not Full Width Stretched.
I added the code in Custom CSS as mentioned. It doesn’t seem to have add any effect.
Thanks
Ricardo
I am getting a message on custom CSS regarding .home stating Expected LBRACE at line 2, col 2
Sorry, the rule should be:
@media (min-width: 1200px) { .home .container { max-width: none; } }If possible, please, check each row on the home page. All the rows above Why Choose Us are Full Width Stretched.
That worked now. CLS has gone down a bit, to just under 0.7. But all the rows look stretched now, despite only the top row being set to Full Width and all the others now to Standard. Header also off centre.
Thanks for the update. You can try removing the rule and instead add the following:
@media (min-width: 1200px) { .home { overflow-x: hidden; } .home .container:not(.navbar) { max-width: none; } .home .panel-grid div:not(.siteorigin-panels-stretch) .panel-grid-cell, .home .panel-grid > .panel-grid-cell { margin-right: auto; margin-left: auto; max-width: 1440px; } } @media (min-width: 768px) { .home .col-md-12 { padding-right: 0; padding-left: 0; } }Ideally, we need to finish the solution I mentioned earlier which will be available via Page Builder settings. We’re working on a blog widget and changes for WP 5.8 at the moment. Once those are complete we can work on the CLS setting for Page Builder.
This is great, thanks. It looks as I want it on desktop and CLS has come down to under 0.5, so it’s an improvement.
Although some of the rows are set to full width and are fine on desktop, on mobile and tablet they show up as standard, such as Quick Property Search, Our Favourite Properties and How it Works. Not the end of the world.
Hopefully once the new setting for CLS comes out I’ll be able to get to my old CLS timimgs!
Thanks for all your help.
The rules we’ve added above are in a media query, that might explain the differences. We’ll do our best to get the setting out as soon as the development schedule opens up. Thanks for your feedback.