Image లు సాధారణంగా page లో అత్యంత భారీ byte లు, కాబట్టి వాటిని optimize చేయడం అతిపెద్ద LCP విజయం. మూడు lever లు: modern format లు, responsive sizing, మరియు loading priority.
AVIF మరియు WebP అదే quality వద్ద JPEG/PNG కంటే చాలా చిన్నగా compress అవుతాయి (AVIF తరచుగా JPEG కంటే 50% చిన్నది). పాత browser లు కూడా పనిచేసేలా వాటిని ఒక fallback తో serve చేయండి:
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 image ఎంత వెడల్పుగా render అవుతుందో browser కు చెబుతుంది కాబట్టి అది చిన్నదైన సరిపడా source ను ఎంచుకోగలదు.
fetchpriority="high", loading="eager", మరియు ఒక preload ను పరిగణించండి.loading="lazy" కాబట్టి అవసరమయ్యే వరకు అది fetch కాదు.CLS ను నివారించడానికి ఎల్లప్పుడూ width/height ను ఉంచండి.
నెమ్మదైన LCP చాలా తరచుగా కేవలం ఒక oversized hero image మాత్రమే. Format లు (AVIF/WebP), సరైన resolution కోసం srcset, మరియు సరైన priority తెలుసుకోవడం — LCP image ను lazy-load చేయకపోవడం తో పాటు — interviewer లు ఆశించే ఆచరణాత్మక toolkit, మరియు ఇది సాధారణంగా నిజమైన site పై ఒకే అత్యధిక-ప్రభావ మార్పు.
జూనియర్ నుండి సీనియర్ వరకు వివరణాత్మక సమాధానాలతో IT ఇంటర్వ్యూ ప్రశ్నల లైబ్రరీ.
విరాళం