Product Pillars

When you are in the flow of designing a website, it is easy to gradually make small decisions that go against the overall design goal you have for the site. These small mistakes add up to make a product completely orthogonal to what you had originally intended. Breaking out of this specific form of tunnel vision doesn't always happen. To help avoid ending up in such a situation, we follow product pillars.

Product pillars are guiding principles that you consult when designing your website. They are the foundation on which you build your website upon and help ensure that the features you feel are important make their way to the final version of your site.

Flyweight Page

If the intention is to make a page that works on 2G networks, then using even two fonts in their woff formats can add upto 250 kilobytes to the page size. This happens when different requests go for different weights and styles of the fonts. For 2G networks, it is best to avoid using fonts.

Flyweight page examples:

These web pages load on a 2G network connection running at 64 kbps (8 kilobytes/sec). They don't load additional fonts. A reddit thread with 400+ comments has a page size of 25 kiB.

A web page can have lines of JavaScript and CSS and still be flyweight as these don't affect page sizes as much as fonts do.

Requirements for a flyweight web page

  1. No fonts
  2. No images

Lightweight

The moment you use fonts in your page, it can no longer be considered flyweight. A font adds around 20-200 kb of bloat to the web page and introduces an addition of 1-4 HTTP requests depending on the number of weights the font is using.

Requirements for a lightweight page:

  1. 1 or more fonts
  2. No images

Heavyweight

Images unlike fonts, are not a fixed cost. Three or four images can easily take up a megabyte of space along with increasing the number of HTTP requests made by the page. Having images be essential to your page and the impact delivered by it's content fundamentally changes the nature of the networks the page will be able to operate smoothly on. A page that makes moderate to heavy use of images is a heavyweight page.

Requirements for a heavyweight page:

  1. Moderate to heavy use of images