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