Webseiten – Datenvolumen optimieren

Der Artikel fällt momentan noch unter Brainstorming, kann sich noch extrem ändern, oder in weitere Artikel aufgeteilt werden.
Einige Beispiele und Parameter sind noch nicht optimal.

Die Größe von Websites steigt jährlich an

Die Menge an Daten und die durchschnittliche Größe von Websites steigt von Jahr zu Jahr (Quelle: HTTPArchive). Doch viele Seiten sind in keinster Weise optimiert.
Ein einfacher Wegweiser wie sie Ihre Websites klein bekommen.

Content-Management-System (CMS)? Schön – wenn Sie wissen was Sie tun …

Aber ich habe doch das super tolle CMS (Namen bitte einsetzen) im Einsatz, das macht alles selbst – sogar die Artikel werden von einer KI geschrieben! Da muss meine Seite (+ Bilder, Fonts, Videos, ZIP-Archive, PDFs …) einfach in der optimalen Größe, für jedes Zielgerät, ausgeliefert werden …

Ein Wunschtraum der meistens an der Realität scheitert bzw. an dem, was die (aktuelle) Technik leistet.

Wer hier, ohne zu Hinterfragen, einfach nur Dateien (nicht optimiert) auf ein CMS hochlädt und diese im WYSIWYG-Editor in einen Artikel einfügt, der hat hier schon die Kontrolle über das System verloren – oder besser gesagt: über das was ausgeliefert wird.

Sich auf Plugins / Add-ons zu verlassen, funktioniert ebenfalls nur begrenzt.
Zu verschieden sind die Ansprüche an Qualtität und Bildmaterial, sodass eine Automatik in der Art: ich wandle einfach jedes Bild mal ins AVIF- oder WebP-Format um, eher zu suboptimalen Ergebnissen führt.

Darum der Reihe nach …

Analyse der Datenmenge

Jeder Browser bietet die Möglicheit die übertragene Datenmenge für eine Seite genauer anzusehen.

Hier am Beispiel von FireFox, erreichbar über Str-Umschalt-I:

Dort sehen Sie alle Daten die auf der Startseite dieser Website geladen werden

HTML-Seiten
CSS-Dateien
Grafiken (webp, svg, png)
Schriften (woff2)
Scripte
...

Ganz unten stehen die übertragenen Daten. Da auf dem Server die Komprimierung eingeschaltet ist, ist die Menge der gesendeten Daten geringer, als die der eigentlichen Nutzdaten. Das spiegelt sich auch in den Spalten Größe und Übertragen wieder.

Was Sie daran auch deutlich erkennen können:
Diese Kompression hat fast keinen Einfluss auf Binär-Dateien (Schriften, Bilder), sondern wirkt sich nur auf Text-Dateien aus (HTML, CSS, Script, SVG).
Bei sehr kleinen Binär-Dateien (Bildern) sind durch den Overhead des Protokolls die übertragenen Daten oft größer, als die Datei selbst.
Wie man sieht ergibt der Overhead ca. 0,4 KB an zusätzlichen Daten. D. h. jede zusätzliche abgerufene Datei, benötigt diese zusötzliche Datenmenge.

Umso mehr Daten übertragen werden, umso höher ist die benötigte Energiemenge dafür.

Einfache Analyse des CO₂–Fußabdrucks

Unterschiedlichste Dienste im Internet bieten eine Analyse des CO₂–Fußabdrucks einer Webseite (nur eine Seite) an. Eine ausführliche Beschreibung finden Sie in meinem Artikel Websites und deren CO₂-Fußabdruck.

Ergebnis von Websitecarbon für diese Seite.

Eine Optimierung der Website verkleinert nicht nur den CO₂–Fußabdruck, sondern verbessert auch den PageSpeed und dadurch das Ranking der Website.

HTTP-Kompression

Um die übertragene Datenmenge zu verringern, kann ein HTTP-Server seine Antworten komprimieren. Ein Client muss bei einer Anfrage mitteilen, welche Kompressionsverfahren er verarbeiten kann. Dazu dient der Header Accept-Encoding (etwa Accept-Encoding: gzip, deflate). Der Server kann dann die Antwort mit einem vom Client unterstützten Verfahren komprimieren und gibt im Header Content-Encoding das verwendete Kompressionsverfahren an. Wikipedia

In Arbeit …

Quelltexte optimieren

Für die meisten CMS gibt es hierfür passende Add-ons / Plugins, wie z. B. JCH Optimize.
Deshalb sind die folgenden Maßnahmen nur kurz zusammengefaßt.

Verwenden Sie beim Einbinden von Dateien die Subresource Integrity (SRI), muss der Hash nach dem Optimieren der Datei erstellt werden.

HTML-Quelltext

Bei HTML-Dateien werden Leerzeilen und Zeilenümbrüche (ausser PRE-Tags) bei der Ausgabe im Browser nicht dargestellt. Diese können komplett entfernt werden. Dadurch sparen Sie (je nach Seite) einige Kilobytes an Daten.

Ausgelieferte HTML-Quelltexte sehen leider oft so aus:


 …
    <li class="g-menu-item g-menu-item-type-component g-menu-item-759 g-parent g-standard g-menu-item-link-parent ">
                            <a class="g-menu-item-container" href="/optimierung" target="_self" title="Optimierung">
                                                                <span class="g-menu-item-content">
                                    <span class="g-menu-item-title">Optimierung</span>
            
                    </span>
                    <span class="g-menu-parent-indicator" data-g-menuparent=""></span>                            </a>
                                                                            <ul class="g-dropdown g-inactive g-fade g-dropdown-center">
            <li class="g-dropdown-column">
                        <iv class="g-grid">
                        <div class="g-block size-100">
            <ul class="g-sublevel">
                <li class="g-level-1 g-go-back">
                    <a class="g-menu-item-container" href="#" data-g-menuparent="" title="Back"><span>Back</span></a>
                </li>
 …

und das über hunderte von Zeilen hinweg.

Optimierter HTML-Quellcode sieht hingegen folgendermaßen aus:


 … <li class="g-menu-item g-menu-item-type-component g-menu-item-759 g-parent g-standard g-menu-item-link-parent"><a class="g-menu-item-container" href="/optimierung" target="_self" title="Optimierung"><span class="g-menu-item-content"><span class="g-menu-item-title">Optimierung</span></span><span class="g-menu-parent-indicator" data-g-menuparent=""></span></a><ul class="g-dropdown g-inactive g-fade g-dropdown-center"><li class="g-dropdown-column"><iv class="g-grid"><div class="g-block size-100"><ul class="g-sublevel"><li class="g-level-1 g-go-back"><a class="g-menu-item-container" href="#" data-g-menuparent="" title="Back"><span>Back</span></a></li> …

Hieran erkennen Sie schon, ob Webseiten-Optimierer ihr Handwerk wirklich ernst meinen.
Einfach mal den Quelltext deren Seite anzeigen lassen:
Sind Einrückungen und eine Vielzahl an Leerzeilen vorhanden, wird eine der einfachsten Optimierungsmaßnahmen nicht angewandt.

CSS-Quelltext

Auch die Angaben in einer CSS-Dateien können alle in eine Zeile geschrieben werden. Somit sparen wir wieder die Daten durch überflüssige Leerzeichen, Tabulatoren oder Zeilenumbrüche.

Haben Sie nur einzelne Dateien zu optimieren, bietet sich ein Online-Tool wie z. B. der CSS Optimizer des CSS Portals an.

Externe CSS-Dateien oder von CDN-Servern

Optimierte CSS Dateien sind meist an dem Namensmuster *.min.css erkennbar.

Dateien zusammenfassen!

Um Server-Anfragen zu minimieren sollten CSS-Dateien zu einer Datei zusammengefaßt werden.

JavaScript-Quelltext

JavaScript-Dateien können ebenfalls wie HTML- und CSS-Dateien minimiert werden.

Externe JavaScript-Dateien oder von CDN-Servern

Optimierte JavaScript Dateien sind meist an dem Namensmuster *.min.js erkennbar.

Dateien zusammenfassen!

Um Server-Anfragen zu minimieren sollten auch JavaScript-Dateien zu einer Datei zusammengefaßt werden.

Hierbei muss darauf geachtet werden, ob die Dateien am Anfang oder am Ende der Seite geladen (ausgeführt) werden sollen.

Schriften optimierenA

Auch hier fällt eine größere Menge an Daten an. Ein durschnittliche Font-Datei hat eine Größe von ca. 50–150 kB. Oft werden davon mehrere pro Seite geladen.

siehe: HTTP Archive: Font Bytes
siehe: HTTP Archive: Font Requests

Hier gibt es verschiedene Wege die Datenmenge zu reduzieren.

Systemschriften verwenden

Ist die Schriftart eher zweitranging, verwenden Sie am besten Systemschriften
Über entsprechende Font-Stacks können Sie erreichen, dass die Seite dennoch auf verschiedenen Sytemen gleich (ähnlich) aussieht.

Eine Zusammenstellung an passenenden Font-Stacks finden Sie in meinem Artikel CSS - Font Stacks.
Die verschiedenen Schriften dort haben oft unterschiedliche Laufweiten oder Stärken. Dies kann unerwünschte Folgen für das Design und das Layout haben.
Bei meinen Font-Stacks habe ich das durch size-adjust und font-weight, so weit möglich, kompensiert.

Ersatzschrift bei den Systenschriften suchen

Auf der Seite Indentifont können Sie unter Fonts by Similarity Ihre gewünschte Schrift eingeben. Als Ergebnis werden alternative Schriften aufgelistet in der Reihenfolge der Ähnlichkeit.

Hier wählen Sie dann die naheliegendste Systemschrift aus und können somit auf extra Font-Datei(en) verzichten.
Auf der Seite Indentifont können Sie sich auch einen entsprechendes Font-Stack zusammenstellen.

Es werden leider nicht immer die naheliegendsten Alternativen angezeigt (Impact / Anton), die Hinweise sind dennoch brauchbar.

Moderne Schrift-Formate verwenden

Das Schrift-Format woff2 hat eine wesentlich geringere Dateigröße wie eot, ttf, otf oder woff.
Dies sollten Sie bevorzugen und andere Formate nur als Fallback für ältere Browser verwenden.

Can I use: WOFF 2.0 – Web Open Font Format

Fallback für ältere Browser

Falls dies wirklich notwendig sein sollte, anonsten nur woff2 und woff verwenden.


@font-face {
   font-family: 'TolleSchrift';
   src: url('TolleSchrift.woff2') format('woff2'),					/* Moderne Browser */
        url('TolleSchrift.woff') format('woff'),					/* IE 11 */
        url('TolleSchrift.eot?#iefix') format('embedded-opentype'),	/* IE6-IE8 */
        url('TolleSchrift.ttf') format('truetype'),					/* Safari, Android, iOS */
        url('TolleSchrift.svg#svgFontName') format('svg');			/* Ältere iOS-Geräte */
}

Jeder Browser durchläuft diese Liste von oben nach unten, bis er einen Font gefunden hat, den er darstellen kann.

Variable Fonts einsetzen

Das sind Font-Dateien die mehrere Fonts enthalten. Alle Varianten der Schrift (von der Strichstärke über die Breite bis hin zur Neigung) finden in einer hocheffizienten Datei Platz.
Die Dateigröße eines Variable Fonts ist kleiner als die einzelnen Dateien der gesamten Schriftfamilie.

Größenvergleich anhand der Schrift Raleway:

Gesamte Schriftfamily (18 Schnitte) als TTF: ca. 2,8 MB
Variable Font (regular und italic) als TTF: ca. 600 KB
Gesamte Schriftfamily als woff2: ca. 1 MB
Variable Font (regular und italic) als woff2: ca. 250 KB

Wenn Sie nur wenige Schnitte verwenden, können diese zusammen kleiner sein, als der Variable Font.
Am Beispiel Raleway haben 4 Schnitte im woff2-Format ca. 230 KB.

Diese können von (fast) allen aktuellen Browsern dargestellt werden.

Can I use: Variable fonts

Font-Stacks

Mit CSS-Font-Stacks stellen Sie eine Liste an gewünschten Schriftarten zusammen. Die erste die der Browser auf dem System des Seitenbesuchers findet, wird genommen. Dadurch sparen Sie sich die Übertragung von Font-Dateien komplett. Sie haben dadurch allerdings auch nicht die vollständige Kontrolle über das Aussehen der Seite.

Vordefinierte Font-Stacks für gängige Schriften finden Sie in meinem Artikel CSS-Font-Stacks.

Beispiel: Font-Stack für Garamond


font-family:  Garamond, "Apple Garamond", "ITC Garamond Narrow", "URW Palladio L", Palatino, Palladio, "EB Garamond", serif;

Subsetting

Beim Subsetting werden aus einer Schrift nur die benötigten Zeichen genommen und in einer neuen Schrift-Datei verpackt.
Das ist vor allem bei Icon-Fonts sinnvoll, von denen nur wenige Zeichen verwendet werden.

Auf dieser Seite verwendetes Subset von FontAwesome (anstatt 150 kB nur ca. 4 kB)

Eine Anleitung dazu gibt es meinem Artikel Webfont Optimierung durch Subsetting.

MathML verwenden

Can I use: MathML

Anstatt unzähliger Bilder mit Formeln können Sie MathML verwenden.
Die meisten modernen Browser können das ohne Hilfsmittel darstellen.

Vorteile

Sie können bei MathML jederzeit über CSS die Schriftart wechseln und das Design ändern.
Formeln brauchen wesentlich weniger Speicher als die Darstellung mit SVG.
Gegenüber PNG stufenlos skalierbar.

Dabei sollten Sie bei komplexeren Formeln darauf achten, dass Sie einen passenden Font einsetzen, der alle Zeichen darstellen kann.

Ein passender CSS-Font-Stack ist z. B.

font-family: "STIX Two Math", DejaVuMathTeXGyre-Regular, "DejaVu Math TeX Gyre", "Cambria Math", serif;

Oft sind diese Font-Dateien relativ groß. Hier am besten ausprobieren, ob die Darstellung auch ohne fehlerfrei ist.

Ein funktionsfähiges Subsetting ist mir damit noch nicht gelungen.

Beispiel


<math xmlns="http://www.w3.org/1998/Math/MathML">
  <mstyle displaystyle="true">
    <mrow class="formel">
      <mi>F</mi>
      <mo stretchy="false">(</mo>
      <mi>ω<!-- ω --></mi>
      <mo stretchy="false">)</mo>
      <mo>=</mo>
      <mfrac>
        <mn>1</mn>
        <msqrt>
          <mn>2</mn>
          <mi>π<!-- π --></mi>
        </msqrt>
      </mfrac>
      <munderover>
        <mo>∫<!-- ∫ --></mo>
        <mrow class="formel">
          <mo>−<!-- − --></mo>
          <mi mathvariant="normal">∞<!-- ∞ --></mi>
        </mrow>
        <mrow class="formel">
          <mi mathvariant="normal">∞<!-- ∞ --></mi>
        </mrow>
      </munderover>
      <mi>f</mi>
      <mo stretchy="false">(</mo>
      <mi>t</mi>
      <mo stretchy="false">)</mo>
      <msup>
        <mrow class="formel">
          <mi mathvariant="normal">e</mi>
        </mrow>
        <mrow class="formel">
          <mo>−<!-- − --></mo>
          <mi>i</mi>
          <mi>ω<!-- ω --></mi>
          <mi>t</mi>
        </mrow>
      </msup>
      <mspace width="thinmathspace" />
      <mrow class="formel">
        <mi mathvariant="normal">d</mi>
      </mrow>
      <mi>t</mi>
    </mrow>
  </mstyle>
</math>

Ergebnis und Vergleich im Browser
	MathML	SVG	PNG
	$F (ω) = \frac{1}{\sqrt{2 π}} \int_{- \infty}^{\infty} f (t) e^{- i ω t} d t$	$Formel als SVG-Bild$	$Formel als PNG-Bild$
Optimierte Größe	ca. 0,8 KB	ca. 7 KB	ca. 2 KB

Die PNG-Datei hat etwas größere Original-Maße, damit ist die Darstellung im Browser etwas besser.

Andere Schrift per CSS

Sollten Ihre Formeln nicht korrekt dargestellt werden, testen Sie eine Schrift die mehr Chars, Glyphen bzw. Layout Features enthält.

Ein einfacher Wechsel der Schrift reicht für eine Anpassung an andere Seiten-Designs
	DejaVu Math TeX Gyre (oft installiert)	STIX Two Math Regular	Garamond Math	Cambria Math (Windows)
	$\sqrt{a - \frac{(b - x)^{2}}{(b + x)^{2}}}$	$\sqrt{a - \frac{(b - x)^{2}}{(b + x)^{2}}}$	$\sqrt{a - \frac{(b - x)^{2}}{(b + x)^{2}}}$	$\sqrt{a - \frac{(b - x)^{2}}{(b + x)^{2}}}$
Größe der Font-Datei (woff2)	170 KB	530 KB	398 KB	(System)
Chars	2111	4604	2536	3261
Glyps	4237	6608	5154	5224
Layout Features	3	29	15	24

Zum Erstellen der Formeln gibt es zahlreiche Editoren (auch online), mit denen sich Formeln einfacher und mit Vorschau erstellen lassen.

Fallback

Sollten Sie für Browser entwickeln dürfen die MathML nicht unterstützen, gibt es verschiedene Ansätze für ein Fallback, die auf dem MDN beschrieben werden.

Einfachere Schreibweise

Wer schon Erfahrung z. B. mit TeX / LaTeX hat, für den gibt es die Möglichkeit Formeln im TeX-Format einzugeben.
Das ist besonders praktisch, wenn die Formeln schon in TeX / LaTeX vorliegen.

Vorhergehendes Beispiel sieht dann folgendermaßen aus:

\sqrt { a-\frac { (b-x)^{ 2 } }{ (b+x)^{ 2 } } }

Diese können Sie dann z. B. mit einer Bibliothek wie MathJax automatisch in HTML+CSS, MathML oder SVG im Browser umwandeln lassen.

Grafiken optimieren

Eine umfassendere Übersicht zu den Grafikformaten für das Web habe ich hier zusammengestellt.

Informatioen zur allgemeinen Optimierung von Grafiken:

Grafiken allgemein

Je nach Anwendungsfall sollten Sie unterschiedliche Grafik-Formate verwenden.

Metadaten reduzieren

Viele spezielle Metadaten die sich z. B. auf Fotoaufnahmen beziehen, oder Vorschaubilder sind auf Webseiten oft überflüssig. Diese können Sie z. B. mit dem

ExifTool löschen oder bearbeiten.

Größe anpassen

Jede Bitmap-Grafik (JPEG, PNG, WebP, AVIF usw.) sollte auf die Größe verkleinert werden, in der sie maximal im Browser angezeigt wird.
Größere Bilder passt ein Browser zwar an, dennoch haben wir zuvor überflüssige Daten übertragen.

Lazy-Loading

Versehen Sie (fast) jedes Bild mit ein einem Attribut <img loading="lazy" …>
Dies weißt den Browser an, Bilder erst dann zu laden, wenn diese in das Sichtfeld (Viewport) im Browser kommen.

Bilder die sofort bei Seitenaufruf sichtbar sind, sollten dieses Attribut nicht haben. Das Verzögert unnötig das Laden der Seite (Largest Contentful Paint & First Contentful Paint)

Laden von verschiedenen Bildgrößen mit Media Queries

Für SVG-Bilder sind verschiedene Auflösungen überflüssig.

HTML

Die einfachste Variante ist direkt im picture-Tag an die Bildschirmgröße angepaßte Bilder anzugeben.


<picture title="Ein Bild mit schönen Blumen">
	<source media="(min-width:1200px)" srcset="/Blumen_gross.jpg">
	<source media="(min-width: 800px)" srcset="/Blumen_mittel.jpg">
	<source media="(min-width: 480px)" srcset="/Blumen_klein.jpg">
	<img src="/Blumen.jpg" alt="Ein Bild mit schönen Blumen">
</picture>

SVG

Können Sie im Grunde genauso wie eine HTMl-Datei komprimieren, da es sich hier um eine XML-Datei handelt. Zusätzlich läßt sich z. B. Änderung von Farbangaben oder Rundung von Zahlen die Dateigröße verkleinern.

Ein Tool, das Ihnen dabei hilft ist z. B. SVGOMG.
Ein Tipp hierzu: Verringern Sie die Beiden Slider für precision so lange, bis Sie Unterschiede im Bild erkennen. Ist dies der Fall gehen Sie auf den vorherigen Wert zurück.

Bild mit einem Teile der Einstellungsoptionen von SVGOMG — SVGOMG: Precision Slider

JPEG

In diesem Format liegen wohl immer noch die meisten Bilder vor. Wenn Sie diese automatisch optimieren möchten, verwenden Sie die Tools:

JPEG-Dateien optimieren mit jpegoptim für verlustfreie Optimierung
JPEG-Dateien komprimieren mit jpeg-recompress für verlustbehaftete Optimierung
Metadaten bearbeiten mit dem ExifTool zum Entfernen und Anpassen von überflüssigen Metadaten.

PNG

Viele Bilder mit einfachen Motiven oder Transparenz liegen in diesem Format vor. Wenn Sie diese automatisch optimieren möchten, verwenden Sie die Tools:

PNG–Dateien optimieren mit pingo für eine verlustfreie Optimierung
PNG–Dateien komprimieren mit pngquant mit Umwandlung in ein 6-Bit-PNG inklusive Alphakanal.
Metadaten bearbeiten mit dem ExifTool zum Entfernen und Anpassen von überflüssigen Metadaten.

WebP, HEIC und AVIF

Diese Formate stammen ursprünglich aus der Video-Technik. Da hier angenommen wird, dass der Betrachter genaue Informatioen durch die Bewegung nicht wahrnimmt, spiegelt sich dies in diesen Formaten wieder – feine Details gehen verloren.
D. h. wenn die Kompression zu hoch ist, wirken die Bilder oft etwas matschig. Grafiken mit feinen Details oder Text werden meist unbrauchbar.

Bild mit feinen Linien und Text mit AVIF komprimiert. Das ist ca. die halbe Dateigröße der Original-PNG-Datei

Hier läßt sich oft nur Ausprobieren was sinnvoller ist: Kleinere Datei oder bessere Qualität.

GIF

Diese spielen als reine Grafik kaum noch eine Rolle. Für indizierte Grafiken ist PNG wesentlich effektiver.

Für Animationen reichen in einfacheren Fällen CSS oder SVG aus.

Von GIF zu HTML5-Video wechseln

Anstatt GIF-Animationen verwenden Sie besser HTMl5-Videos.
Für sofort startende Endlos-Schleifen mit den Attributen:
<video loop muted autoplay … >

Muted ist nötig um in Chromium-Browsern das Video sofort abzuspielen. Autoplay hat sonst keine Wirkung.

Größenvergleich
GIF Animation	WebM Video

291 KB	22 KB
Quelle: Wikimedia Commons Newtons cradle animation book Creative Commons Attribution-Share Alike 3.0 Unported license.	VP9 \| VBR: 100/200/300 kBit/s Farbmodus: YUV 4:2:0 12 bpp \| Graustufen-Codierung

Hier sparen Sie oft mehre MB, wenn Sie GIF durch ein modernes Video-Format ersetzen.

Audio und Video

Videos (falls vorhanden) verursachen einen Großteil des Datenvolumens einer Webseite.
Erschreckend in diesem Zusammenhang ist, dass, laut HTTPArchive, die Video-Größe im Mobilen-Bereich, die für den Desktop übersteigt:
HTTPArchive: Video-Bytes.

Ihre Original-Dateien sollten Sie immer in besserer Qualität speichern, als die spätere Zieldatei.
Also kein SD-Video aufnehmen und sich später ärgern, dass die Auflösung oder die Bitrate so gering ist. Verkleinern geht immer!

Das gleiche gilt für Audio-Aufnahmen: Artefakte (Störgeräusche) verursacht durch zu niedrige Bitrate oder Samplerate / Bittiefe lassen sich kaum mehr entfernen.

HTML5-Video-Formate verwenden

Formate wie FLV (Flash) oder AVI sollten längst entsorgt sein.
GIF-Videos kann ich keinesfalls empfehlen – egal wie kurz die Spielzeit ist, die Datei wird zu groß.

Aktuelle Formate geordnet nach Browser-Unterstüzung:

MP4: MPEG4-Dateien mit H264 video codec + AAC audio codec
WebM: WebM-Dateien mit VP8 oder VP9 video codec + Vorbis audio codec
Ogg Ogg-Dateien mit Theora video codec + Vorbis audio codec

Um maximale Kompatiblität zu gewährleisten, immer die Kombinationen aus Video- und Audio-Codecs beibehalten!

Andere Formate werden nur von wenigen Browsern unterstützt. Diese können Sie alternativ als Download anbieten.

Optimierung

Die Optimierung von Videos ist eine Welt für sich. Hier hängt viel von der Qualität des Ausgangsmaterials, der gewünschten Zieldatei und unzähligen Parametern der verschiedenen Encoder ab. Zudem gibt es auch noch eine oder mehrere Tonspuren, verschiedene Container-Formate, Untertitel …

Grundlegendes

Wie bei Bildern: Reduzieren Sie das Bild-Rauschen. Das ergibt kleinere Dateien.
Die Auflösung dem Ziel Anpassen. Eine Vorlesung ist kein Erklär-Video mit vielen Bild-Details und erst recht kein 4k-Spielfilm.
Für die Tonspuren auch den nächsten Abschnitt über Audio-Formate beachten.

Audio Formate

Original-Audio-Aufnahmen sollten in einer hohen Qualität gespeichert werden.

Verlustfreies Audio-Format
Bittiefe mindestens 24 Bit
Abtastrate mindestens 48 kHz

Dadurch bleibt die Qualität auch bei einer Bearbeitung der Dateien erhalten.
Immer erst im letzten Arbeitschritt in ein verlustbehaftetes Format konvertieren.

WAV-Dateien

Auf keinen Fall WAV-Dateien zum Download oder Abspielen anbieten.
WAV ist ein unkomprimiertes Format, welches sehr große Dateien ergibt.

Die Dateigröße läßt sich für WAV-Dateien einfach berechnen:

$\frac{Zeit [s] \times Kanäle [Anzahl] \times Abtastrate [kHz] \times Auflösung [Bit]}{8000} = Dateigröße [MB]$

Dateigröße bei konstanter Bitrate (CBR)

Die Bitrate ist die Datenmenge die pro Sekunde gespeichert mit.
Diese Angabe ist für verlustbehaftete Audio-Formate (MP3, AAC …) üblich.

$\frac{Zeit [s] \times Bitrate [kBit/s]}{8} = Dateigröße [KB]$

Bei VBR-Kodierten Dateien läßt sich die Größe nicht vor der Kodierung berechnen.

Eine Stunde Audio-Streaming oder der Download einer Audio-Datei mit gleichen Dauer sind bei CBR mit 128 kBit/s schon ca. 57 MB Datenvolumen!

Gebräuchliche Audio-Formate

FLAC: Höchste Qualität bei verlustloser Kompression.
OPUS: Verlustbehaftet. Sehr hohe Qualität, auch bei niedrigen Bitraten. Mit spezieller Eignung für Echtzeitübertragungen über das Internet.
OGG Vorbis: Verlustbehaftet. Weniger Artifakte als MP3.
Gefällt mir klanglich besser als AAC.
AAC: Verlustbehaftet. Weniger Artifakte als MP3.
MP3: Verlustbehaftete, komprimierte Audio-Dateien.

Samplerate / Abtastrate

Die halbe Samplerate ist die maximale Ton-Frequenz, die wiedergegeben werden kann (Nyquist-Shannon-Abtasttheorem).

Sinnvolle und übliche Abtastraten
Sprachaufnahme (Diktiergerät)	Hörbuch / Podcast	Kassetten	Audio-CD	DAT / DVD	Blue-Ray
8 – 12 kHz	22 kHz	32 kHz	44,1 kHz	48 kHz	96 – 192 kHz

Samplingtiefe / Bittiefe

Die Bittiefe bestimmt den Dynamikumfang einer Audio-Datei.
Dieser Wert beeinflußt die Qualität mehr als die Abtastrate.

Die Schmerzgrenze für das menschliche Gehör liegt bei ca. 120 – 130 dB.

Sinnvolle und übliche Bittiefen
	Telefon	CD		DVD-Audio
Bittiefe	8	16	20	24	32
SNR (dB)	48,16	96,33	120,41	144,49	192,66

Je höher die Bittiefe, dasto feiner kann die Musik und leise Passagen aufgelöst werden.

Zusammenhang Abtastrate / Bittiefe

Die Kurven sollen nur das Prinzip (Pulse-Code-Modulation PCM) darstellen. Genauigkeit ist hier nicht entscheidend.

Zu den Kurven:

Die Höhe der Kurve entspricht der Lautstärke.
Die senkrechten Striche stellen die Abtastrate dar.
Die wagrechten Linine die Bittiefe.
Die Schnittpunkte (rot) aus den Beiden ergeben die Information die gespeichert wird.

Die roten Pukte sollten möglichst genau auf der Kurven liegen. Umso besser dies gelingt und umso mehr auf der Kurve liegen, desto besser ist die Audio-Qualität.
Alles andere muss durch Filter und Berechnungen ausgegelichen werden.

Hier wird eine Kurve mit einer niedrigen Bittiefe abgetastet. Viele Punkte liegen neben der Kurve. Das Ganze ist sehr ungenau.
Eine höhere Abtastrate bringt keine große Verbesserung. Hier liegen einfach mehr Punkte neben der Kurve.
Erhöhen wir hingegen die Bittiefe, bekommen wir genauere Daten.
Hier wirkt sich auch eine höhere Samplerate positiv aus.
Bei sehr leisen Tönen, ist bei einer geringen Bittiefe, keine genaue Reproduktion mehr möglich. Ganz leise Töne können dabei verloren gehen.
Erhöhen wir hingegen die Bittiefe, wird es wesentlicher genauer.
Generiert mit gnuplot. Vorlage: Wikimedia Commons: 4-bit-linear-PCM (Creative Commons Attribution-Share Alike 3.0 Unported)

Beispiele

Sprache in 22 kHz, 16 Bit, Mono
Codec	Verlustfrei	CBR 32 kBit/s	VBR 16 kBit/s
WAV	930 KB
FLAC	501 KB
OPUS		86 KB	43 KB
Vorbis		90 KB
AAC		86 KB	43 KB
MP3		85 KB

OPUS liefert selbst bei extrem niedrigen Bitraten noch gute Ergebnisse ab.
Höhere Bitraten liefern bei allen Codecs eine bessere Qualität.

(Größen-) Optimierung

Senken Sie das Hintergrundrauschen (viele Audio-Programme haben hierfür entsprechende Funktionen).
Bei reinen Sprachaufnahmen hilft auch eine Gate-Funktion.
Reduzieren Sie die Samplingrate. Ein Podcast muss nicht in CD-Qualität (44,1 kHz) wiedergegeben werden, hier reichen auch 22 – 32 kHz.
Die Bittiefe sollte maximal 16 Bit betragen (CD). Bei reinen Sprachaufnahmen können auch 8 Bit reichen.
Eine einfache Lesung, oder Ahnliches, braucht meist keinen Stereo-Ton. Wandeln Sie diese in Mono um.
Nutzen Sie Variable-Bitraten. Das passt die Bitrate der Datei dynamisch an das Audio-Material an und erzeugt (meistens) eine kleinere Datei.

Fallback

Hier ist es, je nach Anwendungsfall, sinnvoll zweierlei Formate anzubieten.


<audio controls preload="none">
	<source src="/Bestes_Lied.opus" type="audio/ogg";codecs="opus">
    <source src="/Bestes_Lied.ogg" type="audio/ogg";codecs="vorbis">
    <source src="/Bestes_Lied.aac" type="audio/aac">
    <source src="/Bestes_Lied.mp3" type="audio/mpeg";codecs="mp3">
    Download als <a href="/Bestes_Lied.mp3">MP3</a> oder <a href="/Bestes_Lied.ogg">OGG</a>.
</audio>

Kein Preload und kein Autoplay verwenden

Vor allem im Mobilem-Bereich ist es wenig erfreulich, wenn auf jeder Seite Video oder Audio gleich startet (Autoplay) oder per Preload im Hintergrund heruntergeladen wird. Beides saugt das Datenvolumen des Seitenbesuchers leer.
Zudem braucht das unnötig Energie und erhöht den CO₂-Fussabdruck Ihrer Seite.

Auf allen anderen Webseiten ist das genauso lästig. Nicht umsonst gibt es unzählige Browser-Add-ons, die diese Unsitte deaktivieren.

Autoplay / Preload ist nur auf wenigen Seiten akzeptabel. Vor allem wenn das Ganze eine künstlerische Darbietung ist.

Preload findet normalerweise immer statt. Darum das attribut auf none setzten: preload="none".
Autoplay und kein Preload funktionieren zusammen nicht! Hier hat Autoplay Vorrang.

Verzichten Sie auf folgende Attribute bei Audio und Video:


<video autoplay  preload="auto" …>
<audio autoplay  preload="auto" …>

PDFs optimieren

Wie Sie PDFs optimal erstellen, habe ich in dem Artikel Dokumentenoptimierung - PDFs optimieren näher erklärt.

PDFs verkleinern

Wenn Sie die Originale zu den PDFs nicht haben, oder nicht bearbeiten können, lassen diese sich oft nachträglich verkleinern.
Das ist auch nützlich wenn Ihre Software PDFs nicht optimal exportiert.
Hier sind Einsparungen, bei der Dateigröße, von bis zu > 90 % möglich.

Lazy-Loading auch für iframe

Nicht nur Bilder auch PDFs (und alles anderes) die in iframes eingebettet sind lassen sich verzögert laden:

<iframe loading="lazy" src="/Anleitung.pdf" type="application/pdf" …>

Downloads

Moderne Archiv- und Kompression-Formate verwenden

Formate wie 7z ermöglichen wesentlich kleinere Archive wie das oft werwendete ZIP.
Gerade bei großen Downloads können Sie hier eine große Menge Daten für Speicherplatz und bei der Datenübertragung einsparen.

Wie gut sich Dateien komprimieren lassen, hängt vom Dateiformat ab. Dateien die von Grund auf optimiert sind (PDF, JPEG, PNG …) lassen sich meist kaum komprimieren.

Beispiel

Als Beispiel hat der Download der gesamten Schrift-Family Raleway als ZIP-Archiv ca. 3,4 MB.

Zum Vergleich nehme ich die frei verfügbare, kostenlosen Programme 7z und PeaZIP.

	Unkomprimiert	Original ZIP-Archiv	Windows ZIP-Archiv	7z	ZPAQ (PeaZIP)	Brotli (PeaZIP)
Parameter			festeingestellt: deflate	Ultra / LZMA2	Ultra	TAR / Ultra
Größe	3,8 MB	3,4 MB	1,8 MB	750 kB	803 KB	935 KB

Selbst der Windows ZIP-komprimierte Ordner ist wesentlich kleiner als der Original-Download.
Die ZIP-Datei hat hier im ungünstigen Fall die 5-fache Dateigröße im Vergleich zu 7z

Verzeichnisse optimieren

Komprimieren Sie ganze Verzeichnisse, für den späteren Download, achten Sie daraus, dass keine betriebssystem typischen Zusatzdateien oder versteckte Dateien mitgeliefert werden.
Auch Backup-Dateien oder versionierte Dateien sind meist überflüssig.

Beispiele (kleine Auswahl)

Allgemein

Dateien z. B. mit den Dateiendungen BAK (Backup) oder TMP (temporäre Datei)
Versteckte Dateien und Verzeichnisse über Attribute (hidden).
Leere Verzeichnisse oder 0 Byte Dateien.

LINUX

Versteckte Dateien und Verzeichnisse die mit einem Punkt . beginnen.

Windows

thumbs.db (Vorschau-Bilder für den Datei-Explorer)

Mac-OS

.DS Store (speichert benutzerdefinierte Attribute eines Ordners)
__MAXOSX (zusätzliche strukturierte Daten)

Wollen Sie nicht die Einstellungen in Ihrem System ändern, um alles zu sehen, dann löschen Sie die entsprechenden Dateien und Verzeichnisse in der GUI Ihres Archiv-Programms.

Grafiken vor dem Archivieren optimieren

Wie im Abschnitt Grafik schon beschrieben, alle Grafiken vor dem Archivieren optimieren. Das ergibt kleinere Archive, da die Kompression die Grafiken meistens nicht mehr kleiner bekommt.

CDN – Content Delivery Network

Datenmenge

Ein CDN hält die gespeicherte Datenmenge auf Ihrem Server klein und bei allen anderen, die die gleiche Datei per (dem gleichen) CDN auslieferen.
Für die Besucher Ihrer Seite ändert sich an der empfangenen Datenmenge dadurch nichts.

CSS Animationen anhalten

Das spart zwar kein Datenvolumen, dafür senkt es die CPU-Auslastung duch den Browser, wenn das Fenster (Tab) nicht aktiv ist.

Einfaches Beispiel

Hier wird die CSS-Animation beim Verlassen des Fensters / Tab pausiert und bei aktivem Fenster / Tab wieder fortgesetzt.

jQuery


$(window).focus(function() {
		$("anim-selector").css("animation-play-state", "running")
});
$(window).blur(function() {
		$("anim-selector").css("animation-play-state", "paused")
});

Mehr dazu im Artikel Energie Sparen bei CSS-Animation (lazy-anim).

Webseiten – Datenvolumen optimieren

Die Größe von Websites steigt jährlich an

Content-Management-System (CMS)? Schön – wenn Sie wissen was Sie tun …

Analyse der Datenmenge

Einfache Analyse des CO2–Fußabdrucks

HTTP-Kompression

Quelltexte optimieren

HTML-Quelltext

CSS-Quelltext

Externe CSS-Dateien oder von CDN-Servern

Dateien zusammenfassen!

JavaScript-Quelltext

Externe JavaScript-Dateien oder von CDN-Servern

Dateien zusammenfassen!

Schriften optimierenA

Systemschriften verwenden

Ersatzschrift bei den Systenschriften suchen

Moderne Schrift-Formate verwenden

Fallback für ältere Browser

Variable Fonts einsetzen

Font-Stacks

Beispiel: Font-Stack für Garamond

Subsetting

MathML verwenden

Beispiel

Andere Schrift per CSS

Fallback

Einfachere Schreibweise

Grafiken optimieren

Grafiken allgemein

Metadaten reduzieren

Größe anpassen

Lazy-Loading

Laden von verschiedenen Bildgrößen mit Media Queries

HTML

SVG

JPEG

PNG

WebP, HEIC und AVIF

GIF

Von GIF zu HTML5-Video wechseln

Audio und Video

HTML5-Video-Formate verwenden

Optimierung

Audio Formate

WAV-Dateien

Dateigröße bei konstanter Bitrate (CBR)

Gebräuchliche Audio-Formate

Samplerate / Abtastrate

Samplingtiefe / Bittiefe

Zusammenhang Abtastrate / Bittiefe

Beispiele

(Größen-) Optimierung

Fallback

Kein Preload und kein Autoplay verwenden

PDFs optimieren

PDFs verkleinern

Lazy-Loading auch für iframe

Downloads

Moderne Archiv- und Kompression-Formate verwenden

Beispiel

Verzeichnisse optimieren

Beispiele (kleine Auswahl)

Grafiken vor dem Archivieren optimieren

CDN – Content Delivery Network

Datenmenge

CSS Animationen anhalten

Einfaches Beispiel

jQuery

Mehr zum Thema

Weiterführende Informationen

Audio und Video

Video

Audio

Schriften

Einfache Analyse des CO₂–Fußabdrucks