So verbessern Sie PageSpeed-Bewertungen mit srcset

Wenn Ihr PageSpeed-Score sinkt, sobald Sie ein Hero-Bild einfügen, ist das Problem meist ganz einfach.

Was tatsächlich passiert

PageSpeed bestraft Seiten, die übergroße Bilder an kleine Bildschirme ausliefern. Wenn Ihr Hero-Bild 1200px breit ist und ein mobiler Nutzer es trotzdem herunterlädt, ist das verschwendete Bandbreite und zeigt sich im Score.

Die Lösung heißt srcset. Damit teilen Sie dem Browser mit, welche Version eines Bildes je nach Viewport des Geräts geladen werden soll.

So setzen Sie es um

Erzeugen Sie zunächst mehrere Größen Ihres Bildes:

• 300w für Mobilgeräte
• 768w für Tablets
• 1200w oder 1536w für Desktop

Verweisen Sie dann in Ihrem HTML auf alle drei:

<img
  srcset="/assets/img/hero.webp 1200w, 
          /assets/img/hero-768px.webp 768w,
          /assets/img/hero-300px.webp 300w"
  src="/assets/img/hero.webp"
  alt="Beschreibung des Bildes">

Der Browser wählt die passende Variante. Sie brauchen weder ein CDN noch einen Bildservice.

Ein paar praktische Hinweise

Verwenden Sie die tatsächliche Breite Ihres Originalbildes als größte Größe in srcset. Wenn Ihr Bild 1536px breit ist, setzen Sie das als Maximum.

Zum Automatisieren der Bildgenerierung ist sharp ein zuverlässiges Node.js-Tool. Es lässt sich in jede Build-Pipeline integrieren und übernimmt das Skalieren ohne externe Dienste.

Diese Änderung bringt die meisten Seiten von einer ungenügenden Bildbewertung zu einer bestandenen. Es ist nicht kompliziert, nur nicht offensichtlich, wenn man noch nicht darauf gestoßen ist.

Melden Sie sich, wenn Sie Unterstützung bei der web-Performance möchten.