Nachhaltiges Webdesign erscheint mitunter komplex und dass es eine Menge an Zeit und Wissen benötigt. Tatsache ist jedoch, dass deine Webseite mit nur 3 Handgriffen innerhalb von Minuten bereits ein ganzes Stück nachhaltiger wird. Mach am besten einen Vorher-Nachher-Vergleich deiner Webseitenwerte, damit du den Erfolg bereits sehen kannst. Nutze dafür den Google PageSpeed Test und messe deinen CO2-Fußabdruck deiner Webseite.
1. PlugIns
Gehe in den PlugIn-Bereich deiner Webseite. Sind dort PlugIns enthalten, die du nicht mehr benötigst? Brauchst du wirklich alle davon? Kannst du vielleicht zwei PlugIns durch ein kombiniertes PlugIn ersetzen? Prüfe, welche PlugIns du wirklich benötigst und auf welche PlugIns du verzichten kannst. Denn jedes PlugIn bringt Dateien in deine Webseite und erhöht somit deren Größe und Ladezeit. Halte deswegen die Anzahl an PlugIns so gering wie möglich. Außerdem minimierst du so das Risiko möglicher Angriffsflächen für Attacken, denn jedes PlugIn kann Fehler beinhalten und dich so angreifbar machen.
2. Bilder
Hat dir dein Google PageSpeed Test gezeigt, dass deine Bilder zu groß sind? Ist eines oder mehrere davon sogar mehrere MB groß, da sie unbearbeitet hochgeladen wurden? Überprüfe deine Bilder. Das geht übrigens auch im Media-Bereich deiner WordPress-Seite. Öffne das Bild und du siehst die Dateigröße. Ersetze alle Bilder, die mehrere MB oder größer 300 KB sind durch eine optimierte Variante. Nimm dir dafür das Originalbild und speichere es komprimiert (mit geringerer Qualität) und einer maximalen Breite von 1920 px. Lade anschließend das optimierte Bild erneut hoch und ersetze es auf deiner Webseite. Das PlugIn Enable Media Replace hilft dir dabei, einfach ein neues Bild hochzuladen. Der Rest erledigt das PlugIn.
Bilderoptimierung
Nachdem du deine Bilder initial optimiert hast, kannst du nun die finale Optimierung starten. Installiere dir dafür das PlugIn Shortpixel und erstelle dir einen Account*. ShortPixel optimiert deine Bilder in 3 Optimierungsstufen (du kannst die für dich passende Optimierung vorher durch Tests herausbekommen) und stellt gleichzeitig die Bilder auch in modernen Webformaten wie WebP zur Verfügung. Somit schlägst du gleich zwei Fliegen mit einer Klappe. Das tolle an ShortPixel ist auch, dass du jeden Monat 100 Credits kostenlos bekommst – das entspricht in etwa der Optimierung von 15-20 Bildern pro Monat. Du kannst also ohne weitere Kosten jeden Monat deine Webseite erweitern und die Bilder werden automatisch sofort nach dem Upload optimiert.
3. Optimierungs-PlugIn
Installiere ein Optimierungs-PlugIn. Ein Optimierungs-PlugIn hat mehrere Vorteile. Es bietet in der Regel Caching deiner Webseite an. Das hat den Vorteil, dass bei einem zweiten Webseitenbesuch des Besucher:in Dateien bereits im Browser vorgehalten werden und somit weniger Datentransfer stattfindet. Weiterhin bieten diese PlugIns das verzögerte Laden von Bildern, das sogenannte LazyLoad, an. Dies hat zur Folge, dass Bilder erst geladen werden, sobald sie ins Sichtfeld des Webseitenbesuchers kommen. Weiterhin finden oft Komprimierungen von Dateien statt, verzögertes Laden von Ressourcen und die Entfernung von ungenutztem Code. Je nach PlugIn können die Funktionen varieren.
Unser absolutes Lieblingsplugin für die Optimierung ist WP Rocket*. Tests haben gezeigt, dass es kein besseres PlugIn gibt – selbst die Kombination aus kostenlosen PlugIns kann kein so gutes Ergebnis erzielen, wie WP Rocket. Wenn du eine Lizenz gern vergünstigt haben möchtest, melde dich bei uns. Wir bieten die Lizenz für 29,- € / Jahr (exkl. Mwst) an. Unserer Meinung nach ist WP Rocket das Geld allemal wert und eine lohnende Investition. Für die Umwelt, für eine bessere Conversion deiner Webseite und glücklichere Webseitenbesucher:innen.
Falls du dennoch ein kostenloses PlugIn bevorzugst, können wir Autooptimize in Verbindung mit WP Fastest Cache empfehlen.
Mit diesen 3 Tipps kannst du deine Webseite bereits nachhaltiger gestalten. Lass uns gern deine Vorher-Nachher-Werte in den Kommentaren wissen.
Und, hast du dir bereits ein Timeslot für die Optimierung deiner Webseite in deinem Kalender geblockt?
Falls du Hilfe oder Unterstützung von uns benötigst, melde dich gern. Wir können die Optimierung entweder für dich durchführen oder wir nehmen dich dabei an die Hand, wie du die Verbesserung selbst in Angriff nehmen kannst.
Die mit Sternchen (*) gekennzeichneten Links sind sogenannte Affiliate-Links. Wenn du auf so einen Affiliate-Link klickst und über diesen Link einkaufst, bekomme ich von dem betreffenden Online-Shop oder Anbieter eine Provision. Für dich verändert sich der Preis nicht.
Zunächst ist es wichtig, die Ladezeit deiner Webseite zu ermitteln. Falls du dies noch nicht gemacht hast, schaue in den Artikel Wie messe ich die Ladezeit meiner Webseite?
Schritte zur Verbesserung der Webseitengeschwindigkeit
Für eine schnelle Webseite gibt es ein paar einfache Tipps. Die wichtigsten von diesen, sollen hier aufgezeigt werden. Für mehr Details gehe direkt in die Kategorien, wo du weiterführende Artikel finden wirst.
Bilder optimieren
Die schnellste und effektivste Methode eine schnelle Webseite zu erhalten ist es, ein hohes Augenmerk auf verwendete Bilder zu legen. Bilder sollten generell in ihrer Dateigröße reduziert und nur in der Größe bereitgestellt werden, wie sie auch angezeigt werden. Ein Logo, was nur in 100×100 Pixel angezeigt wird, braucht nicht mit mehreren tausend Pixel geladen zu werden. Aus diesem Grund macht es Sinn, das Bild vorher mit einem Bildbearbeitungsprogramm an die gewünschte Größe anzupassen. So wird vermieden, dass mehrere MB große Datei hochgeladen werden. Ich nutze dafür gern Photoshop oder IrfanView. Als Richtwert lässt sich sagen, dass ein Bild im Regelfall nicht mehr als 150KB groß sein sollte, besser sogar weit unter 100KB. Eine Möglichkeit dies zu erreichen ist, die Dateigröße von vornherein auf diese maximale Größe zu reduzieren. Als zweite Möglichkeit können für Desktop und mobile Version auch unterschiedlich große Bilder zur Verfügung gestellt werden. Anschließend kann das Bild noch weiter komprimiert werden. Dank moderner Bildoptimierungensmöglichkeiten ist in der Qualität komprimierter Bilder je nach Komprimierung kein Unterschied mehr zwischen dem Original und dem komprimierten Bild zu erkennen. Für die Komprimierung gibt es verschiedene Online-Tools wie https://tinyjpg.com/. Wird die Seite mit WordPress betrieben, können für die Komprimierung auch PlugIns benutzt werden. Mein Favorit ist dabei ShortPixel – mit diesem PlugIn lassen sich nicht nur alte Bilder komprimieren, sondern auch alle neu hochgeladenen Bilder werden automatisch in der gewünschten Qualität verkleinert. Außerdem lässt sich für jedes einzelne Bild die Komprimierung auch noch anpassen, falls mehr oder weniger Qualität benötigt wird. Mit der Optimierung und der Bereitstellung größenangepasster Bilder lässt sich die Webseitenladegeschwindigkeit mit nur wenigen Griffen positiv beeinflussen.
Lazy Load
Ein weiterer Aspekt für eine schnelle Webseite ist das Nachladen von Inhalten. Dieser Punkt bezieht zwar auch Bilder mit ein, jedoch geht es über diese hinaus. Unter Lazy Load versteht man, dass Inhalte erst nachgeladen werden, wenn sie in das Sichtfeld des Nutzers gelangen. Du hast es sicherlich bereits schon mal in einem Onlineshop gesehen, dass Artikel, die weiter unten gelistet sind, erst langsam erscheinen, wenn du nach unten scrollst – genau das ist Lazy Load. Das Nachladen hat den Vorteil, dass anfangs nicht so viele Inhalte an den Nutzer übertragen werden müssen, bis dieser bereits mit der Webseite interagieren kann. Automatisch heißt das auch, dass weniger Daten übertragen werden müssen. Lazy Load kann dank verschiedener PlugIns in WordPress erzielt werden. Mein beliebtestes PlugIn ist WPRocket*, da es neben Lazy Load noch viele andere Funktionalitäten abdeckt. Zudem habe ich bisher kein anderes PlugIn gefunden, was in der Gesamtsumme ähnlich gute Resultate wie dieses erzielt. Alternativ lassen sich auch die kostenlosen PlugIns Autooptimize oder WP Fastest Cache installieren. In der Gesamtsumme auch auf die anderen Funktionalitäten bezogen, weisen diese beiden jedoch nicht so gute Ergebnisse auf wie WP Rocket.
Hostingprovider
Ein sehr wichtiger Faktor für eine schnelle Webseite ist, wie schnell die Daten vom Server an den Nutzer gesendet werden. Dafür zuständig ist der Hostingprovider, der die Webseite im Internet erreichbar macht. In den Webseitentests ist die Übertragungsgeschwindigkeit des ersten Bytes an der First Byte Time – Kennzahl ersichtlich. Diese sollte im besten Fall bei max. 200ms liegen. Ist diese höher und/oder wird beim Google Pagespeed Test der Hinweis “First Byte Time verbessern” angezeigt, sollte unbedingt über einen Hostproviderwechsel nachdenken. Gerade Provider wie Strato oder 1&1 lassen in der Übertragungszeit mitunter sehr zu wünschen übrig. Da bei diesen Anbietern hauptsächlich shared Hoting, also geteiltes Hosting, angeboten wird, wird oftmals die Serverzeit negativ beeinflusst. Tests zeigen, dass einer der schnellsten und zuverlässigsten Hostingprovider webGo* ist – über diesen laufen auch unsere Webseiten. Das Positive an WebGo ist zudem, dass sich je nach Anforderungen zwischen verschiedene Hostingvarianten entschieden werden kann, wie shared Hosting, mit oder ohne SSD oder managed Hosting. Zudem erfolgt der Betrieb der Server mit Ökostrom, wodurch WebGo von uns eine klare (nachhaltige) Empfehlung ist.
Caching
Besucht ein Nutzer eine Webseite müssen zunächst die Daten der Seiten auf das Gerät des Nutzers geladen werden. Der Server muss dafür die Anfrage bearbeiten, was einige Zeit benötigt. Anschließend sendet er die Dateien an den Nutzer, der diese herunterlädt. Ohne Caching würde dies jedes Mal genauso erneut passieren, sobald der Nutzer ein weiteres Mal die Webseite besucht. Dank des Cachings kann dieser Prozess gleich an zwei Stellen optimiert werden. Zum einen wird der Server angewiesen statische Inhalte für einen bestimmten Zeitraum zwischenzuspeichern, so dass diese ohne nötige Verarbeitung direkt an den Nutzer gesendet werden können. Somit wird die Verarbeitungszeit des Servers gespart. Zum anderen können Dateien im Browser des Nutzers für eine bestimmte Zeit hinterlegt werden, so dass auf diese beim nächsten Besuch wieder zugegriffen werden können – dies wird Browser Caching genannt. (Browser) Caching ist somit ein wirksames Tool für eine schnelle Webseite. Das Caching kann in WordPress dank verschiedenster PlugIns erreicht werden. Erneut ist hier unser Favorit WPRocket* aufgrund des großen Funktionsumfanges und der überzeugenden Ergebnisse. Alternativ können stattdessen kostenlose PlugIns wie WP Fastest Cache oder W3 Total Cache verwendet werden.
Anzahl verwendeter PlugIns
Ein wichtiger Einflussfaktor für schnelle Webseiten ist die Anzahl verwendeter PlugIns. PlugIns bringen Dateien und Ressourcen in den Quellcode, die beim Start der Seite mit geladen werden. Da diese zum Teil Funktionalitäten abdecken, die nicht jeder benötigt oder mitunter auch so programmiert sind, dass sie einfach auf jeder Unterseite geladen werden, selbst wenn sie dort keine Verwendung finden, können sie den Quellcode und die Größe der Webseite mitunter ungewollt aufblähen. Als Goldene Regel kann daher gesagt werden: Weniger ist mehr. Es sollten wirklich nur die PlugIns installiert und aktiviert werden, die wirklich benötigt werden. Falls eine bestimmte Funktion verwendet wird, aber das genutzte PlugIn die Webseite negativ beeinträchtigt, kann auch geschaut werden, ob es eine schnellere Alternative gibt. Ein gutes Beispiel dafür ist zum Beispiel Contact Form 7. Dieses PlugIn wird selbst bei Nichtverwendung auf jeder Unterseite geladen und verlangsamt die Webseite merklich. Eine schnellere Alternative dazu ist WP Forms. Mitunter lassen sich PlugIns durch eigene Programmierung auch ganz ersetzen, falls die Kenntnisse dafür vorhanden sind. Oder es kann geschaut werden, ob auf eine bestimmte Funktion nicht einfach verzichtet werden kann. Unsere Webseite kommt zum Beispiel mit lediglich 8 PlugIns aus. Eine weitere Schwierigkeit, die durch PlugIns verursacht wird, ist, dass die zusätzlichen Dateien der PlugIns eine höhere Anzahl an Serverzugriffen verursacht. Aus diesem Grund ist es ratsam mittels eines PlugIns wie WPRocket* die zu übertragenden Dateien zusammenzufassen, um so die Anzahl an Serverzugriffen zu reduzieren. Kostenlose PlugIn-Alternativen sind an dieser Stelle zum Beispiel Autooptimize oder WP Fastest Cache. Für fortgeschrittenere Nutzer kann an dieser Stelle auch Hummingbird sehr empfehlenswert sein – dieses ermöglich das komplette ignorieren einzelner Dateien, um so nicht verwendete Files gar nicht erst zu laden. Doch Achtung, diese Funktion zu nutzen können wir wirklich nur erfahrenen Nutzern empfehlen, da dies die Funktionalität der Webseite beschädigen kann.
Theme & PageBuilder
Ein wichtiger Punkt in der Liste, der nicht vergessen werden sollte, ist das verwendete Theme. Vor allem wenn die Webseite erst erstellt werden soll, kann darauf ein großes Augenmerk gelegt werden. Viele Themes kommen mit einer umfangreichen Funktionalität, um auch wirklich alle Eventualitäten abzudecken. Meistens benötigt man jedoch nur einen Bruchteil davon. Zudem sind häufig PageBuilder enthalten, die die Ladezeit einer Webseite negativ beeinflussen. Aus diesem Grund ist es ratsam von vornherein auf ein leichtgewichtiges Theme zu achten. Zwei der schnellsten und kleinsten Themes mit dennoch viel Funktionalitäten sind Astra* sowie GeneratePress*. Falls eine bestehende Webseite ein neues Design erhalten soll, kann ebenso über ein Wechsel auf ein leichtgewichtiges Theme nachgedacht werden.
Schnelle Webseite und Nachhaltigkeit
Nachdem hier nun die wichtigsten Tipps für eine schnelle Webseite aufgeführt worden sind, soll noch ein kurzer Bogen zu unserer Leidenschaft der Nachhaltigkeit gespannt werden. Denn es lässt sich die Frage stellen, was das ganze denn eigentlich damit zu tun haben soll. Um genau zu sein: extrem viel. Eine schnelle Webseite kann nur erreicht werden, wenn die zu übertragende Datenmenge als auch die Anzahl an Serverzugriffen bzw. die Bearbeitungszeit auf dem Server reduziert werden. Das hat automatisch zur Folge, dass weniger Strom und somit weniger CO2 verursacht wird. Eine Reduzierung der Ladegeschwindigkeit einer Webseite kommt also automatisch auch mit einer Verbesserung der CO2-Bilanz einher. Am Beispiel von easygoing.guide lässt sich dies sehr gut verdeutlichen. Vor der Optimierung war die Seite über 5 MB groß und verbrauchte 6,20g an CO2 pro Webseitenaufruf. Nachdem wir die Seite optimieren durften, verbraucht easygoing.guide dank einer Webseitengröße von lediglich 215KB nun gerade einmal 0.12g CO2 pro Aufruf. Vielen Dank an dieser Stelle noch einmal für das entgegengebrachte Vertrauen. Eine Optimierung der Geschwindigkeit einer Webseite leistet also ebenso einen Großen Beitrag zu mehr Nachhaltigkeit.
Hinweis: Die angeführten Tipps können sehr viel dazu beitragen, eine schnelle Webseite zu erhalten. Dennoch ist uns bewusst, dass sie zum Teil einiges an Zeit und Expertise benötigen. Für die Umsetzung der Optimierung stehen wir deshalb sehr gern zur Verfügung. Auch eine beratende Funktion unsererseits ist möglich.
Eine unverbindliche Anfrage kann an info@it-bienen.de gesendet werden.
Die mit Sternchen (*) gekennzeichneten Links sind sogenannte Affiliate-Links. Wenn du auf so einen Affiliate-Link klickst und über diesen Link einkaufst, bekomme ich von dem betreffenden Online-Shop oder Anbieter eine Provision. Für dich verändert sich der Preis nicht.
Wir verwenden Cookies, um unsere Website und unseren Service zu optimieren.
Funktional
Immer aktiv
The technical storage or access is strictly necessary for the legitimate purpose of enabling the use of a specific service explicitly requested by the subscriber or user, or for the sole purpose of carrying out the transmission of a communication over an electronic communications network.
Vorlieben
Die technische Speicherung oder der Zugriff ist für den rechtmäßigen Zweck der Speicherung von Präferenzen erforderlich, die nicht vom Abonnenten oder Benutzer angefordert wurden.
Statistiken
The technical storage or access that is used exclusively for statistical purposes.Die technische Speicherung oder der Zugriff, der ausschließlich zu anonymen statistischen Zwecken verwendet wird. Ohne eine Vorladung, die freiwillige Zustimmung deines Internetdienstanbieters oder zusätzliche Aufzeichnungen von Dritten können die zu diesem Zweck gespeicherten oder abgerufenen Informationen allein in der Regel nicht dazu verwendet werden, dich zu identifizieren.
Marketing
Die technische Speicherung oder der Zugriff ist erforderlich, um Nutzerprofile zu erstellen, um Werbung zu versenden oder um den Nutzer auf einer Website oder über mehrere Websites hinweg zu ähnlichen Marketingzwecken zu verfolgen.
