تصویروں اور iframes کی native lazy loading کیسے کام کرتی ہے؟

Question

Accepted Answer

یہ `loading="lazy"` attribute براؤزر کو بتاتی ہے کہ کسی تصویر یا iframe کو اس وقت تک **تاخیر سے لوڈ کریں** جب تک وہ viewport میں داخل ہونے والے ہوں — بینڈوڈتھ بچاتے ہوئے اور ابتدائی لوڈ کو تیز کرتے ہوئے، کوئی JavaScript کے بغیر۔ ```html

``` ## یہ کیسے سلوک کرتا ہے - **`lazy`** — صرف اس وقت لوڈ کریں جب اسکرول کرنا اسے viewport کے قریب لے آئے۔ - **`eager`** (default) — فوری لوڈ کریں، چاہے موقع جو بھی ہو۔ براؤزر ایک margin استعمال کرتا ہے (عنصر سے پہلے کچھ حد تک لوڈ کرتا ہے جب وہ view میں آئے) تاکہ تصویر عام طور پر اس وقت تک تیار ہو جائے جب صارف اسے دیکھے۔ ## ایک اہم جوڑی: layout shift سے بچنے کے لیے width/height سیٹ کریں ```html

``` بغیر dimensions کے (یا `aspect-ratio` کے بغیر)، lazy-loaded تصویر کے پاس کوئی محفوظ جگہ نہیں ہے، تو جب یہ لوڈ ہو تو صفحہ **کودتا ہے** — Cumulative Layout Shift (CLS) کو نقصان پہنچاتے ہوئے۔ ہمیشہ جگہ محفوظ کریں۔ ## above-the-fold مواد کو lazy-load نہ کریں ```html

``` Lazy-loading **Largest Contentful Paint** تصویر دراصل *کارکردگی کو نقصان پہنچاتی ہے* — یہ سب سے اہم pixel کو تاخیر سے لوڈ کرتی ہے۔ صرف off-screen میڈیا کو lazy-load کریں۔ ## Native سے پہلے: 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; }); }); ``` Native `loading="lazy"` نے اکثر معاملات میں اس کی ضرورت کو ختم کر دیا ہے (اگرچہ IntersectionObserver ابھی بھی custom logic کے لیے مفید ہے)۔ ## یہ کیوں اہم ہے Native lazy loading بہت سی تصویروں والے طویل صفحات کے لیے ابتدائی bytes اور requests میں کمی کرتی ہے — ایک بڑی موبائل جیت — مفت میں۔ نزاکتیں اہم ہیں: layout shift سے بچانے کے لیے dimensions محفوظ کریں، اور above-the-fold/LCP تصویروں کو eager رکھیں (یہاں تک کہ `fetchpriority="high"`) تاکہ اہم مواد ابھی بھی تیزی سے لوڈ ہو۔