Beta - Avoid large layout shifts

Beta
#1

Hi there,
This may not be 100% relevant to this beta release, but it could be :slight_smile:

I would like to ask if there is something that can be done to improve Lighthouse performance especially for mobile devices, for example Avoid large layout shifts highlights. I have only heading, text, logo, and button, this is a test website, and each line of text has been detected as an issue.

I am not sure if this is related to the per breakpoint splits on larger screen, then text falls back to single row, and text moves also on very small devices to the centre?

it shouldn’t be according to this

I could understand if some JS scripts, banners loads slower then a text, and things move up and down.

I am just interested to maximise PRO potential in terms of speed, mobile first etc.

Thanks

#2

Not sure about the Pro Beta as the few things I tried in beta 1 didn’t work so I am patiently waiting for beta 2 before spending any more time on the beta.

With regards to layout shifts this usually happens when using auto heights or not specifying image sizes.

If the browser doesn’t know the size of something then once it loads the layout will shift. So a good rule of thumb is to try set at least a minimum height onto assets that may be slow to load to avoid this problem.

Flash of Invisible Text can also be a problem with Pro especially when using custom fonts. (I also find I get this with Adobe fonts for some reason.)

1 Like
#3

I could be wrong but I think transition effects can also play a part here. So things like scroll effects.

#4

I don’t think Pro has anything to do with it. It is a design approach thing.

If your text is being flagged for CLS, also look into your font selection. If you have font-display:swap, it may be that your font is too different from its alternative during the swapping.

1 Like
#5

Thanks guys, all good recommendations here. I was thinking about the font swap, but google recommended this approach, that during a page load, system font will be used and then the custom font that I use.

1 Like
#6

So this can be very subjective and depends on the design in most cases. Generally speaking, the Theme Options reboot (next cycle) will be the biggest move in the right direction for performance. The new paradigm will have less static CSS. I’m hoping by then we’ll be able to drop jQuery on the front end which will be much less JS that needs to load. We’ve got a ways to go in terms of reducing the amount of assets that are loaded at any given point, but we’re getting there. Mobile first should help somewhat as well.

I don’t think scroll effects are too much of an issue. I just tested this asset: http://demo.theme.co/designcloud/content/faux-tableau The page isn’t optimized for performance, but I didn’t get any CLS issues.

1 Like
#7

Hi guys,
I can verify that the CLS issues is related to Font options SWAP. I just disabled it or did auto, re-did the test, and none of the text / headings are reported. But of course then you end up with another issue - Ensure text remains visible during webfont load

1 Like
#8

@rafalkukla, so your best bet is to find a good font/fallback combo that has similar widths.

#9

@Misho
Slightly off track as I know this is about layout shift but how are you managing the fallback font in Pro.

There is no setting in the font manager to set a different fallback font? (and it has bugged me for a while now.)

2 Likes