Header Logo Sometimes Causing CLS – Mobile Version

  • Resolved slservice33

    (@slservice33)


    3 years, 4 months ago

    Hi, I use the Astra Header Builder and sometimes get CLS within the header on mobile breakpoint where the logo starts off too big and then shrinks a little causing the layout to shift.

    On the mobile breakpoint I have just Logo on left and Hamburger & Search icon on right side.

    This layout shift in the mobile header only effects some webpages and if I ‘purge all’ Litespeed cache it may stop on one webpage and then happen on a different webpage.

    This is very odd as every page has the same header and why would purging the Litespeed cache fix it?

    I am seeing the layout shift both in Google Pagespeed Insights where a series of pictures shows the layout shifting and on my mobile phone even after clearing the cache.

    Currently the page https://www.slservice.net/clipper-blade-sharpening/ has the CLS in mobile view though this may stop and then effect another page instead.

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

Viewing 7 replies - 1 through 7 (of 7 total)
  • Anonymous User 18020188

    (@anonymized-18020188)

    @slservice33

    Hello there,

    I am also bothered by the same situation. This problem occurs when using any caching plugin.

    It fixes itself by deleting the cache plugin.`

    Thread Starter slservice33

    (@slservice33)

    Deleting cache plugins is not a solution. I think Litespeed cache is mandatory on my server and it does a lot of things for my site

    There must be something in a Astra that is not right.

    – it only happens on the smallest breakpoint – mobile screen size
    – the header logo CLS only happens on 1 or 2 pages (usually the hompage) even though the header is the same on every page.

    For some reason on random pages the logo placeholder dimensions are not being worked out correctly.

    Hi @slservice33,

    Yes, I agree with you that deleting the cache plugin is not a solution. Every WordPress site needs a cache plugin.

    Anyway, I would suggest you reconfigure the cache plugin or if it’s still doesn’t work, try to find an alternative.

    Kind regards,
    Herman ??

    Thread Starter slservice33

    (@slservice33)

    Thanks for that.

    So far it looks like if I clear the cache after any edits and then wait a few hours (or a day!) and clear the caches again then I’m pretty sure the layout shifts stop.

    But then if I make any edits to my website then immediately one or two pages start getting the logo layout shifts.

    So wait a few more hours (or a day), clear the caches again and usually the shifts go away.

    Very odd ! ??

    Hi @slservice33,

    You might want to set auto clear the cache after a specific time period to avoid doing it manually.

    Let us know if you need more help, otherwise please mark the topic as Resolved.

    Have a nice day and stay safe!

    Kind regards,
    Herman ??

    Thread Starter slservice33

    (@slservice33)

    Hi Herman, I appreciate your replies but not even the most optimistic of people could consider this resolved as it still happens ??

    Thread Starter slservice33

    (@slservice33)

    Finally the solution to Astra layout shift on mobile screen sizes for cached pages !!

    qtwrk from litespeed cache support :

    “please try go to Cache -> Cache -> enable mobile cache , save and purge all and see how it goes”

    “my thought was your page might have 2 styles , one for desktop , one for mobile , then obvious when desktop style applid to mobile, or vice versa, will certainly create layout shift

    with that option on, it will create 2 caches for same page, one cache for mobile, one cache for desktop”

    So there you go – set your wordpress page cache plugin to save mobile screen size and desktop screen size as separately cached pages to stop the layout shift

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘Header Logo Sometimes Causing CLS – Mobile Version’ is closed to new replies.