Wie Bilder und Schriften die Ladezeit beeinflussen

Bilder und Schriften gehören auf vielen Websites zu den größten Dateien und bestimmen deshalb maßgeblich, wie schnell eine Seite wirkt. Sie verzögern, bis der Hauptinhalt sichtbar ist, und sie können das Layout während des Ladens verschieben. Mit modernen Formaten, passenden Größen, festen Maßangaben, gezieltem Lazy Loading und wenigen, gut eingebundenen Schriften lässt sich beides meist mit überschaubarem Aufwand beheben.

Was Pixel, Auflösung und Bildformate grundsätzlich bedeuten, erklärt der Ratgeber Bildformate und Auflösung. Hier geht es um die Wirkung auf die Geschwindigkeit.

Die Messgrößen: Core Web Vitals

Google fasst die Nutzererfahrung beim Laden in drei Kennzahlen zusammen, den Core Web Vitals. Bilder und Schriften betreffen vor allem zwei davon:

Bewertet wird jeweils der Wert, den 75 Prozent der Seitenaufrufe echter Besucher erreichen. Labortests wie Lighthouse liefern Hinweise, entscheidend sind aber die Felddaten, die etwa PageSpeed Insights aus echten Chrome-Nutzungsdaten anzeigt, sofern genug Daten vorliegen.

Bilder: die größten Hebel

1. Das passende Format

Moderne Formate wie AVIF und WebP erreichen bei gleicher sichtbarer Qualität meist deutlich kleinere Dateien als JPG und PNG. Beide werden von allen aktuellen Browsern unterstützt. Für Logos und Icons ist SVG das richtige Format. Welches Format sich wofür eignet, vergleicht der Artikel WebP, AVIF, JPG oder PNG ausführlich.

2. Die passende Größe

Ein Foto mit 4.000 Pixeln Breite, das auf dem Smartphone 400 Pixel breit angezeigt wird, verschwendet einen Großteil seiner Daten. Mit den Attributen srcset und sizes bieten Sie mehrere Größen an, und der Browser wählt die passende:

<img src="bild-800.avif"
     srcset="bild-400.avif 400w, bild-800.avif 800w, bild-1600.avif 1600w"
     sizes="(max-width: 700px) 100vw, 700px"
     width="1600" height="900"
     alt="Beschreibung des Bildinhalts">

Welche Pixelmaße für Startbild, Blogbild und Galerie sinnvoll sind, zeigt der Artikel Bildgrößen für Websites.

3. Komprimierung

Fast jedes Foto lässt sich stärker komprimieren, als man denkt, ohne dass ein Unterschied sichtbar wird. Testen Sie verschiedene Qualitätsstufen und vergleichen Sie das Ergebnis in Originalgröße. Entfernen Sie außerdem Metadaten wie Kameradaten und Standort, die für die Darstellung nicht gebraucht werden.

4. Breite und Höhe angeben

Ohne Größenangabe weiß der Browser nicht, wie viel Platz ein Bild braucht. Er stellt zunächst den Text dar und schiebt ihn nach unten, sobald das Bild geladen ist. Diese Verschiebung erhöht den CLS und ist für Leser ärgerlich. Die Attribute width und height im HTML oder die CSS-Eigenschaft aspect-ratio reservieren den Platz von Anfang an.

5. Lazy Loading gezielt einsetzen

Mit loading="lazy" lädt der Browser Bilder erst, wenn sie in die Nähe des sichtbaren Bereichs kommen. Das spart Daten bei langen Seiten. Für das wichtigste Bild im Startbereich gilt das Gegenteil: Es sollte sofort geladen werden, gegebenenfalls mit fetchpriority="high", weil es häufig den LCP bestimmt.

6. Hintergrundbilder und Videos

Bilder, die per CSS als Hintergrund eingebunden werden, entdeckt der Browser erst spät, weil er zuerst das Stylesheet laden muss. Ist ein solches Bild das größte Element im Startbereich, verzögert sich der LCP. Für wichtige Bilder ist ein normales <img>-Element deshalb meist die bessere Wahl. Videos im Startbereich sind besonders schwer: Ein aussagekräftiges Standbild als Vorschau, das Video erst auf Wunsch geladen, ist fast immer schneller.

Schriften: unsichtbar, aber wirksam

Webfonts werden oft unterschätzt, weil sie keine sichtbaren Dateien wie Bilder sind. Jede Schriftdatei ist aber ein eigener Download, und solange sie fehlt, muss der Browser entscheiden, was er anzeigt.

Das richtige Format: WOFF2

WOFF2 ist ein speziell für das Web komprimiertes Schriftformat und wird von allen aktuellen Browsern unterstützt. Ältere Formate wie TTF oder EOT sind für Websites in der Regel nicht mehr nötig.

Wenige Schnitte

Jeder Schnitt, also normal, kursiv, fett oder halbfett, ist eine eigene Datei. Prüfen Sie, welche Schnitte tatsächlich verwendet werden. Häufig genügen zwei bis drei pro Schrift. Ein variabler Font bündelt viele Gewichte in einer Datei und lohnt sich, wenn Sie tatsächlich mehrere Stufen nutzen.

Untermengen bilden

Schriften enthalten oft Zeichen für viele Sprachen. Für eine deutschsprachige Website reicht in der Regel der lateinische Zeichensatz mit Umlauten, ß und gängigen Sonderzeichen. Eine solche Untermenge, auch Subset genannt, verkleinert die Datei erheblich. Prüfen Sie danach, ob alle benötigten Zeichen enthalten sind, etwa Anführungszeichen und das Eurozeichen.

font-display und Ersatzschrift

Die CSS-Eigenschaft font-display legt fest, was passiert, solange die Schrift lädt:

• swap zeigt sofort eine Systemschrift und tauscht sie aus, sobald die Webfont da ist. Der Text ist sofort lesbar, der Wechsel kann aber das Layout verschieben.
• optional verwendet die Webfont nur, wenn sie sehr schnell verfügbar ist, sonst bleibt es bei der Systemschrift. Das vermeidet Verschiebungen.

Um den Sprung beim Wechsel klein zu halten, lässt sich die Ersatzschrift per size-adjust und verwandten Angaben so anpassen, dass sie ungefähr dieselbe Breite und Höhe einnimmt wie die Webfont.

Selbst hosten und vorladen

Liegen die Schriften auf dem eigenen Server, entfällt der Verbindungsaufbau zu einem weiteren Anbieter. Die wichtigste Schriftdatei, meist der Schnitt für den Fließtext, kann zusätzlich per <link rel="preload"> früh angefordert werden. Laden Sie aber nicht alle Schnitte vor, sonst konkurrieren sie mit wichtigeren Dateien. Wie das Selbst-Hosten Schritt für Schritt funktioniert und was dabei datenschutzrechtlich zu beachten ist, beschreibt der Artikel Google Fonts DSGVO-konform lokal einbinden.

Caching nicht vergessen

Bilder und Schriften ändern sich selten. Mit langen Cache-Zeiten muss der Browser sie bei wiederholten Besuchen nicht erneut laden. Damit Änderungen trotzdem ankommen, bekommen die Dateien bei jeder Änderung einen neuen Namen, etwa mit einer Versionsnummer oder einer Prüfsumme im Dateinamen.

So messen Sie den Effekt

1. Vorher messen: Rufen Sie die wichtigsten Seiten in PageSpeed Insights oder Lighthouse auf und notieren Sie LCP und CLS.
2. Größte Dateien finden: Im Netzwerk-Reiter der Browser-Entwicklerwerkzeuge lassen sich alle geladenen Dateien nach Größe sortieren.
3. LCP-Element bestimmen: Lighthouse zeigt an, welches Element den LCP auslöst. Ist es ein Bild, hat dessen Optimierung höchste Priorität.
4. Nachher messen: Vergleichen Sie unter denselben Bedingungen, am besten mehrfach, da einzelne Messungen schwanken.

Testen Sie auch mit gedrosselter Verbindung. Eine Seite, die im Büro-WLAN schnell lädt, kann unterwegs im Mobilfunknetz deutlich langsamer sein.

Checkliste: Bilder und Schriften

• Fotos liegen als AVIF oder WebP vor, Logos und Icons als SVG.
• Bilder werden in mehreren Größen per srcset angeboten.
• Alle Bilder haben width und height oder ein aspect-ratio.
• Das Startbild lädt sofort, Bilder weiter unten per Lazy Loading.
• Schriften liegen als WOFF2 auf dem eigenen Server.
• Nur die tatsächlich genutzten Schnitte und Zeichen werden geladen.
• font-display ist bewusst gewählt, die Ersatzschrift angepasst.
• Lange Cache-Zeiten mit versionierten Dateinamen sind eingerichtet.

Wer diese Punkte abarbeitet, behebt erfahrungsgemäß einen großen Teil der Ladezeitprobleme, die nicht vom JavaScript verursacht werden.