CLS तब होता है जब दृश्य content पहले से paint होने के बाद हिलता है, जिससे user जो देख रहा था वह खिसक जाता है। कारण लगभग हमेशा आरक्षित space के बिना load होने वाला content होता है।
CLS तब होता है जब दृश्य content पहले से paint होने के बाद हिलता है, जिससे user जो देख रहा था वह खिसक जाता है। कारण लगभग हमेशा आरक्षित space के बिना load होने वाला content होता है।
transform के बजाय layout properties (top, height) को animate करना।width/height (या aspect-ratio) सेट करें ताकि load से पहले space आरक्षित हो जाए:<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 या swap साथ में size-adjust/preload ताकि web font आने पर reflow कम से कम हो।position: absolute) या नीचे से push करें।transform/opacity के साथ animate करें — ये composited हैं और layout trigger नहीं करते।CLS सबसे ठीक करने योग्य Core Web Vital है — यह आमतौर पर कुछ लुप्त आयामों की बात होती है। Interviewers इसका उपयोग यह जाँचने के लिए करते हैं कि आप render pipeline को समझते हैं या नहीं: पहले से space आरक्षित करने का मतलब है कि browser को कभी reflow नहीं करना पड़ता, यही कारण है कि transform top को animate करने से बेहतर है।
विस्तृत उत्तरों के साथ IT इंटरव्यू प्रश्नों की एक लाइब्रेरी — जूनियर से सीनियर तक।
दान करें