ಇವೆ ವೆಬ್ ಕಾರ್ಯಕ್ಷಮತೆಯನ್ನು ಸುಧಾರಿಸಲು ಹಲವು ಮಾರ್ಗಗಳು. ಅವುಗಳಲ್ಲಿ ಒಂದು ವಿಷಯವನ್ನು ಮೊದಲೇ ಲೋಡ್ ಮಾಡುವುದು ನಂತರ ಅಗತ್ಯವಾಗುತ್ತದೆ. CSS ಪೂರ್ವ-ಸಂಸ್ಕರಣೆ, ಪೂರ್ಣ ಪುಟದ ಪೂರ್ವ ರೆಂಡರಿಂಗ್ ಅಥವಾ ಡೊಮೇನ್ ಹೆಸರು ರೆಸಲ್ಯೂಶನ್. ನಾವು ಎಲ್ಲವನ್ನೂ ಮುಂಚಿತವಾಗಿ ಮಾಡುತ್ತೇವೆ, ತದನಂತರ ಫಲಿತಾಂಶವನ್ನು ತಕ್ಷಣವೇ ಪ್ರದರ್ಶಿಸುತ್ತೇವೆ! ತಂಪಾಗಿ ಧ್ವನಿಸುತ್ತದೆ.

ಇನ್ನೂ ತಂಪಾಗಿರುವ ಸಂಗತಿಯೆಂದರೆ, ಅದನ್ನು ಸರಳವಾಗಿ ಅಳವಡಿಸಲಾಗಿದೆ. ಐದು ಟ್ಯಾಗ್‌ಗಳು ಪ್ರಾಥಮಿಕ ಕ್ರಿಯೆಗಳನ್ನು ನಿರ್ವಹಿಸಲು ಬ್ರೌಸರ್‌ಗೆ ಆಜ್ಞೆಯನ್ನು ನೀಡಿ:

<link rel="prefetch" href="/kn/style.css" as="style" />
<link rel="preload" href="/kn/style.css" as="style" />

<link rel="preconnect" href="https://example.com" />
<link rel="dns-prefetch" href="https://example.com" />

<link rel="prerender" href="https://example.com/about.html" />

ಅವರು ಏನು ಮಾಡುತ್ತಾರೆ ಮತ್ತು ಯಾವಾಗ ಬಳಸಬೇಕು ಎಂಬುದನ್ನು ಸಂಕ್ಷಿಪ್ತವಾಗಿ ವಿವರಿಸೋಣ.

ಇಲ್ಲಿಗೆ ಹೋಗು: ಪೂರ್ವ ಲೋಡ್ · ಪೂರ್ವಪಾವತಿ · ಪೂರ್ವಸಂಪರ್ಕ · dns-ಪ್ರಿಫೆಚ್ · ಪೂರ್ವಸಲ್ಲಿಕೆ

ಪೂರ್ವ ಲೋಡ್

<link rel= "preload"> ಸಾಧ್ಯವಾದಷ್ಟು ಬೇಗ ಸಂಪನ್ಮೂಲವನ್ನು (ಸ್ಕ್ರಿಪ್ಟ್ ಅಥವಾ ಸ್ಟೈಲ್‌ಶೀಟ್‌ನಂತಹ) ಲೋಡ್ ಮಾಡಲು ಮತ್ತು ಸಂಗ್ರಹಿಸಲು ಬ್ರೌಸರ್‌ಗೆ ಹೇಳುತ್ತದೆ. ಪುಟವನ್ನು ಲೋಡ್ ಮಾಡಿದ ಕೆಲವು ಸೆಕೆಂಡುಗಳ ನಂತರ ಸಂಪನ್ಮೂಲ ಅಗತ್ಯವಿರುವಾಗ ಇದು ಉಪಯುಕ್ತವಾಗಿದೆ - ಮತ್ತು ನೀವು ಪ್ರಕ್ರಿಯೆಯನ್ನು ವೇಗಗೊಳಿಸಲು ಬಯಸುತ್ತೀರಿ.

ಲೋಡ್ ಮಾಡಿದ ನಂತರ ಸಂಪನ್ಮೂಲದೊಂದಿಗೆ ಬ್ರೌಸರ್ ಏನನ್ನೂ ಮಾಡುವುದಿಲ್ಲ. ಸ್ಕ್ರಿಪ್ಟ್‌ಗಳನ್ನು ಕಾರ್ಯಗತಗೊಳಿಸಲಾಗಿಲ್ಲ, ಸ್ಟೈಲ್ ಶೀಟ್‌ಗಳನ್ನು ಅನ್ವಯಿಸಲಾಗಿಲ್ಲ. ಸಂಪನ್ಮೂಲವನ್ನು ಸರಳವಾಗಿ ಸಂಗ್ರಹಿಸಲಾಗಿದೆ ಮತ್ತು ವಿನಂತಿಯ ಮೇರೆಗೆ ತಕ್ಷಣವೇ ಲಭ್ಯವಾಗುತ್ತದೆ.

ವಾಕ್ಯ

<link rel="preload" href="/kn/style.css" as="style" />

href ನೀವು ಡೌನ್‌ಲೋಡ್ ಮಾಡಲು ಬಯಸುವ ಸಂಪನ್ಮೂಲವನ್ನು ಸೂಚಿಸುತ್ತದೆ.

as ಬ್ರೌಸರ್‌ನಲ್ಲಿ ಡೌನ್‌ಲೋಡ್ ಮಾಡಬಹುದಾದ ಯಾವುದಾದರೂ ಆಗಿರಬಹುದು:

style ಶೈಲಿ ಹಾಳೆಗಳಿಗಾಗಿ,
script ಸ್ಕ್ರಿಪ್ಟ್‌ಗಳಿಗಾಗಿ,
font ಫಾಂಟ್‌ಗಳಿಗಾಗಿ,
fetch ಬಳಸಿ ಲೋಡ್ ಮಾಡಲಾದ ಸಂಪನ್ಮೂಲಗಳಿಗಾಗಿ fetch() ಅಥವಾ XMLHttpRequest,
ಪೂರ್ಣ ಪಟ್ಟಿಯನ್ನು ನೋಡಿ MDN ನಲ್ಲಿ.

ಗುಣಲಕ್ಷಣವನ್ನು ನಿರ್ದಿಷ್ಟಪಡಿಸುವುದು ಮುಖ್ಯವಾಗಿದೆ as - ಇದು ಬ್ರೌಸರ್‌ಗೆ ಸರಿಯಾಗಿ ಆದ್ಯತೆ ನೀಡಲು ಮತ್ತು ಡೌನ್‌ಲೋಡ್‌ಗಳನ್ನು ನಿಗದಿಪಡಿಸಲು ಸಹಾಯ ಮಾಡುತ್ತದೆ.

ಯಾವಾಗ ಬಳಸಬೇಕು

ಸದ್ಯದಲ್ಲಿಯೇ ಸಂಪನ್ಮೂಲ ಅಗತ್ಯವಿದ್ದಾಗ ಪೂರ್ವ ಲೋಡ್ ಅನ್ನು ಬಳಸಿ. ಉದಾಹರಣೆಗೆ:

ಬಾಹ್ಯ ಫೈಲ್‌ನಿಂದ ಪ್ರಮಾಣಿತವಲ್ಲದ ಫಾಂಟ್‌ಗಳು:
```

<link rel="stylesheet" href="index.css" />
/* index.css */
@font-face {
  src: url('comic-sans.woff2') format('woff2');
}
```
ಪೂರ್ವನಿಯೋಜಿತವಾಗಿ comic-sans.woff2 ಡೌನ್‌ಲೋಡ್ ಮತ್ತು ಪಾರ್ಸಿಂಗ್ ಮಾಡಿದ ನಂತರವೇ ಲೋಡ್ ಆಗಲು ಪ್ರಾರಂಭವಾಗುತ್ತದೆ index.css. ತುಂಬಾ ಸಮಯ ಕಾಯುವುದನ್ನು ತಪ್ಪಿಸಲು, ನೀವು ಮೊದಲು ಬಳಸಿ ಫಾಂಟ್ ಅನ್ನು ಡೌನ್‌ಲೋಡ್ ಮಾಡಬಹುದು <link rel= "preload">:
```
<link rel="preload" href="comic-sans.woff2" as="font" />
```
ವಿಧಾನದ ಪ್ರಕಾರ ನಿಮ್ಮ ಶೈಲಿಗಳನ್ನು ನೀವು ಪ್ರತ್ಯೇಕಿಸಿದರೆ ಕ್ರಿಟಿಕಲ್ ಸಿಎಸ್ಎಸ್ ಎರಡು ಭಾಗಗಳಾಗಿ, ನಿರ್ಣಾಯಕ (ತಕ್ಷಣದ ರೆಂಡರಿಂಗ್‌ಗಾಗಿ) ಮತ್ತು ವಿಮರ್ಶಾತ್ಮಕವಲ್ಲದ:
```
<style>
/* Inlined critical styles */
</style>

<script>
/* Custom JS that starts downloading non-critical styles */
loadCSS('/app/non-critical.css');
</script>
```
ಈ ವಿಧಾನದೊಂದಿಗೆ, JavaScript ರನ್ ಮಾಡಿದಾಗ ಮಾತ್ರ ನಿರ್ಣಾಯಕವಲ್ಲದ ಶೈಲಿಗಳು ಲೋಡ್ ಆಗಲು ಪ್ರಾರಂಭಿಸುತ್ತವೆ, ಇದು ರೆಂಡರಿಂಗ್ ಮಾಡಿದ ಕೆಲವು ಸೆಕೆಂಡುಗಳ ನಂತರ ಸಂಭವಿಸಬಹುದು. ಬದಲಿಗೆ JS ಬಳಕೆ ಕಾಯುವ <link rel= "preload">ಮೊದಲೇ ಡೌನ್‌ಲೋಡ್ ಮಾಡಲು ಪ್ರಾರಂಭಿಸಲು:
```
<style>
/* Inlined critical styles */
</style>

<link rel="preload" href="/kn/app/non-critical.css" as="style" />

<script>
/* Custom JS that starts downloading non-critical styles */
loadCSS('/app/non-critical.css');
</script>
```

ಪ್ರಿಲೋಡಿಂಗ್ ಅನ್ನು ಅತಿಯಾಗಿ ಬಳಸಬೇಡಿ. ನೀವು ಎಲ್ಲವನ್ನೂ ಸತತವಾಗಿ ಲೋಡ್ ಮಾಡಿದರೆ, ಸೈಟ್ ಮಾಂತ್ರಿಕವಾಗಿ ವೇಗವನ್ನು ಹೆಚ್ಚಿಸುವುದಿಲ್ಲ; ಇದಕ್ಕೆ ವಿರುದ್ಧವಾಗಿ, ಬ್ರೌಸರ್ ತನ್ನ ಕೆಲಸವನ್ನು ಸರಿಯಾಗಿ ಯೋಜಿಸುವುದನ್ನು ತಡೆಯುತ್ತದೆ.

ಪೂರ್ವಪಡೆಯುವಿಕೆಯೊಂದಿಗೆ ಗೊಂದಲಕ್ಕೀಡಾಗಬಾರದು. ಬಳಸಬೇಡಿ <link rel= "preload">, ಪುಟ ಲೋಡ್ ಆದ ತಕ್ಷಣ ನಿಮಗೆ ಸಂಪನ್ಮೂಲ ಅಗತ್ಯವಿಲ್ಲದಿದ್ದರೆ. ನಿಮಗೆ ನಂತರ ಅಗತ್ಯವಿದ್ದರೆ, ಉದಾಹರಣೆಗೆ ಮುಂದಿನ ಪುಟಕ್ಕೆ, ನಂತರ ಬಳಸಿ <link rel= "prefetch">.

ವಿವರಗಳನ್ನು ವೀಕ್ಷಿಸಿ

ಇದು ಅಗತ್ಯವಿರುವ ಟ್ಯಾಗ್ ಆಗಿದೆ ಎಲ್ಲಾ ಇತರ ಟ್ಯಾಗ್‌ಗಳಿಗಿಂತ ಭಿನ್ನವಾಗಿ ಬ್ರೌಸರ್‌ನಿಂದ ಕಾರ್ಯಗತಗೊಳಿಸಲು (ಅದನ್ನು ಬೆಂಬಲಿಸಿದರೆ). ಪೂರ್ವ ಲೋಡ್ ಮಾಡಲು ಸಂಬಂಧಿಸಿದೆ. ಬ್ರೌಸರ್ ನಿರ್ದಿಷ್ಟಪಡಿಸಿದ ಸಂಪನ್ಮೂಲವನ್ನು ಡೌನ್‌ಲೋಡ್ ಮಾಡಬೇಕು <link rel="preload">. ಇತರ ಸಂದರ್ಭಗಳಲ್ಲಿ ಇದು ಪೂರ್ವ ಲೋಡ್ ಮಾಡುವುದನ್ನು ನಿರ್ಲಕ್ಷಿಸಬಹುದು, ಉದಾಹರಣೆಗೆ ಅದು ನಿಧಾನಗತಿಯ ಸಂಪರ್ಕದಲ್ಲಿ ಚಾಲನೆಯಲ್ಲಿದ್ದರೆ.

ಆದ್ಯತೆಗಳು. ಬ್ರೌಸರ್‌ಗಳು ಸಾಮಾನ್ಯವಾಗಿ ಪ್ರಮುಖ ಸಂಪನ್ಮೂಲಗಳನ್ನು ಮೊದಲು ಲೋಡ್ ಮಾಡಲು ವಿಭಿನ್ನ ಸಂಪನ್ಮೂಲಗಳಿಗೆ (ಶೈಲಿಗಳು, ಸ್ಕ್ರಿಪ್ಟ್‌ಗಳು, ಫಾಂಟ್‌ಗಳು, ಇತ್ಯಾದಿ) ವಿಭಿನ್ನ ಆದ್ಯತೆಗಳನ್ನು ನಿಯೋಜಿಸುತ್ತವೆ. ಈ ಸಂದರ್ಭದಲ್ಲಿ, ಬ್ರೌಸರ್ ಗುಣಲಕ್ಷಣದ ಮೂಲಕ ಆದ್ಯತೆಯನ್ನು ನಿರ್ಧರಿಸುತ್ತದೆ as. Chrome ಬ್ರೌಸರ್‌ಗಾಗಿ ನೀವು ನೋಡಬಹುದು ಪೂರ್ಣ ಆದ್ಯತೆಯ ಕೋಷ್ಟಕ.

ಪೂರ್ವಪಾವತಿ

<link rel= "prefetch"> ಹಿನ್ನೆಲೆಯಲ್ಲಿ ಸಂಪನ್ಮೂಲವನ್ನು (ಸ್ಕ್ರಿಪ್ಟ್ ಅಥವಾ ಸ್ಟೈಲ್ ಶೀಟ್‌ನಂತಹ) ಡೌನ್‌ಲೋಡ್ ಮಾಡಲು ಮತ್ತು ಸಂಗ್ರಹಿಸಲು ಬ್ರೌಸರ್ ಅನ್ನು ಕೇಳುತ್ತದೆ. ಲೋಡ್ ಮಾಡುವಿಕೆಯು ಕಡಿಮೆ ಆದ್ಯತೆಯಲ್ಲಿ ಸಂಭವಿಸುತ್ತದೆ ಆದ್ದರಿಂದ ಇದು ಹೆಚ್ಚು ಪ್ರಮುಖ ಸಂಪನ್ಮೂಲಗಳೊಂದಿಗೆ ಮಧ್ಯಪ್ರವೇಶಿಸುವುದಿಲ್ಲ. ಮುಂದಿನ ಪುಟದಲ್ಲಿ ಸಂಪನ್ಮೂಲ ಅಗತ್ಯವಿದ್ದರೆ ಮತ್ತು ನೀವು ಅದನ್ನು ಮುಂಚಿತವಾಗಿ ಸಂಗ್ರಹಿಸಲು ಬಯಸಿದರೆ ಇದು ಉಪಯುಕ್ತವಾಗಿದೆ.

ಇಲ್ಲಿಯೂ ಸಹ, ಬ್ರೌಸರ್ ಲೋಡ್ ಮಾಡಿದ ನಂತರ ಸಂಪನ್ಮೂಲದೊಂದಿಗೆ ಏನನ್ನೂ ಮಾಡುವುದಿಲ್ಲ. ಸ್ಕ್ರಿಪ್ಟ್‌ಗಳನ್ನು ಕಾರ್ಯಗತಗೊಳಿಸಲಾಗಿಲ್ಲ, ಸ್ಟೈಲ್ ಶೀಟ್‌ಗಳನ್ನು ಅನ್ವಯಿಸಲಾಗಿಲ್ಲ. ಸಂಪನ್ಮೂಲವನ್ನು ಸರಳವಾಗಿ ಸಂಗ್ರಹಿಸಲಾಗಿದೆ ಮತ್ತು ವಿನಂತಿಯ ಮೇರೆಗೆ ತಕ್ಷಣವೇ ಲಭ್ಯವಾಗುತ್ತದೆ.

ವಾಕ್ಯ

<link rel="prefetch" href="/kn/style.css" as="style" />

href ನೀವು ಡೌನ್‌ಲೋಡ್ ಮಾಡಲು ಬಯಸುವ ಸಂಪನ್ಮೂಲವನ್ನು ಸೂಚಿಸುತ್ತದೆ.

as ಬ್ರೌಸರ್‌ನಲ್ಲಿ ಡೌನ್‌ಲೋಡ್ ಮಾಡಬಹುದಾದ ಯಾವುದಾದರೂ ಆಗಿರಬಹುದು:

style ಶೈಲಿ ಹಾಳೆಗಳಿಗಾಗಿ,
script ಸ್ಕ್ರಿಪ್ಟ್‌ಗಳಿಗಾಗಿ,
font ಫಾಂಟ್‌ಗಳಿಗಾಗಿ,
fetch ಬಳಸಿ ಲೋಡ್ ಮಾಡಲಾದ ಸಂಪನ್ಮೂಲಗಳಿಗಾಗಿ fetch() ಅಥವಾ XMLHttpRequest,
ಪೂರ್ಣ ಪಟ್ಟಿಯನ್ನು ನೋಡಿ MDN ನಲ್ಲಿ.

ಯಾವಾಗ ಬಳಸಬೇಕು

ಇತರ ಪುಟಗಳಿಂದ ಸಂಪನ್ಮೂಲಗಳನ್ನು ಲೋಡ್ ಮಾಡಲು, ನಿಮಗೆ ಇನ್ನೊಂದು ಪುಟದಿಂದ ಸಂಪನ್ಮೂಲ ಅಗತ್ಯವಿದ್ದರೆ ಮತ್ತು ಆ ಪುಟದ ರೆಂಡರಿಂಗ್ ಅನ್ನು ವೇಗಗೊಳಿಸಲು ನೀವು ಅದನ್ನು ಮೊದಲೇ ಲೋಡ್ ಮಾಡಲು ಬಯಸಿದರೆ. ಉದಾಹರಣೆಗೆ:

ನೀವು ಆನ್‌ಲೈನ್ ಸ್ಟೋರ್ ಅನ್ನು ಹೊಂದಿದ್ದೀರಿ ಮತ್ತು ಉತ್ಪನ್ನದ ಪುಟಕ್ಕಾಗಿ 40% ಬಳಕೆದಾರರು ಮುಖಪುಟವನ್ನು ತೊರೆಯುತ್ತಾರೆ. ಬಳಸಿ <link rel= "prefetch">, ಉತ್ಪನ್ನ ಪುಟಗಳನ್ನು ನಿರೂಪಿಸಲು CSS ಮತ್ತು JS ಫೈಲ್‌ಗಳನ್ನು ಲೋಡ್ ಮಾಡಲಾಗುತ್ತಿದೆ.
ನೀವು ಒಂದೇ ಪುಟದ ಅಪ್ಲಿಕೇಶನ್ ಅನ್ನು ಹೊಂದಿದ್ದೀರಿ ಮತ್ತು ವಿಭಿನ್ನ ಪುಟಗಳು ವಿಭಿನ್ನ ಪ್ಯಾಕೇಜ್‌ಗಳನ್ನು ಲೋಡ್ ಮಾಡುತ್ತವೆ. ಬಳಕೆದಾರರು ಪುಟಕ್ಕೆ ಭೇಟಿ ನೀಡಿದಾಗ, ಅದು ಲಿಂಕ್ ಮಾಡುವ ಎಲ್ಲಾ ಪುಟಗಳ ಪ್ಯಾಕೇಜ್‌ಗಳನ್ನು ಮೊದಲೇ ಲೋಡ್ ಮಾಡಬಹುದು.

ಈ ಟ್ಯಾಗ್ ಅನ್ನು ಯಾವುದೇ ಮಟ್ಟಿಗೆ ಸುರಕ್ಷಿತವಾಗಿ ಬಳಸಬಹುದಾದ ಸಾಧ್ಯತೆಯಿದೆ.. ಬ್ರೌಸರ್‌ಗಳು ಸಾಮಾನ್ಯವಾಗಿ ಪ್ರಿಫೆಚ್ ಅನ್ನು ಕಡಿಮೆ ಆದ್ಯತೆಯೊಂದಿಗೆ ನಿಗದಿಪಡಿಸುತ್ತವೆ, ಆದ್ದರಿಂದ ಇದು ಯಾರಿಗೂ ತೊಂದರೆ ನೀಡುವುದಿಲ್ಲ. ಇದು ಬಳಕೆದಾರರ ದಟ್ಟಣೆಯನ್ನು ಬಳಸುತ್ತದೆ ಎಂಬುದನ್ನು ನೆನಪಿನಲ್ಲಿಡಿ, ಅದು ಹಣವನ್ನು ಖರ್ಚು ಮಾಡಬಹುದು.

ತುರ್ತು ವಿನಂತಿಗಳಿಗಾಗಿ ಅಲ್ಲ. ಬಳಸಬೇಡಿ <link rel= "prefetch">, ಕೆಲವು ಸೆಕೆಂಡುಗಳಲ್ಲಿ ಸಂಪನ್ಮೂಲ ಅಗತ್ಯವಿರುವಾಗ. ಈ ಸಂದರ್ಭದಲ್ಲಿ, ಬಳಸಿ <link rel= "preload">.

ವಿವರಗಳನ್ನು ವೀಕ್ಷಿಸಿ

ಐಚ್ಛಿಕ ಟ್ಯಾಗ್. ಈ ಸೂಚನೆಯನ್ನು ಅನುಸರಿಸಲು ಬ್ರೌಸರ್ ಅಗತ್ಯವಿಲ್ಲ; ಇದು ಅದನ್ನು ನಿರ್ಲಕ್ಷಿಸಬಹುದು, ಉದಾಹರಣೆಗೆ, ನಿಧಾನ ಸಂಪರ್ಕದಲ್ಲಿ.

Chrome ನಲ್ಲಿ ಆದ್ಯತೆ. Chrome ನಲ್ಲಿ <link rel= "prefetch"> ಸಾಮಾನ್ಯವಾಗಿ ಕನಿಷ್ಠ ಆದ್ಯತೆಯೊಂದಿಗೆ ಕಾರ್ಯಗತಗೊಳಿಸಲಾಗುತ್ತದೆ (ನೋಡಿ ಪೂರ್ಣ ಆದ್ಯತೆಯ ಕೋಷ್ಟಕ), ಅಂದರೆ, ಎಲ್ಲವನ್ನೂ ಲೋಡ್ ಮಾಡಿದ ನಂತರ.

ಪೂರ್ವಸಂಪರ್ಕ

<link rel= "preconnect"> ನೀವು ಭವಿಷ್ಯದಲ್ಲಿ ಸಂಪರ್ಕ ಸೆಟಪ್ ಅನ್ನು ವೇಗಗೊಳಿಸಲು ಬಯಸಿದಾಗ ಮುಂಚಿತವಾಗಿ ಡೊಮೇನ್‌ಗೆ ಸಂಪರ್ಕಿಸಲು ಬ್ರೌಸರ್ ಅನ್ನು ಕೇಳುತ್ತದೆ.

ಹೊಸ ಮೂರನೇ ವ್ಯಕ್ತಿಯ ಡೊಮೇನ್‌ನಿಂದ ಯಾವುದೇ ಸಂಪನ್ಮೂಲಗಳನ್ನು ಹಿಂಪಡೆದರೆ ಬ್ರೌಸರ್ ಸಂಪರ್ಕವನ್ನು ಸ್ಥಾಪಿಸಬೇಕು. ಉದಾಹರಣೆಗೆ, ಇದು Google ಫಾಂಟ್‌ಗಳನ್ನು ಲೋಡ್ ಮಾಡಿದರೆ, CDN ನಿಂದ ಫಾಂಟ್‌ಗಳನ್ನು ಪ್ರತಿಕ್ರಿಯಿಸಿ ಅಥವಾ API ಸರ್ವರ್‌ನಿಂದ JSON ಪ್ರತಿಕ್ರಿಯೆಯನ್ನು ವಿನಂತಿಸಿದರೆ.

ಹೊಸ ಸಂಪರ್ಕವನ್ನು ಸ್ಥಾಪಿಸುವುದು ಸಾಮಾನ್ಯವಾಗಿ ಕೆಲವು ನೂರು ಮಿಲಿಸೆಕೆಂಡುಗಳನ್ನು ತೆಗೆದುಕೊಳ್ಳುತ್ತದೆ. ಇದನ್ನು ಒಮ್ಮೆ ಮಾಡಲಾಗುತ್ತದೆ, ಆದರೆ ಇನ್ನೂ ಸಮಯ ತೆಗೆದುಕೊಳ್ಳುತ್ತದೆ. ನೀವು ಮುಂಚಿತವಾಗಿ ಸಂಪರ್ಕವನ್ನು ಸ್ಥಾಪಿಸಿದ್ದರೆ, ನೀವು ಸಮಯವನ್ನು ಉಳಿಸುತ್ತೀರಿ ಮತ್ತು ಈ ಡೊಮೇನ್‌ನಿಂದ ಸಂಪನ್ಮೂಲಗಳನ್ನು ವೇಗವಾಗಿ ಡೌನ್‌ಲೋಡ್ ಮಾಡುತ್ತೀರಿ.

ವಾಕ್ಯ

<link rel= "preconnect" href="https://api.my-app.com" />

href ನೀವು IP ವಿಳಾಸವನ್ನು ನಿರ್ಧರಿಸಲು ಬಯಸುವ ಡೊಮೇನ್ ಹೆಸರನ್ನು ಸೂಚಿಸುತ್ತದೆ. ಪೂರ್ವಪ್ರತ್ಯಯದೊಂದಿಗೆ ನಿರ್ದಿಷ್ಟಪಡಿಸಬಹುದು (https://domain.com) ಅಥವಾ ಅದು ಇಲ್ಲದೆ (//domain.com).

ಯಾವಾಗ ಬಳಸಬೇಕು

ಶೀಘ್ರದಲ್ಲೇ ಅಗತ್ಯವಿರುವ ಡೊಮೇನ್‌ಗಳಿಗಾಗಿ ಬಳಸಿ ಅಲ್ಲಿಂದ ಪ್ರಮುಖ ಶೈಲಿ, ಸ್ಕ್ರಿಪ್ಟ್ ಅಥವಾ ಚಿತ್ರವನ್ನು ಡೌನ್‌ಲೋಡ್ ಮಾಡಲು, ಆದರೆ ನಿಮಗೆ ಸಂಪನ್ಮೂಲ URL ಇನ್ನೂ ತಿಳಿದಿಲ್ಲ. ಉದಾಹರಣೆಗೆ:

ನಿಮ್ಮ ಅಪ್ಲಿಕೇಶನ್ ಅನ್ನು ಹೋಸ್ಟ್ ಮಾಡಲಾಗಿದೆ my-app.com ಮತ್ತು AJAX ಗೆ ವಿನಂತಿಗಳನ್ನು ಮಾಡುತ್ತದೆ api.my-app.com: ನೀವು ನಿರ್ದಿಷ್ಟ ಪ್ರಶ್ನೆಗಳನ್ನು ಮುಂಚಿತವಾಗಿ ತಿಳಿದಿರುವುದಿಲ್ಲ ಏಕೆಂದರೆ ಅವುಗಳು JS ನಿಂದ ಕ್ರಿಯಾತ್ಮಕವಾಗಿ ಮಾಡಲ್ಪಟ್ಟಿವೆ. ಇಲ್ಲಿ ಡೊಮೇನ್‌ಗೆ ಪೂರ್ವ-ಸಂಪರ್ಕಿಸಲು ಟ್ಯಾಗ್ ಅನ್ನು ಬಳಸುವುದು ಸೂಕ್ತವಾಗಿದೆ.
ನಿಮ್ಮ ಅಪ್ಲಿಕೇಶನ್ ಅನ್ನು ಹೋಸ್ಟ್ ಮಾಡಲಾಗಿದೆ my-app.com ಮತ್ತು Google ಫಾಂಟ್‌ಗಳನ್ನು ಬಳಸುತ್ತದೆ. ಅವುಗಳನ್ನು ಎರಡು ಹಂತಗಳಲ್ಲಿ ಡೌನ್‌ಲೋಡ್ ಮಾಡಲಾಗುತ್ತದೆ: ಮೊದಲು, CSS ಫೈಲ್ ಅನ್ನು ಡೊಮೇನ್‌ನಿಂದ ಡೌನ್‌ಲೋಡ್ ಮಾಡಲಾಗುತ್ತದೆ fonts.googleapis.com, ನಂತರ ಈ ಫೈಲ್ ಫಾಂಟ್‌ಗಳನ್ನು ವಿನಂತಿಸುತ್ತದೆ fonts.gstatic.com. ಯಾವ ನಿರ್ದಿಷ್ಟ ಫಾಂಟ್ ಫೈಲ್‌ಗಳು ಎಂದು ನಿಮಗೆ ತಿಳಿಯಲಾಗುವುದಿಲ್ಲ fonts.gstatic.com ನೀವು CSS ಫೈಲ್ ಅನ್ನು ಲೋಡ್ ಮಾಡುವವರೆಗೆ ನಿಮಗೆ ಅಗತ್ಯವಿರುತ್ತದೆ, ಆದ್ದರಿಂದ ನಾವು ಪೂರ್ವಭಾವಿ ಸಂಪರ್ಕವನ್ನು ಮಾತ್ರ ಮಾಡಬಹುದು.

ಕೆಲವು ಮೂರನೇ ವ್ಯಕ್ತಿಯ ಸ್ಕ್ರಿಪ್ಟ್ ಅಥವಾ ಶೈಲಿಯನ್ನು ಸ್ವಲ್ಪ ವೇಗಗೊಳಿಸಲು ಈ ಟ್ಯಾಗ್ ಬಳಸಿ ಪೂರ್ವ ಸ್ಥಾಪಿತ ಸಂಪರ್ಕದಿಂದಾಗಿ.

ಅತಿಯಾಗಿ ಬಳಸಬೇಡಿ. ಸಂಪರ್ಕವನ್ನು ಸ್ಥಾಪಿಸುವುದು ಮತ್ತು ನಿರ್ವಹಿಸುವುದು ಕ್ಲೈಂಟ್ ಮತ್ತು ಸರ್ವರ್ ಎರಡಕ್ಕೂ ದುಬಾರಿ ಕಾರ್ಯಾಚರಣೆಯಾಗಿದೆ. ಗರಿಷ್ಠ 4-6 ಡೊಮೇನ್‌ಗಳಿಗೆ ಈ ಟ್ಯಾಗ್ ಬಳಸಿ.

ವಿವರಗಳನ್ನು ವೀಕ್ಷಿಸಿ

ಐಚ್ಛಿಕ ಟ್ಯಾಗ್. ಈ ಸೂಚನೆಯನ್ನು ಅನುಸರಿಸಲು ಬ್ರೌಸರ್ ಅಗತ್ಯವಿಲ್ಲ ಮತ್ತು ಅದನ್ನು ನಿರ್ಲಕ್ಷಿಸಬಹುದು, ಉದಾಹರಣೆಗೆ, ಅನೇಕ ಸಂಪರ್ಕಗಳನ್ನು ಈಗಾಗಲೇ ಸ್ಥಾಪಿಸಿದ್ದರೆ ಅಥವಾ ಬೇರೆ ಯಾವುದಾದರೂ ಸಂದರ್ಭದಲ್ಲಿ.

ಸಂಪರ್ಕ ಪ್ರಕ್ರಿಯೆಯು ಏನು ಒಳಗೊಂಡಿದೆ?. ಪ್ರತಿ ಸೈಟ್‌ಗೆ ಸಂಪರ್ಕಿಸಲು, ಬ್ರೌಸರ್ ಈ ಕೆಳಗಿನವುಗಳನ್ನು ಮಾಡಬೇಕು:

DNS ರೆಸಲ್ಯೂಶನ್. ಸರ್ವರ್ IP ವಿಳಾಸವನ್ನು ಹುಡುಕಿ (216.58.215.78) ನಿರ್ದಿಷ್ಟಪಡಿಸಿದ ಡೊಮೇನ್ ಹೆಸರಿಗಾಗಿ (google.com).
TCP ಹ್ಯಾಂಡ್ಶೇಕ್. ಸರ್ವರ್‌ನೊಂದಿಗೆ TCP ಸಂಪರ್ಕವನ್ನು ಪ್ರಾರಂಭಿಸಲು ಪ್ಯಾಕೆಟ್‌ಗಳನ್ನು (ಕ್ಲೈಂಟ್ → ಸರ್ವರ್ → ಕ್ಲೈಂಟ್) ವಿನಿಮಯ ಮಾಡಿಕೊಳ್ಳಿ.
TLS ಹ್ಯಾಂಡ್‌ಶೇಕ್ (HTTPS ಸೈಟ್‌ಗಳು ಮಾತ್ರ). ಸುರಕ್ಷಿತ TLS ಸೆಶನ್ ಅನ್ನು ಪ್ರಾರಂಭಿಸಲು ಪ್ಯಾಕೆಟ್ ವಿನಿಮಯದ ಎರಡು ಸುತ್ತುಗಳು (ಕ್ಲೈಂಟ್ → ಸರ್ವರ್ → ಕ್ಲೈಂಟ್ → ಸರ್ವರ್ → ಕ್ಲೈಂಟ್).

ಗಮನಿಸಿ: HTTP/3 ಹ್ಯಾಂಡ್‌ಶೇಕ್ ಕಾರ್ಯವಿಧಾನವನ್ನು ಸುಧಾರಿಸುತ್ತದೆ ಮತ್ತು ವೇಗಗೊಳಿಸುತ್ತದೆ, ಆದರೆ ಇದು ಇನ್ನೂ ಬಹಳ ದೂರದಲ್ಲಿದೆ.

dns-ಪ್ರಿಫೆಚ್

<link rel= "dns-prefetch"> ನೀವು ಶೀಘ್ರದಲ್ಲೇ ಡೊಮೇನ್‌ಗೆ ಸಂಪರ್ಕಿಸುತ್ತಿದ್ದರೆ ಮತ್ತು ಆರಂಭಿಕ ಸಂಪರ್ಕವನ್ನು ವೇಗಗೊಳಿಸಲು ಬಯಸಿದರೆ ಡೊಮೇನ್‌ಗಾಗಿ DNS ರೆಸಲ್ಯೂಶನ್ ಅನ್ನು ಮುಂಚಿತವಾಗಿ ನಿರ್ವಹಿಸಲು ಬ್ರೌಸರ್ ಅನ್ನು ಕೇಳುತ್ತದೆ.

ಹೊಸ ಮೂರನೇ ವ್ಯಕ್ತಿಯ ಡೊಮೇನ್‌ನಿಂದ ಯಾವುದೇ ಸಂಪನ್ಮೂಲಗಳನ್ನು ಹಿಂಪಡೆಯಲು ಬ್ರೌಸರ್ ಡೊಮೇನ್‌ನ IP ವಿಳಾಸವನ್ನು ನಿರ್ಧರಿಸಬೇಕು. ಉದಾಹರಣೆಗೆ, Google ಫಾಂಟ್‌ಗಳನ್ನು ಲೋಡ್ ಮಾಡುವುದು, CDN ನಿಂದ ಫಾಂಟ್‌ಗಳನ್ನು ಪ್ರತಿಕ್ರಿಯಿಸುವುದು ಅಥವಾ API ಸರ್ವರ್‌ನಿಂದ JSON ಪ್ರತಿಕ್ರಿಯೆಯನ್ನು ವಿನಂತಿಸುವುದು.

ಪ್ರತಿ ಹೊಸ ಡೊಮೇನ್‌ಗೆ, DNS ರೆಕಾರ್ಡ್ ರೆಸಲ್ಯೂಶನ್ ಸಾಮಾನ್ಯವಾಗಿ 20-120 ms ತೆಗೆದುಕೊಳ್ಳುತ್ತದೆ. ಇದು ನಿರ್ದಿಷ್ಟ ಡೊಮೇನ್‌ನಿಂದ ಮೊದಲ ಸಂಪನ್ಮೂಲವನ್ನು ಲೋಡ್ ಮಾಡುವುದರ ಮೇಲೆ ಮಾತ್ರ ಪರಿಣಾಮ ಬೀರುತ್ತದೆ, ಆದರೆ ಇನ್ನೂ ವಿಳಂಬವನ್ನು ಪರಿಚಯಿಸುತ್ತದೆ. ನಾವು ಮುಂಚಿತವಾಗಿ DNS ರೆಸಲ್ಯೂಶನ್ ಅನ್ನು ನಿರ್ವಹಿಸಿದರೆ, ನಾವು ಸಮಯವನ್ನು ಉಳಿಸುತ್ತೇವೆ ಮತ್ತು ಸಂಪನ್ಮೂಲವನ್ನು ವೇಗವಾಗಿ ಲೋಡ್ ಮಾಡುತ್ತೇವೆ.

ವಾಕ್ಯ

<link rel= "dns-prefetch" href="https://api.my-app.com" />

href ನೀವು IP ವಿಳಾಸವನ್ನು ಹೊಂದಿಸಲು ಬಯಸುವ ಡೊಮೇನ್ ಹೆಸರನ್ನು ಸೂಚಿಸುತ್ತದೆ. ಪೂರ್ವಪ್ರತ್ಯಯದೊಂದಿಗೆ ನಿರ್ದಿಷ್ಟಪಡಿಸಬಹುದು (https://domain.com) ಅಥವಾ ಅದು ಇಲ್ಲದೆ (//domain.com).

ಯಾವಾಗ ಬಳಸಬೇಕು

ಶೀಘ್ರದಲ್ಲೇ ಅಗತ್ಯವಿರುವ ಡೊಮೇನ್‌ಗಳಿಗಾಗಿ ಬಳಸಿ ಬ್ರೌಸರ್‌ಗೆ ಮುಂಚಿತವಾಗಿ ತಿಳಿದಿಲ್ಲದ ಸಂಪನ್ಮೂಲಗಳನ್ನು ಅಲ್ಲಿಂದ ಡೌನ್‌ಲೋಡ್ ಮಾಡಲು. ಉದಾಹರಣೆಗೆ:

ನಿಮ್ಮ ಅಪ್ಲಿಕೇಶನ್ ಅನ್ನು ಹೋಸ್ಟ್ ಮಾಡಲಾಗಿದೆ my-app.com ಮತ್ತು AJAX ಗೆ ವಿನಂತಿಗಳನ್ನು ಮಾಡುತ್ತದೆ api.my-app.com: ನೀವು ನಿರ್ದಿಷ್ಟ ಪ್ರಶ್ನೆಗಳನ್ನು ಮುಂಚಿತವಾಗಿ ತಿಳಿದಿರುವುದಿಲ್ಲ ಏಕೆಂದರೆ ಅವುಗಳು JS ನಿಂದ ಕ್ರಿಯಾತ್ಮಕವಾಗಿ ಮಾಡಲ್ಪಟ್ಟಿವೆ. ಇಲ್ಲಿ ಡೊಮೇನ್‌ಗೆ ಪೂರ್ವ-ಸಂಪರ್ಕಿಸಲು ಟ್ಯಾಗ್ ಅನ್ನು ಬಳಸುವುದು ಸೂಕ್ತವಾಗಿದೆ.
ನಿಮ್ಮ ಅಪ್ಲಿಕೇಶನ್ ಅನ್ನು ಹೋಸ್ಟ್ ಮಾಡಲಾಗಿದೆ my-app.com, ಮತ್ತು Google ಫಾಂಟ್‌ಗಳನ್ನು ಬಳಸುತ್ತದೆ. ಅವುಗಳನ್ನು ಎರಡು ಹಂತಗಳಲ್ಲಿ ಡೌನ್‌ಲೋಡ್ ಮಾಡಲಾಗುತ್ತದೆ: ಮೊದಲು, CSS ಫೈಲ್ ಅನ್ನು ಡೊಮೇನ್‌ನಿಂದ ಡೌನ್‌ಲೋಡ್ ಮಾಡಲಾಗುತ್ತದೆ fonts.googleapis.com, ನಂತರ ಈ ಫೈಲ್ ಫಾಂಟ್‌ಗಳನ್ನು ವಿನಂತಿಸುತ್ತದೆ fonts.gstatic.com. ಯಾವ ನಿರ್ದಿಷ್ಟ ಫಾಂಟ್ ಫೈಲ್‌ಗಳು ಎಂದು ನಿಮಗೆ ತಿಳಿಯಲಾಗುವುದಿಲ್ಲ fonts.gstatic.com ನೀವು CSS ಫೈಲ್ ಅನ್ನು ಲೋಡ್ ಮಾಡುವವರೆಗೆ ನಿಮಗೆ ಅಗತ್ಯವಿರುತ್ತದೆ, ಆದ್ದರಿಂದ ನಾವು ಪೂರ್ವಭಾವಿ ಸಂಪರ್ಕವನ್ನು ಮಾತ್ರ ಮಾಡಬಹುದು.

ಇದೇ ರೀತಿಯ ಗುಣಲಕ್ಷಣಗಳನ್ನು ದಯವಿಟ್ಟು ಗಮನಿಸಿ <link rel= "dns-prefetch"/> и <link rel= "preconnect">. ಒಂದು ಡೊಮೇನ್‌ಗಾಗಿ ಅವುಗಳನ್ನು ಒಟ್ಟಿಗೆ ಬಳಸುವುದು ಸಾಮಾನ್ಯವಾಗಿ ಅರ್ಥವಾಗುವುದಿಲ್ಲ: <link rel= "preconnect"> ಈಗಾಗಲೇ ಒಳಗೊಂಡಿದೆ <link rel= "dns-prefetch"/> ಮತ್ತು ಹೆಚ್ಚು. ಇದನ್ನು ಎರಡು ಸಂದರ್ಭಗಳಲ್ಲಿ ಸಮರ್ಥಿಸಬಹುದು:

ನೀವು ಹಳೆಯ ಬ್ರೌಸರ್‌ಗಳನ್ನು ಬೆಂಬಲಿಸಲು ಬಯಸುವಿರಾ?. <link rel= "dns-prefetch" /> ಬೆಂಬಲಿಸುತ್ತದೆ IE10 ಮತ್ತು ಸಫಾರಿ 5 ರಿಂದ. <link rel= "preconnect"> Chrome ಮತ್ತು Firefox ನಲ್ಲಿ ಸ್ವಲ್ಪ ಸಮಯದವರೆಗೆ ಬೆಂಬಲಿತವಾಗಿದೆ, ಆದರೆ 11.1 ಮತ್ತು Safari ಗೆ ಮಾತ್ರ ಸೇರಿಸಲಾಗಿದೆ IE/Edge ನಲ್ಲಿ ಇನ್ನೂ ಬೆಂಬಲಿತವಾಗಿಲ್ಲ. ನೀವು ಈ ಬ್ರೌಸರ್‌ಗಳನ್ನು ಬೆಂಬಲಿಸಬೇಕಾದರೆ, ಬಳಸಿ <link rel= "dns-prefetch" /> ಬ್ಯಾಕಪ್ ಆಯ್ಕೆಯಾಗಿ <link rel= "preconnect">.

ನೀವು 4-6 ಡೊಮೇನ್‌ಗಳಿಗಿಂತ ಹೆಚ್ಚಿನ ಸಂಪರ್ಕಗಳನ್ನು ವೇಗಗೊಳಿಸಲು ಬಯಸುತ್ತೀರಿ. ಟ್ಯಾಗ್ ಮಾಡಿ <link rel= "preconnect"> 4-6 ಡೊಮೇನ್‌ಗಳಿಗಿಂತ ಹೆಚ್ಚಿನದನ್ನು ಬಳಸಲು ಶಿಫಾರಸು ಮಾಡುವುದಿಲ್ಲ, ಏಕೆಂದರೆ ಸಂಪರ್ಕವನ್ನು ಸ್ಥಾಪಿಸುವುದು ಮತ್ತು ನಿರ್ವಹಿಸುವುದು ದುಬಾರಿ ಕಾರ್ಯಾಚರಣೆಯಾಗಿದೆ. <link rel= "dns-prefetch" /> ಕಡಿಮೆ ಸಂಪನ್ಮೂಲಗಳನ್ನು ಬಳಸುತ್ತದೆ, ಆದ್ದರಿಂದ ಅಗತ್ಯವಿದ್ದರೆ ಅದನ್ನು ಬಳಸಿ.

ವಿವರಗಳನ್ನು ವೀಕ್ಷಿಸಿ

ಐಚ್ಛಿಕ ಟ್ಯಾಗ್. ಈ ಸೂಚನೆಯನ್ನು ಅನುಸರಿಸಲು ಬ್ರೌಸರ್ ಅಗತ್ಯವಿಲ್ಲ, ಆದ್ದರಿಂದ ಇದು DNS ರೆಸಲ್ಯೂಶನ್ ಅನ್ನು ನಿರ್ವಹಿಸದಿರಬಹುದು, ಉದಾಹರಣೆಗೆ, ಪುಟದಲ್ಲಿ ಅಥವಾ ಬೇರೆ ಯಾವುದಾದರೂ ಅಂತಹ ಟ್ಯಾಗ್‌ಗಳು ಇದ್ದರೆ.

DNS ಎಂದರೇನು. ಇಂಟರ್ನೆಟ್‌ನಲ್ಲಿರುವ ಪ್ರತಿಯೊಂದು ಸರ್ವರ್ ವಿಶಿಷ್ಟವಾದ IP ವಿಳಾಸವನ್ನು ಹೊಂದಿದೆ, ಅದು ಕಾಣುತ್ತದೆ 216.58.215.78. ಸೈಟ್‌ನ ಹೆಸರನ್ನು ಸಾಮಾನ್ಯವಾಗಿ ಬ್ರೌಸರ್‌ನ ವಿಳಾಸ ಪಟ್ಟಿಗೆ ನಮೂದಿಸಲಾಗುತ್ತದೆ (ಉದಾಹರಣೆಗೆ, google.com), ಮತ್ತು DNS (ಡೊಮೈನ್ ನೇಮ್ ಸಿಸ್ಟಮ್) ಸರ್ವರ್‌ಗಳು ಅದನ್ನು ಸರ್ವರ್‌ನ IP ವಿಳಾಸದೊಂದಿಗೆ ಹೊಂದಿಸುತ್ತವೆ (216.58.215.78).

IP ವಿಳಾಸವನ್ನು ನಿರ್ಧರಿಸಲು, ಬ್ರೌಸರ್ DNS ಸರ್ವರ್‌ಗೆ ವಿನಂತಿಯನ್ನು ಮಾಡಬೇಕು. ಹೊಸ ಮೂರನೇ ವ್ಯಕ್ತಿಯ ಡೊಮೇನ್‌ಗೆ ಸಂಪರ್ಕಿಸುವಾಗ ಇದು 20−120 ms ತೆಗೆದುಕೊಳ್ಳುತ್ತದೆ.

ಹೆಚ್ಚು ವಿಶ್ವಾಸಾರ್ಹವಲ್ಲದಿದ್ದರೂ DNS ಅನ್ನು ಸಂಗ್ರಹಿಸಲಾಗಿದೆ. ಕೆಲವು OS ಗಳು ಮತ್ತು ಬ್ರೌಸರ್‌ಗಳು DNS ಪ್ರಶ್ನೆಗಳನ್ನು ಸಂಗ್ರಹಿಸುತ್ತವೆ: ಇದು ಪುನರಾವರ್ತಿತ ಪ್ರಶ್ನೆಗಳಲ್ಲಿ ಸಮಯವನ್ನು ಉಳಿಸುತ್ತದೆ, ಆದರೆ ಹಿಡಿದಿಟ್ಟುಕೊಳ್ಳುವಿಕೆಯನ್ನು ಅವಲಂಬಿಸಲಾಗುವುದಿಲ್ಲ. Linux ನಲ್ಲಿ ಇದು ಸಾಮಾನ್ಯವಾಗಿ ಕೆಲಸ ಮಾಡುವುದಿಲ್ಲ. Chrome DNS ಸಂಗ್ರಹವನ್ನು ಹೊಂದಿದೆ, ಆದರೆ ಇದು ಕೇವಲ ಒಂದು ನಿಮಿಷದವರೆಗೆ ಇರುತ್ತದೆ. ವಿಂಡೋಸ್ ಐದು ದಿನಗಳವರೆಗೆ DNS ಪ್ರತಿಕ್ರಿಯೆಗಳನ್ನು ಸಂಗ್ರಹಿಸುತ್ತದೆ.

ಪೂರ್ವಸಲ್ಲಿಕೆ

<link rel= "prerender"> URL ಅನ್ನು ಡೌನ್‌ಲೋಡ್ ಮಾಡಲು ಮತ್ತು ಅದೃಶ್ಯ ಟ್ಯಾಬ್‌ನಲ್ಲಿ ಅದನ್ನು ಪ್ರದರ್ಶಿಸಲು ಬ್ರೌಸರ್ ಅನ್ನು ಕೇಳುತ್ತದೆ. ಬಳಕೆದಾರರು ಲಿಂಕ್ ಅನ್ನು ಕ್ಲಿಕ್ ಮಾಡಿದಾಗ, ಪುಟವನ್ನು ತಕ್ಷಣವೇ ಪ್ರದರ್ಶಿಸಬೇಕು. ಬಳಕೆದಾರರು ನಿರ್ದಿಷ್ಟ ಪುಟಕ್ಕೆ ಭೇಟಿ ನೀಡುತ್ತಾರೆ ಮತ್ತು ಅದರ ಪ್ರದರ್ಶನವನ್ನು ವೇಗಗೊಳಿಸಲು ಬಯಸುತ್ತಾರೆ ಎಂದು ನಿಮಗೆ ಖಚಿತವಾಗಿದ್ದರೆ ಇದು ಉಪಯುಕ್ತವಾಗಿದೆ.

2019 ರಲ್ಲಿ ಈ ಟ್ಯಾಗ್‌ನ ಅಸಾಧಾರಣ ಪರಿಣಾಮಕಾರಿತ್ವದ ಹೊರತಾಗಿಯೂ (ಅಥವಾ ಕಾರಣ). <link rel= "prerender"> ಪ್ರಮುಖ ಬ್ರೌಸರ್‌ಗಳಲ್ಲಿ ಕಳಪೆ ಬೆಂಬಲವಿದೆ. ಹೆಚ್ಚಿನ ವಿವರಗಳನ್ನು ನೋಡಿ. ಕೆಳಗೆ.

ವಾಕ್ಯ

<link rel="prerender" href="https://my-app.com/pricing" />

href ನೀವು ಹಿನ್ನೆಲೆಯಲ್ಲಿ ರೆಂಡರಿಂಗ್ ಪ್ರಾರಂಭಿಸಲು ಬಯಸುವ URL ಗೆ ಪಾಯಿಂಟ್‌ಗಳು.

ಯಾವಾಗ ಬಳಸಬೇಕು

ಬಳಕೆದಾರರು ನಿರ್ದಿಷ್ಟ ಪುಟಕ್ಕೆ ಹೋಗುತ್ತಾರೆ ಎಂದು ನೀವು ನಿಜವಾಗಿಯೂ ಖಚಿತವಾಗಿದ್ದಾಗ. ನೀವು "ಸುರಂಗ" ಹೊಂದಿದ್ದರೆ, ಅದರ ಮೂಲಕ ಪುಟ A ಗೆ 70% ಸಂದರ್ಶಕರು ಪುಟ B ಗೆ ಹೋಗುತ್ತಾರೆ <link rel= "prerender"> ಪುಟ A ನಲ್ಲಿ ಪುಟ B ಅನ್ನು ತ್ವರಿತವಾಗಿ ಪ್ರದರ್ಶಿಸಲು ಸಹಾಯ ಮಾಡುತ್ತದೆ.

ಅತಿಯಾಗಿ ಬಳಸಬೇಡಿ. ಬ್ಯಾಂಡ್‌ವಿಡ್ತ್ ಮತ್ತು ಮೆಮೊರಿಯ ವಿಷಯದಲ್ಲಿ ಪ್ರಿ-ರೆಂಡರಿಂಗ್ ಅತ್ಯಂತ ದುಬಾರಿಯಾಗಿದೆ. ಬಳಸಬೇಡಿ <link rel= "prerender"> ಒಂದಕ್ಕಿಂತ ಹೆಚ್ಚು ಪುಟಗಳಿಗೆ.

ವಿವರಗಳನ್ನು ವೀಕ್ಷಿಸಿ

ಐಚ್ಛಿಕ ಟ್ಯಾಗ್. ಈ ಸೂಚನೆಯನ್ನು ಅನುಸರಿಸಲು ಬ್ರೌಸರ್ ಅಗತ್ಯವಿಲ್ಲ ಮತ್ತು ಅದನ್ನು ನಿರ್ಲಕ್ಷಿಸಬಹುದು, ಉದಾಹರಣೆಗೆ, ನಿಧಾನ ಸಂಪರ್ಕದಲ್ಲಿ ಅಥವಾ ಸಾಕಷ್ಟು ಉಚಿತ ಮೆಮೊರಿ ಇಲ್ಲದಿದ್ದಾಗ.

ಮೆಮೊರಿ ಉಳಿಸಲು Chrome ಪೂರ್ಣ ರೆಂಡರಿಂಗ್ ಮಾಡುವುದಿಲ್ಲಮತ್ತು ನೋಸ್ಟೇಟ್ ಅನ್ನು ಮಾತ್ರ ಪೂರ್ವ ಲೋಡ್ ಮಾಡಿ. ಇದರರ್ಥ Chrome ಪುಟವನ್ನು ಮತ್ತು ಅದರ ಎಲ್ಲಾ ಸಂಪನ್ಮೂಲಗಳನ್ನು ಲೋಡ್ ಮಾಡುತ್ತದೆ, ಆದರೆ JavaScript ಅನ್ನು ರೆಂಡರ್ ಮಾಡುವುದಿಲ್ಲ ಅಥವಾ ಕಾರ್ಯಗತಗೊಳಿಸುವುದಿಲ್ಲ.

Firefox ಮತ್ತು Safari ಈ ಟ್ಯಾಗ್ ಅನ್ನು ಬೆಂಬಲಿಸುವುದಿಲ್ಲ. ಇದು ನಿರ್ದಿಷ್ಟತೆಯನ್ನು ಉಲ್ಲಂಘಿಸುವುದಿಲ್ಲ, ಏಕೆಂದರೆ ಬ್ರೌಸರ್‌ಗಳು ಈ ಸೂಚನೆಯನ್ನು ಅನುಸರಿಸುವ ಅಗತ್ಯವಿಲ್ಲ; ಆದರೆ ಇನ್ನೂ ದುಃಖ. ಅನುಷ್ಠಾನ ದೋಷ ಫೈರ್‌ಫಾಕ್ಸ್ ಏಳು ವರ್ಷಗಳಿಂದ ತೆರೆದಿದೆ. ಸಫಾರಿ ಎಂಬ ವರದಿಗಳಿವೆ ಈ ಟ್ಯಾಗ್ ಅನ್ನು ಸಹ ಬೆಂಬಲಿಸುವುದಿಲ್ಲ.

ಸಾರಾಂಶ

ಬಳಸಿ:

<link rel= "preload"> - ನಿಮಗೆ ಕೆಲವು ಸೆಕೆಂಡುಗಳಲ್ಲಿ ಸಂಪನ್ಮೂಲ ಬೇಕಾದಾಗ
<link rel= "prefetch"> - ನಿಮಗೆ ಮುಂದಿನ ಪುಟದಲ್ಲಿ ಸಂಪನ್ಮೂಲ ಬೇಕಾದಾಗ
<link rel= "preconnect"> - ನಿಮಗೆ ಶೀಘ್ರದಲ್ಲೇ ಸಂಪನ್ಮೂಲ ಬೇಕಾಗುತ್ತದೆ ಎಂದು ನಿಮಗೆ ತಿಳಿದಾಗ, ಆದರೆ ಅದರ ಪೂರ್ಣ URL ನಿಮಗೆ ಇನ್ನೂ ತಿಳಿದಿಲ್ಲ
<link rel= "dns-prefetch"> - ಅದೇ ರೀತಿ, ನಿಮಗೆ ಶೀಘ್ರದಲ್ಲೇ ಸಂಪನ್ಮೂಲ ಬೇಕಾಗುತ್ತದೆ ಎಂದು ನಿಮಗೆ ತಿಳಿದಾಗ, ಆದರೆ ಅದರ ಪೂರ್ಣ URL ನಿಮಗೆ ಇನ್ನೂ ತಿಳಿದಿಲ್ಲ (ಹಳೆಯ ಬ್ರೌಸರ್‌ಗಳಿಗಾಗಿ)
<link rel= "prerender"> — ಬಳಕೆದಾರರು ನಿರ್ದಿಷ್ಟ ಪುಟಕ್ಕೆ ಹೋಗುತ್ತಾರೆ ಎಂದು ನಿಮಗೆ ಖಚಿತವಾಗಿದ್ದರೆ ಮತ್ತು ನೀವು ಅದರ ಪ್ರದರ್ಶನವನ್ನು ವೇಗಗೊಳಿಸಲು ಬಯಸುತ್ತೀರಿ

ಮೂಲ: www.habr.com

ಪೂರ್ವ ಲೋಡ್, ಪೂರ್ವಪಡೆಯುವಿಕೆ ಮತ್ತು ಇತರ ಟ್ಯಾಗ್‌ಗಳು

ಪೂರ್ವ ಲೋಡ್

ವಾಕ್ಯ

ಯಾವಾಗ ಬಳಸಬೇಕು

ವಿವರಗಳನ್ನು ವೀಕ್ಷಿಸಿ

ಪೂರ್ವಪಾವತಿ

ವಾಕ್ಯ

ಯಾವಾಗ ಬಳಸಬೇಕು

ವಿವರಗಳನ್ನು ವೀಕ್ಷಿಸಿ

ಪೂರ್ವಸಂಪರ್ಕ

ವಾಕ್ಯ

ಯಾವಾಗ ಬಳಸಬೇಕು

ವಿವರಗಳನ್ನು ವೀಕ್ಷಿಸಿ

dns-ಪ್ರಿಫೆಚ್

ವಾಕ್ಯ

ಯಾವಾಗ ಬಳಸಬೇಕು

ವಿವರಗಳನ್ನು ವೀಕ್ಷಿಸಿ

ಪೂರ್ವಸಲ್ಲಿಕೆ

ವಾಕ್ಯ

ಯಾವಾಗ ಬಳಸಬೇಕು

ವಿವರಗಳನ್ನು ವೀಕ್ಷಿಸಿ

ಸಾರಾಂಶ

ಕಾಮೆಂಟ್ ಅನ್ನು ಸೇರಿಸಿ Отменить ответ