[Support request] Cumulative Layout Shift – Really bad

Home Forums Support [Support request] Cumulative Layout Shift – Really bad

Home Forums Support Cumulative Layout Shift – Really bad

  • This topic has 18 replies, 3 voices, and was last updated 1 year ago by David.
Viewing 15 posts - 1 through 15 (of 19 total)
  • Author
    Posts
  • #1450525
    Lennart

    Hi

    I switched to GeneratePress to get one of the fastest Themes for WordPress.
    But the Cumulative Layout Shift in Google Pagespeed Insights are just as bad is not worse now

    I have https://knib.dk and https://erotik.dk, which both performs really bad.

    After the last two updates Google shows ALL my Urls as bad in Google Search Console.
    When looking at it it shows lots of shifts

    What can I do ?

    I use WPRocket and Asset Cleanup

    #1450567
    Julien

    Hello,

    I had the same issue on a website that was fixed by deactivating wp rocket lazy loading for image. Maybe it’s worth a try ?

    #1450814
    David
    Staff
    Customer Support

    Hi there,

    few issues.

    1. WP Rocket Critical CSS – unless you can manually create the necessary CSS for each of your various layouts you should disable this feature. The automatic method has no clue as to what is critical or what is above the fold which is leading to the late loading of CSS for elements above the fold such as the Page Hero.

    2. Lazy loading – as Kaspof pointed out ( Thanks Kaspof ) – you need to exclude your logo from the lazy loader. Simplest method is to exclude by filename as explained here:

    https://docs.wp-rocket.me/article/15-disabling-lazy-load-on-specific-images

    There the first two things to resolve.

    #1467136
    Lennart

    Thanks. I’ll try both of these.
    When I can get in the customize ๐Ÿ™‚

    #1467455
    David
    Staff
    Customer Support

    You’re welcome – have replied to your other topic

    #1468368
    Lennart

    Hi

    I have tried this, and the logo now stays put, but the burger menu on mobile still jumps from left to right
    So it had not much effect at all.

    If I purge all cache Op, Cloudflare etc. and runs, then the first 2-3 times it looks good and then starts to decay again

    For almost all sub pages it does not help a bit. Only the frontpage looks ok.

    I now have render blokcing css, but if CLS is more important I will have to live with that

    Any other suggestions ?

    Mine is to disable the logo and put it in a hook instead – dont know if it makes sense

    #1468492
    Lennart

    I found a temporary solution.
    I moved the logo into a hook and removed the logos from the Customization (still super slow)

    Now I get CLS 0,00 ms on mobile, but still too much on desktop (0,731)

    Its the menu section that starts out really heigh and resizes it self in the end.

    I tried removing cache module entirely. No changes

    #1468783
    David
    Staff
    Customer Support

    Lets do one site at a time.

    The Erotik site – the main issue i see is the rating stars image. The <img> has not height or width specified. So on initial load the browser does not know how much space the images should occupy before it is loaded. So it goes from 0 height to 57px after load.

    try adding adding a height attribute to your img HTML eg. height="50"

    #1468864
    Lennart

    Thank. I will.
    But the worst pages are all other than the front page and it does NOT have the ratings.

    Here the menu area seems to shift in size. Cant figure out what it is

    #1468992
    David
    Staff
    Customer Support

    Ok looks like you’re using WP Rocket Critical CSS – and the automatic option is prone to cause these kind of problems. Can you disable that option?

    #1469013
    Lennart

    Hi

    I tried this. Even removed it completely. Same same.
    Thats why i enabled it again, to get better load times with no render blocking

    #1469021
    David
    Staff
    Customer Support

    Can you disable it again so i can take a look?

    #1469063
    Lennart

    Done ๐Ÿ™‚ on https://erotik.dk
    I added their helper module to disable Critical CSS

    So WP Rocket is running but without Critical CSS generation. This can now be done manually

    #1470283
    David
    Staff
    Customer Support

    Still seeing some elements such as the Search bar receiving their styles after load.
    Thats the problem with cache/optimization plugins that are combining and deferring scripts.
    We could probably stop those elements from resizing of the Header after load by setting a min height:

    @media(min-width: 1024px) {
        #masthead {
            min-height: 150px;
        }
    }

    The rest of the issue look related to the WPSP images not lazyloading. You can re-enable lazy load – but you will want to exclude the logo.

    #1470368
    Lennart

    Hi

    Hi. I have tried this. I added height to all elements that I could think of.
    I added the CSS you suggested to the extra CSS section in the customize.

    When looking at the screenshots in GPSI i cant see where the shift is anymore.

    Its really bothering me that I cant get this down to 0 for desktop as well.

    I even trid removing all other elements but text. So no shortcodes, products, nothing. Still the same number or higher actually.

    The only thing I dont seem to be able to conttrol the height for is the hero element. I guess this must be the one ?

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