Unsere Analyse zeigt ein sehr großes Potenzial, den Energiebedarf Ihrer Website zu reduzieren und die User Experience zu verbessern.
Die Handlungsfelder mit dem größten Impact sind Carousels, Responsive Bilder aus dem Bereich Bilder, CDN, Green Hosting aus dem Bereich Infrastruktur und Videoformate aus dem Bereich Videos. Eine Übersicht über alle Bereiche finden Sie hier.
Auf Basis der Anzahl Ihrer Seitenaufrufe ist das Einsparungspotenzial im Vergleich zu ähnlichen Websites sehr 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).
vorbildlich
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.
Keine Auffälligkeiten.
kritisch
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.
Bilder innerhalb der Carousels werden nicht “lazy” geladen.
Laden Sie Medienelemente innerhalb von Carousels via Lazy Loading.
optimierbar
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.
Bildgrößen werden auf großen Viewports nicht beschränkt.
Bilder, die auf kleineren Viewports über die volle Breite laufen, könnten auf größeren Viewports auf eine maximale Breite gesetzt werden, um Daten zu sparen und auch optisch nicht zu überwältigen. Es sollte zudem nicht auf allen Viewport-Breiten das gleiche Bild geladen werden, sondern eine jeweils angepasste Größe.
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.
Keine Auffälligkeiten.
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 ein paar Stellen werden zu große Bilder geladen und es werden generell nicht die optimalen Methoden für responsive Bilder genutzt.
Effektiver als das <picture> Element wäre hier das klassische <img> Element, ausgestattet mit sizes und srcset Attributen, das dem Browser alle notwendigen Informationen und verschiedene Bildgrößen liefert, um das idealste Bild für die gegebenen Umstände (Viewportgröße, Pixeldichte etc.) zu wählen. Das Resultat wären weniger übertragene Daten und eine höhere visuelle Qualität.
vorbildlich
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.
Keine Auffälligkeiten.
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. 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 wäre 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. Pfeile hinter Links sind embedded.
Sie sollten Icons, die mehrfach auf derselben Seite erscheinen, wie zum Beispiel Pfeile hinter Links, 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.
optimierbar
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.
Obwohl nur eine Variante benötigt wird werden jeweils zwei Versionen (Hoch- und Querformat) eines Videos geladen.
Stellen Sie dem Browser Videos in verschiedenen Größen und Formaten zur Verfügung, damit immer die passendste Version geladen wird und unnötiger Datenverbrauch vermieden wird. Wenn für Quer- und Hochformat unterschiedliche Videodateien angezeigt werden sollen, achten Sie darauf, dass nicht beide Formate gleichzeitig geladen werden.
Gerne stellen wir Ihnen Dienste wie z.B. Cloudinary vor, die automatisch die besten Bild- und Videoformate für Ihre Nutzer ausliefern.
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.
optimierbar
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.
Videos werden nur im MP4-Format mit H.264 Codec ausgeliefert. VP9 wird nicht verwendet.
Binden Sie die Videos neben den H.264 MP4-Dateien auch im WebM-Format mit VP9-Codec ein. Dadurch kann der Browser das idealste Format auswählen. Videos im VP9-Format sind in der Regel deutlich kleiner als solche im H.264-Format, was zu geringen Ladezeiten führt.
vorbildlich
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.
Keine Auffälligkeiten.
vorbildlich
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.
Keine Auffälligkeiten.
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.
vorbildlich
Wählen Sie bewusst die Anzahl der Schriftarten und Stile, da sie eine Auswirkung auf den Ressourcenbedarf Ihrer Website haben.
Keine Auffälligkeiten.
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 die Schriftschnitte Roboto Regular und Roboto Bold durch den variablen Font Roboto Flex ersetzen.
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.
optimierbar
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.
Das Javascript-Bundle frontend.x.js ist mit über 200kB auffällig groß.
Prüfen Sie eine mögliche Reduktion der Größe der geladenen Javascript-Dateien mittels Chunking. Prüfen sie zudem den Applikations-Code auf ggf. nicht mehr benötigte Dependencies oder Alternativen mit kleinerem Fußabdruck.
kritisch
Chunking teilt große Ressourcen in kleinere Pakete, beschleunigt die initiale Ladezeit und verbessert die allgemeine Performance Ihrer Website.
Auf den getesteten URLs wird jeweils ein einziges Javascript Bundle geladen. Es wird kein Chunking verwendet.
Javascript-Code sollte in Chunks unterteilt werden, so dass bedingt benötigter Code nur dann geladen wird, wenn er auf der aktuellen Seite auch verwendet wird. So wird die Dateigröße immer oder auf vielen Seiten geladener Javascript-Chunks reduziert.
vorbildlich
Große Abhängigkeiten verlangsamen die Ladezeiten. Durch die Optimierung der Bibliotheksgrößen verbessern Sie die Performance der Website erheblich.
Keine Auffälligkeiten.
kritisch
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.
Es wird initial unnötiger Code geladen, z.B. FriendlyCaptcha im Newsletter-Formular und ein. Datepicker/Kalender). Es werden zudem Dependencies geladen, die ggf. gar nicht mehr in Verwendung sind - z.B. ein Sharer- mit Support für AddThis (Dienst wurde im Jahr 2023 eingestellt)
Optional benötigter Code sollte bedarfsorientiert nachgeladen werden. Die immer initial geladene Datenmenge der Javascript-Chunks wird hierdurch reduziert. Code-Dependencies sollten regelmäßig auf Aktualität überprüft werden.
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
Beim Tree Shaking wird ungenutzter Code aus JavaScript-Bundles entfernt. Dies erhöht die Performance und führt zu kleineren Dateigrößen und schnelleren Ladezeiten.
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 enthalten über 2.100 DOM-Elemente. 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 Vielzahl an Tracking-Skripten von GTM, Taboola, Hotjar und lunio, zudem Marketing-Skripte von adform, LinkedIn, Bing und Facebook.
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.
kritisch
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.
Es ist kein CDN im Einsatz.
Ihre Website verwendet kein CDN. Die Verwendung eines CDN kann jedoch die Effizienz deutlich steigern, da Inhalte in geografisch verteilten Servern (Edge-Caches) zwischengespeichert werden. Dies verringert die Latenzzeiten und den Energieverbrauch, da Nutzer*innenanfragen überwiegend mit den näheren CDN-Edges abgewickelt werden. Zudem optimieren viele CDN-Dienste die Datenrouten für eine schnellere Auslieferung. Bei der Auswahl eines CDN sollten Sie ein Green CDN wählen, da es erneuerbare Energiequellen nutzt, um den ökologischen Fußabdruck des Datenverkehrs Ihrer Website zu minimieren.
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.
Die gesetzten Response-Header verhindern ein effiziente Caching. Getestete HTML-Seiten können für maximal 120 Sekunden gecached werden.
Erwägen Sie die Nutzung eines CDN, da Sie CDN-Caches jederzeit invalidiert werden können - z.B. automatisiert bei Content-Änderung in Ihrer Applikation. Die Cache-Dauer im CDN kann daher auf einen hohen Wert wie 365 Tage gesetzt und das Downstream-Caching im Browser aber auf z.B. 24 Stunden begrenzt werden. Somit wird der größte Übertragungsweg Ihrer Daten Cache-optimiert - bei dennoch zeitnaher Sichtbarkeit Ihrer Änderungen.
kritisch
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.
Der*die Betreiber*in des verwendeten Rechenzentrums macht keine Angaben zu Zertifizierungen für Nachhaltigkeit oder ökologisch nachhaltiger Ausrichtung des Rechenzentrums.
Nutzen Sie Rechenzentren, die mit 100% erneuerbaren Energien betrieben werden. Achten Sie auf Zertifizierungen wie ISO 14001 und ISO 50001 für Umwelt- bzw. Energiemanagement, sowie Angaben zum Einsatz energieeffizienter Hardware. Ein von dem*r Betreiber*in angegebener PUE-Wert nahe 1 deutet außerdem auf eine hohe Effizienz von Kühlung und sonstige Betriebsmittel hin (Vgl. Microsoft Azure in der EU: 1,185, weltweiter Branchendurchschnitt lt. Statista 1,58). Angaben zum genutzten Kühlsystem wie z.B. adiabatische Kühlung oder Verdunstungskühlung können ein weiterer Hinweis für nachhaltige Bemühungen des Betreibers sein, das Rechenzentrum ressourcenschonend und effizient zu betreiben.
Die Bestimmung des verwendeten Rechenzentrums von extern kann fehleranfällig sein. Bei Nennung des verwendeten Rechenzentrums nehmen wir gerne eine Bewertung auf Basis dieser Informationen vor.
optimierbar
Effizient gestaltete Response-Header optimieren das Caching und verkürzen die Serverantwortzeiten.
Es werden unnötige Response-Header gesetzt.
Vermeiden Sie nicht benötigte Response-Header wie X-Pimcore-Cache-Date, X-Powered-By oder X-Pimcore-Output-Cache-Tag. Auch wenn die durch sie entstehende Datenmenge auf den ersten Blick gering erscheinen mag, erzeugen sie in jeder einzelne Response Ihrer Server einen sich kontinuierlich aufsummierenden Overhead an übertragenen Daten. Zudem können Response-Header Informationen zum verwendeten Stack preisgeben, die unter Umständen ein Sicherheitsrisiko darstellen.
optimierbar
Komprimierte Server-Antworten verringern die zu übertragende Datenmenge, was das Laden Ihrer Website beschleunigt.
Es wird keine Brotli-Komprimierung verwendet, sondern ausschließlich gzip.
Ihre Server-Responses werden für nicht bereits komprimierte Ressourcen mit gzip komprimiert. Unterstützten Sie für die Komprimierung von Server-Responses neben gzip zusätzlich Brotli. Brotli erzielt je nach Datei eine >20% bessere Komprimierung.
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.
