ਨੇਟਿਵ ਆਲਸ ਲੋਡਿੰਗ ਚਿੱਤਰਾਂ/iframes ਕਿਵੇਂ ਕੰਮ ਕਰਦੀ ਹੈ?

Question

Accepted Answer

`loading="lazy"` ਗੁਣ ਬ੍ਰਾਊਜ਼ਰ ਨੂੰ ਇੱਕ ਚਿੱਤਰ ਜਾਂ iframe ਲੋਡ ਕਰਨਾ **ਮੁਲਤਵੀ** ਕਰਨ ਲਈ ਦੱਸਦਾ ਹੈ ਜਦੋਂ ਤੱਕ ਇਹ viewport ਵਿੱਚ ਦਾਖ਼ਲ ਹੋਣ ਬਾਰੇ ਹੈ — ਬੈਂਡਵਿਡਥ ਬਚਾਉਂਦਾ ਹੈ ਅਤੇ ਸ਼ੁਰੂਆਤੀ ਲੋਡ ਨੂੰ ਤੇਜ਼ ਕਰਦਾ ਹੈ, ਕੋਈ JavaScript ਬਿਨਾ। ```html

``` ## ਇਹ ਕਿਵੇਂ ਵਿਵਹਾਰ ਕਰਦਾ ਹੈ - **`lazy`** — ਸਿਰਫ਼ ਲੋਡ ਕਰੋ ਜਦੋਂ ਸਕ੍ਰੌਲਿੰਗ ਇਸ ਨੂੰ viewport ਦੇ ਨੇੜੇ ਲਿਆਵੇ। - **`eager`** (ਡਿਫ਼ਾਲਟ) — ਤੁਰੰਤ ਲੋਡ ਕਰੋ, ਸਥਿਤੀ ਦੀ ਪਰਵਾਹ ਕੀਤੇ ਬਿਨਾ। ਬ੍ਰਾਊਜ਼ਰ ਇੱਕ ਮਾਰਜਿਨ ਵਰਤਦਾ ਹੈ (ਤੱਤ viewport ਵਿੱਚ ਸਕ੍ਰੌਲ ਕਰਨ ਤੋਂ ਥੋੜ੍ਹਾ ਪਹਿਲਾਂ ਲੋਡ ਕਰਦਾ ਹੈ) ਤਾਂ ਜੋ ਚਿੱਤਰ ਆਮ ਤੌਰ 'ਤੇ ਤਿਆਰ ਹੋਵੇ ਜਦੋਂ ਉਪਭੋਗਤਾ ਇਸ ਨੂੰ ਦੇਖਦਾ ਹੈ। ## ਇੱਕ ਨਾਜ਼ੁਕ ਜੋੜੀ: layout shift ਤੋਂ ਬਚਣ ਲਈ width/height ਸੈਟ ਕਰੋ ```html

``` ਅਯਾਮਾਂ ਤੋਂ ਬਿਨਾ (ਜਾਂ ਇੱਕ `aspect-ratio`), ਆਲਸੀ ਢੰਗ ਨਾਲ ਲੋਡ ਕੀਤਾ ਗਿਆ ਚਿੱਤਰ ਕੋਈ ਰਾਖਵਾਂ ਸਥਾਨ ਨਹੀਂ ਹੈ, ਇਸਲਈ ਜਦੋਂ ਇਹ ਲੋਡ ਹੁੰਦਾ ਹੈ ਪੰਨਾ **ਛਾਲ** ਮਾਰਦਾ ਹੈ — Cumulative Layout Shift (CLS) ਨੂੰ ਨੁਕਸਾਨ ਪਹੁੰਚਾਉਂਦਾ ਹੈ। ਹਮੇਸ਼ਾ ਸਥਾਨ ਰਾਖਵਾਂ ਕਰੋ। ## above-the-fold ਸਮੱਗਰੀ ਦੀ ਆਲਸੀ-ਲੋਡਿੰਗ ਨਾ ਕਰੋ ```html

``` **Largest Contentful Paint** ਚਿੱਤਰ ਦੀ ਆਲਸੀ-ਲੋਡਿੰਗ ਅਸਲ ਵਿੱਚ *ਪ੍ਰਦਰਸ਼ਨ ਨੂੰ ਨੁਕਸਾਨ* ਪਹੁੰਚਾਉਂਦਾ ਹੈ — ਇਹ ਸਭ ਤੋਂ ਮਹੱਤਵਪੂਰਨ ਪਿਕਸਲ ਨੂੰ ਰੋਕਦਾ ਹੈ। ਸਿਰਫ਼ off-screen ਮੀਡਿਆ ਦੀ ਆਲਸੀ-ਲੋਡਿੰਗ ਕਰੋ। ## ਨੇਟਿਵ ਤੋਂ ਪਹਿਲਾਂ: IntersectionObserver ```js // 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"`) ਤਾਂ ਜੋ ਮਹੱਤਵਪੂਰਨ ਸਮੱਗਰੀ ਅਜੇ ਵੀ ਤੇਜ਼ੀ ਨਾਲ ਲੋਡ ਹੋਵੇ।