Image logo optimization for content shifting #876
Unanswered
wade-cheng
asked this question in
Ideas
Replies: 0 comments
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Uh oh!
There was an error while loading. Please reload this page.
-
The logo image (relevant docs at https://pradyunsg.me/furo/customisation/logo/) currently loads non-instantly, which causes really bad content shifting on a page change. I noticed this annoyance at pytest's docs, which has it particularly bad (when I view it, from my geographic location, with my wifi, etc etc).
What can be done?
Add the correct
min-heightcss property to.sidebar-logo. This would either be computed dynamically via programatically finding the height of the logo file given byconf.py, or simply given as another hardcoded variable inconf.py. Dynamic makes more sense to me.Once this is done, the image will still flash, but will not shift the sidebar toc.
prefetchthe image in<head>. This would cause it to load faster, possibly preventing shift or flash in the first place. i.e.,<link rel="prefetch" href={logo path}>. I don't know how to benchmark how much this helps, but it seems to be intended to. (In particular, trying to benchmark via the local build causes instant loading of the logo, which is unhelpful. I suppose one could go through the effort of making a dummy site just to test this out.)Relevant material:
I'd make a PR but I'm unfamiliar with the tech stack. Hope this can be implemented, cheers!
Beta Was this translation helpful? Give feedback.
All reactions