Cumulative Layout Shift (CLS) Grids problem

Hey Swarez,
Thank you for your patience, I have looked at the two page tests that you have linked to, but they both have the same score, on mobile they both have zero

and for desktop they both have 0.12:

I also tested another random page /mirages/ and it tested the same.
On your “fixed” page /stella-nubis/ I see that you are using columns with inage elements, and on the “poor” page /neon-canyon/ you are using a grid. But they are both scoring the same.
On the PageSpeed linked explanation for Cumulative Layout Shift (CLS) it explains how users experience unexpected layout shifts, and the example shows a button moving after an unexpected element is added to the page so the user clicks the wrong button.
But on both of your pages, there is no unexpected layout shift to the human eye. I believe the test shows a false positive, perhaps it is the lazy loading of images or the height of the elements between the DOM load and the final paint of the page, that is, the half of a second before the human eye sees the page.
But I don’t see that abandoning the grids completely will give you a zero score.
When I tested your page on webvitals.dev/cls/ your mobile score was zero, and your desktop score was 0.0051 with the menu causing it:
div#header_main>div.container.av-logo-container>div.inner-container>nav.main_menu>div.avia-menu.av-main-nav-wrap


quite a difference in results compared to PageSpeed, I tried testing my page in PageSpeed but it gave no CLS score because it didn’t have enough data, apparently the test doesn’t give live results. When I tested my page on webvitals.dev/cls with no header I got a zero score, so I guess a drop down menu counts against you, but for a score of 0.0051 it seems fine.

Best regards,
Mike

Hi,
Thank you for your feedback, and thanks for pointing out the CLS score lower on the page that I missed, and I do see that on /neon-canyon/ when tested on PageSpeed you have a score of 0.375, but when I test our grid row demo page for desktop the score is only 0.003:

I also tested our Shop demo page that used grid rows and it had a higher score of 0.022, but still quite lower than yours:

So I compared your /stella-nubis/ page to your /neon-canyon/ page thinking perhaps a different element was causing your high score and I noticed that you didn’t have a video on your “fixed” page so I tested our demo video page, but it’s score was only 0.005:

So while I do see that for your pages, removing the grid row lowers your score, I’m not able to reproduce this with our demo site, or my personnel testing demo site that has no caching or optimization.
Please don’t misunderstand me, I’m not arguing, but in order for me to write an issue report for the Dev Team I need to demonstrate how to reproduce the issue on a clean install with no plugins so they can also reproduce it and investigate.
Perhaps you could enable the Avia Layout Builder Debugger and copy the page shortcode to a plain text file (.txt) and post a DropBox link to it for me to test on my site, that way I could reproduce the issue and investigate further.

Thank you for your patience,
Mike

Hi,
Thank you for the shortcode, I first tested it exactly as you sent it and while the images don’t show for me in the backend the url for the images were in the code and were pulled from your domain on page load and they showed on the frontend, in the first test the CLS was 0.269:

so I was basically able to reproduce the issue, so as a first modification test I changed all of the images to local images to verify the results and rule this out as a cause, I left all settings the same and tried to use the same size images, but the result was a CLS 0.012, a huge difference just by changing the images:

To find a cause for this difference I notice that your images seem to be served by a CDN, please try making a copy of this test page and change the images so they don’t use the CDN or any plugins, and see if you also get a lower score.

Best regards,
Mike

Hi,
I believe the issue is when you use the CDN images they take longer to load and while the PageSpeed report is checking the page for CLS the images load and change the height of the elements causing the low score.
I tested this css to set the minimum height of the elements that were failing on the CLS report and added it to my WordPress ▸ Customize ▸ Additional CSS because the WordPress CSS field has the highest priority.
I tested this on the original shortcode that you sent me using your image from the CDN that gave the CLS score of 0.269 above (today it gave a score over 0.3xx)

@media only screen and (min-width: 768px) {
#av-layout-grid-1 .avia-image-container {
min-height:  684px;
}
#av-layout-grid-2  {
min-height:  490.75px;
}
#av-layout-grid-3  {
min-height:  189.56px;
}
#av-layout-grid-4 .flex_cell.av-gridrow-cell.av_one_third {
min-height:  490.75px;
}
}

with this css I got a score of 0.001

I tried to write the css thinking it might be used for all of your pages with the same layout, please try this on your page.
Try to regen your site cache so the css is included before testing, I don’t use any caching on the test site.

Best regards,
Mike

Hi,
Glad to hear, if you find the css causing issues on other pages we could add .single-portfolio to it so it only works on the portfolio pages, like this:

@media only screen and (min-width: 768px) {
.single-portfolio #av-layout-grid-1 .avia-image-container {
min-height:  684px;
}
.single-portfolio #av-layout-grid-2  {
min-height:  490.75px;
}
.single-portfolio #av-layout-grid-3  {
min-height:  189.56px;
}
.single-portfolio #av-layout-grid-4 .flex_cell.av-gridrow-cell.av_one_third {
min-height:  490.75px;
}
}

Best regards,
Mike

Hi,
Glad to hear this helped and thank you for bringing this forward, this should also help other users with this issue on their sites.
I don’t see any way that we could include this in the theme because the root of the issue was the use of the CDN and the css above is specific to your pages. Each site/page will have a different element height based on the inner contents.
This worked well for you because all of your pages had the same layout, but unless other users are using a CDN I don’t expect that they will encounter this issue.
But for anyone that does encounter this issue this thread will help explain and offer the means to a solution that we can adjust to suit their situation, if they need help.

Unless there is anything else we can assist with on this issue, I would like to close this so the thread stays on topic and is easily found in the search results.

Best regards,
Mike

Hi,
Glad we were able to help, if you have any further questions please create a new thread and we will gladly try to help you. Thank you for using Enfold.

Best regards,
Mike