DEV Community: Nathaniel

Creating a space to focus

Nathaniel — Wed, 01 Apr 2026 19:14:20 +0000

It's been a while since I've posted to dev.to. I just wanted to let you know if you like my writing I do a weekly newsletter called Practical Betterments.

It's about one-off actions to improve your life continuously — however marginally.

Currently I'm doing a series on creating a dedicated space to help you with goals that require sustained focus.

You can read the first one here:

Create a dedicated focus nook

Here's some other tips related to productivity and focus:

Add spaces to the dock on MacOS

Block browser notification requests

Place healthy apps within thumbs reach

Let me know what you think!

Download all of Wikipedia on your phone

Nathaniel — Mon, 27 Nov 2023 14:20:36 +0000

There's a lot of data on the public internet — and vast amounts get added every day. But, how much of it is useful to anyone, and how much of it is conceivably useful to you?

The answer is 102 gigabytes.

Download all of Wikipedia on your phone and never be without the useful internet ever again.

Why download Wikipedia

I downloaded Wikipedia about a year ago and have used it more than I expected. Here's some of the benefits with real life examples:

You get access to information on almost everything when there is no internet. When the internet is patchy on a train, when you're underground, or in the middle of the ocean.
Saving money on data. Especially useful while travelling when data is likely to be more expensive. You can look up the history of towns your train passes through, the culture of your destination, and solve culinary mysteries without having to chew anything.
It's better for your brain than social media. Removing some of the friction required to use Wikipedia — reduces the likelihood you'll spend time on social media. Wikipedia has much healthier rabbit holes. (This list of unusual articles is always a good starting point.)
It's a nice reminder of the breadth of human interest. Every article on wikipedia was written by a human being who cared about the topic. When I'm feeling down, especially about my writing, I remember that people care enough to write about pocket lint — and I feel less blue.
Resilience from global catastrophe and forced boredom. At any moment society could collapse or you could find yourself hiding at a party. It's best to be prepared.
It weighs much less than a hard copy.

How to download Wikipedia

There are a number of ways to download Wikipedia, a complete list is available on (no surprise) Wikipedia. The most user-friendly way is to download an app to do it for you, and the most user-friendly app is Kiwix.

Kiwix is available on both Android and iOS. It's free, open-source, and can be used for other content — like iFixit or Stack Overflow.

Wikipedia weighs in at around 102 gigabytes (GB) with images and 60GB without. It's a big file — too big for a lot of phones. However, Kiwix also allows you to download subdivisions of wikipedia — like the top 1 million articles at 43.53GB, mathematics articles at 2.63GB, or only ice hockey articles 527.6MB.

Here's how to do it:

Download Kiwix for your platform of choice: iOS, Android, Everything else.
Open the app
Navigate to Library. (You have to hold down the bottom right menu button)
Click Categories
Click Wikipedia
There are lots of options for downloading subdivisions of Wikipedia. Scroll down to the heading that simply says Wikipedia to see the options for downloading all of English language Wikipedia.
Choose the download size that is right for you.
Make yourself a cup of tea and sit patiently next to your WiFi router.

Why lowercase letters save data

Nathaniel — Sat, 25 Nov 2023 22:54:32 +0000

Lowercase letters and uppercase letters use the same amout of data — 1 byte each.

So, it's surprising to learn that swapping uppercase letters for lowercase letters saves data.

How, you'll have to read my article on my website. I normally put them on dev.to, but this one has too many interactive elements.

Here's the article in full:

why lowercase letters save data

let me know what you think!

Practical Betterments

Nathaniel — Sat, 29 Jul 2023 12:13:09 +0000

Pracitcal Betterments is a collection of one-off actions that improve your life continuously.

For the past year I've been collecting what I was calling "life hacks", but are really their own thing — that I've decided to call practical betterments. Partly because life hack is sort of vague and can mean anything from "make your bed every morning", to "use toilet rolls to organize your wires" — but mostly because the domain practicalbetterments.com was available.

I didn't originally intend for this collection to be a website — but after boring everyone I know with them, it seemed important for my personal life to have an outlet.

I've collected over a hundred of these — and am trying to write one up every morning. You can learn more about them on the about page or jump right in and get a taste for the kind of thing it is with these:

I hope you enjoy them, let me know what you think!

SVG to CSS Data URL converter with maybe the smallest possible output.

Nathaniel — Sat, 03 Jun 2023 16:12:13 +0000

I use something like this all the time — but it was never clear if it produced the optimal output.

So i did a bunch of research and made this:

SVG to CSS converter

It converts SVG to a CSS compatible Data URL for use in attributes like background-image and mask-image.

As far as I'm aware it produces the smallest possible output without compromising backwards compatibility.

We're talking saving a few bytes here and there — but the compounded effect of using this sort of thing all the time should make a bigger difference in the grand scheme of things.

It…

only encodes necessary characters
changes attribute quotes to single quotes
lowercases percent-encoding hex pairs
swaps hex colors to their shorter named equivalents
adds xlmns attribute if missing
removes useless whitespace

There's more information below the tool on the page if you're interested in understanding why it does these things.

Let me know what you think,
enjoy!

Accessibility issues with stylized unicode characters

Nathaniel — Thu, 01 Jun 2023 12:25:08 +0000

This is a piece I originally wrote as a warning on my website. It's aimed at a general audience — not nerds.

Unicode characters like 𝔱𝔥𝔢𝔰𝔢 cause accessibility issues and have a strong association with spam and scams.

You've probably landed on this page because you clicked learn more on the warning on one of the unicode text converter tools. (or not, because this is dev.to)

That's because the output of those tools cause accessibility issues.

This page exists to explain those issues — and to convince you to either not use those tools, or to use them in a way that doesn't ruin people's experience of the web.

In addition to the accessibility issues — they also have a strong association with spam and scams — more information can be found at the bottom of the article.

What is unicode?

To a computer everything is a number.

For a computer to work with the alphabet you need to give each letter a unique number.

For different computers to work together — they all need to agree on which letters are assigned which numbers.

Unicode is the system the world uses to make sure every computer agrees on which character is assigned which number.

Here's some examples:

captial A is given the number 65
capital B is #66
lowercase a is #97

The world has thousands of languages which have unicode symbols too:

Ђ is #1026
က is #4096
㌀ is #13056

Unicode is also used for symbols and Emoji:

✩ is #10025
𝔉 is #120073
😂 is #128514

Without a system like unicode the internet would not be possible — this page would just be a mess of the wrong symbols.

Unicode mathematical symbols

Unicode has many symbols used in math and phonetics — and these symbols often resemble stylised letters of the latin alphabet.

These are intended for use in mathematics, but instead people use them to write stylized text online — often on social-media sites that don't have the option to use bold or italic text.

Here's an example of what it looks this text looks like (it may not render on your device) — it says "this is some fancy text that looks funky and weird."

ᴛʜɪs ⒤⒮ 𝘀𝗼𝗺𝗲 𝔣𝔞𝔫𝔠𝔶 𝕥𝕖𝕩𝕥 𝓉𝒽𝒶𝓉 🄻🄾🄾🄺🅂 𝚏𝚞𝚗𝚔𝚢 🅐🅝🅓 𝒘𝒆𝒊𝒓𝒅.

It's true. It does look funky and weird — but it also comes with some serious accessibility issues.

Accessibility issues

Screen readers

Screen readers are an assistive technology that reads the contents of the web aloud.

When a screen reader reads these symbols, it doesn't interpret them visually — it correctly interprets them as the symbols that they are.

So a sentence like: "please buy my plastic garbage" written like this:

please buy my plastic 𝔤𝔞𝔯𝔟𝔞𝔤𝔢

is read aloud as "please buy my plastic mathematical fraktur g mathematical fraktur a mathematical fraktur r mathematical fraktur b mathematical fraktur a mathematical fraktur g mathematical fraktur e".

Which is incredibly frustrating — and destroys any chance of the author selling their plastic garbage to screen reader users.

Incompatible devices

Unicode contains over 100000 letters and symbols and they add more every year.

To have an image saved on your device for every single one of these symbols would take up a lot of memory — and be a lot of work for the device creators.

It's not surprising that many devices don't render these symbols at all. Instead they show a bunch of squares.

This is a familiar experience for anyone who has received a message containing a brand new emoji.

How to solve these issues

Social media and messaging apps

Some social media sites and messaging apps allow you write bold and italic text — and have unintentionally made this a hidden feature.

However, many sites and apps don't allow users to style text. So the simple solution is don't use these symbols — I hope this article has convinced you not to.

Instead allow the content of your words to speak for themselves — or just quit social media and go outside a look at a flower.

On websites

If you're new to web development and want to stylise text — then you need to learn some css. You can learn more about it here — MDN — CSS: Cascading Style Sheets

If you need to use these symbols on your website — like they are used on this page — and want screen readers to read them correctly — wrap them in an element with the aria-label attribute, like so:

<span aria-label="your text">𝕪𝕠𝕦𝕣 𝕥𝕖𝕩𝕥</span>

or if the symbols you are using a purely decorative, and have no meaning for the reader. Use an aria-hidden attribute instead.

<span aria-hidden>✩</span>

Association with spam and scams

In addition to accessibility issues — unicode symbols like these have a strong association with spam and online scams.

Spam

One of the ways email and text message spam filters detect a spam message is by searching the email's content for specific words or phrases.

Some spammers hope to avoid detection by replacing these words or specific letters in these words with stylized characters.

Because of this, many people associate these stylised characters with spam.

Confusables and homoglyph attacks

Scarier than spam. Criminal hackers use these unicode characters to trick you into giving up access to your online accounts.

For example — lets say your example bank has a website with the example url: example.com

Someone may send you an email pretending to be your bank asking you to log into your account. It looks real, so you click on the link — and the link opens a website that looks identical to your bank's website.

Even the url is the same — but it's not the same! Instead of saying example.com it says 𝚎𝚡𝚊𝚖𝚙𝚕𝚎.com or subtler still еxample.com. (this one uses a Cyrillic е)

This is called a homoglyph attack — a homoglyph is a character that looks very similar to another character.

Unicode keeps a catalogue of all these homoglyphs to help people build tools to prevent such attacks. Unicode refers to them as confusables.

Avoid the association

The association with spams, scams, online crime, make these unicode character extra worthwhile not to use.

You may even find that your emails and text messages go straight to people's junk mail.

The internet's latest website: InputOutput.dev

Nathaniel — Fri, 10 Mar 2023 09:00:36 +0000

Hello, just wanted to share a project I'm working on.

Everyone should be able to use the internet to perform basic tasks without being bombarded with popups, compromising their privacy and security, or damaging the environment.

The goal for inputoutput.dev is to be a repository of simple tools that just work without being annoying or causing harm.

Tools like unit converters, random number generators, that sort of thing.

Here's a list of some of the features:

every tool is under 14kB in a single http request. See why your website should be under 14kB in size
every tool works without JavaScript. See why your website should work without JavaScript
no tracking.
nothing annoying.
dark mode by default. See actually, dark mode can save the planet
and many more!

I've written a more in depth description on the about page for inputoutput.dev

Let me know what you think or if there are any tools you'd like to have added.

Zero byte apple-touch-icon markup

Nathaniel — Mon, 30 Jan 2023 18:20:40 +0000

*This is part of a series of pieces about code you can safely remove from the <head> tags of your website.

You can read the rest here: getoutofmyhead.dev*

An apple-touch-icon is an image used on iOS devices when a website is added to the homescreen.

Different iOS devices display icons at different sizes, and so it's common to see something like this:

<link rel="apple-touch-icon" sizes="152x152" href="https://assets.guim.co.uk/images/favicons/fee5e2d638d1c35f6d501fa397e53329/152x152.png"/>
<link rel="apple-touch-icon" sizes="144x144" href="https://assets.guim.co.uk/images/favicons/1fe70b29879674433702d5266abcb0d4/144x144.png"/>
<link rel="apple-touch-icon" sizes="120x120" href="https://assets.guim.co.uk/images/favicons/c58143bd2a5b5426b6256cd90ba6eb47/120x120.png"/>
<link rel="apple-touch-icon" sizes="114x114" href="https://assets.guim.co.uk/images/favicons/68cbd5cf267598abd6a026f229ef6b45/114x114.png"/>
<link rel="apple-touch-icon" sizes="72x72" href="https://assets.guim.co.uk/images/favicons/873381bf11d58e20f551905d51575117/72x72.png"/>
<link rel="apple-touch-icon-precomposed" href="https://assets.guim.co.uk/images/favicons/6a2aa0ea5b4b6183e92d0eac49e2f58b/57x57.png"/>
// 830 bytes - from theguardian.co.uk

You can remove all this code from your site's `<head>`!

Just like with favicon.ico you can remove these links and place a single apple-touch-icon.png in your root directory.

e.g. https://example.com/apple-touch-icon.png

180x180 is the largest icon size any iOS device requires.[^1] Other devices will downscale the image to fit. — and as of writing this — Apple use a single 152x152 icon on apple.com.

What about other sizes?

If you'd still rather specify a different image for every possible icon size, you can still do that without adding any code to your <head>.

You can place multiple apple-touch-icons in your site's root directory. So long as they're named in the following way:

default : /apple-touch-icon.png
specify size : /apple-touch-icon-72x72.png
specify precomposed : /apple-touch-icon-precomposed.png
specify size and precomposed : /apple-touch-icon-57x57-precomposed.png

What does precomposed mean?

Older versions of iOS added lighting effects to icons on the homescreen. Adding the precomposed suffix removed these effects.

It was a way of telling iOS that you had already added an effect — which is probably not true.

Android and `apple-touch-icons`

Older versions of Chrome for Android used apple-touch-icons for adding shortcuts to the homescreen.
But only if a large enough non-apple icon wasn't found.

Some of older versions of android would look for apple-touch-icons at the site's root. But this practice ended as it was using 3-4% of mobile users bandwith!

If android can't find a large icon to use. It will use the site's favicon.

So you can even cover that unusual case by following this guide: (Zero byte favicon markup)[https://dev.to/shadowfaxrodeo/zero-byte-favicon-markup-keep-the-favicons-without-any-of-the-markup-47hg].

Handheld Friendly — Why do so many websites have this mystery tag?

Nathaniel — Mon, 23 Jan 2023 12:46:58 +0000

When I first started this project to Marie Kondo HTML — I wrote some code that looked at the <meta> tags used by the 10000 most popular websites.

Of that 10000 only 6560 returned a result — and of those 460 had the HandheldFriendly <meta> tag:

<meta name="HandheldFriendly" content="True">
// 45 Bytes

If we unscientifically extrapolate from those numbers — that's around 7% of websites using this tag — which is quite a lot, considering that it took days to work out what it does.

What is the HandheldFriendly `<meta>` tag?

The HandheldFriendly <meta> tag was invented for the AvantGo web browser.

AvantGo was used on Palm Pilots between 2000-2009.

This is a Palm Pilot:

It was more of an RSS feed than a browser.

If the HandheldFriendly tag wasn't present AvantGo would remove <table> elements, "certain image tags" and JavaScript from from the page.

By using the HandheldFriendly tag you're telling the 1 person in the world that still uses AvantGo that you made your website compatible with their Palm Pilot — which would be a lie!

While backwards compatibility is important to consider — it is extremely unlikely that your website is compatible with an old Palm Pilot.

Palm Pilots — and other devices from that time — cannot view websites that use basic security practices like https and tls.

So, to access your website a Palm Pilot user would need make extremely nerdy modifications to their device, or use a proxy server.

These people do exist.

However, even if you want your website to work for the small number of hobbyists who will access it using a Palm Pilot — you still don't need this tag — the Palm Pilot will simply load your website as best as it can without the tag.

For anyone is still using these browsers, let their devices render your content in the default way.

Blackberry Browser

The only other browser I could find that uses HandheldFriendly is the BlackBerry Browser.

Before Blackberry OS 4.5 released in 2008 The browser would render a page in Column View if <meta name="HandheldFriendly" content="true"> wasn't present.

However, Blackberry Browser also supported <meta name="viewport" content="width=device-width"> which had the same effect!

Why is it still around?

I think we can safely say that the HandheldFriendly <meta> tag does not spark joy.

It sparks fear — fear of the unknown.

Nobody wants to be the person who deletes it and then breaks everything.

But now that you know what it is, and what it does, you can thank it for it's service, and let it go.

Zero byte favicon markup — Keep the favicons without any of the markup

Nathaniel — Mon, 16 Jan 2023 17:43:32 +0000

Favicons are the small icons that appear in browser tabs, usually next to the title of a website.

Every website should have a favicon to help differentiate it from websites in other tabs.

~75% of websites have a tag in the <head> letting the browser know where to find the site's favicon.

Here's a basic favicon link:

<link rel="icon" href="/favicon.ico">
// 37 bytes

You don't need this code!

By default, all browsers look for a file /favicon.ico in a site's root directory.

So, you can avoid having any links in your <head> by hosting a favicon at the root of your site:

e.g. https://example.com/favicon.ico

So, if your favicon is already hosted at your site's root, and is in the .ico format — you can go ahead and delete that link from your <head>.

What about different favicon sizes?

Sometimes you'll see links to different favicon sizes in the <head>, like this:

<link rel="icon" type="image/png" sizes="96x96" href="/favicon-96x96.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
// 222 bytes

These links let the browser know the location of multiple favicon sizes.
The browser then picks the size that best suits it, the device, or the context.

However, you don't need to do this to support multiple icon sizes.

A single .ico file can contain multiple icons with different dimensions.

.ico isn't really an image format. It's a container for .bmp and .png.

So you can remove all those seperate <link> tags, and replace them with a single favicon.ico in your site's root directory.

How to make a favicon containing multiple icons using gimp

You can use the free and open-source image editor Gimp.

Here's how you do it:

Create a new file with the dimensions of your largest icon size.
Create a new layer with the dimensions of the other sizes.
In each layer paste your icon and resize it to fit that layer.
Export your file and select the .ico file extension.
A dialogue box will appear, prompting you to select options for your icons. Select Compressed (png) for a smaller file size.
Click Export

Note that IE 10 and below do not support png favicons. To support IE <= 10 make sure any icon smaller than 48x48 are not exported as .png.

Icons larger that 48x48 can still benefit from compression without effecting IE <= 10.

Further optimizations

By default, favicons are cached for a long period of time. So any optimization to the favicon itself is ineffective at saving data overall.

However, there's no downside to having an extremely lightweight favicon. So consider optimizing your favicon's size anyway.

Your favicon may not be effectively compressed — so consider using the online tool Squoosh to compress pngs before turning them into ico files.

Similar optimizations can also be achieved with apple-touch-icons and Tiles for Windows.

Actually, dark mode can save the planet

Nathaniel — Mon, 09 Jan 2023 17:05:16 +0000

This is an update to an article I wrote last year. I'll briefly go over it again here. There's no need to read the old article, actually I'd rather you didn't.

Was Blackle right?

Many years ago, I was introduced to Blackle.

Blackle is just Google with a black background. Why? A black background uses less light, and so less electricity than a white background — and if everyone used Blackle we'd pollute less carbon into the atmosphere — and every little helps — well that's the idea anyway — but is it true?

Sort of.

In 2007, when Blackle was first launched, cathode ray tube (CRT) monitors were still popular — around 25% of desktop computer monitors were CRTs — and CRTs do use less electricity displaying black pixels than white pixels.

A CRT monitor is one of those old non-flat ones. They look like this:

The blog post that inspired blackle used this 25% figure to suggest that 750 megawatt-hours a year would be saved if google went black.

That's equivalent to the electricity use of about 53 households in the USA.

The remaining CRT screens were rapidly replaced with Liquid crystal displays. LCDs use the same power regardless of the screen color — and so Blackle became redundant…

That is, until OLED screens became a thing. OLED screens, like CRTs, use less energy when the screen is darker — and so, once again using dark mode saves electricity — and prevents CO2 emissions.

How much CO2 does dark mode save on an OLED screen?

We'll do some quick napkin math, and get a very rough idea of what kind of energy savings we're dealing with here — we'll use an iPhone as an example.

Mobile Enerlytics, (a company that researches mobile battery drain), estimates dark mode saves anywhere between 1.8% and 44.7% of battery life depending on what activity is being performed and the screen brightness settings of the phone.

For instance, reading The Verge on dark mode at 38% screen brightness saves 23.5% battery life, compared with light mode.

An iPhone X uses a 20 watt charger and takes ~1 hour to charge. If you charge it fully once per day, that's 20 watt hours a day, 7.2 kilowatt hours a year.

I imagine people probably spend most of the time on their phone browsing the web, on social media apps, or messaging — that's entirely based on my own experience and not on any data (because I can't find any). So we'll make a conservative estimate that dark mode saves 5% of battery life.

In the USA 0.4kg of CO2 is emitted per KWh.

So 1 million iPhone Xs on dark mode for a year would save about 144,000kg of CO2.

The same emissions as 31 cars.

That was where the previous article concluded.

Dark mode saves a tiny amount of energy. It's not nothing — but with 200 million cars in the USA alone, it feels like nothing.

But a big part of this story is missing.

Built in emmisions

The largest source of carbon emissions from smart phones and tablets is their production.

According to Apple, each new iPhone 12 will produce 80kg of carbon. 14% is from using the device, 2% from transport, < 1% from "end of life processing" and 83% from its production.

Producing less stuff has a much larger impact than using stuff less — and one of the reasons people buy new stuff is because their old stuff is broken.

One reason people buy a new phone is that the battery has died.

Companies like Apple make it costly and difficult to replace a battery — and so, people tend to buy a new phone instead.

Lithium ion batteries can only be used so many times before they stop working — Apple says iPhone batteries maintain 80% of their capacity after 500 charging cycles.

The more energy a phone uses — the sooner it stops working.

So, supporting dark mode may save more carbon than a few cars.

Emissions intensity

Increasing the lifetime of a product prevents a new product being created — which will emit carbon from it's manufacture, transport, packaging, and end-of-life.

How you calculate the effect a product's lifetime has on the environment is not immediately obvious (at least to me!)

But generally, the way it is done is by spreading the built in emissions across the lifetime of the product — then dividing those emissions by some measure that's relevant to the use of that product.

This is called emissions intensity.

An example of emissions intensity

The emissions intensity of say, a car, would be calculated with respect to how much mileage the car gives you. If it takes 1000 tons of CO2 to build a car and it only travels 10 kilometers before it explodes, the emissions intensity of the car would be 100 tons per kilometer.

For the sake of simplicity we'll use the metric, CO2 per year for the calculation of our smartphone emission intensities, and we'll compare it to some other things to give it context.

Calcualting how much dark mode saves

I don't know how much dark mode increases the life-time of a phone battery. I've tried my best to find out, but there's too much uncertainty.

So instead of giving you my best guess. I've made a tool that allows you to input your best guess on the missing data.

I've prefilled it with information from the iPhone 12 environmental report, using 100 million units, and my best guesses. The code for the calculator is at the bottom of the article.

Hopefully it'll give you an idea of the scope of this issue.

There's some factors I've left out:

The likelyhood of getting a new phone goes up over time, new models are released, your phone has aged in other ways, software updates have stopped.
The direct energy savings — mentioned at the start of the article.
The second hand market — phones don't just have one owner before they end up in landfill.
Batteries get replaced — and the carbon used to manufacture a battery is less than the device as a whole.
Maybe dark mode also reduces the chance of screen burn-in, or increases the life-time of other parts.

And there's likely some I haven't thought of at all.

Why your website (or app) should support dark mode?

It's our responsibility as designers and developers to minimize the damage our products cause. Dark mode does have environmental benefits — and that should be reason enough. But it's also what the people want!

It's easier on the eyes.
It saves battery.
Its light is more flattering — therefore you're more likely find to love.

What's more, some browsers have the option to use forced dark mode for websites that don't support it. This means your website may not render as you intended — and can lead to readability issues:

Here's a screen shot from themarkup.org in forced dark mode on Google Chrome. The links become difficult to read.

What have I missed?

If you have any expertise, insider knowledge, or sources you'd like to add, let me know, and I'll happily update this article.

Why your website should be under 14kb in size

Nathaniel — Thu, 25 Aug 2022 00:22:00 +0000

Having a smaller website makes it load faster — that's not surprising.

What is surprising is that a 14kB page can load much faster than a 15kB page — maybe 612ms faster — while the difference between a 15kB and a 16kB page is trivial.

This is because of the TCP slow start algorithm. This article will cover what that is, how it works, and why you should care. But first we'll quickly go over some of the basics.

What is TCP?

Transmission Control Protocol (TCP) is a way of using the Internet Protocol (IP) to send packets of data reliably — sometimes this is referred to as TCP/IP.

When a browser requests your website (or an image or a stylesheet) it makes that request using HTTP.

HTTP is built on top of TCP and a single HTTP request is usually made up of many TCP packets.

On its own IP is just a system for sending packets of data from one location on the internet to another. IP doesn't have a way of checking if a packet has successfully arrived at its destination.

When it comes to websites, knowing that all the data has arrived is important — otherwise we could end up with missing chunks of web page. There are other uses of the web where this doesn't matter so much — like streaming live video.

TCP is an extension of IP that allows a browser and your website's server to tell each other which packets have successfully arrived.

The server sends some packets, then waits for a response from the browser saying it has received the packets (this is called an acknowledgement or ACK), then it sends some more — or if it hasn't received an ACK it can send the packets again.

What is TCP slow start?

TCP slow start is an algorithm used by servers to find out how many packets it can send at a time.

When a browser first makes a connection to your server — the server has no way of knowing the amount of bandwidth between them.

Bandwidth is how much data can be transmitted over a network per unit of time. Usually it's measured in bits per second (b/s). Plumbing is a common analogy — think of bandwidth as how much water can come out of a pipe per second.

Your server doesn't know how much data the connection can handle — so it starts by sending you a small and safe amount of data — usually 10 TCP packets.

If those packets successfully reach your site's visitor, their computer sends back an acknowledgement (ACK) saying the packets have been received.

Your server then sends more data back, but this time it doubles the amount of packets.

This process is repeated until packets are lost and your server doesn't receive an ACK. (At which point the server continues to send packets but at a slower rate).

That's the gist of TCP slow start — in real life the algorithm varies, but that's essentially how it works.

So where does 14kB come from?

Most web servers TCP slow start algorithm starts by sending 10 TCP packets.

The maximum size of a TCP packet is 1500 bytes.

This maximum is not set by the TCP specification, it comes from the ethernet standard

Each TCP packet uses 40 bytes in its header — 16 bytes for IP and an additional 24 bytes for TCP

That leaves 1460 bytes per TCP packet. 10 x 1460 = 14600 bytes or roughly 14kB!

So if you can fit your website — or the critical parts of it — into 14kB, you can save visitors a lot of time — the time it takes for one round trip between them and your website's server.

How bad can one round trip be?

People are very impatient — and one round trip can be surprisingly long. How long depends on latency…

Latency is the time it takes a packet of data to travel from its source to it's destination. If bandwidth is how much water can go through a pipe per second — latency is the time it takes a droplet of water to enter the pipe and then exit the other end.

Here's a fun example of how bad latency can be:

Satellite internet

Satellite internet is provided by a satellite in orbit around the earth. It's used by people in very unpopulated areas, on oil rigs, cruise ships, and for inflight WiFi on airlines.

To illustrate this example of bad latency, let's imagine a bunch of oil rig bros have forgotten their dice at home and need to use the excellent (under 14kB) missingdice.com to play Dungeons & Dragons.

First one of them uses their phone to make a request for the web page…

The phone sends that request to the rig's WiFi router — which sends that data to the on-rig satellite dish — lets be nice and say that takes 1ms.

The satellite dish then has to send that data to the satellite in orbit above the earth.

Typically, this is achieved using a satellite in geostationary orbit at 35786km above the earths surface. The speed of light travels at 299792458 m/s, so a message sent from earth to the satellite takes 120ms. The satellite then sends the message back to a ground station, which takes another 120ms.

Then the ground station has to send the request to wherever the server is on earth (light slows down to 200000000 m/s when it's in a fibre optic cable). If the distance between the ground station and the server is the same as the distance between New York and London it'll take about 28ms — but if it's more like the distance between New York and Sydney it'll take 80ms — so we'll call it 60ms (a convenient number for our math)

Then the request needs to be processed by the server which could take maybe 10ms then the server sends it back again.

Back to the ground station, up into space, back down to the satellite dish, then to the wifi router, and back again to our oilers phone.

phone -> WiFi router -> satellite dish -> satellite -> ground station -> server -> ground station -> satellite -> satellite dish -> WiFi router -> phone

If we do the math that's 10 + ( 1 + 120 + 120 + 60 ) x 2 = 612ms.

That's an extra 612ms every round trip — perhaps that doesn't seem like a long time to wait but your website could easily have many round trips just to fetch it's first resource.

Also HTTPS requires two additional round trips before it can do the first one — which gets us up to 1836ms!

What about latency for people who live on dry land?

Satellite internet might seem like a deliberately bad example — I chose it because it illustrates the point and is weird — but for landlubbers latency can get worse than that for lots of reasons:

2g mobile typically has latency between 300ms and 1000ms
3g networks can have anywhere between 100ms and 500ms latency
Noisy mobile networks — say in an unusually crowded place like a music festival.
Servers dealing with high amounts of traffic
Bad stuff

Spotty connections can also cause packets to be lost — resulting in another round trip to get the lost packets.

Now that you know about the 14kB rule, what can you do?

Of course, you should make your website as small as possible — you love your visitors and you want them to be happy. Aiming for each page to fit in under 14kB is good target.

That 14kB includes compression — so it could actually be more like ~50kB of uncompressed data — which is generous. Consider that the Apollo 11 guidance computers only had 72kB of memory.

Once you lose the autoplaying videos, the popups, the cookies, the cookie consent banners, the social network buttons, the tracking scripts, javascript and css frameworks, and all the other junk nobody likes — you're probably there.

But, assuming you've tried your very best to fit everything into 14kB, and can't — the 14kB rule is still useful.

If you Make sure the first 14kB of data you send to your visitors can be used to render something useful — for instance some critical CSS, JS and the first few paragraphs of text explaining how to use your app.

Note — The 14kB rule includes **HTTP headers* — which are uncompressed (even with HTTP/2 on the first response) — it also includes Images, so load only what's above the fold and keep them very small, or use placeholders so your visitors know they're waiting for something good.*

Some caveats to the rule

The 14kB rule is more like a rule of thumb, than a fundamental law of computing:

Some servers have increased the TCP slow start initial window to 30 packets instead of 10
Sometimes the server knows it can start with a larger number of packets because it's used the TLS handshake to establish a larger window can be used.
Servers can cache how many packets a route can manage, and send more next time it connects.
There's other caveats too — here's a more in depth article about why the 14kB rule isn't always the case

HTTP/2 and the 14kB rule

There is an idea that the 14kB rule no longer holds true when using HTTP/2. I've read all I can about this without boring myself to death — but I haven't seen any evidence that servers using HTTP/2 have stopped using TCP slow start beginning with 10 packets.

HTTP/3 and QUIC

Similarly to HTTP/2, there is a notion that HTTP/3 and QUIC will do away with the 14kB rule — this is not true. QUIC recommends the same 14kB rule.