Bilder sind meist die schwersten Bytes auf einer Seite, daher ist ihre Optimierung der größte LCP-Gewinn. Drei Hebel: moderne Formate, responsive Dimensionierung und Ladepriorität.
AVIF und WebP komprimieren bei gleicher Qualität weit kleiner als JPEG/PNG (AVIF oft 50 % kleiner als JPEG). Liefere sie mit einem Fallback aus, damit alte Browser weiterhin funktionieren:
Schicke kein 2000px-Bild an ein 400px-Handy. srcset lässt den Browser die passende Größe für das Gerät wählen:
<img
srcset="/p-400.jpg 400w, /p-800.jpg 800w, /p-1600.jpg 1600w"
sizes="(max-width: 600px) 100vw, 800px"
src="/p-800.jpg" width="800" height="600" alt="...">
sizes teilt dem Browser mit, wie breit das Bild gerendert wird, damit er die kleinste ausreichende Quelle wählen kann.
fetchpriority="high", loading="eager", und erwäge ein preload.loading="lazy", damit es erst bei Bedarf abgerufen wird.Behalte immer width/height bei, um CLS zu verhindern.
Ein langsames LCP ist meist einfach ein überdimensioniertes Hero-Bild. Formate zu kennen (AVIF/WebP), srcset für die richtige Auflösung und die korrekte Priorität — plus das LCP-Bild nicht per Lazy Loading zu laden — ist das praktische Werkzeugset, das Interviewer erwarten, und meist die Einzeländerung mit der größten Wirkung auf einer echten Website.
Eine Sammlung von IT-Interviewfragen mit ausführlichen Antworten — vom Junior bis zum Senior.
Spenden