CSS loading lag in server mode?

#1

Hi all,
I’m using TW 5.3.1 in server mode on MX Linux, experimenting with read-only single tiddler view.

Viewing my site (via localhost) in Firefox 117.0, on any given page I see a brief (<1 second) flash of un-styled text appear before it loads fully with styles applied. Meanwhile, in Chromium 90.0, everything works fine.

Has anyone else encountered this? Since it differs between the two browsers, maybe just a performance issue with Firefox. But I’m wondering if there is something I can do to make the CSS load more efficiently overall, for a better experience on any browser…

Thanks,
Nutt

#2

I did test it with Windows 11 and FF 117. There is no problem on my machine. … But the doc page says that the function is experimental.

There may be a problem server-side with rapid page reload. How do you start your server.
Can you post the command line?

You may use use-browser-cache=yes as the last parameter after the –listen command

I personally did not use this mode since you mentioned it here. So I’m not the right person.

Is there a reason, why you want to use this mode instead of loading the whole wiki?

#3

Here’s my command line:

tiddlywiki sail --listen port=8081 use-browser-cache=yes

I added the “use-browser-cache” parameter at your suggestion, but get the same result.

My reason for using this mode is that I ultimately want to present it live with the single-tiddler view, more like a traditional site, but also have the easy maintenance (for myself) afforded by TiddlyWiki.

That said, I do see where it says “experimental”, so I may just need a different solution. Anyway, thank you for the response!

#4

It may not be releated, and possibly shouldent be the way you are using it, but since 5.3.x if you had a splashscreen loading, you may need to set it up a fresh because of a slight change. I would see an error as the splash screen passed quickly.

1 Like
#5

Thanks, good to know. I’m not using a splashscreen, but I wonder if maybe it’s trying to load one by default and thus delaying other operations? Just a guess…

#6

You could remove $:/tags/Stylesheet from your css stylesheets one at a time, or add it back one at a time, save and reload until you find the offender.

#7

Which plugins do you use?
Are there any “strange” CSS changes active?

#8

Good thought. Will give that a try. Thank you!

#9

For this particular site, only plugin I’ve added is CodeMirror. And the issue started before that.

As for strange CSS, I don’t think I’m doing anything super-radical. Main thing is that I’ve assigned position: fixed to the story river section so I can center it withing the viewport. It’s different from the usual layout for sure, but the rules I added to achieve that are minimal compared to what’s built in.

Think I will try a variation of TW_Tones’ suggestion though: comment out the rules one by one, just to see…

#10

I was unable to duplicate the problem with the latest Firefox on macOS.

The read-only single tiddler view is pretty simple: the stylesheet is linked from the head section, and each file is just plain HTML, with no JavaScript. Given the simplicity of the pages, it might be worth checking whether any Firefox plugins are interfering with things.

#11

Thanks Jeremy! I investigated some based on your suggestion, and we have an answer.

This will make me look incredibly stupid :slight_smile:, but I’ll share anyway in case it might benefit someone else… The culprit was Firefox developer tools. When I close them and just view the pages alone, no more flash on load.

I didn’t think to try at first, because I test pages with developer tools open all the time, and have never seen that before. So maybe something with this particular Linux build of Firefox.

At any rate, I appreciate the help from everyone here!

Update: not just developer tools, but the Inspector tab in particular. Eg, if I close developer tools and then re-open to the Console tab, no flash. Soon as I go back to Inspector, though, issue appears until I close out developer tools altogether again.

#12

If the dev-tools are open and Inspector tab selected I can replicate it with FF latest on Win 11. – But it’s only a flickering about 100ms or so. Barely visible on my desktop – Probably because the Inspector has to redraw the DOM structure on reload, which takes some time.

Interesting. Thanks for sharing.

No, it does not. Every question is welcome in this forum, if it’s on topic.
For OT we have the Café - Talk TW category :wink:

-m

1 Like
#13

Hi @grundyunderhill glad to have got to the bottom of it, and to have the problem recorded so that others in the future might learn from it. Not at all stupid not to have spotted it at first; there’s a long history of debugging tools interfering with the normal operation of programs, leading to notoriously hard to debug issues.

I had a chastening experience along the same lines many years ago. My team had been working hard on a demo for a conference, and all went well until we arrived at the conference hotel and all of a sudden the demo was running 10x slower. Super stressed, we tore out our hair out for a few hours, and found situations where the code would run as fast as expected, and others where it would resolutely run like molasses. Eventually we discovered that the difference was whether we had the debug console open or minimised; we were dumping so much debug information that we were saturating the CPU with scrolling the terminal window…

#14

Sounds like it happens to the best of us! Thx again for your help.