Home Notes Single packet webpage

Single Packet Webpage

As an experiment, I wanted to fit an article into one packet of information. This page isn’t one packet of information anymore but I thought I would share some of the things I learned when making this article.

The first thing I needed to learn was how computers actually communicate and it is a complicated topic that I did not get enough into to explain but the internet works on a protocol called TCP/IP. HTTP and SMTP are built ontop of this protocol. TCP/IP is built on IP.

The best anology I’ve heard is that IP is like the mail service. When you send a letter you can not be sure it made it to the person and in one piece. TCP is like sending a puzzle throught the mail system (IP). Where you send many letters, each having its own piece. The reciever knows when it has all of the pieces, they can complete the puzzle. The reciever can message you if you have a piece missing and tell you what its connection looks like.

One of these letters is a packet and the packet can vary in size by its header information called the payload length field of IPv6 and IPv4, the header has a has a size of 16 bit, so it can represent up to 65 535 bytes. In practive this value is much smaller and is set by the hosts which use Path MTU Discovery. Where there is a trade off between speed and reliability. Larger packets go faster but they could fail more often. Leading the transfer to be slower. The MTU helps balance these two factors to find the best value. The ethernet default is 1,500 and with header information, there is around 1,400 octets of space for remaining.

To get my original article into this limit I needed to make some changes. The logo of my site is 3,700 octets. The first thing I did was convert it to an SVG using the tools of primitive.js for the creation of the svg and SVGOMG a tool to reduce the size of svg images. The following was the result and was 631 octets.

Out of the remaining 769, 200 was for styles and the remaining 569 characters was the content what I was doing. Just for reference this entire article is 2000 characters long.

I understand it is not a truely a single packet site as there is secure connection packets and the browser alwsays asks for the favicon if it is not supplied. It was a fun expiment. Below is links I used for reference if you are more interested.

  • https://www.cloudflare.com/learning/ddos/glossary/tcp-ip/
  • https://en.wikipedia.org/wiki/Internet_Protocol
  • https://en.wikipedia.org/wiki/Maximum_transmission_unit