Are you a GenerateCustomer?

Do you have an active GP Premium or GenerateBlocks Pro license key?

Create a GenerateSupport account for GeneratePress and GenerateBlocks support in one dedicated place.

Create an account
Already have a GenerateSupport account? Login

Just browsing?

Feel free to browse the forums. Support for our free versions is provided on WordPress.org (GeneratePress, GenerateBlocks).

Want to become a premium user? Learn more below.

CLS Issue Due To Sidebar or Main Page Body

  • Hello,

    I’ve been facing a CLS issue on my website (Desktop version) for so long. All the tools are showing around (0.1 of CLS)
    Screenshots prove that this issue is because the main content body shows up at the left of the screen, then the left sidebar shows up pushing the page’s body to the middle of the screen.

    CLS issue while page loading
    https://imgur.com/csw8ovn

    CLS loading GIF
    https://imgur.com/yRCGtqt

    Note: the left sidebar is showing a custom element created within GeneratePress elements and I’ve styled it using custom CSS code.

    If we can force the left sidebar to be prefetched, visisble all the time, or just force the page’s body to stay in the middle all the time. We could eliminate this issue altogether, but I’m just thinking out loud with no clue of this being feasible or not.

    Please, guide me on how to solve this issue.
    Here is a link to an article (all articles have the same issue): https://deepbluembedded.com/stm32-eeprom-flash-emulation-fee-read-write-examples/

  • Hi there,

    Can you disable your cache plugin so I can see the CSS better?

    And can you disable your ads for now during our inspection?

    Let me know 🙂

  • Hello Ying,
    I’ve excluded the page URL from the ad manager and cleared their Cache. I’ve uninstalled & deleted the breeze cache plugin a couple of days ago. The caching is now handled by Ezoic’s CDN and cloudflare.
    Please, check the URL below only and tell me if the code is still untrackable.
    https://deepbluembedded.com/stm32-eeprom-flash-emulation-fee-read-write-examples/

  • Hi there,

    IF both Sidebars were the same % width then you could use some CSS to keep the primary content centre;

    
    .single #primary {
        margin-inline: auto;
    }
    
  • Hello David,
    The sidebars are (Left = 15%) And (Right = 20%)
    However, The CSS line of code you gave me has reduced the CLS from 0.1 down to 0.01 which is insane to me! Hats off!
    I’ve cleared the cache at ezoic & cloudflare, waiting for pages to propagate through CDN servers. And I’ll test it again with multiple tools to verify the results. Thanks so much for your time & help!

  • You’re welcome

Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.