DIGIPIEDRA

Yuda's website.

Status

The scale

As of January 17th, 2022, the entirety of Digipiedra weighs:
1.89 MB (1,890kB)

If each kB weighted a milligram, Digipiedra would be as heavy as:
a playing card


It includes:

3 games,
8 illustrations,
6 illustrated dreams,
4 pictures,
3 illustrated blog entries,
3 miscellanea,
3 illustrated lessons,
43 links and
10 shelved items,

among others!




The average webpage is too bloated

As of 2021, the average webpage (not website! A single page of a website, which is a collection of webpages) weighs around 2.2MB, with a 15.1% increase in size in only the last year (2020), according to the http archive reports.

Some data weight comparisons:

  • RAM memory in an IBM 360 computer, used on earth in the Apollo 11 moon landing: 4kB.
  • RAM memory in a Commodore 64 computer: 64kB.
  • Alice's Adventures in Wonderland by Lewis Carroll, in plain text: 170kB.
  • Moby Dick by Herman Melville, in plain text: 1.2 MB, 1200kB.
  • The average webpage as of 2021: 2.2MB, 2200kB.

Here's how these look in a bar graph, in order: Bar graph depicting the former data weight comparison.



Why should we care about website weight?

1. Accessibility

2.2MB per webpage is much bigger than what it could be. Many people, specially those that are part of marginalized groups, those in rural areas and those from poorer countries, struggle daily to access information due to slow Internet speeds. This Internet divide is also increasing every year, and it's related to general technology access. See the following articles and paper:

These following figures apply to the U.S. population, from the Pew Research Center articles mentioned above:

Americans with lower incomes have lower levels of technology adoption. % of U.S. adults who say they have each of the following, by household income: Smartphone: Less than $30K, 76%; $30K to $99999, 87%; $100 or more, 97%. Desktop or laptop computer: Less than $30K, 59%; $30K to $99,999, 84%; $100 or more, 92%. Home broadband: Less than $30K, 57%; $30K to $99999, 83%; $100 or more, 93%. Tablet computer: Less than $30K, 41%; $30K to $99999, 53%; $100 or more, 68%. All of the above: Less than $30K, 23%; $30K to $99999, 42%; $100 or more, 63%. Note: Respondents who did not give an answer are not shown. Source: Survey of U.S. adults conducted January 25 to February 8, 2021. PEW Research Center. Black and Hispanic adults in U.S. are less likely than White adults to have a traditional computer, home broadband. % of U.S. adults who say they have each of the following: Desktop or laptop computer: White, 80%; Black, 69%; Hispanic, 67%. Home broadband: White, 80%; Black, 71%; Hispanic, 65%. Smartphone: White, 85%; Black, 83%; Hispanic, 85%. Tablet computer: White, 53%; Black, 54%; Hispanic, 53%. All of the above: White, 42%; Black, 40%; Hispanic, 35%. Note: Respondents who did not give an answer are not shown. White and Black adults include those who report being only one race and are not Hispanic. Hispanics are of any race. Source: Survey of U.S. adults conducted January 25 to February 8, 2021. PEW Research Center. Americans with a disability are less likely than those without one to have traditional computer, smartphone. % of U.S. adults who say they have the following: Desktop or laptop computer: any disability, 62%; no disability, 81%; difference between the two, +19 (statistically significant). Smartphone: any disability, 72%; no disability, 88%; difference between the two, +16 (statistically significant). Tablet computer: any disability, 47%; no disability, 54%; difference between the two, +7 (not statistically significant). Home broadband: any disability, 72%; no disability, 78%; difference between the two, +6 (not statistically significant). All of the above: any disability, 26%; no disability, 44%; difference between the two, +18 (statistically significant). Note: The difference values shown are based on subtracting the rounded values in the chart. Respondents who did not give an answer are not shown. Source: Survey of U.S. adults conducted January 25 to February 8, 2021. PEW Research Center Despite growth, rural Americans have consistently lower levels of technology ownership than urbanites and lower broadband adoption than suburbanites. % of U.S. adults who say they have or own the following: Home broadband in 2000: urban, 1%; suburban, 1%; rural, 0%. Home broadband in 2021: urban, 77%; suburban, 79%; rural, 72%. Smartphone in 2011: urban, 38%; suburban, 37%; rural, 21%. Smartphone in 2021: urban, 89%; suburban, 84%; rural, 80%. Tablet in 2010: urban, 4%; suburban, 3%; rural, 1%. Tablet in 2021: urban, 55%; suburban, 54%; rural, 44%. Desktop/laptop computer in 2008: urban, 73%; suburban, 76%; rural, 61%. Desktop/laptop computer in 2021: urban, 80%; suburban, 78%; rural, 72%. Source: Survey conducted January 25 to February 8, 2021. PEW Research Center 2. Environment

Websites don't live in an ethereal cloud. They are stored in computer servers which need to be on all the time, so that visitors can access the information whenever they choose to enter the website.

Two people stand in between really high racks full of computer servers and cables, at a data center.

Image: A server rack corridor in Bing Maps' data center. All of those computer servers need electricity for power and refrigeration.

According to a study by a team from MIT, Purdue University, and Yale University, all Internet activity as a whole (without accounting for mobile data) has an global annual carbon footprint which is roughly equal to the annual carbon footprint of all activities in Sweden and Finland combined. Its annual water footprint (from the hydroelectricity used to power data processing, among other things) is approximately equivalent to filling one million Olympic swimming pools, and its annual land footprint (land occupied by data processing centers and power generation for Internet activities) is about the size of Mexico City, Rio de Janeiro and New York City combined.

Video streaming is specially to blame, but the heavier and more inefficient a website is, the more it's also contributing to climate change. Many other common practices, such as streaming a file that will be used multiple times instead of downloading it once or sending spam e-mails are all a part of this issue.



Why is this happening?

How can any typical article, such as this one about best practices for increasing website performance (which is ironically 3.1MB in size), weigh much more than entire books?

The bloat doesn't come from the actual information shared on the webpage, since text is very light-weight. However, most websites use plenty of unnecessary assets that impact weight and performance. For example, Javascript code for cosmetic animations and tracking scripts that don't respect our privacy, stock images that don't add much to the site's content, really huge images that are sent in their full size to later be resized down in the page, or many different custom fonts, which although not as worrying as Javascript or big images, can be quite large at several hundred kilobytes (see this article on the impact of custom fonts). We are paying for all of this data... Even those that can't afford it.

For more information on website bloat, I recommend reading or watching this talk: The Website Obesity Crisis.



How do we solve it?

You do not need to be some sort of efficiency genius programmer to make a lightweight and beautiful website. Actually, doing that is easier than making a bloated one. Take it from me, because I am not that good at markup languages or programming.

If, like me, you're a newbie and just starting out by manually writing your plain static html website, it is probably already quite lean. Here are some easy things you can do to improve your site:

  • Use images only when they truly add value to your content or illustrate a point you're making (if it's a stock image of a businessman, it's probably not adding much to your article)...
  • ... And compress and/or dither images when possible: they will weigh much less! I usually dither images with Dither me this or Dither it, and later compress them with Shortpixel. You might not want to dither art, but it is very useful for images illustrating articles or blog entries. For art, Shortpixel's "glossy" compression will probably look still identical to the original. Alternatively...
  • ... Use new compressed image file formats, such as WebP or MozJPEG. These formats are more efficient and lightweight than older compression algorithms such as JPEG, and supported in almost all browsers. Dithering is not the right choice for all kinds of images. It works for me, but it can make certain images weigh more than the non-dithered originals (in short, it depends on the image's pixel size, palette and complexity: I'm under the impression that the more colors the dithering palette has and the simpler the original image is, the more unnecessary noise/complexity dithering will introduce— therefore increasing weight instead of reducing it). Likewise, according to some tests I've done, WebP can sometimes produce heavier images than dithering, but it may be better for your case. You can use the online WebP/MozJPEG converter tool Squoosh.
  • Do not use Javascript except when absolutely necessary. There some things you can only do with Javascript, but many other things that people default to Javascript for can be achieved by CSS only. See this list of things you can do with just CSS.
  • Do not bloat your website with third-party ads, scripts and analytics. If you must, choose lightweight, simple, website-theme-based ads that will respect your visitors' privacy and bandwidth by not tracking them.
  • Do not use a static website generator if possible. In exchange for automation, most of them tend to produce bloated and unreadable code, or load entire libraries even when they're not used in the page. However, there are some that are very simple, such as Bashblog (thanks to nosycat for telling me about it!).
  • Choose to use a generic font. By not specifying any particular font, or by choosing one of the three generic font-types in your CSS (font-family: sans-serif;, font-family: serif; and font-family: monospace;) your website doesn't make your visitor's browser download a font file. Their browser will instead use its default fonts.
  • Unrelated to your website weight, but now that OLED/AMOLED screens are much more common, choosing a dark theme for your website can actually save battery on your visitor's device (since it won't need to light the pixels up as much). If you'd like it to be a toggable option (still on it myself), you can do it with CSS only, no Javascript needed. See this project to know how!

Finally, here's an article that lists even more ideas on how to make your website more efficient.