Unsere Analyse zeigt ein großes Potenzial, den Energiebedarf Ihrer Website zu reduzieren und die User Experience zu verbessern.
Die Handlungsfelder mit dem größten Impact sind Responsive Bilder aus dem Bereich Bilder, Variable Fonts, Umfang von Custom Font Schriftarten und -Stilen aus dem Bereich Schriften, Downstream Caching aus dem Bereich Infrastruktur und Minification (HTML & CSS) aus dem Bereich Struktur & Code-Qualität. Eine Übersicht über alle Bereiche finden Sie hier.
Auf Basis der Anzahl Ihrer Seitenaufrufe ist das Einsparungspotenzial im Vergleich zu ähnlichen Websites groß. Als Grundlage für die Berechnung verwenden wir CO2.js der »The Green Web Foundation« mit dem »Sustainable Web Design Model (SWDM)« in Version 4 (Lizenz).
optimierbar
Moderne Bildformate wie WebP und AVIF reduzieren signifikant die Dateigrößen, besonders bei hochauflösenden Bildern. Dies führt zu schnelleren Ladezeiten und verringert den Datentransfer, was die Performance Ihrer Website erheblich verbessert.
Grafiken werden nicht im besten Dateiformat ausgeliefert.
Sie binden Fotos bereits effizient als AVIF-Dateien ein. Für Grafiken, die momentan als PNG ausgeliefert werden, sollten Sie ebenfalls AVIF oder WebP verwenden, oder noch besser SVG. Die Grafiken bestehen in erster Linie aus einfachen Formen und sind so perfekt geeignet für die Verwendung von SVG.
vorbildlich
Carousels präsentieren mehrere Inhalte oder Bilder in einem rotierenden Container. Häufig werden dabei mehrere Ressourcen gleichzeitig geladen, die jedoch nicht von jedem*r Nutzer*in gesehen werden. Dies führt zu längeren Ladezeiten, erhöhtem Datenverbrauch und einer verschlechterten User Experience.
Keine Auffälligkeiten.
vorbildlich
Große Bilddateien beanspruchen mehr Bandbreite, was zu Verzögerungen bei der Darstellung von Websites führt und den Datenverbrauch erhöht. Hierdurch entstehen auch größere CO₂-Emissionen, was wiederum die Umweltbelastung Ihrer Website steigert.
Keine Auffälligkeiten.
vorbildlich
Lazy Loading lädt Inhalte außerhalb des initial sichtbaren Viewports erst, wenn sie in das Sichtfeld der Nutzer*innen gelangen. Dies verkürzt die initiale Ladezeit, da zu Beginn weniger Daten geladen werden. Abhängig vom Scroll-Verhalten der Nutzer*innen resultiert dies in signifikanten Einsparungen an geladenen Daten.
Bilder des initialen Viewports werden “lazy” geladen.
Bilder „above the fold” sollten nicht lazy loaded werden, da dadurch die Darstellung verzögert wird. Nutzen Sie zusätzlich zu dem Attribute loading="lazy" und decoding="async" ein fetchpriority="low", um dem Browser noch mehr Anweisungen zu geben, sich erst später um entsprechende Bilder zu kümmern.
kritisch
Preloading priorisiert das Laden von Bildern, die sofort beim Seitenaufruf sichtbar sind und verbessert so die initiale Ladezeit. Für Bilder, die erst beim Herunterscrollen sichtbar werden, empfiehlt sich das Prefetching, um dem Browser frühzeitig zu signalisieren, welche Bilder später benötigt werden. Dies steigert die Effizienz des Ladeprozesses, ohne den initialen Seitenaufbau zu beeinträchtigen.
Für Bilder im initialen Viewport wird kein Preloading verwendet. Sonstige Bilder werden nicht prefetched.
Priorisieren Sie Bilder „above the fold“ durch Preloading (rel="preload" as="image"). Verwenden Sie die Anweisung rel="prefetch" as="image", um dem Browser frühzeitig zu signalisieren, welche Bilder zwar nicht kritisch für den initialen Seitenaufbau sind, aber vermutlich später benötigt werden, z.B. weil zu Ihnen als Nächstes gescrollt wird.
optimierbar
Responsive Web Design passt Ihre Website flexibel an verschiedene Bildschirmgrößen an und verwendet optimierte Bildvarianten für die jeweiligen Darstellungsgrößen. Dies verbessert die Ladezeiten und die User Experience, indem es den Datenverbrauch reduziert und somit auch die CO₂-Emissionen verringert.
An vielen Stellen werden zu große Bilder geladen und nicht die optimalen Methoden für responsive Bilder genutzt.
Die Implementierung des srcset ist sehr gut, jedoch nutzen Sie das sizes Attribut nicht optimal. Informieren Sie den Browser mit dem sizes Attribut über die benötigte Bildgröße über verschiedene Viewportbreiten hinweg, um die bestmögliche Datei auszuwählen. Derzeit ist es immer auf sizes="100vw" gesetzt. Überprüfen Sie auch, dass Bilder, die visuell durch object-fit beschnitten werden, in einem passenden Format als Ausgangsmaterial vorliegen. Laden Sie beispielsweise keine Querformatbilder, wenn sie immer als Hochformat angezeigt werden. Der nicht sichtbare Bildbereich wird sonst unnötig geladen.
optimierbar
SVGs sind vektorbasierte Grafiken, die ideal für Logos und Icons geeignet sind, da sie ohne Qualitätsverlust skalierbar sind. Sie beschleunigen die Ladezeiten, reduzieren den Datenverbrauch und verbessern dadurch die Performance Ihrer Website.
Zahlreiche Grafiken, die hauptsächlich aus einfachen Formen bestehen, werden als PNG Bilder ausgeliefert.
Für die zahlreichen Grafiken, die hauptsächlich aus einfachen Formen bestehen, sollten Sie SVG-Grafiken anstelle der aktuell verwendeten PNG-Bilder verwenden.
optimierbar
SVG Sprites bündeln mehrere SVG-Grafiken in einer einzigen Datei, wodurch die Anzahl der HTTP-Anfragen reduziert wird. Dies verbessert die Ladezeiten, da der Browser weniger Ressourcen laden muss. Die Verwendung von SVG Sprites ist effizient für die Darstellung wiederkehrender grafischer Elemente auf Ihrer Website und steigert somit die Gesamtperformance.
Es wird wiederholt Inline SVG-für z.B. die Social-Media-Icons im Footer verwendet, obwohl teilweise bereits SVG-Sprits genutzt werden.
Überprüfen Sie, ob es SVG-Icons gibt, die auf jeder Seite verwendet werden, wie zum Beispiel die Social-Media-Icons im Footer. Diese wären in einem SVG-Sprite möglicherweise effizienter organisiert als inline im Code. Auf einigen Unterseiten wird bereits ein SVG-Sprite verwendet. Es ist sinnvoll, diesen Ansatz konsistent auf allen Seiten umzusetzen.
vorbildlich
Optimierte SVG-Dateien reduzieren die Dateigröße und benötigen weniger Bandbreite, was die Ladezeiten Ihrer Website verbessert.
Keine Auffälligkeiten.
optimierbar
Inline SVGs laden schneller, weil sie ohne zusätzliche Serveranfragen auskommen. Externe SVGs, die separat vom HTML geladen werden, sind wiederverwendbar über verschiedene Seiten hinweg, erfordern jedoch jeweils eine Serveranfrage. Für häufig wiederkehrende Grafiken innerhalb einer Seite können auch Inline SVGs effizient wiederverwendet werden. Die optimale Wahl hängt von der spezifischen Struktur und den Anforderungen der Website ab. Generell sind SVGs bandbreitenschonend und verbessern die Performance der Website.
Alle SVG Icons wie z.B. das Uhr-Icon neben der Lesezeit sind embedded.
Sie sollten Icons, die mehrfach auf derselben Seite erscheinen (wie zum Beispiel Uhr Icon neben der Lesezeit), nur einmal als Inline-SVG in Form eines <symbol> Elements einbinden. Alle weiteren Instanzen des Icons können dann durch das <use> Element auf dieses SVG verweisen. Dies reduziert die Redundanz und verbessert die Ladezeiten Ihrer Seite.
vorbildlich
Die Bereitstellung von Alternativinhalten als Fallback für Videos verbessert die Zugänglichkeit der Website, indem Nutzer*innen mit eingeschränkter Bandbreite oder inkompatiblen Geräten Texte oder Bilder angezeigt werden. Dies stellt sicher, dass alle Besucher*innen relevante Informationen erhalten, auch wenn Videos nicht geladen werden können. Gleichzeitig optimiert es die Performance der Website und minimiert unnötigen Datenverkehr.
Keine Auffälligkeiten.
vorbildlich
Gezielt eingesetzte Videos steigern das Engagement. Wählen Sie Dauer und Auflösung passend zur Zielsetzung, um unnötig hohen Datenverbrauch und Energiebedarf zu vermeiden.
Keine Auffälligkeiten.
vorbildlich
Die Auflösung ist neben der Länge ein entscheidender Faktor für den Datenverbrauch. Es gilt, das passende Maß zwischen 4K und niedrigeren Auflösungen zu finden, um den Datenverbrauch zu optimieren.
Keine Auffälligkeiten.
vorbildlich
Autoplay von Videos startet diese automatisch, was die Aufmerksamkeit erhöht, aber auch Datenverbrauch und Ladezeiten steigert. Dies erhöht CO2-Emissionen. Ein bedachter Einsatz kann die Umweltbelastung signifikant verbessern.
Keine Auffälligkeiten.
vorbildlich
Integrationen von Drittanbieter*innen erhöhen schnell den funktionalen Mehrwert einer Website, führen jedoch oft zu höherem Datenverbrauch. Dies kann die Ladezeiten verlängern und die CO2-Emissionen erhöhen.
Keine Auffälligkeiten.
vorbildlich
Kürzere Videos reduzieren die Ladezeiten und den Datenverbrauch, was die Performance der Website verbessert. Bestimmen Sie passend zum Inhalt und Kontext die Länge ihrer Videos.
Keine Auffälligkeiten.
vorbildlich
Moderne Videoformate wie H.264 und VP9 bieten effiziente Kompression bei hoher Qualität. Die richtige Wahl dieser Formate reduziert Datenmengen und Ladezeiten, was die Performance verbessert und die Umweltfreundlichkeit Ihrer Website steigert.
Keine Auffälligkeiten.
kritisch
Das Preloading von Schriftarten beschleunigt die Darstellung von Text auf Ihrer Website, indem die benötigten Fonts früher im Ladevorgang geladen werden. Diese Technik verbessert die sichtbare Ladezeit, indem sie sicherstellt, dass Textinhalte sofort in der gewünschten Schriftart angezeigt werden, was die User Experience erheblich steigert.
Für Schriften wird kein Preloading verwendet.
Achten Sie auf das Preloading von Schriften, die für den initialen Seitenaufbau kritisch sind, um die Ladezeiten zu verkürzen und die Performance zu optimieren. Dies verbessert nicht nur die visuelle Darstellung der Seite, sondern verhindert auch ein FOUT (Flash of Unstyled Text).
optimierbar
Das Laden von Schriften von externen Quellen kann die Ladezeiten Ihrer Website verlängern, da zusätzliche Anfragen an externe Server erforderlich sind. Dies erhöht die Abhängigkeit von externen Diensten und kann zu Verzögerungen führen, besonders wenn diese Server langsam reagieren oder ausfallen.
Schriften werden von externen Servern geladen.
Um unabhängig von Drittanbieter*innen zu sein und volle Kontrolle über Ihre Ressourcen zu haben, laden Sie alle Schriftdateien von Ihrem eigenen Server.
vorbildlich
Custom Fonts zahlen auf die Wiedererkennung einer Marke ein und individualisieren das Design. Die richtige Strategie zum Laden der Fonts ist hier entscheidend. Schriften erst bei Bedarf zu laden, verbessert die Ladezeiten und verringert die Datenmenge beim Erstbesuch.
Keine Auffälligkeiten.
vorbildlich
Subsetting reduziert die Größe von Schriftdateien, indem nur Zeichen, die auf der Website verwendet werden, eingebunden sind.
Keine Auffälligkeiten.
kritisch
Wählen Sie bewusst die Anzahl der Schriftarten und Stile, da sie eine Auswirkung auf den Ressourcenbedarf Ihrer Website haben.
Sie verwenden drei Schriftfamilien (Merriweather, Barlow und Open Sans) mit vielen verschiedenen Schriftschnitten.
Überprüfen Sie, ob auf einige Schriftschnitte verzichtet werden kann, ohne das visuelle Erlebnis wesentlich zu beeinträchtigen, beispielsweise indem Sie „Barlow“ nur in font-weight 500 oder 600 nutzen anstelle beider Stile.
Stellen Sie außerdem sicher, dass die Schriftart Open Sans tatsächlich verwendet wird; falls nicht, sollten Sie diese Schriftdateien nicht unnötig laden.
Es werden außerdem zwei Icon Fonts geladen. Prüfen Sie, ob diese wirklich in Gebrauch sind. Das Einbinden von Icons als SVG, wie es bereits an anderen Stellen praktiziert wird, könnte eine datensparsamere Alternative zu einem Icon Font darstellen.
kritisch
Variable Fonts erlauben mehrere Variationen einer Schriftart in einer Datei, was die Ladezeiten reduziert und die Flexibilität erhöht.
Es sind keine Variable Fonts im Einsatz.
Um Datenvolumen zu sparen und die gestalterische Flexibilität zu erhöhen, sollten Sie Barlow und Open Sans als variablen Font nutzen.
vorbildlich
WOFF (Web Open Font Format) ist speziell für den Webeinsatz optimiert und bietet eine hohe Kompressionsrate, die schnelle Ladezeiten ermöglicht. Es ist dem TTF-Format vorzuziehen, da WOFF die Bandbreitennutzung reduziert und die Textdarstellung auf Ihrer Website beschleunigt.
Keine Auffälligkeiten.
vorbildlich
Die Optimierung der Größe von Skript-Bundles ist entscheidend für schnelle Ladezeiten. Durch Minimierung und effiziente Aufteilung der Skripte in kleinere, bedarfsorientierte Pakete werden nur notwendige Ressourcen geladen. Dies verbessert die Ladezeiten und die Performance der Website erheblich.
Keine Auffälligkeiten.
vorbildlich
Chunking teilt große Ressourcen in kleinere Pakete, beschleunigt die initiale Ladezeit und verbessert die allgemeine Performance Ihrer Website.
Keine Auffälligkeiten.
vorbildlich
Beim Client-Caching durch Service Worker werden häufig benötigte Daten Ihrer Website lokal auf dem Gerät des Nutzenden gespeichert, was wiederholte Anfragen reduziert und die Ladezeiten erheblich verkürzt. Dies verbessert die allgemeine User Experience, indem es schnelleren Zugriff auf Inhalte ermöglicht.
Keine Auffälligkeiten.
optimierbar
Mit Lazy Loading Skripte werden JavaScript-Ressourcen erst geladen, wenn sie benötigt werden. Die initiale Ladezeit wird damit verkürzt und die Website-Performance verbessert.
Direkt bei Page-Load wird die YouTube Widget API geladen, obwohl sie noch nicht benötigt wird.
Prüfen Sie die Möglichkeit, 3rd Party-Libraries wie YouTube erst bei Bedarf zu laden, zum Beispiel durch einen Klick auf „Play” eines Videos.
vorbildlich
Die Minifizierung von Skripten entfernt überflüssige Zeichen aus JavaScript-Dateien, was die Dateigröße reduziert und die Ladezeiten verkürzt. Diese Praxis optimiert die Ausführungszeit und verbessert die Gesamtperformance der Website, indem sie die Zeit minimiert, die benötigt wird, um Skripte herunterzuladen und zu verarbeiten.
Keine Auffälligkeiten.
vorbildlich
Die Optimierung der Bundle-Größen für CSS verbessert die Ladezeiten, indem nur notwendiger Code geladen wird. Kleine und effiziente CSS-Bundles reduzieren die Übertragung unnötiger Daten und beschleunigen das Rendering der Seiteninhalte. Dies minimiert den Gesamtdatenverkehr und steigert die Servereffizienz.
Keine Auffälligkeiten.
kritisch
Ein komplexer DOM verlangsamt das Rendering Ihrer Website. Vereinfachen Sie die Struktur, um schnellere Ladezeiten und eine höhere Interaktivität zu erreichen.
Tests zeigen eine extensive Größe des DOMs.
Einige der getesteten Seiten bestehen aus über 6.845 DOM-Elementen. Um die Performance zu verbessern, könnten Sie Elemente, die erst nach einer Nutzer*inneninteraktion benötigt werden, on-demand rendern. Überprüfen Sie zudem die inhaltliche Komplexität der Seite, um mögliche Reduktionen vorzunehmen.
optimierbar
Minifizieren von HTML und CSS entfernt überflüssige Daten wie Kommentare und Leerzeichen, wodurch die Dateigröße reduziert und die Ladezeit der Webseite verbessert wird. Diese Optimierung macht den Datenverkehr effizienter und reduziert die CO2-Emissionen.
Der CSS-Code Ihrer Website wurde minified, nicht aber der HTML-Code.
HTML-Code sollte im Rahmen des Build- oder Rendering-Prozesses minified werden.
vorbildlich
Asynchrones Laden von Tracking-Skripten verbessert die Ladezeiten, indem es die Ausführung bis nach dem Laden der wesentlichen Inhalte verzögert. Diese Methode stellt sicher, dass die initiale Ladezeit nicht beeinträchtigt wird, was die allgemeine Performance der Website optimiert.
Keine Auffälligkeiten.
kritisch
Übermäßiger Einsatz von Tracking-Skripten beeinträchtigt die Ladezeiten Ihrer Website signifikant. Eine Reduzierung und Optimierung dieser Skripte verbessert nicht nur die Performance, sondern steigert auch die User Experience durch schnellere Seitenreaktionen deutlich.
Ihre Website nutzt eine große Zahl von Tracking-Skripten.
Prüfen Sie regelmäßig den Einsatz der verwendeten Tracking- und Marketing-Skripte. Fragen Sie sich: Werden alle Skripte zwingend benötigt? Ist es ausreichend, einzelne Dienste z.b. via A/B Ausspielung nur für einen Teil der Nutzer*innen zu integrieren? Sind die Skripte auf allen Seiten erforderlich?
kritisch
Privacy-friendly Provider legen großen Wert auf den Schutz der Nutzer*innendaten und bieten datenschutzkonforme Lösungen an. Der Einsatz solcher Dienste verbessert das Vertrauen der Nutzer*innen und stärkt die Einhaltung von Datenschutzbestimmungen.
Ihre Website nutzt Google Analytics.
Prüfen Sie, ob Sie anstelle von Google Analytics privacy-friendly Provider wie Fathom oder Plausible integrieren können.
kritisch
Integriertes Tracking erfasst Nutzer*innendaten zur Analyse des Verhaltens auf der Website, wird jedoch die Ladezeiten und Performance beeinträchtigen. Eine sorgfältige und sparsame Implementierung dieser Skripte ist entscheidend, um die User Experience nicht negativ zu beeinflussen.
Ihre Website verwendet eine Tracking-Lösung.
Prüfen Sie, ob Sie in Gänze auf die Verwendung eines Trackings verzichten können.
vorbildlich
Das Laden von Skripten erst nach Einholung der Nutzer*inneneinwilligung verbessert die initiale Ladezeit der Website, da unnötige Skripte nicht sofort ausgeführt werden. Diese Praxis hält Datenschutzstandards ein und stärkt das Vertrauen der Nutzer*innen.
Keine Auffälligkeiten.
vorbildlich
Ein Content Delivery Network (CDN) ist ein Netzwerk aus vielen weltweit verteilten Servern, die dazu dienen, Inhalte einer Website näher an die geografische Position der Nutzer*in zu bringen. Indem Kopien der Inhalte auf verschiedenen Servern gespeichert werden, können diese schneller zu den Endnutzer*innen gelangen. Dies verkürzt die Ladezeiten der Website erheblich, da Daten über kürzere Distanzen übertragen werden müssen. Gleichzeitig reduziert dies den Bedarf an Bandbreite und Energieverbrauch, was den CO₂-Ausstoß verringert und so die Umweltbelastung durch den Betrieb der Website minimiert.
Keine Auffälligkeiten.
optimierbar
Effizientes Downstream Caching reduziert die zu ladenden Datenmengen für wiederkehrende Besucher*innen und erhöht die Verfügbarkeit Ihrer Website. Dies verbessert die Zugriffsgeschwindigkeit und die User Experience durch schnellere Seitenaufrufe.
Auch mutmaßlich selten aktualisierte URLs liefern HTML-Seiten mit via Response-Header deaktiviertem Downstream-Cache aus.
Prüfen Sie die Cache-TTL für diese HTML-Seiten.
vorbildlich
Ein Green CDN nutzt erneuerbare Energiequellen, um den ökologischen Fußabdruck des Datenverkehrs Ihrer Website zu minimieren. Dies trägt zur Reduzierung der Umweltbelastung bei und verbessert die Nachhaltigkeit Ihrer Online-Präsenz.
Keine Auffälligkeiten.
vorbildlich
Green Hosting nutzt umweltfreundliche Technologien und bezieht Energie aus erneuerbaren Quellen, um den Betrieb von Websites nachhaltiger zu gestalten. Dieses Hosting reduziert den ökologischen Fußabdruck einer Website, indem es den Energieverbrauch minimiert und zur Reduzierung der Umweltbelastung beiträgt.
Keine Auffälligkeiten.
vorbildlich
Effizient gestaltete Response-Header optimieren das Caching und verkürzen die Serverantwortzeiten.
Keine Auffälligkeiten.
vorbildlich
Komprimierte Server-Antworten verringern die zu übertragende Datenmenge, was das Laden Ihrer Website beschleunigt.
Keine Auffälligkeiten.
Folgende Seiten wurden für den Audit analysiert:
Mit Hilfe dieser Übersicht können Sie auf einen Blick sehen, welchen Impact und Aufwand die einzelnen Prüfungsfelder haben. Per Klick können Sie zudem die Reihenfolge der beiden Dimensionen auf- und absteigend sortieren.
