• Hello, I have a problem with the main-menu-navigation. When I go with the mouse over (hover) the menu and it expands so that the submenus are shown I’m getting a really high layout-shift everytime: 0,04, 0,05. 0,1, 0,06 and so on. The Browser Console Log says that the submenu is shifted. How can I avoid that?

    Thank you very much!

    Greetings Kathrin

    The page I need help with: [log in to see the link]

Viewing 15 replies - 16 through 30 (of 34 total)
  • Apologies your last reply slipped through our system. We’re looking into ways to fix the hover UL issue… its complex as we have to consider touch devices – but we’re working on that.

    Yes you can use WP Rocket and Lazy Loading with GP.
    It does take careful configuration.

    Unless you know how to write Critical CSS – i would advise that you DO NOT use the Optimized CSS delivery option in WP Rocket as this may lead to CLS.

    Thread Starter topfgartenwelt

    (@topfgartenwelt)

    Unfortunately I don’t know how to write Critical CSS ?? At the moment I’m using merge+minify+refresh-Plugin. Here I also would have the possibility to exclude certain paths. But what paths I should exclude?

    These paths are marked as render blocking:

    …dist/public-modern.css?ver=7.0.0(bzvqew.myraidbox.de)
    …build/style-index.css?ver=2.0.0(bzvqew.myraidbox.de)
    …css/scriptlesssocialsharing-style.css?ver=3.1.6(bzvqew.myraidbox.de)
    …components/comments.min.css?ver=3.0.2(bzvqew.myraidbox.de)
    …components/widget-areas.min.css?ver=3.0.2(bzvqew.myraidbox.de)
    …css/main.min.css?ver=3.0.2(bzvqew.myraidbox.de)
    …css/front.min.css?ver=5.6.1(bzvqew.myraidbox.de)
    …css/style-min.css?ver=1.1(bzvqew.myraidbox.de)

    Thanks that you will investigate the problem with the hover menu? Will you also take a look to the CLS about 0,05 that is connected to the header on every loading?

    Greetings Kathrin

    Theme Author Tom

    (@edge22)

    Render-blocking CSS is usually necessary if you don’t want to increase CLS issues.

    However, you should use a plugin to combine those files into one file (like Autoptimize) to reduce the number of render-blocking files.

    Some of those can certainly be moved to the footer (comments.min.css for example), but it’s likely not worth the hassle.

    We’re working on the hover sub-menu issue.

    Thread Starter topfgartenwelt

    (@topfgartenwelt)

    At the moment I have tried Merge+Minify+Compress and have excluded the main.css the rest of the files are combined into one file. It seems it works: https://bzvqew.myraidbox.de/gruene-tomaten-nachreifen

    Thank you very much!

    Theme Author Tom

    (@edge22)

    No problem!

    Thread Starter topfgartenwelt

    (@topfgartenwelt)

    So you agree that it works?

    Greetings Kathrin

    Thread Starter topfgartenwelt

    (@topfgartenwelt)

    And what is about the CLS in the header-grid-container: https://imgur.com/a/gXKf0Tx or here https://imgur.com/a/DE0w0sb? It appears when a site is loaded for the first time… Will you inspect that too? There is no difference if Merger+Minify+Refresh is activated or not. The CLS in the header-grid-container stays the same.

    Greetings Kathrin

    Thread Starter topfgartenwelt

    (@topfgartenwelt)

    It seems that the CLS happens always when in the sidebar an image is loaded? As you can see here: https://imgur.com/a/SWGP2uu Could there be a connection between the header-grid and the image in the sidebar?

    Greetings Kathrin

    Elvin

    (@ejcabquina)

    Hi there,

    Have you resolved this? I’ve checked your site on webpagetest.org and gtmetrix and they show CLS of 0.

    Let us know.

    Thread Starter topfgartenwelt

    (@topfgartenwelt)

    Hi,

    no I haven’t solved the problem, because I can’t really fetch the problem at all. I only know you can’t measure it with PSI, webpagetest.org and gtmetrix because the layout shift happens to late for this tools at 160055 ms (https://imgur.com/a/U8T9Lpp) thats out of the timepanel of that tools. But you see it in ChromeDevTools and the Chrome Extensions for Web Vitals (https://imgur.com/a/P9TkuoO).

    It is connected to that frame: https://imgur.com/a/JLLFGO7 and to that task: https://imgur.com/a/vnfFrep. And it only appears when you click at the first time on a link of my blog, if you refresh the already loaded page the CLS is gone.

    In Chrome DevTools I have measured it as follows:
    Open: https://bzvqew.myraidbox.de/gruene-tomaten-nachreifen
    Open DevTools in Chrome Browser
    Throttle Speed in Network down to: 50 kb/s download, 13 kb/s upload and 75 ms latency
    Go to performance tab
    click on the featured image in the small screen you see on your right to start the loading of new page
    click quickly to recording the load and wait

    The result is always the same: Layout Shift at about 160062 ms. The weird thing is that the score of the layout shift is always different, but always the cause is found in the header-grid-container. Why?

    Greetings Kathrin

    Thread Starter topfgartenwelt

    (@topfgartenwelt)

    It seems that the .inside-header.grid-container is moving around:

    Here are the images (moved from, moved to positions) connected to the layout shift of the .inside-header.grid-container:

    from: https://imgur.com/a/JbJQMB5 –> at first the container is a little more on the right site
    to: https://imgur.com/a/aUte9W8 –> after rendering the container is moved a little bit more left

    from: https://imgur.com/a/F4vcpxL –> the same as above
    to: https://imgur.com/a/tt2LbeV

    from: https://imgur.com/a/6JPRHLE –> the same as above
    to: https://imgur.com/a/OBjTdJ6

    I have tried to add .inside-header.grid-container {flex-shrink: 0;} but there is no change. The CLS stays at about 0,07 for that site.

    Has someone any idea?

    Greetings Kathrin

    David

    (@diggeddy)

    I have tested the site over a few times with a throttled network (as per your settings) and reduced CPU performance. Followed your steps and performed multiple other performance monitoring tests. Enable Rendering: Layout Shifts. Checked for late loading/delayed execution of scripts….
    But aside from the know sub-menu issue i was not able to trigger any CLS.

    I ran over 10 minutes of tests and can’t see any issue or cause for this. Note: All tests were done in Incognito so no browser caching or extensions were enabled.

    Thread Starter topfgartenwelt

    (@topfgartenwelt)

    I have tried it again also incognito and without browser extension and couldn’t measure any CLS too. I don’t understand why I see the CLS with the browser extension on. What is causing this?

    Greetings Kathrin

    David

    (@diggeddy)

    Some browser extensions will alter the DOM tree … you should be able to see if there are any scripts/CSS that are being loaded by those extensions.

    Thread Starter topfgartenwelt

    (@topfgartenwelt)

    I have seen one of that scripts, yes! But what use should have such browser extensions for web core vitals when they manipulate the outcome?

    Greetings Kathrin

Viewing 15 replies - 16 through 30 (of 34 total)
  • The topic ‘CLS on Menu’ is closed to new replies.