Making a Website Under 1kB

Let's go right to the 100 bytes club. Here's Sierpinski triangle in 32 bytes: https://www.pouet.net/topic.php?which=12091&page=1#c568712

Edit: another version, 59 bytes: https://twitter.com/jonsneyers/status/1375828696846721031

Is it really needed when browser (and linux distros!) have their own captive portal detection page ? (e.g http://detectportal.firefox.com/ or http://connectivity-check.ubuntu.com)

I had a look at https://cv.tdarb.org/. You could reduce it even further.

By:

  - removing quotes around attribute values

  - replacing href values with the most frequent characters

  - sorting content alphabetically

  - foregoing paragraph and line-break tags for a preformatted tag

I was able to bring it from 730 bytes (330 had you compression enabled) down to 650 bytes (313 bytes after compressing with Brotli). Rewording the text might get you even more savings. Of course I wouldn't use this in production.

Here it is: https://jsbin.com/cefuliqadi/edit?html,output

will work just fine ;)

Another fun trick is using since the spec says to pretend a space is there if not present for whatever reason (https://html.spec.whatwg.org/multipage/parsing.html#parse-er...)

Shameless plug

I made an entire organ synthesizer in under 1024 bytes of html/js (use your keyboard):

https://js1024.fun/demos/2022/23

source / instructions / background:

https://github.com/ThomasBrierley/js1024-mini-b3-organ-synth

The javascript was significantly reduced in size by using regpack, which is a regex based dictionary compression algorithm targetting very small self decompressing javascript. Writing for regpack takes some thinking because you have to try and make the code the most naturally self similar, which often means consciously avoiding more immediate space saving hacks in order to make larger sequences of characters identical - e.g it would usually make sense to not duplicate an expression, unless it's very short and only used a couple times, it usually makes sense to store it in a variable, but the character cost in defining the variable is actually larger than simply duplicating the expression through regpack (even if it's used a lot).

This might be worse than the lzw type compression used in HTTP, I haven't tested, but this was written for a code golfing competition where source size counts not transmitted size... Then again, conceptually this should lend itself to any any dictionary based compression, so zipping the original source (minus the whitespace), may also work out very well.

Here's a web interface that includes terser and regpack: https://xem.github.io/terser-online/

Note that it's usually best to hand minify for regpack, terser is only convenient for removing whitespace, but advanced automated js compression libraries usually cause the size to inflate when regpack is the final stage.

[edit]

zipping the source comes in at 952 bytes - so it appears this technique applies when targetting dictionary compression in general, including the commonly used compression in HTTP.