Warum eine schlankere Website wichtig ist
Web-Ökodesign bedeutet, den Ressourcenbedarf einer Website zu senken und dabei ihren Nutzen zu erhalten. Eine heruntergeladene Datei oder ein laufender Vorgang beansprucht ein Gerät, ein Netzwerk und Server. Die Herstellung dieser Geräte braucht Rohstoffe, ihr Betrieb Strom. Unnötige Ladevorgänge zu vermeiden verringert den Aufwand für dieselbe Leistung.
Für Besucher zeigt sich der Nutzen im Alltag. Ein Angebot mit einer langsamen Mobilverbindung ansehen, einen Artikel auf einem älteren Telefon lesen oder ein Formular öffnen sollte möglich bleiben, ohne auf eine unnötige Animation oder ein Video zu warten. Schlankere Seiten helfen, diese Wege zugänglich zu halten und verlangen den Geräten weniger Daten und Rechenleistung ab.
Unnötige Berechnungen vermeiden
Gezielte Skripte belasten den Prozessor nur für tatsächlich benötigte Funktionen.
Daten an den Bedarf anpassen
Passende Bildgrössen und Videos auf Abruf erleichtern das Laden bei langsamen Verbindungen.
Auf älteren Geräten nutzbar bleiben
Eine schlanke Seite beansprucht weniger vom verfügbaren Arbeitsspeicher des Telefons.
Bei Appik Studio in Lausanne haben wir diesen Ansatz auf eine neue Version unserer Startseite angewendet. Der Prototyp erreichte die Note A im EcoIndex, mit mehr als 80/100.
Wir wollten die nützlichen Inhalte, die visuelle Qualität und die Wege zur Kontaktaufnahme erhalten. Die folgenden Entscheidungen können auch einem KMU, einer Institution oder einem Produktteam helfen, eine ressourcenschonendere Website zu gestalten.
Was misst der EcoIndex?
Der EcoIndex ist ein Indikator von 0 bis 100. Er bewertet eine Seite anhand ihrer Struktur, ihrer Anfragen und der übertragenen Datenmenge. Ein höherer Wert bedeutet nach diesem Modell einen geringeren Ressourcenbedarf.
Die Skala reicht von A, der besten Note, bis G. Laut der GreenIT-Bewertungsskala entspricht ein Wert von mehr als 80/100 der Note A. Unser Prototyp liegt damit in dieser Kategorie.
Appik-Startseite mit Astro
EcoIndex-Klassen von 0 bis 100
- A80 < x ≤ 100
- B70 < x ≤ 80
- C55 < x ≤ 70
- D40 < x ≤ 55
- E25 < x ≤ 40
- F10 < x ≤ 25
- G0 ≤ x ≤ 10
Unser Ergebnis
80,01 / 100
KlasseA
| Was sich reduzieren lässt | Was dahintersteht | Ein konkreter Ansatz |
|---|---|---|
| Elemente der Seite | Die Struktur, die der Browser aufbauen muss | Verschachtelte Blöcke und Wiederholungen vereinfachen |
| Anfragen | Die Dateien, die der Browser abruft | Unnötiges Laden vermeiden und Ressourcen gemeinsam nutzen |
| Übertragene Daten | Bilder, Schriften, Skripte und andere Dateien | Format, Grösse und Ladezeitpunkt anpassen |
Der Wert gilt für eine Seite und ein Testszenario. Er misst den Stromverbrauch nicht direkt und bildet nicht die gesamte Umweltwirkung eines digitalen Dienstes ab. Er hilft vor allem dabei, vermeidbare Ursachen für hohes Seitengewicht zu erkennen.
Was zeigt die GreenIT-Stichprobe?
Das GreenIT/Razorfish-Barometer 2025 bietet einen konkreten Anhaltspunkt. Für seine Stichprobe von 90 französischen Websites meldet es einen Durchschnitt von 25/100. Die Ergebnisse beziehen sich auf die zehn meistbesuchten Seiten je Website, insgesamt 900 URLs, und nicht auf das gesamte Web.
GreenIT/Razorfish-Panel, Frankreich, 2025
- Gesamtes Panel90 Websites25 / 100
- Unternehmenswebsites des CAC 4040 Websites35 / 100
- E-Commerce-Websites50 Websites18 / 100
Mittlere EcoIndex-Werte eines Panels mit 90 Websites und 900 URLs. Das Panel bildet keinen Durchschnitt des gesamten Webs ab. Abläufe über mehrere Seiten lassen sich nicht direkt mit einer einzelnen Startseite vergleichen.
Quellen: Ergebnisse 2025 · Barometer und Methode
Die Stichprobe enthält grosse institutionelle Websites und E-Commerce-Angebote. Sie zeigt Verbesserungspotenzial auf diesen Nutzerwegen. Ihr Durchschnitt lässt sich nicht direkt mit einer einzelnen Startseite vergleichen.
Passende Referenzen zeigen und alle Projekte zugänglich halten
Eine Startseite muss nicht das gesamte Portfolio mit derselben Detailtiefe präsentieren. Sie soll Besuchern helfen, schnell passende Referenzen zu finden und anschliessend mehr darüber zu erfahren.
Wir haben einige repräsentative Projekte für die Startseite ausgewählt. Der vollständige Katalog mit 23 Projekten und ihren eigenen Seiten bleibt zugänglich. Dasselbe Prinzip gilt für Kundenstimmen und das Team. Einige Beispiele vermitteln einen ersten Eindruck; klare Links führen zu weiteren Informationen.
Diese Struktur reduziert Bilder und wiederholte Blöcke auf der ersten Seite. Detaillierte Informationen erhalten zugleich einen klareren Platz. Besucher und Suchmaschinen erreichen die Inhalte weiterhin über gewöhnliche Links, ohne einen Klick auf ein Karussell oder eine komplexe Interaktion.
Fragen Sie vor jeder zusätzlichen Sektion, bei welcher Entscheidung sie dem Leser hilft. Eine gut gewählte Referenz mit einem Link zum ausführlichen Projektbericht kann nützlicher sein als eine lange Folge von Karten.
Interaktionen laden, wenn sie gebraucht werden
Eine Website kann ein Menü, eine FAQ, ein Formular, ein Schätzwerkzeug und Animationen enthalten. Das bedeutet nicht, dass Besucher alle dazugehörigen Abhängigkeiten gleich beim ersten Aufruf herunterladen müssen.
Wir haben eine Startseite mit Astro erprobt. Diese Architektur liefert den grössten Teil als HTML aus und setzt JavaScript gezielt für interaktive Bereiche ein. Text und Links stehen sofort bereit; eine aufwendigere Funktion kann laden, sobald sie gebraucht wird.
Die Astro-Dokumentation zu Islands erklärt dieses Prinzip. Astro ist eine Option, keine Voraussetzung für Web-Ökodesign. Auch eine Next.js-Seite oder eine andere Website kann durch eine bessere Aufteilung der Komponenten und Ladevorgänge ressourcenschonender werden.
Die passende Wahl hängt vom Produkt ab. Eine redaktionelle Website und eine Geschäftsanwendung, die den ganzen Tag genutzt wird, haben unterschiedliche Anforderungen. Wir wählen die Architektur nach den tatsächlichen Nutzerwegen und empfehlen nicht grundsätzlich eine Migration.
Gute Bilder und sorgfältige Typografie erhalten
Medien zu optimieren beginnt damit, sie an ihre Verwendung anzupassen. Ein Porträt in einer kleinen Karte braucht nicht die Abmessungen eines Bildes für den Druck. Eine Illustration auf dem Smartphone braucht nicht dieselbe Datei wie auf einem grossen Bildschirm.
Moderne Formate, responsive Bilder und eine visuell geprüfte Kompression können die Datenübertragung reduzieren und dabei die wichtigen Details erhalten. Bilder weiter unten auf der Seite können warten, bis Besucher sich ihnen nähern. Das Hauptbild sollte dagegen schnell bereitstehen, wenn es beim ersten Aufruf sichtbar ist.
Schriften verdienen dieselbe Aufmerksamkeit. Jede Schriftstärke oder Variante kann eine weitere Datei bedeuten. Wir haben die tatsächlich verwendeten Stile geprüft und untersucht, ob sie dieselbe Ressource nutzen können. Darstellung und Zeilenumbrüche sollten dabei erhalten bleiben.
Die Prüfung erfolgt auf dem Bildschirm. Eine kleinere Datei, die ein Logo beeinträchtigt, Text schwer lesbar macht oder einen Button verschiebt, ist eine schlechte Optimierung.
Charakter schaffen, ohne dauernde Animation
Eine Animation kann etwas erklären, Orientierung geben oder die Identität einer Website prägen. Ihr Aufwand hängt von Dauer, Technik und Auslösung ab.
Für unsere Startseite haben wir einen mit Bleistift gezeichneten Schweizer Berg erprobt, der schrittweise Form annimmt. Er ersetzt eine aufwendigere 3D-Szene und erhält die Idee des Aufstiegs und der Entstehung eines Projekts.
Wenn die Zeichnung fertig ist, kann die Seite zur Ruhe kommen. Besucher, die weniger Bewegung wünschen, sollen eine angepasste Version erhalten. Auf dem Smartphone dürfen dekorative Interaktionen das Scrollen oder die Eingabe nicht behindern.
Diese Zurückhaltung gibt dem Inhalt und der wichtigsten Handlung mehr Platz. Das visuelle Detail bleibt erhalten und erfüllt eine konkrete Aufgabe im Benutzererlebnis.
Wo beginnen Sie bei Ihrer Website?
Ein nützliches Audit beginnt mit den Seiten, die für Ihre Besucher wichtig sind, etwa der Startseite, einer Leistungsseite, einem Kundenprojekt und dem ersten Kontaktpunkt.
- Messen Sie diese Seiten in einem reproduzierbaren Szenario auf einer eindeutig bestimmten Version.
- Finden Sie wiederholte Blöcke, die schwersten Dateien und Ladevorgänge ohne unmittelbaren Nutzen.
- Wählen Sie eine Verbesserung, die den Inhalt und den vorgesehenen Nutzerweg erhält.
- Prüfen Sie Darstellung, Interaktionen, Barrierefreiheit und Links in den Sprachen der Website.
- Messen Sie erneut mit denselben Parametern, legen Sie eine Grenze für das Seitengewicht fest und prüfen Sie spätere Änderungen daran.
Dieser Ansatz kann bei der bestehenden Website beginnen. Eine vollständige Neugestaltung wird sinnvoll, wenn Architektur, Inhalte oder Nutzerwege weitere Fortschritte tatsächlich begrenzen.
Häufige Fragen zum Web-Ökodesign
Muss eine ökologisch gestaltete Website minimalistisch sein?
Sie kann eine starke visuelle Identität, Illustrationen und Interaktionen behalten. Entscheidend sind deren Nutzen und ein begrenzter Ressourcenbedarf. Ein sorgfältig gestaltetes Benutzererlebnis kann mit wenigen Dateien und gezielten Animationen auskommen.
Müssen Inhalte entfernt werden, um den EcoIndex zu verbessern?
Beginnen Sie besser mit Wiederholungen und unnötigen Ladevorgängen. Ausführliche Inhalte auf eigene Seiten zu verteilen, kann die Startseite entlasten und den Zugang erhalten. Links, nützliche Texte und die Qualität der Nutzerwege müssen weiterhin geprüft werden.
Muss man auf Astro wechseln?
Astro eignet sich für überwiegend redaktionelle Seiten, weil seine Architektur einen begrenzten JavaScript-Einsatz erleichtert. Es ist nicht zwingend nötig. Der erwartete Nutzen muss gegen den Migrationsaufwand und die Anforderungen interaktiver Bereiche abgewogen werden.
Belegt ein Wert von 80 eine Emissionsreduktion um 80 %?
Nein. EcoIndex ist ein Wert, kein Prozentsatz vermiedener Emissionen. Für eine umfassendere Betrachtung müssen auch Hosting, Endgeräte, Besucherzahlen und Nutzung berücksichtigt werden.
Eine Website, die Ihr Geschäft mit weniger Ressourcen unterstützt
Planen Sie eine neue Plattform oder möchten Sie eine bestehende Website schlanker machen? Bei Appik Studio richten wir Entscheidungen zur Webentwicklung nach den Bedürfnissen Ihrer Nutzer, den Integrationen und der langfristigen Weiterführung des Produkts aus.
Besprechen wir Ihr Projekt. Einige repräsentative Seiten und die wichtigsten Nutzerwege reichen aus, um erste sinnvolle Verbesserungen zu erkennen.
Swiss Made Software
