CLS występuje, gdy widoczna treść przemieszcza się po tym, jak została już namalowana, przesuwając to, na co patrzył użytkownik. Przyczyną jest niemal zawsze treść, która ładuje się bez zarezerwowanego miejsca.
CLS występuje, gdy widoczna treść przemieszcza się po tym, jak została już namalowana, przesuwając to, na co patrzył użytkownik. Przyczyną jest niemal zawsze treść, która ładuje się bez zarezerwowanego miejsca.
top, height) zamiast transform.width/height (lub aspect-ratio), aby miejsce było zarezerwowane przed załadowaniem:<img src="/photo.jpg" width="1200" height="800" alt="..."> <!-- rezerwuje pole -->
.hero { aspect-ratio: 16 / 9; } /* rezerwuje proporcje dla responsywnych mediów */
font-display: optional lub swap plus size-adjust/preload, aby zminimalizować reflow, gdy web font dotrze.position: absolute) lub wypychaj od dołu.transform/opacity — są kompozytowane i nie wyzwalają układu.CLS to najbardziej naprawialny Core Web Vital — zwykle to garść brakujących wymiarów. Rekruterzy używają go, aby sprawdzić, czy rozumiesz potok renderowania: rezerwowanie miejsca z góry oznacza, że przeglądarka nigdy nie musi przeliczać układu, dlatego transform bije animowanie top.
Biblioteka pytań rekrutacyjnych IT ze szczegółowymi odpowiedziami — od Juniora do Seniora.
Wesprzyj