CLS skjer når synlig innhold flytter seg etter at det allerede var malt, og forskyver det brukeren så på. Årsaken er nesten alltid innhold som lastes uten reservert plass.
CLS skjer når synlig innhold flytter seg etter at det allerede var malt, og forskyver det brukeren så på. Årsaken er nesten alltid innhold som lastes uten reservert plass.
top, height) i stedet for transform.width/height (eller aspect-ratio) så plass reserveres før lasting:<img src="/photo.jpg" width="1200" height="800" alt="..."> <!-- reserverer boksen -->
.hero { aspect-ratio: 16 / 9; } /* reserverer forhold for responsivt media */
font-display: optional eller swap pluss size-adjust/preload for å minimere reflowen når web-fonten ankommer.position: absolute) eller dytt fra bunnen.transform/opacity — de er komposittet og utløser ikke layout.CLS er den mest fiksbare Core Web Vital — det er vanligvis en håndfull manglende dimensjoner. Intervjuere bruker den til å teste om du forstår render-pipelinen: å reservere plass i starten betyr at nettleseren aldri må gjøre reflow, som er hvorfor transform slår det å animere top.
Et bibliotek av IT-intervjuspørsmål med detaljerte svar — fra Junior til Senior.
Doner