CLS ત્યારે થાય છે જ્યારે દૃશ્યમાન content paint થઈ ગયા પછી ખસે છે, અને user જે જોઈ રહ્યો હતો તેને ધકેલે છે. કારણ લગભગ હંમેશા અનામત જગ્યા વગર load થતું content હોય છે.
CLS ત્યારે થાય છે જ્યારે દૃશ્યમાન content paint થઈ ગયા પછી ખસે છે, અને user જે જોઈ રહ્યો હતો તેને ધકેલે છે. કારણ લગભગ હંમેશા અનામત જગ્યા વગર load થતું content હોય છે.
transform ને બદલે layout property (top, height) ને animate કરવું.width/height (અથવા aspect-ratio) set કરો જેથી load પહેલાં જગ્યા અનામત રહે:<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.position: absolute) અથવા નીચેથી ધકેલો.transform/opacity થી animate કરો — તે composited છે અને layout trigger કરતા નથી.CLS એ સૌથી ઠીક કરી શકાય તેવું Core Web Vital છે — તે સામાન્ય રીતે થોડા ખૂટતા dimension હોય છે. Interviewer તેનો ઉપયોગ એ ચકાસવા કરે છે કે તમે render pipeline સમજો છો કે નહીં: આગળથી જગ્યા અનામત રાખવાનો અર્થ છે browser ને ક્યારેય reflow કરવું નથી પડતું, એ જ કારણ છે કે transform એ top ને animate કરવા કરતાં સારું છે.
વિગતવાર જવાબો સાથે IT ઇન્ટરવ્યૂ પ્રશ્નોની લાઇબ્રેરી — જુનિયરથી સિનિયર સુધી.
દાન કરો