Resources for a Resource-Saving Internet

Every website emits CO2. Some sites even have the same environmental impact as a plastic bag [1]. In the last 10 years, the average size of a mobile website has increased sixfold to 2,011 kilobytes [2] – more content than three Harry Potter books combined [3].

In an effort to counteract the consumerist status-quo of the World Wide Web, and lower the barriers to creating more sustainable websites, here are some Resources for a Resource-Saving Internet.

This is a derivative of korayer's original RE;FERI. For more information, check out this project's readme.

Grid System

 1 2 3 4 5 6 7 8 span=1 span=1 span=1 span=1 span=1 span=1 span=1 span=1 span= 2 or 1-2 span=4-6 span=2 or 7-8 span=2-4 span=6-7 span=3 or 1-3 span=2 or 4-5 span=3 or 6-8 span=2-3 span=5-8 Move your mouse over the bars!

Simple, Sustainable, and Sturdy

The grid system is defined in a single, relatively small CSS file. It doesn't require any bloated JavaScript, and weighs in at a miniscule 1 kilobyte. It also scores a perfect 100/100 on Google Lighthouse.

With small modifications, this grid system can also be used to design posters, which can be exported to a PDF using the print function of major web browsers.

Download template.zip (3 KB)

 Instructions
The grid is divided into 8 columns (12 if using grid-12.css). Elements that should be in a column are tagged with <cell> with the span= defining the column's width. For Example
<cell span=3> creates a cell that is 3 columns wide. If there is no space for it in the current row, it shifts down to the next.
<cell span=5-8> creates a cell starting in the 5th column and ending in the 8th column

Dithering

Images play an important role in content presentation, making a page more attractive and more informative simultaneously. As demonstrated below, dithering can massively reduce filesizes, and you can choose how strongly to dither images depending on your use-case.
128 Color Dithering
67 KB
512×384 Example image of a car's side profile
8 Shade Monochrome Dithering
21 KB
512×384 Example image of a car's side profile
2 Shade Monochrome Dithering
3 KB
256×192 Example image of a car's side profile
Resources (5) ditherit.com (dithering tool, online)
tinypng.com (komprimierungs tool, online)
inrocket.com (dithering tool, macos)
imageoptim.com (kompremierungs tool, macos)
websiteplanet.com (kompremierungs tool, online)

Webfonts

On average, 2% of a webpage's size is HTML, and another 4% is CSS. Loading custom fonts accounts for 8%. Yes, the font used to render text is 4 times bigger than the text itself.

Sans-Serif,
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
1234567890

Serif,
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
1234567890


Every computer comes with preinstalled fonts. These can be specified simply with Serif or Sans-Serif. Using default system fonts is a very easy way to save resources. The letter A depicted in various fonts
From top left to bottom right: Arial, Akzidenz Grotesk, Caslon, Times New Roman
Resources (1) w3schools.com (440 KB)

More Resources

 JavaScript At 508 KB (around 30% of a site on average) JavaScript consumes the most resources, alongside images. By minifying JavaScript, removing superfluous characters, spaces, and comments, loading times can be improves significantly. Chris Coyier discusses minification in his article [5] about using minification and gzipping to reduce site data usage by 86%. Solar-Powered Hosting Choosing a hosting provider that runs it's data centers on sustainable energy is another good way to save resources. This article in LOW←TECH Magazine [6] demonstrates some of the details behind the server they run themselves, that runs entirely on solar energy. This is particularly effective in warmer and sunnier countries. Carbon Footprint Calculators There are also tools available to determine the CO2 emissions of a given website, such as the Website Carbon Calculator [7], and Cabin's How green is your website.[8]. Dark Mode Unlike the original German version, this site supports a dark mode. This is implemented in a rather simple manner [9], with a single meta tag in the HTML telling the browser that the site supports a dark mode, and then a few lines in the CSS altering the colors of links depending on the mode, for aesthetic reasons.
Bibliography (8) [1] https://www.verbraucherservice-bayern.de/presse/so-kommunizieren-sie-nachhaltig
[2] https://httparchive.org/reports/page-weight
[3] https://github.com/amephraim/nlp/tree/master/texts
[4] lighthouse.pdf (283 KB)
[5] https://css-tricks.com/the-difference-between-minification-and-gzipping/
[6] https://solar.lowtechmagazine.com/2020/01/how-sustainable-is-a-solar-powered-website.html
[7] https://www.websitecarbon.com/
[8] https://withcabin.com/inspect?url=referi.de
[9] https://bt.ht/html-dark-mode/