Image સામાન્ય રીતે page પરના સૌથી ભારે byte હોય છે, તેથી તેમને optimize કરવું એ સૌથી મોટી LCP જીત છે. ત્રણ lever: આધુનિક format, responsive sizing, અને loading priority.
AVIF અને WebP એ જ quality પર JPEG/PNG કરતાં ઘણું નાનું compress કરે છે (AVIF ઘણી વાર JPEG કરતાં 50% નાનું). જૂના browser પણ કામ કરે તે માટe fallback સાથે serve કરો:
400px phone ને 2000px image ન મોકલો. srcset browser ને device માટe યોગ્ય size પસંદ કરવા દે છે:
<img
srcset="/p-400.jpg 400w, /p-800.jpg 800w, /p-1600.jpg 1600w"
sizes="(max-width: 600px) 100vw, 800px"
src="/p-800.jpg" width="800" height="600" alt="...">
sizes browser ને કહે છે કે image કેટલી પહોળી render થાય છે જેથી તે સૌથી નાનો પૂરતો source પસંદ કરી શકે.
fetchpriority="high", loading="eager", અને preload નો વિચાર કરો.loading="lazy" જેથી જરૂર પડે ત્યાં સુધી fetch ન થાય.CLS અટકાવવા હંમેશા width/height રાખો.
ધીમો LCP મોટે ભાગે માત્ર વધુ પડતી મોટી hero image જ હોય છે. Format (AVIF/WebP), યોગ્ય resolution માટe srcset, અને સાચી priority જાણવી — વત્તા LCP image ને lazy-load ન કરવું — એ વ્યવહારુ toolkit છે જે interviewer અપેક્ષે છે, અને તે સામાન્ય રીતે વાસ્તવિક site પરનો સૌથી વધુ અસરકારક એકમાત્ર ફેરફાર હોય છે.
વિગતવાર જવાબો સાથે IT ઇન્ટરવ્યૂ પ્રશ્નોની લાઇબ્રેરી — જુનિયરથી સિનિયર સુધી.
દાન કરો