Optimole & CLS

  • Resolved devitaliza

    (@devitaliza)


    4 years, 6 months ago

    Hello,

    I was wondering if there will be any fix for CLS and Optimole in the near future? Or, is there already a setting that I am missing?

    Currently, I am seeing CLS times of 300ms + and these occur due to Optimole. As soon as I disable Optimole, the CLS times drop to 0ms.

    Interestingly, I already have 0ms CLS on mobile (with Optimole) – the issue only occurs on the desktop version of my site.

    Since disabling Optimole brings the desktop CLS down to 0 (with the new native lazy loading in WP 5.5), I assume the issue is with Optimole. Since CLS is going to become a ranking factor in the future, I would like to get these issues sorted out now.

    Is there a way to fix CLS when using dynamic sizing with Optimole?

    Thank you!

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

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

  • Hello,

    Can you try and disable the generic placeholder it should help reduce the CLS since it will use a placeholder that better respects aspect ratio.

    Let us know if this improves things.
    Thank you!

    Thread Starter devitaliza

    (@devitaliza)

    I have disabled the ‘Enable generic lazyload placeholder’ and reset all caches, but the issue appears to persist.

    https://googlechrome.github.io/lighthouse/viewer/?psiurl=https%3A%2F%2Fwww.seoulinspired.com%2F&strategy=desktop&category=performance&category=accessibility&category=best-practices&category=seo&category=pwa&utm_source=lh-chrome-ext

    Is there anything else that could be causing the issue?

    Hello,

    You could try and specify a min-height for nv-post-thumbnail-wrap of 322px this way you should minimize the Content displacement for desktop.

    This is mostly an issue with how the layout moves during loading.

    Let us know if this helps, thank you!

    Thread Starter devitaliza

    (@devitaliza)

    Hello Bogdan,

    Thank you for that suggestion! The CLS has now (on most loads) dropped to under 100ms which is the criteria for a ‘good’ result. However, this only applies to that one image type (thumbnail images). This means that my posts (with different image types/sizes) are still very high in CLS.

    To solve this issue site-wide would I need to manually specify a minimum size for each type of image?

    I know this is outside of an Optimole issue now, but I was wondering if you would have a suggestion to make this CSS apply only on desktop?

    I see online many people suggest defining a screen size (such as this CSS only applies to screens > 1024px). However, I wonder if this is still relevant since many phones are now 1440p.

    I really appreciate your help, this has been bugging me for months. Thank you!

    • This reply was modified 4 years, 6 months ago by devitaliza.
    Thread Starter devitaliza

    (@devitaliza)

    Oh, I forgot to mention. I want to make this change only apply to desktop as now there is a white border under every image on mobile.

    Again, thank you for your help!

    Hello,

    You can use common media queries to target specific devices eg.:

    /* Custom, iPhone Retina */
    @media only screen and (min-width : 320px) {
    }
    /* Extra Small Devices, Phones */
    @media only screen and (min-width : 480px) {
    }

    /* Small Devices, Tablets */
    @media only screen and (min-width : 768px) {

    }

    /* Medium Devices, Desktops */
    @media only screen and (min-width : 992px) {
    }

    /* Large Devices, Wide Screens */
    @media only screen and (min-width : 1200px) {
    }

    The screen size is a independent metric of the screen resolution, you should target specific areas where you encounter this issue.

    Let me know if this helps, thank you!

    • This reply was modified 4 years, 6 months ago by Bogdan Preda.
    • This reply was modified 4 years, 6 months ago by Bogdan Preda.
    • This reply was modified 4 years, 6 months ago by Bogdan Preda.
    • This reply was modified 4 years, 6 months ago by Bogdan Preda.
Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘Optimole & CLS’ is closed to new replies.