Mantys CoreBilder
srcset und sizes, das LCP-Bild, Hintergrund-Heroes und SVG: das richtige Bild in der richtigen Größe zum richtigen Zeitpunkt ausliefern.
Mein Hero ist ein Hintergrundbild: Warum es den LCP bremst und wie Sie das beheben (Divi, Elementor)
Ein CSS-Hintergrundbild ist für den Browser unsichtbar, bis das Stylesheet heruntergeladen und angewendet ist, es hat kein srcset, und Builder laden es oft per JavaScript mit Lazy Loading, also startet der Hero spät; die beste Lösung ist ein echtes Bild, die zweitbeste ein Preload pro Gerät und kein Lazy Loading für diesen Abschnitt.
Das LCP-Bild ist auf Mobil und Desktop nicht dasselbe: So laden Sie das richtige per Preload
Wenn sich das größte Bild zwischen Smartphone und Desktop unterscheidet, lässt ein einziger Preload eines der Geräte ein Bild herunterladen, das es nicht anzeigt, oder den Hero doppelt herunterladen. Die Lösung ist ein Preload pro Gerät, mit demselben srcset und denselben sizes wie das Bild, direkt nach dem Viewport-Tag platziert.
Inline SVG: perfekt für ein Icon, Gift für eine Illustration
Ein SVG ist nicht nur eine einzige Art von Bild. Ein kleines Icon inline ist ideal, eine schwere Illustration inline bläht Ihre Seite auf, und ein Rasterfoto, das in einem SVG versteckt ist, ist das Schlimmste von allen dreien. So unterscheiden Sie sie und wählen jedes Mal das richtige Format.
Warum zeigt PageSpeed Insights immer noch „Properly size images“ an, obwohl ich ein srcset habe?
Srcset bietet dem Browser eine Liste von Größen an, aber erst das sizes-Attribut sagt ihm, welche er auswählen soll. Fehlt sizes, ist es falsch oder wird es ignoriert, lädt der Browser das größte Bild der Liste herunter, und PageSpeed bemängelt das, srcset hin oder her.