nion

Viva con Agua

Sustainable Web Audit

vivaconagua.org

Management Summary

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 WOFF2, Umfang von Custom Font Schriftarten und -Stilen aus dem Bereich Schriften und Lazy Loading, Bildformate, Responsive Bilder aus dem Bereich Bilder. Eine Übersicht über alle Bereiche finden Sie hier.

Gesamtbewertung

kritisch

CO₂ Einsparungspotential

pro Jahr bei 183.300 Seitenaufrufen im Monat

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).

Analyse & Handlungsempfehlungen

Bilder

kritisch

kritisch

Bildformate

Warum ist das wichtig?

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.

Was ist uns aufgefallen?

Einige Dateien tragen die falsche Endung (z.b. .jpg.webp, der Mime-Type ist jedoch jpeg). WebP wird nicht verwendet.

Unsere Empfehlung

Verwenden Sie in unterstützten Browsern das WebP- oder AVIF-Format für Bilder, um die Dateigröße im Vergleich zu JPG oder PNG deutlich zu reduzieren. Korrigieren sie falsche Dateiendungen.

Gerne stellen wir Ihnen Dienste wie z.B. Cloudinary vor, die automatisch die besten Bild- und Videoformate für Ihre Nutzer*innen ausliefern.

vorbildlich

Carousels

Warum ist das wichtig?

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.

Was ist uns aufgefallen?

Keine Auffälligkeiten.

vorbildlich

Großformatige Bilder

Warum ist das wichtig?

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.

Was ist uns aufgefallen?

Auf großen Viewports ist keine maximale Inhaltsbreite gesetzt.

Unsere Empfehlung

Bilder, die auf kleineren Viewports über die volle Breite laufen, könnten auf eine maximale Breite auf größeren Viewports gesetzt werden, um auf sehr großen Bildschirmen zu sparen und auch optisch nicht zu überwältigen.

optimierbar

Lazy Loading

Warum ist das wichtig?

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.

Was ist uns aufgefallen?

Bilder des initialen Viewports werden “lazy” geladen. Anstelle von nativen Lazy Loading-Attributen wird eine Javascript-Library verwendet.

Unsere Empfehlung

Bilder „above the fold” sollten nicht lazy loaded werden, da dadurch die Darstellung verzögert wird. Nutzen Sie die nativen Lazy Loading Methode via loading="lazy", decoding="async" und fetchpriority="low", um dem Browser noch mehr Anweisungen zu geben, sich erst später um entsprechende Bilder zu kümmern. Dadurch können Sie auch auf das Laden der zusätzlichen Javascript-Datei (vanilla-lazyload.js) verzichten.

kritisch

Prefetching & Preloading

Warum ist das wichtig?

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.

Was ist uns aufgefallen?

Bilder außerhalb des initialen Viewports werden nicht prefetched oder preloaded.

Unsere Empfehlung

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 vermutlich später benötigt werden, die jedoch nicht kritisch für den initialen Seitenaufbau sind („below the fold“) und zu denen bald gescrollt wird.

kritisch

Responsive Bilder

Warum ist das wichtig?

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.

Was ist uns aufgefallen?

Einige Bilder sind Hintergrundbilder eingebunden und erlauben somit kein responsives Laden anhand der Viewport-Größe.

Es werden <picture>-Elemente mit einer exzessiven Deklaration von <source>-Knoten ohne srcset und sizes verwendet.

Unsere Empfehlung

Nutzen Sie das <img> Elementes in Kombination mit den srcset und sizes Attributen anstatt des sehr starren <picture> Elements mit fest definierten Bildern pro Breakpoint. Eine große Auswahl an Bildgrößen im srcset und genaue und korrekte Angaben im sizes Attribut geben dem Browser die meiste Flexibilität immer das für Viewport und Pixeldichte optimalste Bild auszuliefern. Das Ausliefern von WebP- anstatt JPG-Dateien sollte auf Server-Ebene passieren und muss nicht zusätzlich den HTML Code vergrößern. Sollten Sie an einer Stelle wirklich auf einem speziellen Viewport ein anderes Bildformat (Hochformat/Querformat) ausliefern wollen, sollten Sie dort das <picture> Element mit verschiedenen <source> Elementen inklusive srcset und sizes verwenden.
Bilder nur per CSS als Hintergrundbilder einzubinden und somit das gleiche Bild auf allen Viewports und Geräten auszuliefern ist ein No-go (unnötige Datentlast).

Grafiken

optimierbar

optimierbar

Angemessene Verwendung

Warum ist das wichtig?

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.

Was ist uns aufgefallen?

Das Logo wird als Rastergrafik ausgeliefert. Es scheint zweifelhaft, ob der per CSS geladene Icon-Font “swiper icons” verwendet wird.

Unsere Empfehlung

Überprüfen Sie, ob einfache Grafiken wie zum Beispiel Logos als SVG-Dateien verfügbar sind und verwenden Sie diese anstelle von Rastergrafiken wie JPG oder PNG. Zudem sollten Sie prüfen, ob die per CSS eingebundene Icon Font „swiper-icons“ tatsächlich verwendet wird.

optimierbar

SVG Sprites

Warum ist das wichtig?

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.

Was ist uns aufgefallen?

SVG Icons wie die Social Media Icons des Footer werden inline in Seiten eingebettet, anstatt sie in ein Spritesheet auszulagern..

Unsere Empfehlung

Ü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 wäre sinnvoll, diesen Ansatz konsistent auf allen Seiten umzusetzen.

vorbildlich

SVG-Optimierung

Warum ist das wichtig?

Optimierte SVG-Dateien reduzieren die Dateigröße und benötigen weniger Bandbreite, was die Ladezeiten Ihrer Website verbessert.

Was ist uns aufgefallen?

Keine Auffälligkeiten.

optimierbar

SVG-Wiederverwendung

Warum ist das wichtig?

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.

Was ist uns aufgefallen?

Identische SVG-Icons sind mehrfach inline in Seiten eingebettet.

Unsere Empfehlung

Sie sollten Icons, die mehrfach auf derselben Seite erscheinen, wie zum Beispiel die Striche unter „Mehr lesen” 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.

Videos

vorbildlich

optimierbar

Alternative Content Fallback

Warum ist das wichtig?

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.

Was ist uns aufgefallen?

Fallback-Bilder bzw. Preview-Bilder von Videos werden als Hintergrundbild und damit nicht-responsiv eingebunden.

Unsere Empfehlung

Binden Sie das Fallback-Bild für das Video nicht als Hintergrundbild, sondern als reguläres <img>-Element ein. Versehen Sie das Bild mit einem alt-Attribut sowie srcset und sizes-Attributen, um die Zugänglichkeit und Responsivität zu verbessern. Fügen Sie zudem ein <button>-Element mit beschreibendem Text hinzu, um das Video zu laden.

vorbildlich

Angemessene Verwendung

Warum ist das wichtig?

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.

Was ist uns aufgefallen?

Keine Auffälligkeiten.

vorbildlich

Auflösung

Warum ist das wichtig?

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.

Was ist uns aufgefallen?

Keine Auffälligkeiten.

vorbildlich

Autoplay

Warum ist das wichtig?

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.

Was ist uns aufgefallen?

Keine Auffälligkeiten.

vorbildlich

Drittanbieter-Integration

Warum ist das wichtig?

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.

Was ist uns aufgefallen?

Keine Auffälligkeiten.

vorbildlich

Länge

Warum ist das wichtig?

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.

Was ist uns aufgefallen?

Keine Auffälligkeiten.

vorbildlich

Videoformate

Warum ist das wichtig?

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.

Was ist uns aufgefallen?

Keine Auffälligkeiten.

Schriften

kritisch

kritisch

Font Preloading

Warum ist das wichtig?

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.

Was ist uns aufgefallen?

Es wird kein Font-Preloading verwendet.

Unsere Empfehlung

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).

vorbildlich

Laden von Extern

Warum ist das wichtig?

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.

Was ist uns aufgefallen?

Keine Auffälligkeiten.

kritisch

Lazy Loading

Warum ist das wichtig?

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.

Was ist uns aufgefallen?

Das Laden der Seite wird durch fehlende CSS-Attribute an font-faces verzögert.

Unsere Empfehlung

Binden Sie Ihre Schriften im CSS mit der Anweisung font-display: swap im @font-face-Block ein, um das Laden der Seite durch das Nachladen der Schriften nicht zu verzögern.

kritisch

Subsetting

Warum ist das wichtig?

Subsetting reduziert die Größe von Schriftdateien, indem nur Zeichen, die auf der Website verwendet werden, eingebunden sind.

Was ist uns aufgefallen?

Font-Subsetting scheint nicht verwendet zu werden.

Unsere Empfehlung

Wenn Sie bestimmte Zeichen, wie solche für nicht genutzte Sprachen, nicht benötigen, entfernen Sie diese aus den Schriftdateien, um Datenvolumen zu sparen.

optimierbar

Umfang von Custom Font Schriftarten und -Stilen

Warum ist das wichtig?

Wählen Sie bewusst die Anzahl der Schriftarten und Stile, da sie eine Auswirkung auf den Ressourcenbedarf Ihrer Website haben.

Was ist uns aufgefallen?

Die via CSS geladenen Schriftschnitte Roboto Slab Thin, Light, Regular und Bold werden auf den getesteten Seiten nicht verwendet.

Unsere Empfehlung

Überprüfen Sie, ob alle eingebundenen Schriftschnitte tatsächlich verwendet werden oder vom Design her notwendig sind. Zum Beispiel könnten Roboto Slab Thin und Light optisch fast identisch sein. Lesen Sie auch den Punkt „Variable Fonts” für eine bessere Lösung.

kritisch

Variable Fonts

Warum ist das wichtig?

Variable Fonts erlauben mehrere Variationen einer Schriftart in einer Datei, was die Ladezeiten reduziert und die Flexibilität erhöht.

Was ist uns aufgefallen?

Roboto Slab ist nicht als Variable Font eingebunden.

Unsere Empfehlung

Um Datenvolumen zu sparen und die gestalterische Flexibilität zu erhöhen, sollten Sie die verschiedenen Schriftschnitte der Roboto Slab durch den variablen Font Roboto Slab ersetzen.

optimierbar

WOFF2

Warum ist das wichtig?

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.

Was ist uns aufgefallen?

Bis auf eine Ausnahme werden keine WOFF2-Schriften verwendet.

Unsere Empfehlung

Überprüfen Sie, ob die von Ihnen genutzten Schriften auch im WOFF2-Format verfügbar sind, und verwenden Sie dieses Format anstelle der WOFF-Dateien, um Ladezeiten zu optimieren.

Skripte

kritisch

kritisch

Bundle-Größen

Warum ist das wichtig?

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.

Was ist uns aufgefallen?

Die main.js Ihrer Website ist mit 311kB auffällig groß. Dies kann darauf hindeuten, dass Bestandteile in separaten Chunks sinnvoller organisiert wären.

Unsere Empfehlung

Die main.js Ihrer Website ist mit 311kB auffällig groß. Teilen Sie main.js in mehrere Bundles auf und laden Sie auf jeder Seite nur die Bundles, die auf ihr benötigt werden.

kritisch

Chunking

Warum ist das wichtig?

Chunking teilt große Ressourcen in kleinere Pakete, beschleunigt die initiale Ladezeit und verbessert die allgemeine Performance Ihrer Website.

Was ist uns aufgefallen?

Javascript-Code wurde zwar in einzelne Files aufgeteilt, es werden aber auf allen Seiten jeweils alle Skripte geladen, anstatt selektiv z.b. via dynamischer Imports nur die auf der jeweiligen Seite benötigten Inhalte nachzuladen.

Unsere Empfehlung

Der Javascript-Code Ihrer Applikation ist zwar auf mehrere Dateien aufgeteilt, jedoch lädt abgesehen vom implementierten Lazy Loading für z.B. den YouTube-Player jede getestete Seite alle Javascript-Bundles. Zudem enthält die auf allen Seiten geladene main.js externe Libraries wie z.B. Mabbox, obwohl sie nicht auf allen Seiten benötigt werden.
Teilen Sie Ihren Code so in Bundles auf, dass auf den jeweiligen Seiten nur der Code geladen wird, der auf dieser Seite auch benötigt wird. Die immer initial geladene Datenmenge der Javascript-Chunks wird hierdurch reduziert.

kritisch

Dependency Payload-Größen

Warum ist das wichtig?

Große Abhängigkeiten verlangsamen die Ladezeiten. Durch die Optimierung der Bibliotheksgrößen verbessern Sie die Performance der Website erheblich.

Was ist uns aufgefallen?

In Ihrer main.js ist Mapbox enthalten, obwohl keine Maps verwendet werden.

Unsere Empfehlung

Prüfen Sie die in main.js gebundeltete Mapbox-Library auf Ihre Notwendigkeit. Auf keiner der getesteten Seiten war eine dynamische Karte integriert. Sollten Mapbox-Features abseits von Kartendarstellungen benötigt werden ist z.B. ggf. ein direkter API-Aufruf ohne die aktuell verwendete Library möglich.

vorbildlich

Lazy Loading

Warum ist das wichtig?

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.

Was ist uns aufgefallen?

Keine Auffälligkeiten.

optimierbar

Minification

Warum ist das wichtig?

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.

Was ist uns aufgefallen?

Der Applikations-Code der geladenen Javascript-Bundles sind nicht vollständig minified.

Unsere Empfehlung

Die Dateigröße kann durch weiteres Minifiying weiter optimiert werden. Der gesamte Javascript-Code sollte während des Build-Prozess minified werden, um die Dateigröße der erzeugten Chunks zu reduzieren.

optimierbar

Tree Shaking

Warum ist das wichtig?

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.

Was ist uns aufgefallen?

Die main.js Ihrer Website ist mit 311kB auffällig groß. Dies kann darauf hindeuten, dass Libraries ohne Tree-Shaking gebundelt wurde.

Unsere Empfehlung

Prüfen Sie, ob die gebundelten Dependencies weiterhin benötigt werden und dass Sie verwendete Libraries wie lodash nicht in Gänze importieren, sondern lediglich die Fragmente, die in Ihrem Applikations-Code verwendet werden.

Struktur & Code-Qualität

optimierbar

optimierbar

Bundle-Größen (CSS)

Warum ist das wichtig?

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.

Was ist uns aufgefallen?

Einige CSS-Files werden nicht auf allen Seiten verwendet.

Unsere Empfehlung

Obwohl keine Ihrer CSS-Dateien besonders groß ist: überprüfen Sie bitte, ob alle geladenen CSS-Dateien auf jeder Seite wirklich benötigt werden. Laden Sie gegebenenfalls nur die Dateien, die die erforderlichen CSS-Anweisungen enthalten.

vorbildlich

DOM-Komplexität

Warum ist das wichtig?

Ein komplexer DOM verlangsamt das Rendering Ihrer Website. Vereinfachen Sie die Struktur, um schnellere Ladezeiten und eine höhere Interaktivität zu erreichen.

Was ist uns aufgefallen?

Keine Auffälligkeiten.

kritisch

Minification (HTML & CSS)

Warum ist das wichtig?

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.

Was ist uns aufgefallen?

Der CSS-Code Ihrer Website wurde zum Teil minified, der HTML-Code gar nicht.

Unsere Empfehlung

Sowohl HTML als auch CSS-Code sollte im Rahmen des Build-Prozesses minified werden.

Tracking

optimierbar

vorbildlich

Async Loading

Warum ist das wichtig?

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.

Was ist uns aufgefallen?

Keine Auffälligkeiten.

vorbildlich

Exzessive Nutzung

Warum ist das wichtig?

Ü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.

Was ist uns aufgefallen?

Keine Auffälligkeiten.

kritisch

Privacy-friendly Provider

Warum ist das wichtig?

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.

Was ist uns aufgefallen?

Sie verwenden Google Analytics.

Unsere Empfehlung

Prüfen Sie, ob Sie anstelle von Google Analytics privacy-friendly Provider wie Fathom oder Plausible integrieren können.

kritisch

Tracking integriert

Warum ist das wichtig?

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.

Was ist uns aufgefallen?

Ihre Applikation verwendet ein Besucher-Tracking.

Unsere Empfehlung

Prüfen Sie, ob Sie in Gänze auf die Verwendung eines Trackings verzichten können.

Infrastruktur

optimierbar

optimierbar

CDN

Warum ist das wichtig?

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.

Was ist uns aufgefallen?

Ihre Website verwendet kein Content Delivery Network (CDN).

Unsere Empfehlung

Durch das deutsche Zielpublikum fallen die Vorteile eines CDNs im Vergleich zu einer Website mit internationalem Zielpublikum weniger stark ins Gewicht. Dennoch wird durch das Caching von Seiten in CDN-Edges in der Nähe des Nutzenden die Datenmenge reduziert, die über weite Entfernungen übermittelt werden muss. Für Seitenaufrufe von Endgeräten fällt hierdurch für einen großen Teil der Anfragen lediglich Traffic zwischen dem Endnutzer und CDN Edge-Caches an. 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

Downstream Caching

Warum ist das wichtig?

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.

Was ist uns aufgefallen?

Die Server Response-Header verhindern ein effizientes Caching im Browser. Z.B. dürfen Javascript und CSS-Ressourcen für lediglich 30 Tage gecached werden.

Unsere Empfehlung

Prüfen Sie die Cache TTL / maxage für Webfonts, Javascript und CSS-Resourcen. Diese Ressourcen sollten mit einer hohen TTL wie z.B. 1 Jahr und zusätzlich via Cache-Control Header als „immutable” ausgewiesen werden. Build-Artefakte wie CSS oder JS-Dateien müssen dabei wie bei modernen Bundlern üblich ggf. mit einzigartigen Hashes im Dateinahmen ausgezeichnet werden.

vorbildlich

Green Hosting

Warum ist das wichtig?

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.

Was ist uns aufgefallen?

Keine Auffälligkeiten.

optimierbar

Response Header

Warum ist das wichtig?

Effizient gestaltete Response-Header optimieren das Caching und verkürzen die Serverantwortzeiten.

Was ist uns aufgefallen?

Es wird ein nicht benötigter Response-Header X-Powered-By gesetzt.

Unsere Empfehlung

Vermeiden Sie nicht benötigte Response-Header wie X-Powered-By. 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 Header Informationen zum verwendeten Stack preisgeben, die unter Umständen ein Sicherheitsrisiko darstellen.

optimierbar

Response-Komprimierung

Warum ist das wichtig?

Komprimierte Server-Antworten verringern die zu übertragende Datenmenge, was das Laden Ihrer Website beschleunigt.

Was ist uns aufgefallen?

Der Webserver unterstützt zwar gzip zur Komprimierung von Responses, nicht aber Brotli.

Unsere Empfehlung

Ihre Server-Responses werden für nicht ohnehin bereits komprimierte Ressourcen mit gzip komprimiert. Verwenden Sie für die Komprimierung von Server-Responses anstelle von gzip Brotli, in sofern Sie nicht auf die Verwendung von stark veralteten Browsern angewiesen sind. Brotli erzielt je nach Datei eine >20% bessere Komprimierung.

Folgende Seiten wurden für den Audit analysiert:

nion digital unterstützt Sie sehr gerne bei folgenden weiteren Schritten

  1. Umsetzungsplanung der vorgestellten Maßnahmen
  2. Wissenstransfer in Form von Workshops und Schulungen für interne Design- und Entwicklerteams
  3. Detaillierte Analyse des Applikations-Setup (z.B. hinsichtlich Client-Server Kommunikation, Infrastruktur oder Potenziale für KI/ML) im gemeinsamen Deep-Dive
  4. Evaluierung von Services & Dienstleister*innen

Bei weiteren Fragen helfen wir gerne weiter

Jens Franke
  • Jens Franke
  • Geschäftsführer
  • New Business, Innovation
Gesprächstermin buchen

Schauen Sie sich weitere Beispiel-Audits an