Bilder für Google PageSpeed optimieren

Einen brauchbaren Ausgangswert festhalten

Öffne PageSpeed Insights, gib die öffentliche URL der zu prüfenden Seite ein und starte einen Test für Mobilgeräte oder Computer.

1. Teste die veröffentlichte URL mit genauem Pfad.
2. Notiere Mobil- oder Desktopansicht.
3. Erfasse das genannte Bild und seine aktuelle URL.
4. Speichere Maße und Dateigröße beim Bericht.
5. Bestimme das Ziel: Größe, Auffindbarkeit, Layoutstabilität oder ein anderes Problem.

Wähle eine repräsentative Seite vor umfassenden Änderungen: etwa eine typische Produktgalerie oder einen Artikel mit normalem Titelbild. Die Startseite beschreibt nicht automatisch alle Vorlagen.

Eine gezielte Korrektur wählen

Ist das Bild für seine Fläche zu groß, erstelle passende Varianten. Geht es um Kodierung, vergleiche WebP mit der bisherigen Datei über JPG zu WebP oder PNG zu WebP.

Verschiebt sich das Layout, reserviere Platz statt nur zu komprimieren. Startet das Hauptbild spät, untersuche seine Erkennung. Der Core-Web-Vitals-Leitfaden erklärt die Unterschiede.

Zwei Arten von Messdaten verstehen

PageSpeed Insights kombiniert einen Lighthouse-Labortest mit Messdaten tatsächlicher Besuche, sofern diese verfügbar sind. Diese decken die letzten 28 Tage ab und können statt einer einzelnen Seite alle Seiten mit demselben Protokoll, Hostnamen und Port betreffen. Kleine Websites haben manchmal zu wenige Daten; das bedeutet keinen fehlgeschlagenen Test. Siehe Googles PageSpeed-Dokumentation.

Ein neuer Export kann den nächsten Labortest beeinflussen; historische Felddaten zeigen nicht sofort ausschließlich die neue Version. Notiere den verglichenen Berichtsteil, damit du Laborverbesserung und tatsächliche Nutzererfahrung nicht gleichsetzt.

Prüfe, ob die Felddaten diese URL oder die gesamte Origin beschreiben. Eine Origin umfasst Seiten mit demselben Protokoll, Hostnamen und Port. Ihre Daten belegen nicht, dass sich eine bestimmte bearbeitete Produktseite verbessert hat. Halte seitenspezifische Labortests von dieser breiteren Datengrundlage getrennt. Unterscheide auch eine geschätzte Byte-Ersparnis von einer gemessenen LCP-Verbesserung: Ein kleineres Bild muss nicht früher erscheinen.

Prüfen, ob die Änderung veröffentlicht wurde

Veröffentliche die Datei und aktualisiere nötigenfalls den Verweis. Kontrolliere die echte Bildanfrage im Browser. Ein lokaler Export ändert für Besucher nichts. Bleibt die alte Version, untersuche Cache und erzeugte Bildvarianten.

Teste dieselbe URL und Gerätekategorie. Wiederhole unerwartet schwankende Tests und vergleiche den konkreten Befund statt jede Punktänderung dem Bild zuzuschreiben. Ändere nicht Hosting, Skripte und alle Bilder gleichzeitig, wenn die Ursache erkennbar bleiben soll.

Wann andere Probleme wichtiger werden

Prüfe nach den Bildbefunden verbleibende Engpässe. Langsame Antworten, viele Skripte oder spätes Rendering können dominieren. Zusätzliche Kompression verschlechtert dann Bilder, ohne die eigentliche Ursache zu lösen.

Dokumentiere Seite, Original, Ersatz und beobachtetes Ergebnis. So bleibt das Vorgehen wiederholbar und Rückschritte nach Theme- oder Layoutänderungen werden erkennbar.

Beispiel: vom Bericht zu einer gezielten Änderung

Angenommen, der mobile Bericht bemängelt ein übergroßes Produktbild. Speichere Bericht, Seiten- und Bild-URL sowie Anzeigemaße. Veröffentliche eine kleinere Kopie mit gleichem Ausschnitt auf einer Testseite und bestätige die tatsächliche Anfrage vor der neuen Messung. Das ist ein Ablaufbeispiel, kein gemessener Punktegewinn.

Protokolliere Datum, Gerätekategorie, Bildmaße, Dateigröße, LCP, Layoutbewegungen und Qualität. Wiederhole vergleichbare Tests und berücksichtige die Streuung statt den besten neuen mit dem schlechtesten alten Lauf zu vergleichen. Bleibt LCP trotz kleinerer Datei gleich, kann eine andere Ladephase überwiegen.

Entscheiden, ob die Änderung bleibt

Behalte eine Änderung, wenn sie das konkrete Problem löst, ohne Details, Text oder Layout zu verschlechtern. Beginnt die Anfrage weiterhin spät, prüfe Erkennung und Ladeeinstellungen. Bleibt die geladene Datei unsichtbar, untersuche Rendering und Einblendeeffekte. Kompression allein behebt das nicht.