[BUG] Lazy Loading doesn't work as expected

[omerXfaruq]

Describe the bug

Hi, I'm testing hosting tiddlywiki over a low bandwidth connection. Initial load takes a long time hence I'm looking for lazy load options. I've found lazy loading options on tiddlywiki.com, it reduced the webpage size from 4MB to 2.9MB, however this still too big IMO, I don't have much data on the homepage(only text).

Is there any other way to optimize the size of the home page?

Expected behavior

Decrease homepage size < 100KB?

To Reproduce

tiddlywiki brain --listen root-tiddler=$:/core/save/lazy-all port=8080

Screenshots

No response

TiddlyWiki Configuration

version: 5.3.3
nodejs
ubuntu 22.04

Additional context

No response

[omerXfaruq]

cc: @Jermolene

[pmario]

@omerXfaruq Sorry for the late reply. TW is a SPA single page app, that works stand alone, if it is downloaded to a computers file system. So it does contain all the information it needs in 1 single HTML file.

There are some possibilities to make the data transfer smaller

1. Using the TW external core feature
2. create a static version of your wiki

add 1) External Core

The external core version will create the same SPA, but the TW core will only needed to be downloaded once. The brwoser will cache the core code, so only the HTML data / tiddlers will be loaded.

You can test an external core version like this:

tiddlywiki test-external --init server
tiddlywiki .\test-external --listen 'root-tiddler=$:/core/save/all-external-js' use-browser-cache=yes gzip=yes

The commands above have been used with Windows Powershell. So using Ubuntu the quotes may or may not be needed

See docs at:

• Using the external JavaScript template
• ListenCommand ... gzip

---

The first time you load an almost empty wiki with 2 tiddlers you will need to transfer about 500kByte

The second time the wiki is loaded, the core can be cached by the browser. So only the data portion in the HTML is loaded.

---

---

add 2) Static Page

TW has the possibility to export every tiddler as a simple static html file. There will be a "static.html" landing page, which should contain an overview and links to the important tiddlers. Since there is absolutely no JavaScript tiddlers / pages can only be reached if they are linked using [[link to tiddler aaaa]] ...

You can export the text-external wiki as a static site as follows. We can reuse the wiki from 1)

tiddlywiki ./test-external --build static

This command will create 2 files in the ./test-external/output directory

• static.html ... Landing page
• alltiddlers.html ... Contains all tiddlers in 1 html file, as an alternative to static.html

The /static directory contains

• all tiddlers as single html files
• static.css

You can test them from the file system
So you can use any server or web service that can serve static files, to make your wiki content available.

If this server does configure caching right, the tiddler html files will be small.

Hope that helps
Mario

PS: @linonetwo ... Will be able to help you with lazy-loading and external-core. @linonetwo Does it make sense to combine those two?

[omerXfaruq]

@pmario thanks a lot! Using external core I was able to decrease the initial load size to 1.7MB. However not being able to use lazy load and external core is sad. Curious, @linonetwo Would it be possible to enable them independently?

[omerXfaruq]

This is what perplexity says after a quick discussion: