Images عموماً کسی page پر سب سے بھاری bytes ہوتی ہیں، اس لیے انہیں optimize کرنا سب سے بڑی LCP جیت ہے۔ تین levers: جدید formats، responsive sizing، اور loading priority۔
AVIF اور WebP، JPEG/PNG کے مقابلے میں اُسی quality پر کہیں چھوٹا compress کرتے ہیں (AVIF اکثر JPEG سے 50% چھوٹا)۔ انہیں ایک fallback کے ساتھ serve کریں تاکہ پرانے browsers بھی کام کریں:
کسی 400px phone کو 2000px image نہ بھیجیں۔ srcset browser کو device کے لیے درست 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 ہوتی ہے۔ formats (AVIF/WebP)، درست resolution کے لیے srcset، اور صحیح priority جاننا — نیز LCP image کو lazy-load نہ کرنا — وہ عملی toolkit ہے جو interviewers کو مطلوب ہے، اور یہ عموماً کسی حقیقی site پر واحد سب سے زیادہ اثر والی تبدیلی ہوتی ہے۔
تفصیلی جوابات کے ساتھ IT انٹرویو سوالات کی ایک لائبریری — جونیئر سے سینئر تک۔
عطیہ دیں