Grüner Globus vor einem offenen Fenster.

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.

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.

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 Qualitä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 …

Achtung Template!

Achten Sie darauf was Seiten-Templates als Ergebnis liefern.
Produzieren diese Quelltexte in der Art (Beispiel von WordPress.com):
<tag class="page-root de page-template page-template-page-landpack page-template-page-landpack-php page page-id-2403 wp-embed-responsive is-style-section-default is-style-gray-100-mono">
<tag class="lp-block lp-section lp-section--is-breakpoint lp-section--is-breakpoint-S lp-section--is-breakpoint-M lp-section--is-breakpoint-L lp-section-themes-collage lp-pt-72 lp-pb-0 is-style-gray-100-mono">
dann suchen Sie sich eines das weniger (oder kürzere) Klassen zur Darstellung eines Elementes benötigt.

Zudem haben einige Templates die unschönen Eigenheiten zu viele zusätzliche Schriften und / oder veraltete JavaScript-Bibliotheken nachzuladen.

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 abgerufene Datei, benötigt diese zusätzliche Datenmenge.
100 abgerufene Dateien ergeben schon einen Overhead von ca. 40 KB!

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

Einfache Analyse des CO2–Fußabdrucks

Unterschiedlichste Dienste im Internet bieten eine Analyse des CO2–Fußabdrucks einer Webseite (nur eine Seite) an. Eine ausführliche Beschreibung finden Sie in meinem Artikel Websites und deren CO2–Fußabdruck.
Testergebnis Website Carbon Calculator für die Seite www.thorsten-willert.de
Ergebnis von Websitecarbon für diese Seite.

Eine Optimierung der Website verkleinert nicht nur den CO2–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
Die HTTP-Kompression ist nur bei Text-Dateien sinnvoll:
  • HTML
  • CSS
  • JavaScript
  • SVG
  • JSON
  • ...

Wenn Sie Möglichkeit haben, stellen Sie am HTTP-Server das Kompressionsverfahren Brotli ein. Dies ermöglicht eine schnellere und ca. 20 % höhere Kompressionsrate gegenüber Gzip.

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 der externen Dateien nach deren Optimierung 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.

clip-path / shape-outside

Hier sind oft Angabe wie:
clip-path: polygon(0.48076921701431274% 16.826923370361328%, 0.8901118636131287% 11.866140365600586% …
zu sehen.
Streichen Sie die unnötigen Nachkommstellen!
Solche Angaben lassen sich meistens auf maximal zwei Nachkommastellen aufrunden:
clip-path: polygon(0.48% 16.83%, 0.89% 11.87% …
Oft werden diese auch gar nicht benötigt:
clip-path: polygon(0% 17%, 1% 12% …

CSS-Dateien sinnvoll zusammenfassen!

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

Styles oder Elemente die nur auf wenigen Seiten Verwendung finden, sollten auch nur auf diesen geladen werden.

Kein Inline-CSS

Schon gar keines, das sich auf allen Seiten widerholt.
Benutzen Sie stattdessen eine externe CSS-Datei. Diese kann der Browser im Cache halten und muss nicht bei jeder Seite immer wieder die gleichen CSS-Daten einlesen bzw. übertragen.
Inline-CSS reduziert die auch Sicherheit einer CSP (Content Security Policy)!

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.

JavaScript-Dateien sinnvoll zusammenfassen!

Um Server-Anfragen zu minimieren sollten auch JavaScript-Dateien möglichst 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.

JavaScript-Dateien oder Funktionen die Sie nur auf bestimmten Seiten brauchen, auch nur auf diesen laden.

Kein Inline-JavaScript

Hier gilt das Gleiche wie für CSS.
Inline-JavaScript Reduziert die auch Sicherheit einer CSP (Content Security Policy)!

Schriften optimieren

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

Variable Fonts ermöglichen das flexible Einstellen von verschiedenen typografischen Eigenschaften einer Schrift.
Die Dateigröße eines Variable Fonts ist meistens kleiner als die einzelnen Schriftschnitte 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 ( ω ) = 1 2 π 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 Test sollte immer mit verschiedenen Browsern auf allen gängigen Betriebsystemen erfolgen. Für diesen Zweck gibt es diverse Online-Dienste.

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)
a(bx)2(b+x)2 a(bx)2(b+x)2 a(bx)2(b+x)2 a(bx)2(b+x)2
Größe der Font-Datei (woff2) 170 KB 530 KB 398 KB (System)
Chars 2111 4604 2536 3261
Glyphs 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.
Auch verschiedene CMS-Erweiterungen ermöglichen die direkte Eingabe von LaTeX-Formeln.

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

    Bitmap und SVG kombinieren

    Wandeln Sie eine SVG die Bitmap-Bild(er) enthält nicht gleich komplett in SVG oder ein Bitmap-Format (PNG, JPEG, WebP …) um:
    • als reine SVG wird die Datei extrem groß, da die Bitmap base64-kodiert in der SVG-Datei gespeichert wird (ca. 30 % größer wie eine BMP-Datei).
    • als reine Bitmap gehen Ihnen alle Vorteile einer SVG-Grafik verloren.
    Verlinken Sie stattdessen in der SVG-Datei auf die Bitmap-Datei:
    
      <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" …
      <image x="5" y="5" width="1024" height="720" href="/Beispiel.jpg"/>
      …
      

    JPEG

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

    PNG

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

    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 23 KB
    Quelle: Wikimedia Commons Newtons cradle animation book
    Creative Commons Attribution-Share Alike 3.0 Unported license.
    AV1 | Konstante Qualität | Quantizer: 40
    Farbmodus: YUV 4:2:0 Planar 12 bpp | Graustufen-Codierung
    Hier sparen Sie oft mehrere MB, wenn Sie GIF-Animationen 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.
    • Die Einstellung für Konstante-Qualität liefert oft das beste Bild und kleine Dateien.
    • Wenn das Video keine Tonwiedergabe hat, löschen Sie die Audiospur aus der Datei.
    • 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:

    Zeit [s] × Kanäle [Anzahl] × Abtastrate [kHz] × 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.

    Zeit [s] × 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

    XMedia-Recode: Parameter für OPUS mit 16 Kbit/s

    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 CO2-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)
    • Alternate Data Streams (ADS)
    Mac-OS
    • .DS Store (speichert benutzerdefinierte Attribute eines Ordners)
    • __MAXOSX (zusätzliche strukturierte Daten)
    • resource forks (in älteren Betriebsystem-Versionen)
    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).

    Mehr zum Thema

    Weiterführende Informationen

    Audio und Video

    Video

    Audio

    Schriften


    Titelbild: Erstellt mit Playground AI.
    Ultra Lighting | pndm | Prompt: earth globe, green, nature | PG: 16 | Stable Diffusion XL