CLS uppstår när synligt innehåll flyttar sig efter att det redan målats, vilket förskjuter det användaren tittade på. Orsaken är nästan alltid innehåll som laddas utan reserverad plats.
CLS uppstår när synligt innehåll flyttar sig efter att det redan målats, vilket förskjuter det användaren tittade på. Orsaken är nästan alltid innehåll som laddas utan reserverad plats.
top, height) istället för transform.width/height (eller aspect-ratio) så att plats reserveras före laddning:<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 eller swap plus size-adjust/preload för att minimera omflödet när webbfonten anländer.position: absolute) eller putta från botten.transform/opacity — de komposit-hanteras och utlöser inte layout.CLS är den mest åtgärdbara Core Web Vital — det är oftast en handfull saknade dimensioner. Intervjuare använder det för att testa om du förstår renderingspipelinen: att reservera plats i förväg betyder att webbläsaren aldrig behöver göra om layouten, vilket är varför transform slår att animera top.
Ett bibliotek med IT-intervjufrågor och detaljerade svar — från Junior till Senior.
Donera