Warum laden die Bilder meiner Website langsam?

Beginne mit einer langsamen Seite

Öffne die veröffentlichte Seite auf einem Telefon und einem Computer. Achte darauf, welches Bild spät erscheint, ob die ganze Seite langsam ist und ob Text beim Laden der Bilder verrutscht.

1. Notiere die Seitenadresse und das Bild, bei dem das Problem auftritt.
2. Führe einen Test mit PageSpeed Insights durch und speichere die Hinweise zu Bildern.
3. Wenn jemand anderes deine Website betreut, gib dieser Person die Seitenadresse und den Bericht. Bitte sie, zuerst dieses Bild zu prüfen, bevor die gesamte Mediathek verändert wird.

Die folgenden Abschnitte helfen dir, den nächsten Prüfschritt zu wählen. Für eine genauere Untersuchung zeigt der Network-Bereich des Browsers, welche Dateien die Seite herunterlädt und wie lange jede Anfrage dauert.

Vom Symptom zur nächsten Prüfung

Optional: das Bild im Network-Bereich untersuchen

Öffne die Seite auf einem Computer in Chrome. Öffne die Entwicklerwerkzeuge mit Strg + Umschalt + J unter Windows oder Linux beziehungsweise Command + Option + J auf dem Mac. Wähle den Tab Network und gehe dann so vor:

1. Wähle den Bildfilter Img.
2. Aktiviere Disable cache und lade die Seite bei geöffnetem Bereich neu. So prüfst du einen neuen Download statt einer im Browser gespeicherten Kopie.
3. Wähle die Anfrage für das betroffene Bild. Prüfe in der Vorschau, ob es das richtige Bild ist.
4. Notiere die Bild-URL und Dateigröße.
5. Öffne Timing, um den Zeitverlauf der Anfrage zu sehen, und prüfe unter Initiator, was sie ausgelöst hat.

Diese Browser-Einstellung leert nicht den Cache des Website-Servers oder CDN. Ein CDN liefert Website-Dateien über verteilte Server aus und kann eigene Kopien speichern.

Bei spätem Beginn prüfe HTML, Skripte und Lazy Loading als Auslöser. Bei früher Anfrage und langer Antwortwartezeit vergleiche ein weiteres Bild und das HTML-Dokument. Kommt die Datei schnell an, bleibt aber unsichtbar, prüfe CSS, Animationen und JavaScript. Korrigiere die tatsächlich verzögerte Phase.

Timing zeigt, wofür die Anfrage Zeit benötigt, etwa Warten auf die Antwort oder Herunterladen. Initiator zeigt, was sie gestartet hat, etwa HTML oder ein Skript. So unterscheidest du eine große Datei von einem späten Ladestart.

Chrome-Network-Dokumentation

Unterscheide in Timing zwischen Queueing oder Stalled, Waiting for server response (TTFB) und Content Download. Die Zeit vor dem Senden kann durch die Browserplanung oder den Verbindungsaufbau entstehen und ist nicht vollständig Serverarbeit. TTFB enthält auch die Netzwerklaufzeit; langes Warten allein beweist daher keinen Hostingfehler. Ein langer Download legt nahe, Datenmenge und Verbindungsgeschwindigkeit zu prüfen. Vergleiche mehrere Anfragen unter denselben Bedingungen.

Unnötig große Bilddateien verkleinern

Lädt eine kleine Karte ein riesiges Foto, beginne bei den Maßen. Erstelle mit dem Bildgrößenwerkzeug eine proportionale Kopie. Vergleiche dann WebP oder AVIF, wenn dein Auslieferungssystem sie unterstützt. Der Formatleitfaden hilft bei der Auswahl.

Untersuche die gesamte erste Ansicht. Dutzende kleine Vorschaubilder können zusammen zu viel übertragen. Entscheide, welche Bilder sofort benötigt werden und welche bis zur Annäherung beim Scrollen warten können.

Zeitabläufe statt Dateigröße korrigieren

Prüfe, dass das wichtigste sichtbare Bild nicht durch Lazy Loading verzögert wird. Erscheint es erst nach Animation oder Skript, untersuche die Abfolge mit der Entwicklung. Googles LCP-Anleitung trennt Lade- und Renderingverzögerungen.

Vergleiche mehrere Anfragen, bevor du das Format verantwortlich machst. Warten auch HTML und andere Ressourcen, prüfe Hosting und Auslieferung. Wiederholtes Exportieren behebt kaum die Wartezeit vor der Serverantwort.

Unter gleichen Bedingungen erneut testen

Wiederholte Besuche können dank Cache schneller sein. Notiere frische oder zwischengespeicherte Ladung und halte Gerät sowie Netzbedingungen konstant. Prüfe eine schmale Ansicht: Dort kann eine fehlende mobile Variante auffallen.

1. Notiere eine langsame URL und die betroffene Bildanfrage.
2. Ändere die betreffende Datei oder ihr Ladeverhalten.
3. Bestätige die Auslieferung der neuen Version.
4. Wiederhole die Messung und prüfe die Bildqualität.

Betrachte den Anfang einer Galerie gemeinsam: Hauptbild und zwanzig Vorschaubilder benötigen möglicherweise unterschiedliche Laderegeln. Priorisiere Sichtbares und verschiebe gegebenenfalls weiter unten liegende Bilder. Scrolle anschließend durch die ganze Galerie und prüfe auch beim Zurücknavigieren auf verspätete Bilder oder leere Flächen.