Prüfpunkt co2.fonts.vieleDatenmenge je Aufruf
Wie viele Schriftdateien braucht eine Website?
Eine Schriftdatei enthält meist einen Schnitt einer Schrift: normal, fett, kursiv oder halbfett. Themes laden oft alle Schnitte, die eine Schrift anbietet, auch wenn die Seite zwei davon zeigt. Die Prüfung zählt die übertragenen Schriftdateien und ihre KB. Sind es mindestens 6 Dateien mit zusammen mindestens 300 KB, entsteht der Befund; er nennt daneben, wie viele Schnitte die Seite benutzt.
Webschriften stehen auf fast jeder Website, WOFF2 ist das Format
Laut Web Almanac 2024 nutzen rund 87 % aller Websites Webschriften. WOFF2, das komprimierte Format für das Web, steht auf 81 % der Seiten am Desktop und 78 % am Telefon. Variable Schriften sind von 28 % der Seiten am Desktop im Jahr 2022 auf 33 % im Jahr 2024 gestiegen. Immer mehr Websites liefern ihre Schriften selbst aus: Am Telefon tun das 34 % ausschließlich, 2022 waren es 28 %. Den größten Teil der Schriften im Netz liefert weiter Google Fonts, auf 57 % der Websites am Desktop.
Selbst ausgelieferte Schriftdateien sind oft doppelt so groß wie bei Google
Eine WOFF2-Datei von Google Fonts wiegt im Median 16 KB, eine selbst ausgelieferte 39 KB; ab dem Median sind die eigenen Dateien laut Web Almanac 2024 im Schnitt doppelt so groß. Die Autoren vermuten als einen Grund, dass Google Untermengen ausliefert, während selbst ausgelieferte Dateien oft die ganze Schrift enthalten. Eine vollständige Schriftdatei kann mehr als 200 KB haben; auf die Zeichen des Englischen gekürzt, schätzen die Autoren rund 12 KB. Am Telefon lädt eine Seite im Median 109 KB Schriften, jede zehnte 399 KB oder mehr. Wer Schriften selbst ausliefert, nimmt deshalb die Untermenge mit.
Symbole als SVG ersparen eine ganze Schriftdatei
Symbolschriften wie Font Awesome laden eine Schriftdatei für ein paar Pfeile und Telefonhörer. Unter den zehn häufigsten Schriften mit font-display: block, bei denen der Browser bis zum Laden der Datei nichts zeigt, sind laut Web Almanac 2024 nur Symbolschriften, angeführt von Font Awesome. Der Grund: Eine Ersatzschrift kann ein Symbol nicht darstellen. Die Autoren raten, Symbole in den meisten Fällen als SVG einzubinden. Ein SVG im Dokument lädt keine weitere Datei und erscheint zusammen mit dem Text.
Wie die Prüfung zählt
Als Schriftdatei zählt jede übertragene WOFF2-, WOFF-, TTF-, OTF- oder EOT-Datei. Für die benutzten Schnitte liest die Prüfung bei Überschriften der Stufen 1 bis 3, Absätzen, Links, Listeneinträgen, Textabschnitten, Knöpfen, Beschriftungen und Tabellenzellen die erste Schriftfamilie mit Gewicht und Stil, bei den ersten 400 dieser Elemente. Der Befund nennt beide Zahlen, etwa 9 Dateien für 3 benutzte Schnitte.
Was Schriften außer Bytes kosten
Schriftdateien können die Textanzeige verzögern: Fehlt font-display, halten die meisten Browser den Text bis zu drei Sekunden zurück, bis die Schrift geladen ist, und zeigen danach eine Ersatzschrift. Das meldet der Prüfbereich Performance gesondert. Wenige, kleine Schriftdateien helfen dem CO₂-Wert und der Ladezeit zugleich.
Variable Schriften und Untermengen
Eine variable Schrift enthält alle Gewichte in einer Datei. Statt einer Datei je Gewicht lädt die Seite eine, die oft so groß ist wie zwei bis drei einzelne Schnitte. Eine Untermenge auf die Zeichen der Sprachen der Website, etwa Latein mit Umlauten, macht die Datei weiter kleiner.
Beispiele
Einbindung
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,300;1,400;1,600;1,700">@font-face {
font-family: "Open Sans";
src: url("/schriften/open-sans-latin-var.woff2") format("woff2");
font-weight: 300 800;
font-display: swap;
}So gehen Sie es an
- Stellen Sie fest, welche Schnitte die Seite zeigt: meist normal und fett, manchmal kursiv.
- Entfernen Sie im Theme oder in der Schrifteinbindung alle übrigen Schnitte.
- Verwenden Sie, wo möglich, eine variable Schrift im Format WOFF2.
- Beschränken Sie die Zeichen auf die Sprachen der Website: Laden Sie eine Untermenge herunter (bei Google Fonts etwa „latin“) oder schneiden Sie die Schrift mit einem Werkzeug wie pyftsubset zu. Mehrere Untermengen verbinden Sie mit unicode-range.
Tipps aus der Praxis
- Laden Sie bei variablen Schriften nur die Achsen und Bereiche, die das Design nutzt, etwa die Gewichte 400 bis 700 statt 100 bis 900. Die Web Sustainability Guidelines empfehlen das ausdrücklich, um die Datei kleiner zu machen.
- Steht im CSS einer Schrift für Fließtext font-display: block, wartet der Text auf die Datei. Mit swap zeigt der Browser sofort eine Ersatzschrift; laut Web Almanac 2024 nutzen rund 45 % der Seiten swap.
- Ein Kompromiss, der die Marke sichtbar hält: die eigene Schrift für Überschriften, eine Systemschrift für den Fließtext. Der meiste Text braucht dann keine Datei.
- Geben Sie im Filterfeld des Netzwerk-Reiters resource-type:font ein. Dann stehen alle Schriftdateien mit Name und Größe untereinander, und doppelt geladene Schnitte fallen auf.
Weiter im Prüfbereich CO₂ & EmpCo
- Was darf meine Website seit dem 27. September 2026 über die Umwelt sagen?Seit 27.09.2026 gelten in Deutschland und Österreich die EmpCo-Regeln im UWG: was unzulässig ist, was erlaubt bleibt, warum Übergangsregeln nur Waren betreffen.
- Spart eine schlanke Website Geld, und was sagt der CO₂-Wert wirklich?Was eine schwere Website kostet: beim Hoster Cent, beim Kunden Wartezeit. Was der CO₂-Wert je Aufruf bedeutet, wo das Modell endet, wie KI-Anfragen dazu stehen.
- Warum laden Videos und PDFs besser erst auf Klick?Zeigt ein prefetch auf ein Video, Archiv oder PDF, laden Chrome, Edge und Firefox die Datei bei jedem Besuch mit. Die Prüfung meldet das mit der Adresse.
- Was kostet ein Video, das von selbst startet?Ein Video mit autoplay lädt bei jedem Aufruf mit. Die Prüfung nennt Adresse, KB und ob die Seite reduzierte Bewegung beachtet. So binden Sie es sparsam ein.
Dieser Prüfpunkt gehört zum Prüfbereich CO₂ & EmpCo; dort stehen alle Prüfpunkte im Überblick. Was die Prüfung insgesamt leistet, zeigt die Leistungsseite; wie ein Ergebnis zustande kommt, erklärt das Prüfverfahren. Alle Prüfbereiche im Überblick: Wissensbasis.
