Images आमतौर पर एक page पर सबसे भारी bytes होती हैं, इसलिए उन्हें optimize करना सबसे बड़ी LCP जीत है। तीन levers: आधुनिक formats, responsive sizing, और loading priority।
AVIF और WebP समान quality पर JPEG/PNG की तुलना में कहीं छोटा compress करते हैं (AVIF अक्सर JPEG से 50% छोटा)। उन्हें एक fallback के साथ serve करें ताकि पुराने browsers भी काम करें:
एक 400px phone को 2000px image न भेजें। srcset browser को device के लिए सही आकार चुनने देता है:
<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 होती है। formats (AVIF/WebP), सही resolution के लिए srcset, और सही priority जानना — साथ ही LCP image को lazy-load न करना — वह व्यावहारिक toolkit है जिसकी interviewers अपेक्षा करते हैं, और यह आमतौर पर एक वास्तविक site पर एकल सबसे-प्रभावशाली बदलाव होता है।
विस्तृत उत्तरों के साथ IT इंटरव्यू प्रश्नों की एक लाइब्रेरी — जूनियर से सीनियर तक।
दान करें