Wie beeinflussen SVG- und Bildformat-Entscheidungen die Performance?

Kurze Antwort: Das Format folgt dem Inhaltstyp: SVG für Logos und Icons, AVIF oder WebP für Fotos. Das falsche Format transportiert unnötige Bytes und verzögert den LCP; Bilder ohne Maßangaben erzeugen zusätzlich CLS.

Praxisregeln

• SVG ist vektorbasiert und bleibt in jeder Auflösung scharf; mit SVGO minimieren, kritische Icons inline einbetten. Bei sehr komplexen Grafiken kann SVG größer werden als Raster; messen statt raten.
• Fotos über das picture-Element als AVIF und WebP ausliefern, mit JPEG-Fallback für ältere Browser.
• Bei Transparenzbedarf zuerst WebP statt PNG prüfen.
• In jedem img-Tag width und height setzen; Bilder ohne Maße sind die häufigste CLS-Quelle.
• Dem LCP-Bild per fetchpriority Vorrang geben, Inhalte unterhalb des Folds lazy laden, per srcset passende Größen senden.

Steuern Sie über Messung statt Bauchgefühl: mit den Lighthouse-Bildprüfungen starten, das Ergebnis an den LCP- und CLS-Verteilungen in CrUX validieren. Googles Schwellen sind öffentlich: LCP unter 2,5 Sekunden, CLS unter 0,1.