ಪ್ರೀಲೋಡ್, ಪ್ರಿಫೆಚ್, ಮತ್ತು ಪ್ರಿಕನೆಕ್ಟ್ ನಂತಹ ರಿಸೋರ್ಸ್ ಹಿಂಟ್ಸ್ ಬಳಸಿ ವೆಬ್‌ಸೈಟ್ ಲೋಡಿಂಗ್ ಸಮಯವನ್ನು ಆಪ್ಟಿಮೈಜ್ ಮಾಡಿ ಮತ್ತು ಜಾಗತಿಕವಾಗಿ ಬಳಕೆದಾರರ ಅನುಭವವನ್ನು ಸುಧಾರಿಸುವುದು ಹೇಗೆಂದು ತಿಳಿಯಿರಿ.
ರಿಸೋರ್ಸ್ ಹಿಂಟ್ಸ್ ಬಳಸಿ ವೆಬ್‌ಸೈಟ್ ವೇಗವನ್ನು ಹೆಚ್ಚಿಸುವುದು: ಪ್ರೀಲೋಡ್, ಪ್ರಿಫೆಚ್, ಮತ್ತು ಪ್ರಿಕನೆಕ್ಟ್
ಇಂದಿನ ವೇಗದ ಡಿಜಿಟಲ್ ಜಗತ್ತಿನಲ್ಲಿ, ವೆಬ್‌ಸೈಟ್‌ನ ವೇಗವು ಅತ್ಯಂತ ಮುಖ್ಯವಾಗಿದೆ. ಬಳಕೆದಾರರು ವೆಬ್‌ಸೈಟ್‌ಗಳು ಬೇಗನೆ ಲೋಡ್ ಆಗಬೇಕೆಂದು ಮತ್ತು ತಕ್ಷಣ ಪ್ರತಿಕ್ರಿಯಿಸಬೇಕೆಂದು ನಿರೀಕ್ಷಿಸುತ್ತಾರೆ. ನಿಧಾನವಾದ ಲೋಡಿಂಗ್ ಸಮಯಗಳು ಕಳಪೆ ಬಳಕೆದಾರ ಅನುಭವಕ್ಕೆ, ಹೆಚ್ಚಿನ ಬೌನ್ಸ್ ದರಗಳಿಗೆ, ಮತ್ತು ಅಂತಿಮವಾಗಿ, ವ್ಯಾಪಾರದ ನಷ್ಟಕ್ಕೆ ಕಾರಣವಾಗಬಹುದು. ರಿಸೋರ್ಸ್ ಹಿಂಟ್ಸ್ ಡೆವಲಪರ್‌ಗಳಿಗೆ ವೆಬ್‌ಸೈಟ್ ಲೋಡಿಂಗ್ ಸಮಯವನ್ನು ಆಪ್ಟಿಮೈಜ್ ಮಾಡಲು ಸಹಾಯ ಮಾಡುವ ಪ್ರಬಲ ಸಾಧನಗಳಾಗಿವೆ. ಇವು ಯಾವ ಸಂಪನ್ಮೂಲಗಳು ಮುಖ್ಯವಾಗಿವೆ ಮತ್ತು ಅವುಗಳನ್ನು ಹೇಗೆ ಆದ್ಯತೆ ನೀಡಬೇಕೆಂದು ಬ್ರೌಸರ್‌ಗೆ ತಿಳಿಸುತ್ತವೆ. ಈ ಲೇಖನವು ಮೂರು ಪ್ರಮುಖ ರಿಸೋರ್ಸ್ ಹಿಂಟ್ಸ್ ಗಳಾದ preload, prefetch, ಮತ್ತು preconnect ಅನ್ನು ಪರಿಶೋಧಿಸುತ್ತದೆ ಮತ್ತು ಅವುಗಳ ಅನುಷ್ಠಾನಕ್ಕಾಗಿ ಪ್ರಾಯೋಗಿಕ ಉದಾಹರಣೆಗಳನ್ನು ಒದಗಿಸುತ್ತದೆ.
ರಿಸೋರ್ಸ್ ಹಿಂಟ್ಸ್ ಅರ್ಥಮಾಡಿಕೊಳ್ಳುವುದು
ರಿಸೋರ್ಸ್ ಹಿಂಟ್ಸ್ ಎನ್ನುವುದು ಒಂದು ವೆಬ್ ಪುಟಕ್ಕೆ ಭವಿಷ್ಯದಲ್ಲಿ ಬೇಕಾಗುವ ಸಂಪನ್ಮೂಲಗಳ ಬಗ್ಗೆ ಬ್ರೌಸರ್‌ಗೆ ಸೂಚನೆ ನೀಡುವ ನಿರ್ದೇಶನಗಳಾಗಿವೆ. ಅವು ಡೆವಲಪರ್‌ಗಳಿಗೆ ನಿರ್ಣಾಯಕ ಸಂಪನ್ಮೂಲಗಳ ಬಗ್ಗೆ ಬ್ರೌಸರ್‌ಗೆ ಪೂರ್ವಭಾವಿಯಾಗಿ ತಿಳಿಸಲು ಅವಕಾಶ ನೀಡುತ್ತವೆ, ಇದರಿಂದ ಬ್ರೌಸರ್ ಅವುಗಳನ್ನು ಸಾಮಾನ್ಯವಾಗಿ ಮಾಡುವುದಕ್ಕಿಂತ ಬೇಗನೆ ಪಡೆದುಕೊಳ್ಳಲು ಅಥವಾ ಸಂಪರ್ಕಿಸಲು ಸಾಧ್ಯವಾಗುತ್ತದೆ. ಇದು ಲೋಡಿಂಗ್ ಸಮಯವನ್ನು ಗಮನಾರ್ಹವಾಗಿ ಕಡಿಮೆ ಮಾಡುತ್ತದೆ ಮತ್ತು ಗ್ರಹಿಸಿದ ಕಾರ್ಯಕ್ಷಮತೆಯನ್ನು ಸುಧಾರಿಸುತ್ತದೆ.
ಮೂರು ಪ್ರಮುಖ ರಿಸೋರ್ಸ್ ಹಿಂಟ್ಸ್ ಗಳೆಂದರೆ:
- ಪ್ರೀಲೋಡ್: ಆರಂಭಿಕ ಪುಟ ಲೋಡ್‌ಗೆ ಬೇಕಾದ ನಿರ್ಣಾಯಕ ಸಂಪನ್ಮೂಲಗಳನ್ನು ತರುತ್ತದೆ.
- ಪ್ರಿಫೆಚ್: ಭವಿಷ್ಯದ ನ್ಯಾವಿಗೇಷನ್‌ಗಳು ಅಥವಾ ಸಂವಹನಗಳಿಗೆ ಬೇಕಾಗಬಹುದಾದ ಸಂಪನ್ಮೂಲಗಳನ್ನು ತರುತ್ತದೆ.
- ಪ್ರಿಕನೆಕ್ಟ್: ಪ್ರಮುಖ ತೃತೀಯ-ಪಕ್ಷದ ಸರ್ವರ್‌ಗಳಿಗೆ ಮುಂಚಿತವಾಗಿ ಸಂಪರ್ಕಗಳನ್ನು ಸ್ಥಾಪಿಸುತ್ತದೆ.
ಪ್ರೀಲೋಡ್: ನಿರ್ಣಾಯಕ ಸಂಪನ್ಮೂಲಗಳಿಗೆ ಆದ್ಯತೆ ನೀಡುವುದು
ಪ್ರೀಲೋಡ್ ಎಂದರೇನು?
ಪ್ರೀಲೋಡ್ ಎನ್ನುವುದು ಒಂದು ಘೋಷಣಾತ್ಮಕ ಫೆಚ್ ಆಗಿದ್ದು, ಪ್ರಸ್ತುತ ನ್ಯಾವಿಗೇಷನ್‌ಗೆ ಬೇಕಾದ ಸಂಪನ್ಮೂಲವನ್ನು ಆದಷ್ಟು ಬೇಗನೆ ತರಲು ಬ್ರೌಸರ್‌ಗೆ ಹೇಳಲು ನಿಮಗೆ ಅನುಮತಿಸುತ್ತದೆ. ಬ್ರೌಸರ್‌ನಿಂದ ತಡವಾಗಿ ಪತ್ತೆಯಾಗುವ ಸಂಪನ್ಮೂಲಗಳಿಗೆ ಇದು ವಿಶೇಷವಾಗಿ ಉಪಯುಕ್ತವಾಗಿದೆ, ಉದಾಹರಣೆಗೆ CSS ಅಥವಾ JavaScript ಮೂಲಕ ಲೋಡ್ ಆಗುವ ಚಿತ್ರಗಳು, ಫಾಂಟ್‌ಗಳು, ಸ್ಕ್ರಿಪ್ಟ್‌ಗಳು, ಅಥವಾ ಸ್ಟೈಲ್‌ಶೀಟ್‌ಗಳು. ಈ ಸಂಪನ್ಮೂಲಗಳನ್ನು ಪ್ರೀಲೋಡ್ ಮಾಡುವುದರಿಂದ, ಅವು ರೆಂಡರ್-ಬ್ಲಾಕಿಂಗ್ ಆಗುವುದನ್ನು ತಡೆಯಬಹುದು ಮತ್ತು ನಿಮ್ಮ ವೆಬ್‌ಸೈಟ್‌ನ ಗ್ರಹಿಸಿದ ಲೋಡಿಂಗ್ ವೇಗವನ್ನು ಸುಧಾರಿಸಬಹುದು.
ಪ್ರೀಲೋಡ್ ಅನ್ನು ಯಾವಾಗ ಬಳಸಬೇಕು
ಪ್ರೀಲೋಡ್ ಅನ್ನು ಇದಕ್ಕಾಗಿ ಬಳಸಿ:
- ಫಾಂಟ್‌ಗಳು: ಕಸ್ಟಮ್ ಫಾಂಟ್‌ಗಳನ್ನು ಬೇಗನೆ ಲೋಡ್ ಮಾಡುವುದರಿಂದ ಫ್ಲಾಶ್ ಆಫ್ ಅನ್‌ಸ್ಟೈಲ್ಡ್ ಟೆಕ್ಸ್ಟ್ (FOUT) ಅಥವಾ ಫ್ಲಾಶ್ ಆಫ್ ಇನ್‌ವಿಸಿಬಲ್ ಟೆಕ್ಸ್ಟ್ (FOIT) ಅನ್ನು ತಡೆಯಬಹುದು.
- ಚಿತ್ರಗಳು: ಅಬವ್-ದ-ಫೋಲ್ಡ್ ಚಿತ್ರಗಳಿಗೆ ಆದ್ಯತೆ ನೀಡುವುದರಿಂದ ಅವು ಬೇಗನೆ ಲೋಡ್ ಆಗುವುದನ್ನು ಖಚಿತಪಡಿಸುತ್ತದೆ, ಆರಂಭಿಕ ಬಳಕೆದಾರರ ಅನುಭವವನ್ನು ಹೆಚ್ಚಿಸುತ್ತದೆ.
- ಸ್ಕ್ರಿಪ್ಟ್‌ಗಳು ಮತ್ತು ಸ್ಟೈಲ್‌ಶೀಟ್‌ಗಳು: ನಿರ್ಣಾಯಕ CSS ಅಥವಾ JavaScript ಫೈಲ್‌ಗಳನ್ನು ಬೇಗನೆ ಲೋಡ್ ಮಾಡುವುದರಿಂದ ರೆಂಡರ್-ಬ್ಲಾಕಿಂಗ್ ಅನ್ನು ತಡೆಯುತ್ತದೆ.
- ಮಾಡ್ಯೂಲ್‌ಗಳು ಮತ್ತು ವೆಬ್ ವರ್ಕರ್‌ಗಳು: ಮಾಡ್ಯೂಲ್‌ಗಳು ಅಥವಾ ವೆಬ್ ವರ್ಕರ್‌ಗಳನ್ನು ಪ್ರೀಲೋಡ್ ಮಾಡುವುದರಿಂದ ನಿಮ್ಮ ಅಪ್ಲಿಕೇಶನ್‌ನ ಪ್ರತಿಕ್ರಿಯಾತ್ಮಕತೆಯನ್ನು ಸುಧಾರಿಸಬಹುದು.
ಪ್ರೀಲೋಡ್ ಅನ್ನು ಹೇಗೆ ಅಳವಡಿಸುವುದು
ನಿಮ್ಮ HTML ಡಾಕ್ಯುಮೆಂಟ್‌ನ <head> ನಲ್ಲಿ <link> ಟ್ಯಾಗ್ ಬಳಸಿ ನೀವು ಪ್ರೀಲೋಡ್ ಅನ್ನು ಅಳವಡಿಸಬಹುದು:
<link rel="preload" href="/fonts/myfont.woff2" as="font" type="font/woff2" crossorigin="anonymous">
<link rel="preload" href="/styles/critical.css" as="style">
<link rel="preload" href="/scripts/app.js" as="script">
<link rel="preload" href="/images/hero.jpg" as="image">
ವಿವರಣೆ:
rel="preload": ಬ್ರೌಸರ್ ಸಂಪನ್ಮೂಲವನ್ನು ಪ್ರೀಲೋಡ್ ಮಾಡಬೇಕೆಂದು ಸೂಚಿಸುತ್ತದೆ.href="/path/to/resource": ಪ್ರೀಲೋಡ್ ಮಾಡಬೇಕಾದ ಸಂಪನ್ಮೂಲದ URL.as="type": ಪ್ರೀಲೋಡ್ ಆಗುತ್ತಿರುವ ಸಂಪನ್ಮೂಲದ ಪ್ರಕಾರವನ್ನು ಸೂಚಿಸುತ್ತದೆ (ಉದಾ., font, style, script, image). `as` ಆಟ್ರಿಬ್ಯೂಟ್ ಕಡ್ಡಾಯವಾಗಿದೆ ಮತ್ತು ಬ್ರೌಸರ್ ಸಂಪನ್ಮೂಲವನ್ನು ಸರಿಯಾಗಿ ಆದ್ಯತೆ ನೀಡಲು ಮತ್ತು ನಿರ್ವಹಿಸಲು ಇದು ನಿರ್ಣಾಯಕವಾಗಿದೆ. ಸರಿಯಾದ `as` ಮೌಲ್ಯವನ್ನು ಬಳಸುವುದರಿಂದ ಬ್ರೌಸರ್ ಸರಿಯಾದ ಕಂಟೆಂಟ್ ಸೆಕ್ಯುರಿಟಿ ಪಾಲಿಸಿ (CSP) ಅನ್ನು ಅನ್ವಯಿಸುತ್ತದೆ ಮತ್ತು ಸರಿಯಾದAcceptಹೆಡರ್ ಅನ್ನು ಕಳುಹಿಸುತ್ತದೆ.type="mime/type": (ಐಚ್ಛಿಕ ಆದರೆ ಶಿಫಾರಸು ಮಾಡಲಾಗಿದೆ) ಸಂಪನ್ಮೂಲದ MIME ಪ್ರಕಾರವನ್ನು ಸೂಚಿಸುತ್ತದೆ. ಇದು ಬ್ರೌಸರ್‌ಗೆ ಸರಿಯಾದ ಸಂಪನ್ಮೂಲ ಸ್ವರೂಪವನ್ನು ಆಯ್ಕೆ ಮಾಡಲು ಸಹಾಯ ಮಾಡುತ್ತದೆ, ವಿಶೇಷವಾಗಿ ಫಾಂಟ್‌ಗಳಿಗೆ.crossorigin="anonymous": (ಬೇರೆ ಮೂಲದಿಂದ ಲೋಡ್ ಮಾಡಲಾದ ಫಾಂಟ್‌ಗಳಿಗೆ ಅಗತ್ಯವಿದೆ) ವಿನಂತಿಗಾಗಿ CORS ಮೋಡ್ ಅನ್ನು ಸೂಚಿಸುತ್ತದೆ. ನೀವು CDN ನಿಂದ ಫಾಂಟ್‌ಗಳನ್ನು ಲೋಡ್ ಮಾಡುತ್ತಿದ್ದರೆ, ನಿಮಗೆ ಈ ಆಟ್ರಿಬ್ಯೂಟ್ ಬೇಕಾಗಬಹುದು.
ಉದಾಹರಣೆ: ಫಾಂಟ್ ಅನ್ನು ಪ್ರೀಲೋಡ್ ಮಾಡುವುದು
ನಿಮ್ಮ ವೆಬ್‌ಸೈಟ್‌ನಲ್ಲಿ 'OpenSans' ಎಂಬ ಕಸ್ಟಮ್ ಫಾಂಟ್ ಅನ್ನು ಬಳಸಲಾಗುತ್ತಿದೆ ಎಂದು ಊಹಿಸಿ. ಪ್ರೀಲೋಡ್ ಇಲ್ಲದೆ, ಬ್ರೌಸರ್ ಈ ಫಾಂಟ್ ಅನ್ನು CSS ಫೈಲ್ ಅನ್ನು ಪಾರ್ಸ್ ಮಾಡಿದ ನಂತರವೇ ಪತ್ತೆ ಮಾಡುತ್ತದೆ. ಇದು ಸರಿಯಾದ ಫಾಂಟ್‌ನೊಂದಿಗೆ ಪಠ್ಯವನ್ನು ರೆಂಡರ್ ಮಾಡುವಲ್ಲಿ ವಿಳಂಬವನ್ನು ಉಂಟುಮಾಡಬಹುದು. ಫಾಂಟ್ ಅನ್ನು ಪ್ರೀಲೋಡ್ ಮಾಡುವುದರಿಂದ, ನೀವು ಈ ವಿಳಂಬವನ್ನು ನಿವಾರಿಸಬಹುದು.
<link rel="preload" href="/fonts/OpenSans-Regular.woff2" as="font" type="font/woff2" crossorigin="anonymous">
ಉದಾಹರಣೆ: ನಿರ್ಣಾಯಕ CSS ಫೈಲ್ ಅನ್ನು ಪ್ರೀಲೋಡ್ ಮಾಡುವುದು
ನಿಮ್ಮ ವೆಬ್‌ಸೈಟ್‌ನಲ್ಲಿ ಆರಂಭಿಕ ನೋಟವನ್ನು ರೆಂಡರ್ ಮಾಡಲು ಅತ್ಯಗತ್ಯವಾದ ನಿರ್ಣಾಯಕ CSS ಫೈಲ್ ಇದ್ದರೆ, ಅದನ್ನು ಪ್ರೀಲೋಡ್ ಮಾಡುವುದರಿಂದ ಗ್ರಹಿಸಿದ ಕಾರ್ಯಕ್ಷಮತೆಯನ್ನು ಗಮನಾರ್ಹವಾಗಿ ಸುಧಾರಿಸಬಹುದು.
<link rel="preload" href="/styles/critical.css" as="style">
ಪ್ರೀಲೋಡ್‌ಗಾಗಿ ಉತ್ತಮ ಅಭ್ಯಾಸಗಳು
- ನಿರ್ಣಾಯಕ ಸಂಪನ್ಮೂಲಗಳಿಗೆ ಆದ್ಯತೆ ನೀಡಿ: ಆರಂಭಿಕ ಪುಟ ಲೋಡ್‌ಗೆ ಅತ್ಯಗತ್ಯವಾದ ಸಂಪನ್ಮೂಲಗಳನ್ನು ಮಾತ್ರ ಪ್ರೀಲೋಡ್ ಮಾಡಿ. ಪ್ರೀಲೋಡ್‌ನ ಅತಿಯಾದ ಬಳಕೆಯು ಕಾರ್ಯಕ್ಷಮತೆಯ ಮೇಲೆ ನಕಾರಾತ್ಮಕ ಪರಿಣಾಮ ಬೀರಬಹುದು.
- ಸರಿಯಾದ
asಆಟ್ರಿಬ್ಯೂಟ್ ಬಳಸಿ: ಬ್ರೌಸರ್ ಸಂಪನ್ಮೂಲವನ್ನು ಸರಿಯಾಗಿ ನಿರ್ವಹಿಸುವುದನ್ನು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಲು ಯಾವಾಗಲೂ ಸರಿಯಾದasಆಟ್ರಿಬ್ಯೂಟ್ ಅನ್ನು ನಿರ್ದಿಷ್ಟಪಡಿಸಿ. typeಆಟ್ರಿಬ್ಯೂಟ್ ಅನ್ನು ಸೇರಿಸಿ: ಬ್ರೌಸರ್‌ಗೆ ಸರಿಯಾದ ಸಂಪನ್ಮೂಲ ಸ್ವರೂಪವನ್ನು ಆಯ್ಕೆ ಮಾಡಲು ಸಹಾಯ ಮಾಡಲುtypeಆಟ್ರಿಬ್ಯೂಟ್ ಅನ್ನು ಸೇರಿಸಿ.- ಕ್ರಾಸ್-ಆರಿಜಿನ್ ಫಾಂಟ್‌ಗಳಿಗಾಗಿ
crossoriginಬಳಸಿ: ಬೇರೆ ಮೂಲದಿಂದ ಫಾಂಟ್‌ಗಳನ್ನು ಲೋಡ್ ಮಾಡುವಾಗ,crossoriginಆಟ್ರಿಬ್ಯೂಟ್ ಅನ್ನು ಸೇರಿಸುವುದನ್ನು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಿ. - ಕಾರ್ಯಕ್ಷಮತೆಯನ್ನು ಪರೀಕ್ಷಿಸಿ: ಪ್ರೀಲೋಡ್‌ನ ಕಾರ್ಯಕ್ಷಮತೆಯ ಪರಿಣಾಮವನ್ನು ಯಾವಾಗಲೂ ಪರೀಕ್ಷಿಸಿ, ಅದು ನಿಜವಾಗಿಯೂ ಲೋಡಿಂಗ್ ಸಮಯವನ್ನು ಸುಧಾರಿಸುತ್ತಿದೆಯೇ ಎಂದು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಿ. ಪರಿಣಾಮವನ್ನು ಅಳೆಯಲು Google PageSpeed Insights ಅಥವಾ WebPageTest ನಂತಹ ಸಾಧನಗಳನ್ನು ಬಳಸಿ.
ಪ್ರಿಫೆಚ್: ಭವಿಷ್ಯದ ಅಗತ್ಯಗಳನ್ನು ನಿರೀಕ್ಷಿಸುವುದು
ಪ್ರಿಫೆಚ್ ಎಂದರೇನು?
ಪ್ರಿಫೆಚ್ ಎನ್ನುವುದು ಒಂದು ರಿಸೋರ್ಸ್ ಹಿಂಟ್ ಆಗಿದ್ದು, ಭವಿಷ್ಯದ ನ್ಯಾವಿಗೇಷನ್‌ಗಳು ಅಥವಾ ಸಂವಹನಗಳಿಗೆ ಬೇಕಾಗಬಹುದಾದ ಸಂಪನ್ಮೂಲಗಳನ್ನು ತರಲು ಬ್ರೌಸರ್‌ಗೆ ಹೇಳುತ್ತದೆ. ಪ್ರೀಲೋಡ್ ಪ್ರಸ್ತುತ ಪುಟಕ್ಕೆ ಬೇಕಾದ ಸಂಪನ್ಮೂಲಗಳ ಮೇಲೆ ಗಮನಹರಿಸಿದರೆ, ಪ್ರಿಫೆಚ್ ಬಳಕೆದಾರರ ಮುಂದಿನ ನಡೆಯನ್ನು ನಿರೀಕ್ಷಿಸುತ್ತದೆ. ಇದು ನಂತರದ ಪುಟಗಳು ಅಥವಾ ಕಾಂಪೊನೆಂಟ್‌ಗಳ ಲೋಡಿಂಗ್ ವೇಗವನ್ನು ಸುಧಾರಿಸಲು ವಿಶೇಷವಾಗಿ ಉಪಯುಕ್ತವಾಗಿದೆ.
ಪ್ರಿಫೆಚ್ ಅನ್ನು ಯಾವಾಗ ಬಳಸಬೇಕು
ಪ್ರಿಫೆಚ್ ಅನ್ನು ಇದಕ್ಕಾಗಿ ಬಳಸಿ:
- ಮುಂದಿನ ಪುಟದ ಸಂಪನ್ಮೂಲಗಳು: ಬಳಕೆದಾರರು ಮುಂದಿನ ನಿರ್ದಿಷ್ಟ ಪುಟಕ್ಕೆ ನ್ಯಾವಿಗೇಟ್ ಮಾಡುವ ಸಾಧ್ಯತೆ ಇದೆ ಎಂದು ನಿಮಗೆ ತಿಳಿದಿದ್ದರೆ, ಅದರ ಸಂಪನ್ಮೂಲಗಳನ್ನು ಪ್ರಿಫೆಚ್ ಮಾಡಿ.
- ಬಳಕೆದಾರರ ಸಂವಹನಗಳಿಗೆ ಸಂಪನ್ಮೂಲಗಳು: ಬಳಕೆದಾರರ ಸಂವಹನವು ನಿರ್ದಿಷ್ಟ ಸಂಪನ್ಮೂಲಗಳನ್ನು ಲೋಡ್ ಮಾಡಲು ಪ್ರಚೋದಿಸಿದರೆ (ಉದಾ., ಒಂದು ಮೋಡಲ್ ವಿಂಡೋ, ಒಂದು ಫಾರ್ಮ್), ಆ ಸಂಪನ್ಮೂಲಗಳನ್ನು ಪ್ರಿಫೆಚ್ ಮಾಡಿ.
- ಇತರ ಪುಟಗಳಲ್ಲಿನ ಚಿತ್ರಗಳು ಮತ್ತು ಆಸ್ತಿಗಳು: ಬಳಕೆದಾರರು ಭೇಟಿ ನೀಡುವ ಸಾಧ್ಯತೆಯಿರುವ ಇತರ ಪುಟಗಳಲ್ಲಿ ಬಳಸಲಾದ ಚಿತ್ರಗಳು ಅಥವಾ ಆಸ್ತಿಗಳನ್ನು ಪ್ರಿಲೋಡ್ ಮಾಡಿ.
ಪ್ರಿಫೆಚ್ ಅನ್ನು ಹೇಗೆ ಅಳವಡಿಸುವುದು
ನಿಮ್ಮ HTML ಡಾಕ್ಯುಮೆಂಟ್‌ನ <head> ನಲ್ಲಿ <link> ಟ್ಯಾಗ್ ಬಳಸಿ ನೀವು ಪ್ರಿಫೆಚ್ ಅನ್ನು ಅಳವಡಿಸಬಹುದು:
<link rel="prefetch" href="/page2.html">
<link rel="prefetch" href="/images/product.jpg">
<link rel="prefetch" href="/scripts/modal.js">
ವಿವರಣೆ:
rel="prefetch": ಬ್ರೌಸರ್ ಸಂಪನ್ಮೂಲವನ್ನು ಪ್ರಿಫೆಚ್ ಮಾಡಬೇಕೆಂದು ಸೂಚಿಸುತ್ತದೆ.href="/path/to/resource": ಪ್ರಿಫೆಚ್ ಮಾಡಬೇಕಾದ ಸಂಪನ್ಮೂಲದ URL.
ಉದಾಹರಣೆ: ಮುಂದಿನ ಪುಟದ ಸಂಪನ್ಮೂಲಗಳನ್ನು ಪ್ರಿಫೆಚ್ ಮಾಡುವುದು
ನಿಮ್ಮ ವೆಬ್‌ಸೈಟ್ ಸ್ಪಷ್ಟವಾದ ಬಳಕೆದಾರರ ಹರಿವನ್ನು ಹೊಂದಿದ್ದರೆ, ಉದಾಹರಣೆಗೆ ಬಹು-ಹಂತದ ಫಾರ್ಮ್, ಬಳಕೆದಾರರು ಪ್ರಸ್ತುತ ಹಂತದಲ್ಲಿರುವಾಗ ನೀವು ಮುಂದಿನ ಹಂತದ ಸಂಪನ್ಮೂಲಗಳನ್ನು ಪ್ರಿಫೆಚ್ ಮಾಡಬಹುದು.
<link rel="prefetch" href="/form/step2.html">
ಉದಾಹರಣೆ: ಮೋಡಲ್ ವಿಂಡೋಗಾಗಿ ಸಂಪನ್ಮೂಲಗಳನ್ನು ಪ್ರಿಫೆಚ್ ಮಾಡುವುದು
ನಿಮ್ಮ ವೆಬ್‌ಸೈಟ್ ತೆರೆದಾಗ ಹೆಚ್ಚುವರಿ ಸಂಪನ್ಮೂಲಗಳನ್ನು ಲೋಡ್ ಮಾಡುವ ಮೋಡಲ್ ವಿಂಡೋವನ್ನು ಬಳಸಿದರೆ, ಸುಗಮ ಬಳಕೆದಾರ ಅನುಭವವನ್ನು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಲು ನೀವು ಆ ಸಂಪನ್ಮೂಲಗಳನ್ನು ಪ್ರಿಫೆಚ್ ಮಾಡಬಹುದು.
<link rel="prefetch" href="/scripts/modal.js">
<link rel="prefetch" href="/styles/modal.css">
ಪ್ರಿಫೆಚ್‌ಗಾಗಿ ಉತ್ತಮ ಅಭ್ಯಾಸಗಳು
- ಮಿತವಾಗಿ ಬಳಸಿ: ಪ್ರಿಫೆಚ್ ಅನ್ನು ಮಿತವಾಗಿ ಬಳಸಬೇಕು ಏಕೆಂದರೆ ಬಳಕೆದಾರರಿಗೆ ಪ್ರಿಫೆಚ್ ಮಾಡಿದ ಸಂಪನ್ಮೂಲಗಳು ಅಗತ್ಯವಿಲ್ಲದಿದ್ದರೂ ಅದು ಬ್ಯಾಂಡ್‌ವಿಡ್ತ್ ಮತ್ತು ಸಂಪನ್ಮೂಲಗಳನ್ನು ಬಳಸಿಕೊಳ್ಳಬಹುದು.
- ಸಂಭವನೀಯ ನ್ಯಾವಿಗೇಷನ್‌ಗಳಿಗೆ ಆದ್ಯತೆ ನೀಡಿ: ಹೆಚ್ಚಾಗಿ ಸಂಭವಿಸುವ ಪುಟಗಳು ಅಥವಾ ಸಂವಹನಗಳಿಗಾಗಿ ಸಂಪನ್ಮೂಲಗಳನ್ನು ಪ್ರಿಫೆಚ್ ಮಾಡಿ.
- ನೆಟ್‌ವರ್ಕ್ ಪರಿಸ್ಥಿತಿಗಳನ್ನು ಪರಿಗಣಿಸಿ: ಸ್ಥಿರ ಮತ್ತು ವೇಗದ ಇಂಟರ್ನೆಟ್ ಸಂಪರ್ಕಗಳನ್ನು ಹೊಂದಿರುವ ಬಳಕೆದಾರರಿಗೆ ಪ್ರಿಫೆಚ್ ಅತ್ಯುತ್ತಮವಾಗಿದೆ. ನಿಧಾನ ಅಥವಾ ಮೀಟರ್ ಸಂಪರ್ಕಗಳಲ್ಲಿರುವ ಬಳಕೆದಾರರಿಗೆ ದೊಡ್ಡ ಸಂಪನ್ಮೂಲಗಳನ್ನು ಪ್ರಿಫೆಚ್ ಮಾಡುವುದನ್ನು ತಪ್ಪಿಸಿ. ಬಳಕೆದಾರರ ಸಂಪರ್ಕ ಪ್ರಕಾರವನ್ನು ಪತ್ತೆಹಚ್ಚಲು ಮತ್ತು ಅದಕ್ಕೆ ತಕ್ಕಂತೆ ಪ್ರಿಫೆಚಿಂಗ್ ಅನ್ನು ಸರಿಹೊಂದಿಸಲು ನೀವು ನೆಟ್‌ವರ್ಕ್ ಮಾಹಿತಿ API ಅನ್ನು ಬಳಸಬಹುದು.
- ಕಾರ್ಯಕ್ಷಮತೆಯನ್ನು ಮೇಲ್ವಿಚಾರಣೆ ಮಾಡಿ: ಇದು ನಿವ್ವಳ ಪ್ರಯೋಜನವನ್ನು ಒದಗಿಸುತ್ತಿದೆಯೇ ಎಂದು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಲು ನಿಮ್ಮ ವೆಬ್‌ಸೈಟ್‌ನ ಕಾರ್ಯಕ್ಷಮತೆಯ ಮೇಲೆ ಪ್ರಿಫೆಚ್‌ನ ಪರಿಣಾಮವನ್ನು ಮೇಲ್ವಿಚಾರಣೆ ಮಾಡಿ.
- ಡೈನಾಮಿಕ್ ಪ್ರಿಫೆಚಿಂಗ್ ಅನ್ನು ಬಳಸಿ: ಬಳಕೆದಾರರ ನಡವಳಿಕೆ ಮತ್ತು ವಿಶ್ಲೇಷಣಾತ್ಮಕ ಡೇಟಾವನ್ನು ಆಧರಿಸಿ ಪ್ರಿಫೆಚಿಂಗ್ ಅನ್ನು ಡೈನಾಮಿಕ್ ಆಗಿ ಅಳವಡಿಸಿ. ಉದಾಹರಣೆಗೆ, ಪ್ರಸ್ತುತ ಪುಟದಲ್ಲಿರುವ ಬಳಕೆದಾರರಿಂದ ಆಗಾಗ್ಗೆ ಭೇಟಿ ನೀಡಲಾಗುವ ಪುಟಗಳಿಗಾಗಿ ಸಂಪನ್ಮೂಲಗಳನ್ನು ಪ್ರಿಫೆಚ್ ಮಾಡಿ.
ಪ್ರಿಕನೆಕ್ಟ್: ಮುಂಚಿತವಾಗಿ ಸಂಪರ್ಕಗಳನ್ನು ಸ್ಥಾಪಿಸುವುದು
ಪ್ರಿಕನೆಕ್ಟ್ ಎಂದರೇನು?
ಪ್ರಿಕನೆಕ್ಟ್ ಎನ್ನುವುದು ಪ್ರಮುಖ ತೃತೀಯ-ಪಕ್ಷದ ಸರ್ವರ್‌ಗಳಿಗೆ ಮುಂಚಿತವಾಗಿ ಸಂಪರ್ಕಗಳನ್ನು ಸ್ಥಾಪಿಸಲು ನಿಮಗೆ ಅನುಮತಿಸುವ ಒಂದು ರಿಸೋರ್ಸ್ ಹಿಂಟ್ ಆಗಿದೆ. ಸಂಪರ್ಕವನ್ನು ಸ್ಥಾಪಿಸುವುದು ಹಲವಾರು ಹಂತಗಳನ್ನು ಒಳಗೊಂಡಿರುತ್ತದೆ, ಇದರಲ್ಲಿ DNS ಲುಕಪ್, TCP ಹ್ಯಾಂಡ್‌ಶೇಕ್, ಮತ್ತು TLS ನೆಗೋಷಿಯೇಷನ್ ಸೇರಿವೆ. ಈ ಹಂತಗಳು ಆ ಸರ್ವರ್‌ಗಳಿಂದ ಸಂಪನ್ಮೂಲಗಳನ್ನು ಲೋಡ್ ಮಾಡಲು ಗಣನೀಯ ವಿಳಂಬವನ್ನು ಉಂಟುಮಾಡಬಹುದು. ಪ್ರಿಕನೆಕ್ಟ್ ಈ ಹಂತಗಳನ್ನು ಹಿನ್ನೆಲೆಯಲ್ಲಿ ಪ್ರಾರಂಭಿಸಲು ನಿಮಗೆ ಅನುಮತಿಸುತ್ತದೆ, ಇದರಿಂದ ಬ್ರೌಸರ್ ಸರ್ವರ್‌ನಿಂದ ಸಂಪನ್ಮೂಲವನ್ನು ತರಬೇಕಾದಾಗ, ಸಂಪರ್ಕವು ಈಗಾಗಲೇ ಸ್ಥಾಪಿತವಾಗಿರುತ್ತದೆ.
ಪ್ರಿಕನೆಕ್ಟ್ ಅನ್ನು ಯಾವಾಗ ಬಳಸಬೇಕು
ಪ್ರಿಕನೆಕ್ಟ್ ಅನ್ನು ಇದಕ್ಕಾಗಿ ಬಳಸಿ:
- ತೃತೀಯ-ಪಕ್ಷದ ಸರ್ವರ್‌ಗಳು: ಫಾಂಟ್‌ಗಳು, CDNಗಳು, APIಗಳು, ಅಥವಾ ನಿಮ್ಮ ವೆಬ್‌ಸೈಟ್ ಅವಲಂಬಿಸಿರುವ ಯಾವುದೇ ಇತರ ಸಂಪನ್ಮೂಲಗಳನ್ನು ಹೋಸ್ಟ್ ಮಾಡುವ ಸರ್ವರ್‌ಗಳು.
- ಆಗಾಗ್ಗೆ ಬಳಸುವ ಸರ್ವರ್‌ಗಳು: ನಿಮ್ಮ ವೆಬ್‌ಸೈಟ್‌ನಿಂದ ಆಗಾಗ್ಗೆ ಪ್ರವೇಶಿಸಲಾಗುವ ಸರ್ವರ್‌ಗಳು.
ಪ್ರಿಕನೆಕ್ಟ್ ಅನ್ನು ಹೇಗೆ ಅಳವಡಿಸುವುದು
ನಿಮ್ಮ HTML ಡಾಕ್ಯುಮೆಂಟ್‌ನ <head> ನಲ್ಲಿ <link> ಟ್ಯಾಗ್ ಬಳಸಿ ನೀವು ಪ್ರಿಕನೆಕ್ಟ್ ಅನ್ನು ಅಳವಡಿಸಬಹುದು:
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="preconnect" href="https://cdn.example.com">
ವಿವರಣೆ:
rel="preconnect": ಬ್ರೌಸರ್ ಸರ್ವರ್‌ಗೆ ಪ್ರಿಕನೆಕ್ಟ್ ಮಾಡಬೇಕೆಂದು ಸೂಚಿಸುತ್ತದೆ.href="https://example.com": ಪ್ರಿಕನೆಕ್ಟ್ ಮಾಡಬೇಕಾದ ಸರ್ವರ್‌ನ URL.crossorigin: (ಐಚ್ಛಿಕ, ಆದರೆ CORS ನೊಂದಿಗೆ ಲೋಡ್ ಮಾಡಲಾದ ಸಂಪನ್ಮೂಲಗಳಿಗೆ ಅಗತ್ಯವಿದೆ) ಸಂಪರ್ಕಕ್ಕೆ CORS ಅಗತ್ಯವಿದೆ ಎಂದು ಸೂಚಿಸುತ್ತದೆ.
ಉದಾಹರಣೆ: ಗೂಗಲ್ ಫಾಂಟ್‌ಗಳಿಗೆ ಪ್ರಿಕನೆಕ್ಟ್ ಮಾಡುವುದು
ನಿಮ್ಮ ವೆಬ್‌ಸೈಟ್ ಗೂಗಲ್ ಫಾಂಟ್‌ಗಳನ್ನು ಬಳಸಿದರೆ, https://fonts.gstatic.com ಗೆ ಪ್ರಿಕನೆಕ್ಟ್ ಮಾಡುವುದರಿಂದ ಫಾಂಟ್ ಲೋಡಿಂಗ್‌ನ ವಿಳಂಬವನ್ನು ಗಮನಾರ್ಹವಾಗಿ ಕಡಿಮೆ ಮಾಡಬಹುದು.
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
Google ಫಾಂಟ್‌ಗಳು ಫಾಂಟ್‌ಗಳನ್ನು ಸರ್ವ್ ಮಾಡಲು CORS ಅನ್ನು ಬಳಸುವುದರಿಂದ ಇಲ್ಲಿ `crossorigin` ಆಟ್ರಿಬ್ಯೂಟ್ ನಿರ್ಣಾಯಕವಾಗಿದೆ.
ಉದಾಹರಣೆ: CDN ಗೆ ಪ್ರಿಕನೆಕ್ಟ್ ಮಾಡುವುದು
ನಿಮ್ಮ ವೆಬ್‌ಸೈಟ್ ಸ್ಟ್ಯಾಟಿಕ್ ಆಸ್ತಿಗಳನ್ನು ಸರ್ವ್ ಮಾಡಲು CDN ಅನ್ನು ಬಳಸಿದರೆ, CDN ನ ಹೋಸ್ಟ್‌ನೇಮ್‌ಗೆ ಪ್ರಿಕನೆಕ್ಟ್ ಮಾಡುವುದರಿಂದ ಆ ಆಸ್ತಿಗಳನ್ನು ಲೋಡ್ ಮಾಡುವ ವಿಳಂಬವನ್ನು ಕಡಿಮೆ ಮಾಡಬಹುದು.
<link rel="preconnect" href="https://cdn.example.com">
ಪ್ರಿಕನೆಕ್ಟ್‌ಗಾಗಿ ಉತ್ತಮ ಅಭ್ಯಾಸಗಳು
- ವಿವೇಚನೆಯಿಂದ ಬಳಸಿ: ಹಲವಾರು ಸರ್ವರ್‌ಗಳಿಗೆ ಪ್ರಿಕನೆಕ್ಟ್ ಮಾಡುವುದು ವಾಸ್ತವವಾಗಿ ಕಾರ್ಯಕ್ಷಮತೆಯನ್ನು ಕುಗ್ಗಿಸಬಹುದು, ಏಕೆಂದರೆ ಬ್ರೌಸರ್‌ಗೆ ಸಂಪರ್ಕಗಳನ್ನು ಸ್ಥಾಪಿಸಲು ಸೀಮಿತ ಸಂಪನ್ಮೂಲಗಳಿರುತ್ತವೆ.
- ಪ್ರಮುಖ ಸರ್ವರ್‌ಗಳಿಗೆ ಆದ್ಯತೆ ನೀಡಿ: ನಿಮ್ಮ ವೆಬ್‌ಸೈಟ್‌ನ ಕಾರ್ಯಕ್ಷಮತೆಗೆ ಅತ್ಯಂತ ನಿರ್ಣಾಯಕವಾದ ಸರ್ವರ್‌ಗಳಿಗೆ ಪ್ರಿಕನೆಕ್ಟ್ ಮಾಡಿ.
- DNS-Prefetch ಅನ್ನು ಪರಿಗಣಿಸಿ: ನೀವು ಸಂಪೂರ್ಣವಾಗಿ ಪ್ರಿಕನೆಕ್ಟ್ ಮಾಡಬೇಕಿಲ್ಲದ, ಆದರೆ DNS ಅನ್ನು ಬೇಗನೆ ಪರಿಹರಿಸಲು ಬಯಸುವ ಸರ್ವರ್‌ಗಳಿಗಾಗಿ,
<link rel="dns-prefetch" href="https://example.com">ಅನ್ನು ಬಳಸುವುದನ್ನು ಪರಿಗಣಿಸಿ. DNS-ಪ್ರಿಫೆಚ್ ಕೇವಲ DNS ಲುಕಪ್ ಅನ್ನು ನಿರ್ವಹಿಸುತ್ತದೆ, ಇದು ಪೂರ್ಣ ಪ್ರಿಕನೆಕ್ಟ್‌ಗಿಂತ ಕಡಿಮೆ ಸಂಪನ್ಮೂಲ-ತೀವ್ರವಾಗಿರುತ್ತದೆ. - ಕಾರ್ಯಕ್ಷಮತೆಯನ್ನು ಪರೀಕ್ಷಿಸಿ: ಪ್ರಿಕನೆಕ್ಟ್ ನಿವ್ವಳ ಪ್ರಯೋಜನವನ್ನು ಒದಗಿಸುತ್ತಿದೆಯೇ ಎಂದು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಲು ಯಾವಾಗಲೂ ಅದರ ಕಾರ್ಯಕ್ಷಮತೆಯ ಪರಿಣಾಮವನ್ನು ಪರೀಕ್ಷಿಸಿ.
- ಇತರ ರಿಸೋರ್ಸ್ ಹಿಂಟ್ಸ್ ಗಳೊಂದಿಗೆ ಸಂಯೋಜಿಸಿ: ಅತ್ಯುತ್ತಮ ಕಾರ್ಯಕ್ಷಮತೆಯನ್ನು ಸಾಧಿಸಲು ಪ್ರಿಕನೆಕ್ಟ್ ಅನ್ನು ಪ್ರೀಲೋಡ್ ಮತ್ತು ಪ್ರಿಫೆಚ್‌ನೊಂದಿಗೆ ಸಂಯೋಜಿಸಿ ಬಳಸಿ. ಉದಾಹರಣೆಗೆ, ನಿಮ್ಮ ಫಾಂಟ್‌ಗಳನ್ನು ಹೋಸ್ಟ್ ಮಾಡುವ ಸರ್ವರ್‌ಗೆ ಪ್ರಿಕನೆಕ್ಟ್ ಮಾಡಿ ಮತ್ತು ನಂತರ ಫಾಂಟ್ ಫೈಲ್‌ಗಳನ್ನು ಪ್ರೀಲೋಡ್ ಮಾಡಿ.
ಉತ್ತಮ ಕಾರ್ಯಕ್ಷಮತೆಗಾಗಿ ರಿಸೋರ್ಸ್ ಹಿಂಟ್ಸ್ ಗಳನ್ನು ಸಂಯೋಜಿಸುವುದು
ರಿಸೋರ್ಸ್ ಹಿಂಟ್ಸ್ ಗಳ ನಿಜವಾದ ಶಕ್ತಿಯು ಅವುಗಳನ್ನು ಕಾರ್ಯತಂತ್ರವಾಗಿ ಸಂಯೋಜಿಸುವುದರಲ್ಲಿದೆ. ಇಲ್ಲಿ ಒಂದು ಪ್ರಾಯೋಗಿಕ ಉದಾಹರಣೆ ಇದೆ:
CDN ನಲ್ಲಿ ಹೋಸ್ಟ್ ಮಾಡಲಾದ ಕಸ್ಟಮ್ ಫಾಂಟ್ ಅನ್ನು ಬಳಸುವ ಮತ್ತು ನಿರ್ಣಾಯಕ JavaScript ಫೈಲ್ ಅನ್ನು ಲೋಡ್ ಮಾಡುವ ವೆಬ್‌ಸೈಟ್ ಅನ್ನು ಕಲ್ಪಿಸಿಕೊಳ್ಳಿ.
- CDN ಗೆ ಪ್ರಿಕನೆಕ್ಟ್ ಮಾಡಿ: ಫಾಂಟ್ ಮತ್ತು JavaScript ಫೈಲ್ ಅನ್ನು ಹೋಸ್ಟ್ ಮಾಡುವ CDN ಗೆ ಮುಂಚಿತವಾಗಿ ಸಂಪರ್ಕವನ್ನು ಸ್ಥಾಪಿಸಿ.
<link rel="preconnect" href="https://cdn.example.com" crossorigin> - ಫಾಂಟ್ ಅನ್ನು ಪ್ರೀಲೋಡ್ ಮಾಡಿ: FOUT ಅನ್ನು ತಡೆಯಲು ಫಾಂಟ್ ಲೋಡಿಂಗ್‌ಗೆ ಆದ್ಯತೆ ನೀಡಿ.
<link rel="preload" href="https://cdn.example.com/fonts/myfont.woff2" as="font" type="font/woff2" crossorigin="anonymous"> - JavaScript ಫೈಲ್ ಅನ್ನು ಪ್ರೀಲೋಡ್ ಮಾಡಿ: JavaScript ಫೈಲ್ ಅಗತ್ಯವಿದ್ದಾಗ ಲಭ್ಯವಾಗುವುದನ್ನು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಲು ಅದರ ಲೋಡಿಂಗ್‌ಗೆ ಆದ್ಯತೆ ನೀಡಿ.
<link rel="preload" href="https://cdn.example.com/scripts/app.js" as="script">
ರಿಸೋರ್ಸ್ ಹಿಂಟ್ಸ್ ಗಳನ್ನು ವಿಶ್ಲೇಷಿಸಲು ಉಪಕರಣಗಳು
ಹಲವಾರು ಉಪಕರಣಗಳು ನಿಮ್ಮ ರಿಸೋರ್ಸ್ ಹಿಂಟ್ಸ್ ಗಳ ಪರಿಣಾಮಕಾರಿತ್ವವನ್ನು ವಿಶ್ಲೇಷಿಸಲು ಸಹಾಯ ಮಾಡುತ್ತವೆ:
- Google PageSpeed Insights: ನಿಮ್ಮ ವೆಬ್‌ಸೈಟ್‌ನ ಕಾರ್ಯಕ್ಷಮತೆಯನ್ನು ಆಪ್ಟಿಮೈಜ್ ಮಾಡಲು ಶಿಫಾರಸುಗಳನ್ನು ಒದಗಿಸುತ್ತದೆ, ಇದರಲ್ಲಿ ರಿಸೋರ್ಸ್ ಹಿಂಟ್ಸ್ ಗಳ ಬಳಕೆಯೂ ಸೇರಿದೆ.
- WebPageTest: ವಿವಿಧ ಸ್ಥಳಗಳಿಂದ ಮತ್ತು ನೆಟ್‌ವರ್ಕ್ ಪರಿಸ್ಥಿತಿಗಳಿಂದ ನಿಮ್ಮ ವೆಬ್‌ಸೈಟ್‌ನ ಕಾರ್ಯಕ್ಷಮತೆಯನ್ನು ಪರೀಕ್ಷಿಸಲು ನಿಮಗೆ ಅನುಮತಿಸುತ್ತದೆ.
- Chrome DevTools: Chrome DevTools ನಲ್ಲಿನ ನೆಟ್‌ವರ್ಕ್ ಪ್ಯಾನೆಲ್ ಸಂಪನ್ಮೂಲ ಲೋಡಿಂಗ್‌ನ ಸಮಯವನ್ನು ತೋರಿಸುತ್ತದೆ ಮತ್ತು ಆಪ್ಟಿಮೈಸೇಶನ್‌ಗಾಗಿ ಅವಕಾಶಗಳನ್ನು ಗುರುತಿಸಲು ನಿಮಗೆ ಸಹಾಯ ಮಾಡುತ್ತದೆ.
- Lighthouse: ವೆಬ್ ಪುಟಗಳ ಗುಣಮಟ್ಟವನ್ನು ಸುಧಾರಿಸಲು ಸ್ವಯಂಚಾಲಿತ ಸಾಧನ. ಇದು ಕಾರ್ಯಕ್ಷಮತೆ, ಪ್ರವೇಶಸಾಧ್ಯತೆ, ಪ್ರಗತಿಶೀಲ ವೆಬ್ ಅಪ್ಲಿಕೇಶನ್‌ಗಳು, SEO ಮತ್ತು ಹೆಚ್ಚಿನವುಗಳಿಗಾಗಿ ಆಡಿಟ್‌ಗಳನ್ನು ಹೊಂದಿದೆ.
ಸಾಮಾನ್ಯ ತಪ್ಪುಗಳು ಮತ್ತು ಅವುಗಳನ್ನು ತಪ್ಪಿಸುವುದು ಹೇಗೆ
- ರಿಸೋರ್ಸ್ ಹಿಂಟ್ಸ್ ಗಳ ಅತಿಯಾದ ಬಳಕೆ: ಹಲವಾರು ರಿಸೋರ್ಸ್ ಹಿಂಟ್ಸ್ ಗಳನ್ನು ಬಳಸುವುದು ಕಾರ್ಯಕ್ಷಮತೆಯ ಮೇಲೆ ನಕಾರಾತ್ಮಕ ಪರಿಣಾಮ ಬೀರಬಹುದು. ಅತ್ಯಂತ ನಿರ್ಣಾಯಕ ಸಂಪನ್ಮೂಲಗಳ ಮೇಲೆ ಗಮನಹರಿಸಿ.
- ತಪ್ಪಾದ
asಆಟ್ರಿಬ್ಯೂಟ್: ಪ್ರೀಲೋಡ್‌ಗಾಗಿ ತಪ್ಪುasಆಟ್ರಿಬ್ಯೂಟ್ ಅನ್ನು ಬಳಸುವುದು ಸಂಪನ್ಮೂಲವನ್ನು ಸರಿಯಾಗಿ ಲೋಡ್ ಆಗದಂತೆ ತಡೆಯಬಹುದು. - CORS ಅನ್ನು ನಿರ್ಲಕ್ಷಿಸುವುದು: ಬೇರೆ ಮೂಲದಿಂದ ಸಂಪನ್ಮೂಲಗಳನ್ನು ಲೋಡ್ ಮಾಡುವಾಗ
crossoriginಆಟ್ರಿಬ್ಯೂಟ್ ಅನ್ನು ಸೇರಿಸಲು ವಿಫಲವಾದರೆ ಲೋಡಿಂಗ್ ದೋಷಗಳಿಗೆ ಕಾರಣವಾಗಬಹುದು. - ಕಾರ್ಯಕ್ಷಮತೆಯನ್ನು ಪರೀಕ್ಷಿಸದಿರುವುದು: ರಿಸೋರ್ಸ್ ಹಿಂಟ್ಸ್ ಗಳು ನಿವ್ವಳ ಪ್ರಯೋಜನವನ್ನು ಒದಗಿಸುತ್ತಿವೆಯೇ ಎಂದು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಲು ಯಾವಾಗಲೂ ಅವುಗಳ ಕಾರ್ಯಕ್ಷಮತೆಯ ಪರಿಣಾಮವನ್ನು ಪರೀಕ್ಷಿಸಿ.
- ತಪ್ಪಾದ ಮಾರ್ಗಗಳು: ರಿಸೋರ್ಸ್ ಹಿಂಟ್ಸ್ ಗಾಗಿ ನಿರ್ದಿಷ್ಟಪಡಿಸಿದ ಎಲ್ಲಾ ಫೈಲ್ ಮಾರ್ಗಗಳು ಮತ್ತು URL ಗಳು ಸರಿಯಾಗಿವೆಯೇ ಎಂದು ಎರಡು ಬಾರಿ ಪರಿಶೀಲಿಸಿ ಮತ್ತು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಿ, ಇಲ್ಲದಿದ್ದರೆ, ಅದು ದೋಷಕ್ಕೆ ಕಾರಣವಾಗುತ್ತದೆ.
ರಿಸೋರ್ಸ್ ಹಿಂಟ್ಸ್ ಗಳ ಭವಿಷ್ಯ
ರಿಸೋರ್ಸ್ ಹಿಂಟ್ಸ್ ಗಳು ನಿರಂತರವಾಗಿ ವಿಕಸನಗೊಳ್ಳುತ್ತಿವೆ, ಹೊಸ ವೈಶಿಷ್ಟ್ಯಗಳು ಮತ್ತು ಸುಧಾರಣೆಗಳನ್ನು ಬ್ರೌಸರ್ ವಿಶೇಷಣಗಳಿಗೆ ಸೇರಿಸಲಾಗುತ್ತಿದೆ. ರಿಸೋರ್ಸ್ ಹಿಂಟ್ಸ್ ನಲ್ಲಿನ ಇತ್ತೀಚಿನ ಬೆಳವಣಿಗೆಗಳೊಂದಿಗೆ ನವೀಕೃತವಾಗಿರುವುದು ನಿಮ್ಮ ವೆಬ್‌ಸೈಟ್‌ನ ಕಾರ್ಯಕ್ಷಮತೆಯನ್ನು ಮತ್ತಷ್ಟು ಆಪ್ಟಿಮೈಜ್ ಮಾಡಲು ಸಹಾಯ ಮಾಡುತ್ತದೆ. ಉದಾಹರಣೆಗೆ, modulepreload ಎಂಬುದು JavaScript ಮಾಡ್ಯೂಲ್‌ಗಳನ್ನು ಪ್ರೀಲೋಡ್ ಮಾಡಲು ವಿಶೇಷವಾಗಿ ವಿನ್ಯಾಸಗೊಳಿಸಲಾದ ಹೊಸ ರಿಸೋರ್ಸ್ ಹಿಂಟ್ ಆಗಿದೆ. ಅಲ್ಲದೆ, ರಿಸೋರ್ಸ್ ಹಿಂಟ್ಸ್ ಗಾಗಿ `priority` ಆಟ್ರಿಬ್ಯೂಟ್ ಒಂದು ಸಂಪನ್ಮೂಲದ ಆದ್ಯತೆಯನ್ನು ಇತರ ಸಂಪನ್ಮೂಲಗಳಿಗೆ ಹೋಲಿಸಿದರೆ ನಿರ್ದಿಷ್ಟಪಡಿಸಲು ನಿಮಗೆ ಅನುಮತಿಸುತ್ತದೆ. ಈ ವೈಶಿಷ್ಟ್ಯಗಳಿಗೆ ಬ್ರೌಸರ್ ಬೆಂಬಲವು ಇನ್ನೂ ವಿಕಸನಗೊಳ್ಳುತ್ತಿದೆ, ಆದ್ದರಿಂದ ಅವುಗಳನ್ನು ಅಳವಡಿಸುವ ಮೊದಲು ಹೊಂದಾಣಿಕೆಯನ್ನು ಪರಿಶೀಲಿಸಿ.
ತೀರ್ಮಾನ
ರಿಸೋರ್ಸ್ ಹಿಂಟ್ಸ್ ಗಳು ವೆಬ್‌ಸೈಟ್ ಲೋಡಿಂಗ್ ಸಮಯವನ್ನು ಆಪ್ಟಿಮೈಜ್ ಮಾಡಲು ಮತ್ತು ಬಳಕೆದಾರರ ಅನುಭವವನ್ನು ಸುಧಾರಿಸಲು ಪ್ರಬಲ ಸಾಧನಗಳಾಗಿವೆ. ಪ್ರೀಲೋಡ್, ಪ್ರಿಫೆಚ್, ಮತ್ತು ಪ್ರಿಕನೆಕ್ಟ್ ಅನ್ನು ಕಾರ್ಯತಂತ್ರವಾಗಿ ಬಳಸುವ ಮೂಲಕ, ನೀವು ನಿರ್ಣಾಯಕ ಸಂಪನ್ಮೂಲಗಳ ಬಗ್ಗೆ ಬ್ರೌಸರ್‌ಗೆ ಪೂರ್ವಭಾವಿಯಾಗಿ ತಿಳಿಸಬಹುದು, ವಿಳಂಬವನ್ನು ಕಡಿಮೆ ಮಾಡಬಹುದು ಮತ್ತು ನಿಮ್ಮ ವೆಬ್‌ಸೈಟ್‌ನ ಗ್ರಹಿಸಿದ ಕಾರ್ಯಕ್ಷಮತೆಯನ್ನು ಹೆಚ್ಚಿಸಬಹುದು. ನಿರ್ಣಾಯಕ ಸಂಪನ್ಮೂಲಗಳಿಗೆ ಆದ್ಯತೆ ನೀಡಲು, ರಿಸೋರ್ಸ್ ಹಿಂಟ್ಸ್ ಗಳನ್ನು ವಿವೇಚನೆಯಿಂದ ಬಳಸಲು ಮತ್ತು ನಿಮ್ಮ ಬದಲಾವಣೆಗಳ ಕಾರ್ಯಕ್ಷಮತೆಯ ಪರಿಣಾಮವನ್ನು ಯಾವಾಗಲೂ ಪರೀಕ್ಷಿಸಲು ಮರೆಯದಿರಿ. ಈ ಲೇಖನದಲ್ಲಿ ವಿವರಿಸಲಾದ ಉತ್ತಮ ಅಭ್ಯಾಸಗಳನ್ನು ಅನುಸರಿಸುವ ಮೂಲಕ, ನೀವು ನಿಮ್ಮ ವೆಬ್‌ಸೈಟ್‌ನ ಕಾರ್ಯಕ್ಷಮತೆಯನ್ನು ಗಮನಾರ್ಹವಾಗಿ ಸುಧಾರಿಸಬಹುದು ಮತ್ತು ಪ್ರಪಂಚದಾದ್ಯಂತದ ನಿಮ್ಮ ಬಳಕೆದಾರರಿಗೆ ಉತ್ತಮ ಅನುಭವವನ್ನು ಒದಗಿಸಬಹುದು.