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 ਲਈ ਸਹੀ 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 ਇੰਟਰਵਿਊ ਸਵਾਲਾਂ ਦੀ ਇੱਕ ਲਾਇਬ੍ਰੇਰੀ — ਜੂਨੀਅਰ ਤੋਂ ਸੀਨੀਅਰ ਤੱਕ।
ਦਾਨ ਕਰੋ