Lazy-loading કંઈક download કરવાનું ત્યાં સુધી મુલતવી રાખે છે જ્યાં સુધી તે ખરેખર જરૂરી ન બને — સામાન્ય રીતે જ્યારે તે view માં scroll થવાની હોય. આ initial payload ને ઘટાડે છે જેથી page નો દૃશ્યમાન ભાગ ઝડપથી load થાય.
Browser તે એક attribute સાથે natively કરે છે:
હંમેશા width/height રાખો જેથી browser જગ્યા અનામત રાખે (layout shift ટાળે છે). તમારી LCP image ને ક્યારેય lazy-load ન કરો — તે માપવામાં આવતી જ વસ્તુને વિલંબિત કરે છે.
ભારે કે ભાગ્યે વપરાતા UI (modal, chart) ને એક અલગ chunk માં વિભાજિત કરો જે માંગ પર load થાય:
// Instead of a static import that ships in the main bundle:
const Chart = React.lazy(() => import("./Chart")); // separate chunk, fetched when rendered
<Suspense fallback={<Spinner />}>
<Chart data={data} />
</Suspense>
Dynamic import() bundler ને એક અલગ file બનાવવા કહે છે જે <Chart> પ્રથમ વાર render થાય ત્યારે જ download થાય.
Lazy-loading એ ભારે page માટે સૌથી સરળ, સૌથી વધુ leverage વાળી જીત છે: આગળ ઓછું download કરવાનું એટલે ઝડપી LCP અને parse કરવા ઓછું JS. Interviewer જોવા માંગે છે કે તમે hero image ને lazy-load ન કરો — એક classic ભૂલ જે તમે જે metric ને મદદ કરવા મથો છો તેને જ નુકસાન કરે છે.
વિગતવાર જવાબો સાથે IT ઇન્ટરવ્યૂ પ્રશ્નોની લાઇબ્રેરી — જુનિયરથી સિનિયર સુધી.
દાન કરો