Hands-on Klimadesign für Normalos

Ich zeig dir, wie du deine WordPress-Website in zehn Schritten klimafreundlicher gestalten kannst, ohne ein Webdesign-Nerd zu sein. Keine Angst, du musst deine Seite nicht gleich von Grund auf neugestalten – auch ein paar kleine Änderungen können schon eine spürbare Wirkung zeigen.

  • CO2-Rechner nutzen

    Um herauszufinden, ob’s überhaupt was zu optimieren gibt, ist es am einfachsten, einen CO2-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.

  • Greenhosting

    Du hast sicher gesehen: Gleich ganz oben in deinem CO2-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 hier nach.

  • Website-Caching

    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.

  • Medienbibliothek leeren

    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.

  • Hintergrundvideos weglassen

    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, zB hier.

  • Bilder skalieren und zuschneiden

    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.

    Divi-User haben da einen kleinen Vorteil, zu den Bildgrößen in Divi gibt’s nämlich einen umfangreichen Blogbeitrag.

  • Bilder komprimieren

    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.

  • Bilder in WebP umwandeln

    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 für’s Klima nur die zweitbeste, aber 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. Aber Achtung Divi-User: Wenn ihr die WebP-Konvertierung von WP Optimizer einschaltet, lädt manchmal der Builder nicht mehr richtig…

  • Bilder beschriften

    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 Titel 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!

  • Verzichte auf Pop-ups

    Last but not least: Verzichte, wenn möglich, auf Pop-ups.

    Ein Pop-up zu öffnen, kommt einem neuen Seitenaufruf gleich. Wenn du dieselbe Information oder Interaktionsmöglichkeit auch in einem Call to Action-Banner oder auf eine andere Weise direkt auf deiner Webpage geben kannst, macht’s Sinn diese Möglichkeit zu bevorzugen.

     

Wenn du alle Schritte umgesetzt hast, befrag doch nochmal den CO2-Rechner. In deinem Report sollten jetzt schon deutlich kleinere Zahlen stehen. Wenn nicht, sag Bescheid. Ich schau mir das gern mal an.

Und: Danke für deine Mühe und Geduld!
Du weißt es wahrscheinlich eh schon, aber ich sag’s trotzdem nochmal dazu: Diese Optimierungen helfen nicht nur dem Planeten, sie machen deine Website auch schneller und barriereärmer. Wenn du mehr über die Benefits von klimasensiblem Webdesign erfahren möchtest, schau mal hier nach.

Übrigens: Ich hab zu Beginn gesagt, du musst deine Seite nicht rundum erneuern um gute Ergebnisse zu erzielen. Aber wenn’s richtig gut werden soll und deine Website schon drei oder mehr Jahre alt ist, kann eine Überarbeitung schon Sinn machen. Klimasensibles Design beginnt nämlich eigentlich mit dem Content – und über den haben wir noch gar nicht gesprochen…

Glühbirne - Infobeitrag

Kontakt

Barbara Andrä
Gregor-Ulbrich-Gasse 3
1210 Wien
hallo@freitagmorgens.at

Weitere Beiträge: