Ressourcen; für ein ressourcenschonendes Internet.

Jede Webseite emittiert CO2. Hinter manchen Links verbirgt sich sogar die Klimabilanz einer Plastiktüte [1]. In den letzten 10 Jahren hat sich die durchschnittliche Größe einer mobilen Webseite auf 2.011 KB versechsfacht [2] – das ist mehr Inhalt als drei Harry-Potter-Romane [3] kombiniert.

In dem Bemühen, der konsumorientierten Vision des World Wide Web's entgegenzuwirken und die Eintrittsbarrieren zu senken, sind hier: Ressourcen; für ein ressourcenschonendes Internet.

Raster 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 oder 1-2 span=4-6 span=2 oder 7-8 span=2-4 span=6-7 span=3 oder 1-3 span=2 oder 4-5 span=3 oder 6-8 span=2-3 span=5-8 Bewegen Sie die Maus über die schwarzen Felder

Einfach, Sparsam & Langlebig

Dieses Rastersystem besteht aus einer einzigen CSS-Datei, welche wiederum nur aus wenigen Zeilen Code besteht. Es erfordert kein aufgeblähtes JavaScript und ist mit seinen rund 1 KB sehr ressourceneffizient und schnell. Außerdem hat es von Google Lighthouse [4] eine perfekte Bewertung von 100/100 erhalten.

Mit kleinen Modifizierungen ist es sogar möglich, dieses Raster zum Gestalten von Postern zu nutzen. Diese können über die Drucken Funktion (Strg+P, Command+P) des Browsers als PDF exportiert werden.

raster-system.zip (5 KB)


 Anleitung
Dieses Raster ist in 8, alternativ auch in 12 Spalten aufgeteilt. Spalten werden dann mit dem tag <cell> belegt und die jeweilige Länge mit span= festgelegt. Beispiel
<cell span=3> erzeugt eine Zelle, welche 3 Spalten lang ist. Wenn in der aktuellen Zeile kein Platz dafür ist, rutscht sie in die nächste Zeile.
<cell span=5-8> erzeugt eine Zelle, welche in der 5. Spalte beginnt und in der 8. Spalte endet.
Poster (2) Poster 1 [PDF, 23 KB] [HTML]
Poster 2 [PDF, 25 KB] [HTML]

Dithering

Bilder spielen eine wichtige Rolle, um eine Seite attraktiv und informativ zugleich zu gestalten. Wie unten dargestellt, kann Dithering dafür sorgen, dass die Dateigrößen von Bildern auf ein Minimum reduziert werden können. Die Stärke des Dithering-Verfahrens kann individuell auf ihre Anwendung abgestimmt werden.
128 Farben Dithering
67 KB
512px × 384px Beispielbild eines Autos im Seitenprofil
8 Graustufen Dithering
21 KB
512px × 384px Beispielbild eines Autos im Seitenprofil
2 Graustufen Dithering
3 KB
256px × 192px Beispielbild eines Autos im Seitenprofil
Ressourcen (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

HTML macht im Durchschnitt 2 % des Gewichts einer Webseite aus, CSS weitere 4 %. Das Laden benutzerdefinierter Schriftarten ist für 8 % verantwortlich. Ja, die Schriftart, in der Text wiedergegeben wird, ist mehr als viermal so groß wie der Text selbst.

Sans-Serif,
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
1234567890

Serif,
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
1234567890


Jeder Computer kommt mit vorinstallierten Schriftarten. Diese kann man durch die Nutzung von Serif oder Sans-Serif bestimmen. Dies ist ein sehr einfacher Weg, um Ressourcen zu sparen. Der Buchstabe a abgebildet in verschiedenen Schriftarten
Von oben links nach unten rechts: Arial, Akzidenz Grotesk, Caslon, Times New Roman
Ressourcen (1) w3schools.com (440 KB)

Weitere Ressourcen

 JavaScript Mit 508 KB (etwa 30 %) verbraucht JavaScript, neben Bildern, die meisten Ressourcen. Durch die Minimierung von JavaScript können überflüssige Zeichen sowie Leerzeichen oder Kommentare entfernt werden und Ladezeiten verbessern. Chris Coyier beschriebt z. B. in seinem Artikel [5] eine Methode, um 86 % der Datenmenge zu sparen. Solarbetriebenes Hosting Die Wahl eines Hosting-Anbieters, der seine Rechenzentren mit nachhaltiger Energie betreibt, ist ein praktikabler Weg, um weitere Ressourcen zu sparen. Eine zweite Methode, mit der ich mich vertraut gemacht habe, besteht darin, selbst einen Server mit Solarenergie zu betreiben. Inspiriert wurde ich durch den Artikel im Low←Tech Magazine [6]. Dies ist besonders in wärmeren Ländern zu empfehlen. Kohlendioxid-Rechner Dies sind zwei Tools welche den ungefähren CO2 Ausstoß jeder Webseite ermitteln können [7], [8].
Literaturverzeichnis (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