Hands-on Klimadesign für Normalos

Um herauszufinden, ob’s überhaupt was zu optimieren gibt, ist es am einfachsten, einen CO₂-Rechner für Websites wie digitalbeacon.co zu nutzen. Du gibst da einfach die URL der Seite ein, die du messen möchtest, und bekommst dein Ergebnis innerhalb von Sekunden. Wenn digitalbeacon deine Webseite mit A+ oder A bewertet, gibt’s für dich wahrscheinlich nicht mehr viel zu tun – quasi digitaler Klimaschutz Jackpot. Wenn nicht, helfen dir die folgenden Schritte ziemlich sicher weiter.

Du hast sicher gesehen: Gleich ganz oben in deinem CO₂-Report, direkt unter den großen Zahlen, sagt dir der Rechner, ob deine Website mit Greenhosting läuft oder nicht. Wenn nicht, solltest du mal darüber nachdenken, das zu ändern.

Ich kann dir GreenWebspace* als klimafreundlichen Hostinganbieter sehr empfehlen. Einerseits, weil das auch mein Anbieter ist, und ich hier sehr gute Erfahrungen mache. Und andererseits, weil das hier ein Affiliate-Link ist, und ich ein paar Cent bekomme, wenn du über den ein Abo abschließt. Nein, die paar Cent reichen nicht um mehr Content wie diesen zu produzieren – das mach ich sowieso -, aber ich freu mich trotzdem drüber.

Wenn du erst mal wissen willst, was Greenhosting eigentlich ist und was es bringt, lies einfach hier nach: Was ist Green Hosting?

Digitalbeacon zeigt dir in deinem Report zwei große Zahlen: Die obere Zahl sagt, wieviel CO2 beim Erstaufruf deiner Seite frei wird, die untere, wieviel CO2 frei wird, wenn Nutzer*innen auf deine Seite zurückkehren. Du kannst recht leicht dafür sorgen, dass der zweite Wert deutlich geringer ist, als der erste, indem du deine Website cachst – also dem Browser dabei hilfst, sich die Dinge, die er auf deiner Webseite sieht, zu merken.

Wenn also die beiden Zahlen bei dir gleich, oder nicht deutlich unterschiedlich sind, kannst du durch die Installation und Aktivierung eines Plugins wie WP Fastest Cache oder WP Super Cache (oder einem der vielen anderen Caching-Plugins) deine Seite für wiederkehrende Nutzer*innen klimafreundlicher und schneller machen.

Wenn du kein Plugin installieren möchtest, kannst du auch mal bei deinem Hostinganbieter nachfragen, welche Cachingmöglichkeiten in deinem Hostingpaket enthalten sind und wie du sie nutzen kannst.

Wenn du deine Website schon eine Weile betreibst und hin und wieder mal Änderungen daran vorgenommen hast, kann es sich lohnen, die Medienbibliothek mal zu durchforsten. Sind da noch Bilder oder Download-Dateien drin, die du gar nicht mehr brauchst? Dann weg damit. Jede Datei, die auf deinem Server liegt, verbraucht Energie. Je weniger das sind, umso besser.

Videodateien sind im Vergleich zu anderen Mediendateien immer groß. Es ist deshalb wichtig sie mit Bedacht einzusetzen, z.B. da, wo man Dinge mit bewegten Bildern besser erklären kann als mit statischen Bildern und Text. Auf Hintergrundvideos kannst du im Normalfall ganz verzichten. Die Atmosphäre, die sie erzeugen sollen, wirst du sicher auch mit anderen Mitteln erreichen können, wenn du kurz darüber nachdenkst.

Wenn’s doch nicht ganz ohne geht, bedenke bitte folgendes: Deine User schauen so ein Video nicht minutenlang an. Es reicht deshalb, wenn es nur einige Sekunden lang ist. Unter Webdesigner*innen ist 30 Sekunden eine weitverbreitete Benchmark. Ich persönlich finde, es reicht auch die Hälfte.
Videodateien kann man übrigens auch komprimieren.

Die meisten Bildschirme sind nicht breiter als 1.920 Pixel. Darum reicht’s im Normalfall, wenn auch Bilder, die du hochlädst, nicht breiter sind. Das wirkt sich auch positiv auf die Ladezeit aus. Für mehrspaltige Layouts können Bilder auch deutlich kleiner sein. Wie groß sie genau sein sollten, hängt von deinen Einstellungen ab, ist aber leicht zu berechnen: Du findest einfach raus, wie groß dein Standard-Content-Container ist und dividierst die Größe durch die Anzahl der Spalten, die du verwenden möchtest.

Haben deine Bilder die richtige Größe, kannst du sie komprimieren. Dabei wird die Dateigröße verringert – und zwar ohne Qualitätsverlust. Super einfach geht das mit tinypng. Einfach JPG-, PNG- oder WebP-Dateien hochladen, komprimieren und wieder runterladen. Fertig. Das kannst du auch stapelweise machen, ist also nicht so aufwendig, wie’s im ersten Moment vielleicht klingt.

Um noch mehr CO2 einzusparen, kannst du deine Bilder in das WebP-Format umwandeln. Wie der Name schon vermuten lässt, ist das speziell für die Verwendung im Web gemacht und lässt die Dateigröße noch mal schrumpfen.
Zur Umwandlung hast du zwei Möglichkeiten: Du kannst dazu einen Online-Dienst wie convertio oder cloudconvert nutzen, oder du lässt das ein Plugin direkt auf deiner Website machen. ShortPixel und EWWW Image Optimizer sind z.B. sehr leicht zu bedienen.

Die Pluginvariante ist besser für die Barrierefreiheit und für dich bequemer (besonders, wenn du oft Bilder hochlädst). Da musst du nämlich nicht ans Konvertieren denken, die Plugins können das automatisch machen, wenn du ein Bild hochlädst.

Wenn du ein Plugin nutzen möchtest, schau vielleicht erst nach, ob du schon eines installiert hast, dass deine Bilder in WebP konvertieren kann. Wenn du z.B. mit WP Optimizer arbeitest, hast du ein Tool, das das Website-Caching übernimmt, deine Bilder komprimiert und in WebP umwandelt und deine Datenbank bereinigt – all in one.

Was du jetzt noch tun kannst, ist deine Bilder zu beschriften. Das geht manchmal direkt im Pagebuilder, wie z.B. bei Bricks, und immer in der Medienbibliothek.

Alle Bilder sollten einen aussagekräftigen Dateinamen und einen beschreibenden Alternativtext haben. Ich bin sicher, du hast schon gehört, dass Google die Alternativtexte für seine Analyse nutzt, ABER (das ist sehr großes Aber) diese Texte sind eigentlich für Screenreader gedacht, die Menschen mit Sehbeeinträchtigungen helfen, die Inhalte deiner Website zu erfassen. Sei also bitte so gut und klopf da nicht einfach nur stur deine Keywords rein, sondern gib den Leuten eine Chance mitzubekommen, was auf deinen Bildern zu sehen ist. Danke!

Last but not least: Schau mal die Schriftdateien an, die du hochgeladen hast (du findest die oft in den Einstellungen deines Pagebuilders, außer bei Divi, da sind sie ein bisschen besser versteckt). Da findest du ziemlich sicher TTF-Dateien. Du solltest aber auch WOFF- und WOFF2-Dateien finden. Ähnlich wie WebP bei Bildern, ist WOFF einfach ein moderneres und kleineres Format.

Sind solche Dateien noch nicht in deinem Schriftenordner, schau mal in dem Dateiordner nach, den du nach dem Kauf der Schrift bekommen hast, da sollten sie sein. Und dann lade sie einfach zusätzlich hoch.

Hast du deine Schriften von Google kann der Google Webfontshelper dir sicher weiterhelfen. Das ist insgesamt ein sehr nützliches Tool, aber das ist eine andere Geschichte…