[Support request] Logo Layout Shift

Home Forums Support [Support request] Logo Layout Shift

Home Forums Support Logo Layout Shift

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #1673583
    Ben

    Hi!

    I know there are lots of previous questions about this and I have worked through them all, but I’d appreciate if if you could help with my specific site.

    I’ve done a ton of work on site speed and layout shift. I am getting broadly good scores on PSI now, but still have really bad layout shift on some pages, specifically for desktop.

    I use Nitropack. Their support say it’s related to my logo, and I’ve tried the fixes for this (I think!) including switching to Flexbox. The issue is still present if I disable Nitropack.

    Here’s one of the problematic pages: https://www.homeworkingclub.com/free-online-training/

    The PSI report just seems to highlight the regular content, but Nitropack say it’s the logo <shrug emoji>

    I know i have ads that contribute too but I have pages with exactly the same ads which check out fine, so I’m keen to discover what it is that’s causing the shift.

    Hope you can help and that it’s something obvious 🙂

    Many thanks!

    #1673682
    David
    Staff
    Customer Support

    Hi there,

    the issue isn’t the logo – however you should exclude the logo from lazyloading anyways… if you can exclude it using a CSS class – then use: is-logo-image

    The main issue is FOUT – if you open the site in Chrome, open the dev tools and on the Network tab – change the Online to Slow 3G. With the dev tools open refresh the page. You’ll see the the font swap occurring. So the problem relates to the font being loaded after the page has been rendered.

    #1673873
    Ben

    Thanks David.

    I’ve just tried it about 50 times and I’ve not seen any FOUT at all, just the logo appearing a little late about one in five times.

    What I don’t understand is why I have other pages like this one:

    https://www.homeworkingclub.com/clickworker-review/

    Same font, same logo, same setup, same Nitropack config, and perfect CLS.

    I’d be really grateful if you could see what the difference is, it makes no sense to me.

    If it IS a font issue, how to I resolve it?

    #1673953
    David
    Staff
    Customer Support

    The chances are you have the fonts cached in the browser or you have them installed locally so the site is not making the font request. See here:

    Choices:
    1. Simplest and most effective is to use a System Stack font so there is no google font request.
    2. Preload the font so its available before the page is rendered.
    3. Mess around setting font-display properties…..

    Not sure if Nitro manages preloading fonts – but Plugins like OMGF allow you to host the font locally and set them to Preload.

    I can see the same CLS on that other page as well as testing in on PSI. When it comes to font size shifting it really depends on the page content. Some blocks of text will cause greater shift then others – such as longer words causing larger reflows.

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