Avoid Layout Shifts

  • Resolved Anonymous User 20702716

    (@anonymized-20702716)


    3 years, 5 months ago

    Hey,

    with Google Page Insights we get a message showing that RealCookieBanner might cause layout shifts due to this element:

    <div class="animate__animated animate__none " style="animation-delay: 0ms; animation-duration: 500ms; pointer-events: all;">

    Is there a way to avoid layout shifts that have impact on the Page Speed Index and SEO? Maybe turning off the animation somehow (just guessing)?

    Thank you!

Viewing 7 replies - 1 through 7 (of 7 total)
  • Plugin Contributor Matthias Günter

    (@mguenter)

    3 years, 5 months ago

    Hey @lenaccp !

    Yeah, you can disable animations in Customizer > Cookie Banner > General Layout. 🙂

    Thread Starter Anonymous User 20702716

    (@anonymized-20702716)

    3 years, 4 months ago

    This is not really resolved. My question was more like: What can I do to prevent layout shifts from the cookie banner? Switching off the anmation was just a guess.

    Unfortunately I can’t get rid of the layout shifts. Sometimes they show off on mobile, sometimes on desktop. Sometimes they are associated with the class “animate__animated”, sometimes with “et_pb_fullwidth_header_overlay”.

    Is there any setting that can prevent layout shifts without slowing down the page? Removing the animation seems to be no solution as your plugin itself warns in a box above the setting, that this slows down page speed.

    It is a bit driving me mad, as every measurement shows a different result. I want to keep it consitently to zero.

    • This reply was modified 3 years, 4 months ago by Anonymous User 20702716.
    • This reply was modified 3 years, 4 months ago by Anonymous User 20702716.
    • This reply was modified 3 years, 4 months ago by Anonymous User 20702716.
    Thread Starter Anonymous User 20702716

    (@anonymized-20702716)

    3 years, 4 months ago

    Also there is a hint showing off telling me to avoid non-composited animations, also associated with the cookie banner.

    We use “fadeInUp”, 800ms, currently both on mobile and desktop, but we also tried changing these options with no success. We use a Banner, not a dialog.

    Could you please help to fix this?

    • This reply was modified 3 years, 4 months ago by Anonymous User 20702716.
    Plugin Contributor Matthias Günter

    (@mguenter)

    3 years, 4 months ago

    Hey @lenaccp !

    Can you please share your results without cookie banner and with cookie banner enabled? Mostly, the layout shift is due to missing optimization before the cookie banner itself is shown.

    Thread Starter Anonymous User 20702716

    (@anonymized-20702716)

    3 years, 4 months ago

    Thank you for the reply!

    I must admit last time I saw the CLS was yesterday night. So maybe it is gone? Maybe you are right and it was caused by the way the responsive menu was implemented. Still insecure as the output of GPI seems to point to the cookie banner, too… I could send you screenshots, but I would prefer not to do so in public. If there is something interesting for everybody, it might still be placed here. We got pro version, so maybe I can send it there?

    Also I found that on a “Huawei P20” with “Mozilla Firefox Klar” the banner is only displayed correctly if I increase the banner height. I don’t know if this is only on our page or a general thing (this is just a hint).

    Thread Starter Anonymous User 20702716

    (@anonymized-20702716)

    3 years, 4 months ago

    I sent you screenshots via supportticket, because it occured again. It is occurring sporadically, so that makes it hard to investigate.

    Plugin Contributor Matthias Günter

    (@mguenter)

    3 years, 4 months ago

    Hi again!

    Will close this ticket in ww.wp.xz.cn forum.

Viewing 7 replies - 1 through 7 (of 7 total)

The topic ‘Avoid Layout Shifts’ is closed to new replies.