- This topic has 3 replies, 2 voices, and was last updated 1 year, 7 months ago by David.
February 26, 2021 at 5:40 am #1673583Ben
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!February 26, 2021 at 6:39 am #1673682DavidStaffCustomer Support
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:
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.February 26, 2021 at 6:58 am #1673873Ben
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:
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?February 26, 2021 at 7:54 am #1673953DavidStaffCustomer 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:
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.
- You must be logged in to reply to this topic.