preload، prefetch اور preconnect جیسے resource hints کیا ہیں؟

Question

Accepted Answer

**Resource hints** یہ `` tags ہیں جو براؤزر کو وسائل (resources) کو جلدی حاصل کرنے یا ان سے connect کرنے کے لیے کہتے ہیں، اور یہ load کی کارکردگی کو بہتر بناتے ہیں۔ ہر ایک مختلف timing/priority کی ضرورت کے لیے کام کرتا ہے۔ ```html ``` ## ہر ایک کیا کام کرتا ہے - **`preload`** — "مجھے یہ **موجودہ صفحہ کے لیے** درکار ہے، اسے ابھی high priority میں حاصل کریں۔" Critical وسائل کے لیے جو parser کو دیر سے معلوم ہوں: fonts، hero images، CSS-referenced assets۔ `as` کی ضرورت ہے تاکہ براؤزر صحیح priority/headers سیٹ کرے۔ - **`preconnect`** — "میں اس **origin** سے جلد ہی connect کروں گا؛ DNS lookup + TCP + TLS handshake ابھی کریں۔" تیسری طرف (third-party) کی پہلی request سے پہلے round-trips کو بچاتا ہے (API، font host، CDN)۔ کچھ critical origins کے لیے استعمال کریں۔ - **`dns-prefetch`** — preconnect کا ہلکا ورژن: صرف DNS resolution۔ اچھا fallback / بہت سے origins کے لیے۔ - **`prefetch`** — "مجھے یہ **شاید** **اگلی** navigation کے لیے درکار ہوگا؛ اسے low priority میں fetch کریں جب فارغ ہو۔" ممکنہ اگلے صفحات/وسائل کے لیے۔ موجودہ صفحہ کے لیے نہیں، مستقبل کے لیے cached۔ ## ایک عام حقیقی مثال: fonts ```html ``` Fonts کو دیر سے دریافت کیا جاتا ہے (براؤزر کو پہلے CSS parse کرنا ہوگا)، اس لیے انہیں preload کرنا غیر مرئی-متن کی تاخیر سے بچاتا ہے۔ ## احتیاط: بہت زیادہ hint نہ کریں ہر چیز کو preload کرنا مقصد کو ختم کر دیتا ہے — یہ حقیقی طور پر critical وسائل کے ساتھ bandwidth کے لیے مقابلہ کرتا ہے۔ صرف وہی کچھ hint کریں جو سب سے زیادہ اہم ہوں۔ ## یہ کیوں اہم ہے Resource hints critical path سے latency کو ختم کرتے ہیں: `preconnect` تیسری فریقین (third parties) کے لیے handshake کی تاخیر کو ہٹاتا ہے، `preload` دیر سے دریافت شدہ critical assets (fonts، LCP image) کو ترجیح دیتا ہے، اور `prefetch` اگلی navigation کو فوری محسوس کرتا ہے۔ اگر سراج نسخت استعمال کریں تو وہ Core Web Vitals میں معنی خیز بہتری لاتے ہیں۔