preload, prefetch ਅਤੇ preconnect ਵਰਗੇ ਸਰੋਤ ਸੰਕੇਤ ਕੀ ਹਨ?

Question

Accepted Answer

**ਸਰੋਤ ਸੰਕੇਤ** `` ਟੈਗ ਹੁੰਦੇ ਹਨ ਜੋ ਬ੍ਰਾਊਜ਼ਰ ਨੂੰ ਸਰੋਤਾਂ ਨੂੰ ਵੇਗ ਨਾਲ ਲਾਈਨ ਵਿਚ ਲਿਆਉਣ ਜਾਂ ਜੁੜਨ ਲਈ ਕਹਿੰਦੇ ਹਨ, ਲੋਡ ਪ੍ਰਦਰਸ਼ਨ ਨੂੰ ਬਿਹਤਰ ਬਣਾਉਂਦੇ ਹਨ। ਹਰ ਇੱਕ ਵੱਖ-ਵੱਖ ਸਮਾਂ/ਤਰਜੀਹ ਦੀ ਲੋੜ ਪੂਰੀ ਕਰਦਾ ਹੈ। ```html ``` ## ਹਰ ਇੱਕ ਕੀ ਕਰਦਾ ਹੈ - **`preload`** — "ਮੈਨੂੰ ਇਹ **ਮੌਜੂਦਾ ਸਫ਼ੇ ਲਈ** ਚਾਹੀਦਾ ਹੈ, ਇਸ ਨੂੰ ਹੁਣ ਉੱਚ ਤਰਜੀਹ ਨਾਲ ਲਿਆਓ।" ਮਹੱਤਵਪੂਰਨ ਸਰੋਤਾਂ ਲਈ ਜੋ ਪਾਰਸਰ ਨੂੰ ਦੇਰ ਨਾਲ ਮਿਲਦੇ ਹਨ: ਫਾਂਟਸ, ਹੀਰੋ ਚਿੱਤਰ, CSS-ਹਵਾਲਾ ਸਰੋਤਾਂ। `as` ਦੀ ਲੋੜ ਹੈ ਤਾਂ ਜੋ ਬ੍ਰਾਊਜ਼ਰ ਸਹੀ ਤਰਜੀਹ/ਹੈਡਰ ਸੈਟ ਕਰੇ। - **`preconnect`** — "ਮੈਂ ਜਲਦੀ ਇਸ **ਮੁਲ** ਨਾਲ ਜੁੜਾਂ ਗਾ; DNS ਲੁਕ ਅੱਪ + TCP + TLS ਹ্যান্ਡਸ਼ੇਕ ਹੁਣ ਕਰੋ।" ਤੀਜੇ ਧਿਰ (API, ਫਾਂਟ ਹੋਸਟ, CDN) ਨੂੰ ਪਹਿਲੀ ਬੇਨਤੀ ਤੋਂ ਪਹਿਲਾਂ ਰਾਊਂਡ-ਟ੍ਰਿਪਸ ਬਚਾਉਂਦਾ ਹੈ। ਕੁਝ ਮਹੱਤਵਪੂਰਨ ਮੂਲਾਂ ਲਈ ਵਰਤੋ। - **`dns-prefetch`** — preconnect ਦਾ ਇੱਕ ਹਲਕਾ ਸੰਸਕਰਣ: ਸਿਰਫ DNS ਰੈਜ਼ੋਲਿਊਸ਼ਨ। ਚੰਗਾ ਫੈਲਬੈਕ / ਬਹੁਤ ਸਾਰੇ ਮੂਲਾਂ ਲਈ। - **`prefetch`** — "ਮੈਨੂੰ **ਸ਼ਾਇਦ** ਇਹ **ਅਗਲੀ** ਨੈਵੀਗੇਸ਼ਨ ਲਈ ਚਾਹੀਦਾ ਹੋ; ਇਸ ਨੂੰ ਖ਼ਾਲੀ ਹੋਣ ਤੇ ਘੱਟ ਤਰਜੀਹ ਨਾਲ ਲਿਆਓ।" ਸੰਭਾਵਿਤ-ਅਗਲੇ ਸਫ਼ਿਆਂ/ਸਰੋਤਾਂ ਲਈ। ਭਵਿਸ਼ਯਤ ਲਈ ਕੈਸ਼ ਕੀਤਾ, ਮੌਜੂਦਾ ਸਫ਼ਾ ਨਹੀਂ। ## ਇੱਕ ਆਮ ਅਸਲ ਉਦਾਹਰਨ: ਫਾਂਟਸ ```html ``` ਫਾਂਟਸ ਦੇਰ ਨਾਲ ਖੋਜੇ ਜਾਂਦੇ ਹਨ (ਬ੍ਰਾਊਜ਼ਰ ਨੂੰ ਪਹਿਲਾਂ CSS ਨੂੰ ਪਾਰਸ ਕਰਨਾ ਚਾਹੀਦਾ ਹੈ), ਇਸ ਲਈ ਉਹਨਾਂ ਨੂੰ ਪ੍ਰਿਲੋਡ ਕਰਨਾ ਅਦਿਸ਼ ਪਾਠ ਦੇਰ ਤੋਂ ਬਚਾਉਂਦਾ ਹੈ। ## ਸਾਵਧਾਨੀ: ਬਹੁਤ ਸਾਰੇ ਸੰਕੇਤ ਨਾ ਦਿਓ ਸਭ ਕੁਝ ਪ੍ਰਿਲੋਡ ਕਰਨਾ ਉਦੇਸ਼ ਨੂੰ ਨਸ਼ਟ ਕਰਦਾ ਹੈ — ਇਹ ਸੱਚਮੁੱਚ ਮਹੱਤਵਪੂਰਨ ਸਰੋਤਾਂ ਦੇ ਨਾਲ ਬੈਂਡਵਿਡਥ ਲਈ ਸਪੜ੍ਹਾ ਕਰਦਾ ਹੈ। ਸਿਰਫ ਕੁਝ ਸਭ ਤੋਂ ਮਹੱਤਵਪੂਰਨ ਸੰਕੇਤ ਦਿਓ। ## ਇਹ ਮਾਇਨੇ ਕਿਉਂ ਰੱਖਦਾ ਹੈ ਸਰੋਤ ਸੰਕੇਤ ਮਹੱਤਵਪੂਰਨ ਮਾਰਗ ਤੋਂ ਲੇਟੈਂਸੀ ਨੂੰ ਘਟਾਉਂਦੇ ਹਨ: `preconnect` ਤੀਜੀ ਧਿਰ ਲਈ ਹ্যান্ਡਸ਼ੇਕ ਦੇਰ ਨੂੰ ਹਟਾਉਂਦਾ ਹੈ, `preload` ਦੇਰ ਨਾਲ ਖੋਜੇ ਗਏ ਮਹੱਤਵਪੂਰਨ ਸਰੋਤਾਂ (ਫਾਂਟਸ, LCP ਚਿੱਤਰ) ਨੂੰ ਤਰਜੀਹ ਦਿੰਦਾ ਹੈ, ਅਤੇ `prefetch` **ਅਗਲੀ** ਨੈਵੀਗੇਸ਼ਨ ਨੂੰ ਤੁਰੰਤ ਮਹਿਸੂਸ ਕਰਵਾਉਂਦਾ ਹੈ। ਸਰਜਿਕ ਢੰਗ ਨਾਲ ਵਰਤੇ, ਉਹ Core Web Vitals ਨੂੰ ਅਰਥਪੂਰਣ ਤਰੀਕੇ ਨਾਲ ਬਿਹਤਰ ਬਣਾਉਂਦੇ ਹਨ।