Zum Inhalt springen
Starlight

Umweltfreundliche Dokumente

Schätzungen über die Auswirkungen der Webindustrie auf das Klima liegen zwischen 2 % und 4 % der weltweiten Kohlenstoffemissionen, was in etwa den Emissionen der Luftfahrtindustrie entspricht. Es gibt viele komplexe Faktoren bei der Berechnung der ökologischen Auswirkungen einer Website, aber dieser Leitfaden enthält einige Tipps, wie du den ökologischen Fußabdruck deiner Docs-Website verringern kannst.

Die gute Nachricht ist, dass die Wahl von Starlight ein guter Anfang ist. Laut dem Website Carbon Calculator ist diese Website sauberer als 99 % der getesteten Websiten und erzeugt 0,01g CO₂ pro Seitenbesuch.

Seitengewicht

Je mehr Daten eine Website überträgt, desto mehr Energieressourcen benötigt sie. Im April 2023 musste ein Nutzer laut Daten aus dem HTTP-Archiv für die durchschnittliche Website mehr als 2.000 KB herunterladen.

Starlight erstellt Seiten, die so leicht wie möglich sind. So lädt ein Benutzer beim ersten Besuch weniger als 50 KB an komprimierten Daten herunter - nur 2,5 % des Medianwerts des HTTP-Archivs. Mit einer guten Caching-Strategie können nachfolgende Besuche sogar nur 10 KB herunterladen.

Bilder

Während Starlight eine gute Grundlage bietet, können Bilder, die du deinen Dokumentseiten hinzufügst, das Seitengewicht schnell erhöhen. Starlight nutzt die optimierte Asset-Unterstützung von Astro, um lokale Bilder in deinen Markdown- und MDX-Dateien zu optimieren.

UI-Komponenten

Komponenten, die mit UI-Frameworks wie React oder Vue erstellt wurden, können leicht große Mengen an JavaScript zu einer Seite hinzufügen. Da Starlight auf Astro aufbaut, laden Komponenten wie diese dank Astro Islands standardmäßig kein clientseitiges JavaScript.

Caching

Caching wird verwendet, um zu kontrollieren, wie lange ein Browser Daten speichert und wiederverwendet, die er bereits heruntergeladen hat. Eine gute Caching-Strategie stellt sicher, dass ein Benutzer neue Inhalte so schnell wie möglich erhält, wenn sich diese ändern, vermeidet aber auch, dass derselbe Inhalt unnötigerweise immer wieder heruntergeladen wird, wenn er sich nicht geändert hat.

Die gebräuchlichste Art, das Zwischenspeichern zu konfigurieren, ist der Cache-Control HTTP-Header. Wenn du Starlight verwendest, kannst du eine lange Cache-Zeit für alles im Verzeichnis /_astro/ einstellen. Dieses Verzeichnis enthält CSS, JavaScript und andere gebündelte Inhalte, die sicher für immer zwischengespeichert werden können, wodurch unnötige Downloads vermieden werden:

Cache-Control: public, max-age=604800, immutable

Wie du das Caching konfigurierst, hängt von deinem Webhost ab. Zum Beispiel wendet Vercel diese Caching-Strategie für dich an, ohne dass eine Konfiguration erforderlich ist, während du benutzerdefinierte Header für Netlify einstellen kannst, indem du eine public/_headers-Datei zu deinem Projekt hinzufügst:

/_astro/*
  Cache-Control: public
  Cache-Control: max-age=604800
  Cache-Control: immutable

Stromverbrauch

Die Art und Weise, wie eine Website aufgebaut ist, kann sich auf den Stromverbrauch auswirken, den sie auf dem Gerät des Benutzers benötigt. Durch die Verwendung von minimalem JavaScript reduziert Starlight die Rechenleistung, die das Telefon, Tablet oder der Computer eines Nutzers zum Laden und Rendern von Seiten benötigt.

Sei jedoch vorsichtig, wenn du Funktionen wie analytische Tracking-Skripte oder JavaScript-lastige Inhalte wie Videoeinbettungen hinzufügst, da diese den Stromverbrauch der Seite erhöhen können. Wenn du Analysen benötigst, solltest du eine schlanke Option wie Cabin, Fathom oder Plausible wählen. Einbettungen wie YouTube- und Vimeo-Videos können verbessert werden, indem man auf Laden des Videos bei Benutzerinteraktion wartet. Pakete wie astro-embed können bei gängigen Diensten helfen.

Hosting

Wo eine Website gehostet wird, kann einen großen Einfluss darauf haben, wie umweltfreundlich deine Dokumentationsseite ist. Rechenzentren und Serveranlagen können große ökologische Auswirkungen haben, einschließlich eines hohen Stromverbrauchs und eines intensiven Wasserverbrauchs.

Wenn du dich für einen Hoster entscheidest, der erneuerbare Energien einsetzt, wird deine Website weniger Kohlenstoffemissionen verursachen. Das Green Web Directory ist ein Tool, das dir helfen kann, Hosting-Unternehmen zu finden.

Vergleiche

Bist du neugierig, wie andere Docs-Frameworks im Vergleich abschneiden? Diese Tests mit dem Website Carbon Calculator vergleichen ähnliche Seiten, die mit verschiedenen Tools erstellt wurden.

FrameworkCO₂ pro SeitenaufrufBewertung
Starlight0.01gA+
Read the Docs0.05gA+
Sphinx0.06gA+
VitePress0.07gA+
Docus0.09gA+
docsify0.10gA
Nextra0.11gA
MkDocs0.19gB
Docusaurus0.21gB
GitBook0.43gC
Mintlify1.22gF

Daten erhoben am 22. Juli 2024. Klicke auf einen Link, um aktuelle Zahlen zu sehen.

Weitere Ressourcen

Werkzeuge

Artikel und Vorträge