1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
|
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" href="data:,">
<title>Making a Website Under 1kB</title>
<link href="/atom.xml" type="application/atom+xml" rel="alternate" title="Atom feed for blog posts" />
<link href="/rss.xml" type="application/rss+xml" rel="alternate" title="RSS feed for blog posts" />
<style>*{box-sizing:border-box;}body{font-family:sans-serif;line-height:1.33;margin:0 auto;max-width:650px;padding:1rem;}img{max-width:100%;}pre{border:1px solid;overflow:auto;padding:5px;}table{text-align:left;width:100%;}.footnotes{font-size:90%;}</style>
</head>
<nav>
<a href="#menu">Menu ↓</a>
</nav>
<main>
<h1 id="making-a-website-under-1kb">Making a Website Under 1kB</h1>
<p>2022-08-02</p>
<p>I recently launched (another) website club called the <a href="https://1kb.club">1kB Club</a>. Unlike the <a href="https://1mb.club">1MB Club</a>, it isn’t as accessible for most modern websites to become official members. Building a website that actually serves useful content while squeezing its page size under 1,024 bytes is no easy feat.</p>
<p>But it is possible. And I did it myself!</p>
<p><em>Note:</em> Big shout-out to <a href="https://t0.vc">Tanner</a>, who inspired this whole “movement” with his own minimal website. (He also has some really great creations/articles there too!)</p>
<h2 id="the-html">The HTML</h2>
<p>For reference, you can view my “mini” website here: <a href="https://cv.tdarb.org">cv.tdarb.org</a>. It is <em>very</em> minimal and serves only as a personal curriculum vitae. It also weighs only <strong>920 bytes</strong> and is valid HTML.</p>
<p>Let’s take a look at the full HTML and then break things down from there:</p>
<pre><code><!DOCTYPE html><link rel="icon" href="data:,"><meta name="viewport" content="width=device-width,initial-scale=1.0"><title>CV</title><p>Hi, I'm <a href="t">Brad Taunt</a>! I'm a UX designer.<p>Email: hello@tdarb.org<p>Resume<p>Senior Product Designer @ Donorbox, 2021-<br>Web Designer @ Purism, 2019-2021<br>Product Designer @ Benbria, 2013-2019<br>Web Designer @ Netvatise, 2009-2013<p>Projects<p><a href="1">1MB Club</a><br><a href="k">1kB Club</a><br><a href="p">pblog</a><br><a href="s">shinobi</a><br><a href="h">PHPetite</a><br><a href="v">Vanilla CSS</a><p>Writing<p><a href="d">The Death of Personality</a><br><a href="u">Simple Does Not Mean Ugly</a><br><a href="e">Plain Text Emails, Please</a><br><a href="tb">[more]</a>
</code></pre>
<h2 id="sneaky-hacks">Sneaky “Hacks”</h2>
<p>The first thing you’ll notice is that the HTML is compressed. White space adds extra bytes of data to the page weight - so it needs to go. Next, you might have caught the <em>odd</em> favicon meta tag:</p>
<pre><code><link rel="icon" href="data:,">
</code></pre>
<p>This is required to stop the browser from making the standard favicon request (normally pulling from <code>favicon.ico</code>). By adding this meta tag you are telling the browser to load in an empty image without running another server request. This saves about 400 bytes of bandwidth on its own!</p>
<p>The next two meta tags after the <code>icon</code> are technically optional. These are the <code>viewport</code> and <code>title</code> tags. You could save a good amount of data by excluding them altogether, but I had my own personal reasons for keeping them:</p>
<ol>
<li>I wanted the web page to be responsive</li>
<li>I wanted the page to be <a href="https://validator.w3.org/nu/?doc=https%3A%2F%2Fcv.tdarb.org%2F">valid HTML</a></li>
</ol>
<p>So, I kept these tags but made them as minimal as I possibly could (looking at you <code>title</code> tag). After that, it was time to add my content!</p>
<h2 id="where-were-going-we-dont-need-tags">Where We’re Going, We Don’t Need Tags…</h2>
<p>The beauty of using HTML5 is the ability to ditch “default” and closing tags on most elements. Think of all those bytes we can save!</p>
<p>In the HTML above you will notice:</p>
<ol>
<li>There is no <code>html</code> element</li>
<li>There is no <code>head</code> element</li>
<li>There is no <code>body</code> element</li>
<li>There are no closing <code>p</code> tags</li>
</ol>
<p>Even with all those “missing” elements, the webpage is still valid HTML5! Craziness.</p>
<p>The final hack that saved a <em>ton</em> of bandwidth was implementing custom <code>href</code> URLs. Most of the links on the page take the user to another website altogether - which is fine. The problem is including these full domains inside the <code>a:href</code> tag. Those can start to eat up a lot of data.</p>
<p>Luckily, I host this mini-site through Netlify so I can take full advantage of their optional <code>_redirects</code> file. Links are now set with a single character (ie. “1” for the 1MB Club link) and the <code>_redirects</code> file simply forwards the user to the custom domain. Pretty sneaky!</p>
<h2 id="closing-thoughts">Closing Thoughts</h2>
<p>This is a silly project that isn’t meant to be taken so seriously. That being said, I’d love to see what other pages people are able to create while being limited to just 1kB.</p>
<footer role="contentinfo">
<h2>Menu Navigation</h2>
<ul id="menu">
<li><a href="/">Home</a></li>
<li><a href="/projects">Projects</a></li>
<li><a href="/uses">Uses</a></li>
<li><a href="/wiki">Wiki</a></li>
<li><a href="/resume">Resume</a></li>
<li><a href="/colophon">Colophon</a></li>
<li><a href="/now">Now</a></li>
<li><a href="/donate">Donate</a></li>
<li><a href="/atom.xml">RSS</a></li>
<li><a href="#top">↑ Top of the page</a></li>
</ul>
<small>
Built with <a href="https://git.sr.ht/~bt/barf">barf</a>. <br>
Maintained with ♥ for the web. <br>
Proud supporter of <a href="https://usefathom.com/ref/DKHJVX">Fathom</a> & <a href="https://nextdns.io/?from=74d3p3h8">NextDNS</a>. <br>
The content for this site is <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>.<br> The <a href="https://git.sr.ht/~bt/bt.ht">code for this site</a> is <a href="https://git.sr.ht/~bt/bt.ht/tree/master/item/LICENSE">MIT</a>.
</small>
</footer>
|
