loading="lazy" ਗੁਣ ਬ੍ਰਾਊਜ਼ਰ ਨੂੰ ਇੱਕ ਚਿੱਤਰ ਜਾਂ iframe ਲੋਡ ਕਰਨਾ ਮੁਲਤਵੀ ਕਰਨ ਲਈ ਦੱਸਦਾ ਹੈ ਜਦੋਂ ਤੱਕ ਇਹ viewport ਵਿੱਚ ਦਾਖ਼ਲ ਹੋਣ ਬਾਰੇ ਹੈ — ਬੈਂਡਵਿਡਥ ਬਚਾਉਂਦਾ ਹੈ ਅਤੇ ਸ਼ੁਰੂਆਤੀ ਲੋਡ ਨੂੰ ਤੇਜ਼ ਕਰਦਾ ਹੈ, ਕੋਈ JavaScript ਬਿਨਾ।
loading="lazy" ਗੁਣ ਬ੍ਰਾਊਜ਼ਰ ਨੂੰ ਇੱਕ ਚਿੱਤਰ ਜਾਂ iframe ਲੋਡ ਕਰਨਾ ਮੁਲਤਵੀ ਕਰਨ ਲਈ ਦੱਸਦਾ ਹੈ ਜਦੋਂ ਤੱਕ ਇਹ viewport ਵਿੱਚ ਦਾਖ਼ਲ ਹੋਣ ਬਾਰੇ ਹੈ — ਬੈਂਡਵਿਡਥ ਬਚਾਉਂਦਾ ਹੈ ਅਤੇ ਸ਼ੁਰੂਆਤੀ ਲੋਡ ਨੂੰ ਤੇਜ਼ ਕਰਦਾ ਹੈ, ਕੋਈ JavaScript ਬਿਨਾ।
lazy — ਸਿਰਫ਼ ਲੋਡ ਕਰੋ ਜਦੋਂ ਸਕ੍ਰੌਲਿੰਗ ਇਸ ਨੂੰ viewport ਦੇ ਨੇੜੇ ਲਿਆਵੇ।eager (ਡਿਫ਼ਾਲਟ) — ਤੁਰੰਤ ਲੋਡ ਕਰੋ, ਸਥਿਤੀ ਦੀ ਪਰਵਾਹ ਕੀਤੇ ਬਿਨਾ।ਬ੍ਰਾਊਜ਼ਰ ਇੱਕ ਮਾਰਜਿਨ ਵਰਤਦਾ ਹੈ (ਤੱਤ viewport ਵਿੱਚ ਸਕ੍ਰੌਲ ਕਰਨ ਤੋਂ ਥੋੜ੍ਹਾ ਪਹਿਲਾਂ ਲੋਡ ਕਰਦਾ ਹੈ) ਤਾਂ ਜੋ ਚਿੱਤਰ ਆਮ ਤੌਰ 'ਤੇ ਤਿਆਰ ਹੋਵੇ ਜਦੋਂ ਉਪਭੋਗਤਾ ਇਸ ਨੂੰ ਦੇਖਦਾ ਹੈ।
<img src="x.jpg" loading="lazy" width="800" height="600" />
ਅਯਾਮਾਂ ਤੋਂ ਬਿਨਾ (ਜਾਂ ਇੱਕ aspect-ratio), ਆਲਸੀ ਢੰਗ ਨਾਲ ਲੋਡ ਕੀਤਾ ਗਿਆ ਚਿੱਤਰ ਕੋਈ ਰਾਖਵਾਂ ਸਥਾਨ ਨਹੀਂ ਹੈ, ਇਸਲਈ ਜਦੋਂ ਇਹ ਲੋਡ ਹੁੰਦਾ ਹੈ ਪੰਨਾ ਛਾਲ ਮਾਰਦਾ ਹੈ — Cumulative Layout Shift (CLS) ਨੂੰ ਨੁਕਸਾਨ ਪਹੁੰਚਾਉਂਦਾ ਹੈ। ਹਮੇਸ਼ਾ ਸਥਾਨ ਰਾਖਵਾਂ ਕਰੋ।
<!-- ❌ the hero/LCP image should load eagerly — lazy delays it -->
<img src="hero.jpg" loading="lazy" />
<!-- ✅ -->
<img src="hero.jpg" loading="eager" fetchpriority="high" />
Largest Contentful Paint ਚਿੱਤਰ ਦੀ ਆਲਸੀ-ਲੋਡਿੰਗ ਅਸਲ ਵਿੱਚ ਪ੍ਰਦਰਸ਼ਨ ਨੂੰ ਨੁਕਸਾਨ ਪਹੁੰਚਾਉਂਦਾ ਹੈ — ਇਹ ਸਭ ਤੋਂ ਮਹੱਤਵਪੂਰਨ ਪਿਕਸਲ ਨੂੰ ਰੋਕਦਾ ਹੈ। ਸਿਰਫ਼ off-screen ਮੀਡਿਆ ਦੀ ਆਲਸੀ-ਲੋਡਿੰਗ ਕਰੋ।
// the old manual approach native lazy-loading replaced
const io = new IntersectionObserver((entries) => {
entries.forEach((e) => { if (e.isIntersecting) e.target.src = e.target.dataset.src; });
});
ਨੇਟਿਵ loading="lazy" ਨੇ ਬਹੁਤੇ ਮਾਮਲਿਆਂ ਵਿੱਚ ਇਸ ਦੀ ਲੋੜ ਨੂੰ ਹਟਾ ਦਿੱਤਾ ਹੈ (ਹਾਲਾਂਕਿ IntersectionObserver ਅਜੇ ਵੀ ਕਸਟਮ ਤਰਕ ਲਈ ਉਪਯੋਗੀ ਹੈ)।
ਨੇਟਿਵ ਆਲਸ ਲੋਡਿੰਗ ਬਹੁਤ ਸਾਰੇ ਚਿੱਤਰਾਂ ਦੇ ਨਾਲ ਲੰਬੀ ਪੰਨੇ ਲਈ ਸ਼ੁਰੂਆਤੀ ਬਾਈਟ ਅਤੇ ਬੇਨਤੀਜਾ ਨੂੰ ਘਟਾਉਂਦਾ ਹੈ — ਇੱਕ ਵੱਡੀ ਮੋਬਾਈਲ ਜਿੱਤ — ਮੁਫ਼ਤ ਵਿੱਚ।
ਸੂਖਮ ਗੁਣ ਮਾਇਨੇ ਰੱਖਦੇ ਹਨ: CLS ਦੀ ਸੁਰੱਖਿਆ ਲਈ ਅਯਾਮ ਰਾਖਵਾਂ ਕਰੋ, ਅਤੇ above-the-fold/LCP ਚਿੱਤਰਾਂ ਨੂੰ eager ਰੱਖੋ (ਇਥੋ ਤੱਕ fetchpriority="high") ਤਾਂ ਜੋ ਮਹੱਤਵਪੂਰਨ ਸਮੱਗਰੀ ਅਜੇ ਵੀ ਤੇਜ਼ੀ ਨਾਲ ਲੋਡ ਹੋਵੇ।