CLS entsteht, wenn sich sichtbarer Inhalt bewegt, nachdem er bereits gepaintet wurde, und das verschiebt, worauf der Nutzer gerade schaut. Die Ursache ist fast immer Inhalt, der ohne reservierten Platz lädt.
CLS entsteht, wenn sich sichtbarer Inhalt bewegt, nachdem er bereits gepaintet wurde, und das verschiebt, worauf der Nutzer gerade schaut. Die Ursache ist fast immer Inhalt, der ohne reservierten Platz lädt.
top, height) statt transform.width/height (oder aspect-ratio), damit vor dem Laden Platz reserviert wird:<img src="/photo.jpg" width="1200" height="800" alt="..."> <!-- reserves the box -->
.hero { aspect-ratio: 16 / 9; } /* reserves ratio for responsive media */
font-display: optional oder swap plus size-adjust/preload, um das Reflow zu minimieren, wenn die Web Font eintrifft.position: absolute) oder schiebe von unten nach.transform/opacity — sie werden im Compositor verarbeitet und lösen kein Layout aus.CLS ist der am leichtesten behebbare Core Web Vital — meist sind es nur eine Handvoll fehlender Abmessungen. Interviewer nutzen ihn, um zu testen, ob du die Render-Pipeline verstehst: Platz im Voraus zu reservieren bedeutet, dass der Browser nie ein Reflow durchführen muss — deshalb schlägt transform das Animieren von top.
Eine Sammlung von IT-Interviewfragen mit ausführlichen Antworten — vom Junior bis zum Senior.
Spenden