[Resolved] CLS issue on desktop

[ETO]

How did you run a page speed test for the staging site as the staging site is not public?

[Leo]

I used the Lighthouse test from Chrome’s developer tool:
https://developers.google.com/web/tools/lighthouse

[ETO]

Before I activated any plugin or element hook, I used the same tool as you did to test the problem but the CLS is not zero as your screenshot. Please, have a look at the screenshot in the private info section.

[Leo]

That page you are running on has some plugin’s activated:
[screenshot removed]

Looks like it links back to the live site.

[ETO]

Maybe there is a link back to the live site but it does not cause the problem. I have another live site using GP theme with different plugins and settings and there is the same CLS issue.

On the staging site, I switched to another theme and the problem is gone. So I think you should accept that this CLS issue is related to the GP theme and had better look closely to solve the issue.

By the way, your screenshot makes my site public. I would be happy if you could remove that screenshot.

[Leo]

Maybe there is a link back to the live site but it does not cause the problem.

It does if you have other plugins on the live site that’s causing this.

Switching the theme also means that there are no elements added.

Did you try running the test on the home page of the /staging/ link you’ve provided with GP theme? You should get the same results of 0 that I’ve shown in my screenshots – even better than the 20 series theme.

Alternatively, you can start a staging site with a fresh install of GeneratePress and run the test – there should be no CLS issue.

[ETO]

There is another screenshot here to be removed: https://generatepress.com/forums/topic/cls-issue-on-desktop-2/?bbp_reply_to=1925954&_wpnonce=81552afc1e#new-post

You really disappointed me by directing me with useless directions and not trying to solve the issue. I am sure that with a fresh install of GP, there won’t be any CLS issue, but this can be done with most of the themes on the market. No one will buy a theme to use on a blank website. The important thing is that we should be able to use your theme on live websites with plugins otherwise why should I buy a premium theme with no real technical support?

[Leo]

Sorry – all screenshots with your site URL showing should be removed now.

You really disappointed me by directing me with useless directions and not trying to solve the issue.

My instructions have all been trying to identify the issue – we cannot solve any issues without identifying them.

And this reply here should show that it’s not a theme issue:
https://generatepress.com/forums/topic/cls-issue-on-desktop-2/#post-1926088

Then the next step is to identify the issue using the instructions provided here but I don’t think that’s being done yet:
https://generatepress.com/forums/topic/cls-issue-on-desktop-2/#post-1926105

We can only make sure that the theme doesn’t have any CLS issue – we cannot control when other plugins create CLS issue.

[ETO]

And this reply here should show that it’s not a theme issue:
https://generatepress.com/forums/topic/cls-issue-on-desktop-2/#post-1926088

The reply here does not show it is not a theme issue. Because the result there is probably the result of the home page but not the post page. However, the CLS issue is on the post page. Please, check the post page again and tell me if I am wrong.

[Leo]

I feel like we are somehow looking at different posts.

Are you sure you are looking at the staging site? I don’t see the word STAGING - in your screenshot here (see green arrow):
https://www.screencast.com/t/ywcPcHupn9T

Compare to my screenshot here – with Staging - and good CLS result:
https://www.screencast.com/t/cIIC9fxeS5i

I’m also missing the Recent Posts section as well.

I accessed the post by Dashboard > Posts.

[ETO]

I deleted the staging site as it did not work as the live site.

When I test my website using Chrome Lighthouse, CLS appears to be zero. However, CLS is over 0.2 if I test my site using Google PageSpeed Insights. As far as I know, the important one is the result tested with Google Pagespeed Insights.

[Tom]

Hi there,

I just tested the sample URL you shared in your original post, and here are the results: https://www.screencast.com/t/W0MaVBbfwMEa

The “field” data are data gathered over the last 28 days (when something may have been causing CLS).

The “lab” data is the way thing are at the moment of the site (no CLS at all).

Chrome Lighthouse and Pagespeed Insights use the same API (although maybe different versions at times).

The field data should correct itself over the next 28 days as long as more CLS issues aren’t introduced.

Let me know if you need more info 🙂

[ETO]

Hi, Tom. Thanks for the info. I am interested in the lab data as it shows the current state of the site.
I myself tested several URLs and the lab data still show CLS 0.201 on the desktop. GTmetrix test shows that there is a CLS issue as well.

[ETO]

Hello, again!
I have still trying to find what is causing the problem. I have sent you some links in private. Could you please check them?

I also think that the cause of the problem can be the custom CSS I use or/and the child theme. I would be grateful if you could have a look at them.

For example, can the code below cause a CLS problem?

body .site.grid-container {
    margin-left: 0;
}

By the way, I disabled the left sidebar on of the pages and then tested that page, which resulted in zero CLS. However, on my contact page, there is no CLS issue in spite of the left sidebar.

[ETO]

I just copied all the widgets from the left sidebar to the right sidebar in order to see any difference. To check it, I disabled the left sidebar and activated the right sidebar. When I tested this page, again there was no CLS issue. From this experience, I assume that my additional CSS code, which is below, causes the CLS issue.

body .site.grid-container {
    margin-left: 0;
}

article .entry-meta, article .entry-summary {
	display: none;
}
article .inside-article {
	padding: 10 !important;
}
article .entry-title {
	font-size: 20px;
}
article .entry-title:before {
	content: '\2714';
	margin-right: 0.5em;
}

#breadcrumbs {font-size: 75%; color: #8e908f;}
#breadcrumbs a {display: inline; border: none; padding: 0; text-transform: none;}

.bellows .bellows-nav .bellows-target>.bellows-target-description {
    font-size: 80%;
    font-weight: 400;
    clear: both;
    display: none;
}

.bellows .bellows-nav .bellows-target>.bellows-target-text {
    font-size: 15px !important;
}

.bellows.bellows-skin-blue-material .bellows-nav .bellows-item-level-0 > .bellows-target .bellows-subtoggle {
    font-size: 15px !important;
}

.bellows.bellows-skin-blue-material {
    background: #605F5C;
    box-shadow: unset !important;
}

.bellows.bellows-skin-blue-material .bellows-nav .bellows-item-level-0.bellows-current-menu-item > .bellows-target, .bellows.bellows-skin-blue-material .bellows-nav .bellows-item-level-0.bellows-current-menu-ancestor > .bellows-target {
    background: #7a7f8c !important;
}

.widget-area .widget {
    padding: 0;
}

.bellows .bellows-nav .bellows-custom-content.bellows-custom-content-padded, .bellows .bellows-nav .bellows-target, .bellows .bellows-nav .bellows-target.bellows-target-w-image>.bellows-image.bellows-image-padded, .bellows .bellows-nav .bellows-target.bellows-target-w-image>.bellows-target-text {
    padding: 10px !important;
}

.bellows.bellows-skin-blue-material .bellows-nav .bellows-item-level-0 > .bellows-target:hover {
    background: #7a7f8c !important;
}

.bellows.bellows-skin-blue-material .bellows-nav .bellows-submenu {
    background: #605F5C !important;
}

.bellows.bellows-skin-blue-material .bellows-nav .bellows-submenu .bellows-target:hover {
   background: #7a7f8c !important;
    color: #fff !important;
}

.bellows.bellows-skin-blue-material .bellows-nav .bellows-submenu .bellows-target, .bellows.bellows-skin-blue-material .bellows-nav .bellows-submenu .bellows-custom-content, .bellows.bellows-skin-blue-material .bellows-nav .bellows-submenu .bellows-widget .textwidget {
    color: #fff !important;
}

.fa {
    padding-right: 5px !important;
}

.bellows.bellows-skin-blue-material .bellows-nav .bellows-item-level-0.bellows-active > .bellows-target {
    background: #7A7F8C !important;
}

.bellows.bellows-skin-blue-material .bellows-nav .bellows-submenu .bellows-current-menu-item > .bellows-target, .bellows.bellows-skin-blue-material .bellows-nav .bellows-submenu .bellows-current-menu-ancestor > .bellows-target {
    background: #7A7F8C !important;
}

.separate-containers .comments-area, .separate-containers .inside-article, .separate-containers .page-header, .separate-containers .paging-navigation {
    padding-top: 10px !important;
}

@media (max-width: 768px){
.separate-containers .inside-article, .separate-containers .comments-area, .separate-containers .page-header, .separate-containers .paging-navigation, .one-container .site-content, .inside-page-header, .wp-block-group__inner-container {
    padding: 10px !important;
}}

.separate-containers .comments-area, .separate-containers .inside-article, .separate-containers .page-header, .separate-containers .paging-navigation {
    padding: 20px;
}

.widget_recent_entries {
    /** padding: 20px !important; **/
    font-size: 15px !important; 
}

 table {  table-layout: fixed;
}

.mtq_question_text{  padding-bottom:25px;
	    padding-right: unset;
    width: unset;
}

.mtq_letter_button_td {
    width: 56px;
}
.w3sfc-icon-box-icon {
    margin-top: -40px;
}

.w3sfc-widget-heading {
    margin-top: -30px;
}

.widget-title {
    padding-left:20px;
}

.widget ol, .widget ul {
    padding: 20px !important;
		padding-top: unset !important;
}

#menu-categories {
    padding: unset !important;
}

#bellows-main-204 {
    margin-top: -10px;
}

.site-main {
    background-color:white;
}

.mtq_question_text {
    padding-bottom: unset !important;
}

.mtq_answer_table {
    width: 95%!important;
}

.bellows-subtoggle {
    padding-top: 12px !important;
    padding-left: 30px !important;
}

.is-left-sidebar {
    background: #605f5c;
}
#text-2, #recent-posts-5, #text-3, #text-4 {
    background: #605f5c !important;
}

.site-info {
    color: #fff;
    background-color: #2c3e50;
}

.inside-site-info {
    padding: 10px 10px !important;
}

@media screen and (max-width: 960px) {
  #ad-slot {
    min-height: 100px;
  }
}

[Author]

Posts