[Resolved] CLS issue on desktop

Home Forums Support [Resolved] CLS issue on desktop

Home Forums Support CLS issue on desktop

Viewing 15 posts - 16 through 30 (of 43 total)
  • Author
    Posts
  • #1926109
    ETO

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

    #1926113
    Leo
    Staff
    Customer Support

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

    #1926137
    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.

    #1926148
    Leo
    Staff
    Customer Support

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

    Looks like it links back to the live site.

    #1926164
    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.

    #1926167
    Leo
    Staff
    Customer Support

    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.

    #1926175
    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?

    #1926181
    Leo
    Staff
    Customer Support

    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.

    #1926184
    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.

    #1926400
    Leo
    Staff
    Customer Support

    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.

    #1927132
    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.

    #1927306
    Tom
    Lead Developer
    Lead Developer

    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 🙂

    #1927429
    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.

    #1927943
    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.

    #1928134
    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;
      }
    }
    
Viewing 15 posts - 16 through 30 (of 43 total)
  • You must be logged in to reply to this topic.