ನಿಮ್ಮ ವೆಬ್‌ಸೈಟ್‌ನಲ್ಲಿ ಡಿಫರ್/ಆಸಿಂಕ್ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಲೋಡಿಂಗ್ ಬಳಸಿ TBT ಸಮಯವನ್ನು ಕಡಿಮೆ ಮಾಡುವುದು

ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್‌ನ್ನು ವಿಳಂಬ (defer/async) ಮೂಲಕ ಲೋಡ್ ಮಾಡುವುದು ಎಂದರೆ, ಬ್ರೌಸರ್‌ವು ಪೇಜ್‌ನ ಮುಖ್ಯ ವಿಷಯವನ್ನು ರೆಂಡರ್ ಮಾಡಲು ತಡೆಗಟ್ಟುವ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಫೈಲ್‌ಗಳನ್ನು ಸರಿಯಾದ ಕ್ರಮದಲ್ಲಿ ವಿಳಂಬಗೊಳಿಸುವುದು. ಇದರಿಂದ Total Blocking Time (TBT) ಎಂಬ ಮೆಟ್ರಿಕ್ ಕಡಿಮೆಯಾಗುತ್ತದೆ. ಮುಖ್ಯವಾಗಿ, ಪ್ರಮುಖವಲ್ಲದ script ಫೈಲ್‌ಗಳಿಗೆ defer ಅಥವಾ async ಅಟ್ರಿಬ್ಯೂಟ್‌ಗಳನ್ನು ಸೇರಿಸಿ, ಬ್ರೌಸರ್‌ನ ಮುಖ್ಯ ಥ್ರೆಡ್‌ನ್ನು ಕಡಿಮೆ ನಿರ್ಬಂಧಿಸುತ್ತೀರಿ; ಬಳಕೆದಾರರು ಪುಟವನ್ನು ಬೇಗ ನೋಡಬಹುದು, ಬೇಗ ಇಂಟರಾಕ್ಟ್ ಮಾಡಬಹುದು ಮತ್ತು Core Web Vitals ಸುಧಾರಿಸುತ್ತದೆ. ನಿಮ್ಮ ಸೈಟ್‌ನಲ್ಲಿ ವಿಳಂಬ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಲೋಡಿಂಗ್ ಅನ್ವಯಿಸಲು ಮೊದಲಿಗೆ ಯಾವ ಫೈಲ್‌ಗಳು ಮುಖ್ಯವೆಂದು ಗುರುತಿಸಿ, ಅವುಗಳ ಡಿಪೆಂಡೆನ್ಸಿಗೆ defer ಆಯ್ಕೆ ಮಾಡಿ, ಸ್ವತಂತ್ರ ತೃತೀಯ-ಪಕ್ಷ script‌ಗಳಿಗೆ async ಬಳಸಲು ಶಿಫಾರಸ್ಸು ಮಾಡಲಾಗುತ್ತದೆ. ಬದಲಾವಣೆಯ ನಂತರ PageSpeed Insights, Lighthouse ಮತ್ತು Chrome DevTools ಮೂಲಕ TBT ಅನ್ನು ಅಳೆಯಬೇಕು.

ಆಧುನಿಕ ವೆಬ್‌ಸೈಟ್‌ಗಳಲ್ಲಿ ಪರ್ಫಾರ್ಮೆನ್ಸ್ ಸಮಸ್ಯೆ ಬಹುತೇಕ ಇಮೇಜ್‌ಗಳಿಂದ ಆಗುವುದಿಲ್ಲ, ಅದು ನಿಯಂತ್ರಣವಿಲ್ಲದ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಬಳಕೆಗಳಿಂದ ಆಗುತ್ತದೆ. ಒಂದು ಈ-ಕಾಮರ್ಸ್ ಸೈಟ್‌ನಲ್ಲಿ ಉತ್ಪನ್ನ ಫಿಲ್ಟರ್‌ಗಳು, ಲೈವ್ ಚಾಟ್, ಜಾಹೀರಾತು ಪಿಕ್ಸೆಲ್‌ಗಳು, ಅನಾಲಿಟಿಕ್ಸ್ ಕೋಡ್‌ಗಳು, ಕಾಮೆಂಟ್ ಪ್ಲಗ್ಇನ್‌ಗಳು, A/B ಟೆಸ್ಟ್ ಟೂಲ್ಸ್ ಮತ್ತು ಥೀಮ್ script‌ಗಳು ಒಂದೇ ಸಮಯದಲ್ಲಿ ಲೋಡ್ ಆದರೆ, ಬ್ರೌಸರ್‌ನ ಮುಖ್ಯ ಥ್ರೆಡ್‌ ಬಹಳ ಸಮಯ ನಿರ್ಬಂಧಿತವಾಗಿರುತ್ತದೆ. ಇದು ವಿಶೇಷವಾಗಿ ಮೊಬೈಲ್‌ನಲ್ಲಿ ಸ್ಪಷ್ಟವಾಗುತ್ತದೆ. ಬಳಕೆದಾರರು ಟೈಟಲ್ ನೋಡಬಹುದು ಆದರೆ ಮೆನು ಟಚ್ ಮಾಡಿದಾಗ ಪ್ರತಿಕ್ರಿಯೆ ಸಿಗುವುದಿಲ್ಲ; Lighthouse ನಲ್ಲಿ TBT ಮೌಲ್ಯ ಹೆಚ್ಚಾಗಿ ಕಾಣಿಸಬಹುದು.

ಈ ಮಾರ್ಗದರ್ಶಿಯಲ್ಲಿ defer ಮತ್ತು async ಅಟ್ರಿಬ್ಯೂಟ್‌ಗಳು ಹೇಗೆ ಕೆಲಸ ಮಾಡುತ್ತವೆ, ಯಾವ ಸಂದರ್ಭಗಳಲ್ಲಿ ಯಾವ ಅನ್ನು ಬಳಸಬೇಕು, WordPress ಮತ್ತು ಕಸ್ಟಮ್ ಸಾಫ್ಟ್ವೇರ್ ಪ್ರೊಜೆಕ್ಟ್‌ಗಳಲ್ಲಿ ಹೇಗೆ ಅನ್ವಯಿಸಬಹುದು, TBT ಅನ್ನು ಅಳೆಯುವ ಸಮಯದಲ್ಲಿ ಯಾವ ಎಚ್ಚರಿಕೆಗಳನ್ನು ಪಾಲಿಸಬೇಕು ಮತ್ತು ನಿಜವಾದ TBT ಸುಧಾರಣೆಯ ಹಂತಗಳನ್ನು ವಿವರಿಸುತ್ತೇವೆ. Hostragons ನಲ್ಲಿ ಹೋಸ್ಟ್ ಮಾಡಿರುವ ಸೈಟ್‌ಗಳಿಗೆ ಈ ಸಲಹೆಗಳು ಸಾಮಾನ್ಯ ವೆಬ್ ಸ್ಟ್ಯಾಂಡರ್ಡ್ಗಳಿಗೆ ಅನುಗುಣವಾಗಿವೆ; ಜೊತೆಗೆ ಸರಿಯಾದ ಹೋಸ್ಟಿಂಗ್, CDN, SSL ಮತ್ತು ಕ್ಯಾಶಿಂಗ್ ನಿರ್ಧಾರಗಳು ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಪರಿಪೂರ್ಣತೆಗೆ ಹೇಗೆ ಸಹಾಯ ಮಾಡುತ್ತವೆ ಎಂಬುದನ್ನು ಹೇಳುತ್ತೇವೆ. Hostragons ವೆಬ್ ಹೋಸ್ಟಿಂಗ್ ಪ್ಯಾಕ್‌ಗಳು

TBT ಎಂದರೆ ಏನು? ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಜೊತೆ ಸಂಬಂಧ ಹೇಗಿದೆ?

TBT ಎಂದರೆ Total Blocking Time, ಅದು ಪುಟವು ಬಳಕೆದಾರರ ಇಂಟರಾಕ್ಷನ್‌ಗೆ ಸಿದ್ಧವಾಗುವ ಸಮಯವನ್ನು ತಡೆಗಟ್ಟುವ ಮುಖ್ಯ ಥ್ರೆಡ್‌ ಬ್ಲಾಕಿಂಗ್ ಅನ್ನು ಅಳೆಯುತ್ತದೆ. Lighthouse ಲ್ಯಾಬ್ ಟೆಸ್ಟ್‌ಗಳಲ್ಲಿ, First Contentful Paint ಮತ್ತು Time to Interactive ನಡುವೆ 50 ಮಿಲಿಸೆಕೆಂಡ್‌ಗಿಂತ ಹೆಚ್ಚು ಕಾಲ ನಡೆಯುವ ಟಾಸ್ಕ್‌ಗಳು TBT ಅನ್ನು ಹೆಚ್ಚಿಸುತ್ತವೆ. ಉದಾಹರಣೆಗೆ ಒಂದು ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಟಾಸ್ಕ್ 180ms ನಡೆಯುತ್ತದಾದರೆ, ಮೊದಲ 50ms ನಂತರ ಉಳಿದ 130ms TBT ಗೆ ಸೇರುತ್ತದೆ.

ಈ ಮೆಟ್ರಿಕ್ ಬಳಕೆದಾರ ಅನುಭವಕ್ಕೆ ಬಹಳ ಮುಖ್ಯ. ಯಾಕೆಂದರೆ, ಪುಟ ಓಪನ್ ಆದ ನಂತರ ಮೆನು, ಕಾರ್ಟ್, ಅಥವಾ ಸರ್ಚ್ ಬಾಕ್ಸ್ ಟಚ್ ಮಾಡಿದಾಗ ಬ್ರೌಸರ್ ಇನ್ನೂ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಕಾರ್ಯಗೊಳಿಸುತ್ತಿದ್ದರೆ ಪ್ರತಿಕ್ರಿಯೆ ವಿಳಂಬವಾಗುತ್ತದೆ. ಬಳಕೆದಾರರು ಇದನ್ನು “ಹ್ಯಾಂಗ್” ಅಥವಾ “ಸ್ಲೋ” ಎಂದು ಭಾವಿಸಬಹುದು. 2026 SEO ಸ್ಟ್ಯಾಂಡರ್ಡ್‌ಗಳಲ್ಲಿ Google ಪುಟ ಅನುಭವವನ್ನು ಒಂದೇ ಪಾಯಿಂಟ್‌ ಆಗಿ ಅಳವಡಿಸಿಲ್ಲ, ಆದರೆ ಸ್ಪಷ್ಟ, ವೇಗದ ಇಂಟರಾಕ್ಷನ್‌ ನೀಡುವ ಸೈಟ್‌ಗಳು ಹೆಚ್ಚು ಪಾಸಿಟಿವ್ ಖಾತರಿಯನ್ನು ಪಡೆದಿವೆ.

ಹೆಚ್ಚು TBT ಮೌಲ್ಯದ ಸಾಮಾನ್ಯ ಲಕ್ಷಣಗಳು

• ಮೊಬೈಲ್ PageSpeed Insights ನಲ್ಲಿ TBT ಮೌಲ್ಯ 300ms ಗಿಂತ ಹೆಚ್ಚಾಗುವುದು.
• Lighthouse ನಲ್ಲಿ Reduce JavaScript execution time ಅಥವಾ Minimize main-thread work ಎಚ್ಚರಿಕೆಗಳು ಕಾಣಿಸಿಕೊಳ್ಳುವುದು.
• ಪುಟವು ಕಂಡರೂ ಮೆನು, ಸ್ಲೈಡರ್, ಫಿಲ್ಟರ್ ಅಥವಾ ಫಾರ್ಮ್‌ಗಳು ವಿಳಂಬದಿಂದ ಪ್ರತಿಕ್ರಿಯೆ ನೀಡುವುದು.
• ತೃತೀಯ-ಪಕ್ಷ ಜಾಹೀರಾತು, ಲೈವ್ ಚಾಟ್ ಅಥವಾ ಅನಾಲಿಟಿಕ್ಸ್ script‌ಗಳು ವರದಿಯಲ್ಲಿ ಹೆಚ್ಚು resource-heavy ಆಗಿರುವುದು.
• ನಿಮ್ನ ಮಟ್ಟದ Android ಫೋನ್‌ಗಳಲ್ಲಿ ಸ್ಕ್ರೋಲ್ ಮತ್ತು ಕ್ಲಿಕ್‌ಗಳಲ್ಲಿ ವಿಳಂಬ.

200ms ಗಿಂತ ಕಡಿಮೆ TBT ಮೌಲ್ಯ ಬಹುತೇಕ ಕಂಟೆಂಟ್ ಸೈಟ್‌ಗಳಿಗೆ ಉತ್ತಮ ಗುರಿಯಾಗಿದೆ. ಜಟಿಲ ಈ-ಕಾಮರ್ಸ್ ಅಥವಾ SaaS ಸೈಟ್‌ಗಳಿಗೆ defer ಮತ್ತು async ಮಾತ್ರ ಸಾಕಾಗದು; code splitting, ಅನವಶ್ಯಕ ಪ್ಯಾಕೇಜ್‌ಗಳನ್ನು ತೆಗೆದಿಡುವುದು, ಕ್ಯಾಶಿಂಗ್, ಸರ್ವರ್ ಪ್ರತಿಕ್ರಿಯೆ ಸುಧಾರಣೆ ಮತ್ತು ಕ್ರಿಟಿಕಲ್ CSS ಟ್ಯೂನಿಂಗ್‌ಗಳು ಕೂಡ ಅಗತ್ಯ. ಆದರೆ gecikmeli JavaScript yükleme ಬಹುತೇಕ ಪ್ರೊಜೆಕ್ಟ್‌ಗಳಲ್ಲಿ ಮೊದಲಿಗೆ ಪ್ರಯತ್ನಿಸಬಹುದಾದ ಪರ್ಫಾರ್ಮೆನ್ಸ್ ಆಪ್ಟಿಮೈಜೇಶನ್‌ ಆಗಿದೆ.

Defer ಮತ್ತು Async ಎಂದರೆ ಏನು?

HTML script ಟ್ಯಾಗ್‌ನ್ನು ಡೀಫಾಲ್ಟ್ ಆಗಿ ಬಳಸಿದರೆ, ಬ್ರೌಸರ್ HTML ಪಾರ್ಸಿಂಗ್ ಅನ್ನು ನಿಲ್ಲಿಸಿ, ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಫೈಲ್‌ನ್ನು ಡೌನ್‌ಲೋಡ್ ಮಾಡಿ, ಕಾರ್ಯಗೊಳಿಸಿ, ನಂತರ ಪುಟ ರೆಂಡರ್ ಮಾಡುತ್ತದೆ. ಇದು ಕೆಲ script‌ಗಳಿಗೆ ಅಗತ್ಯವಿರಬಹುದು, ಆದರೆ ಎಲ್ಲ script‌ಗಳಿಗೆ ಇದನ್ನು ಬಳಸಿದರೆ ಅನಗತ್ಯ ವಿಳಂಬ ಬರುತ್ತದೆ. defer ಮತ್ತು async ಅಟ್ರಿಬ್ಯೂಟ್‌ಗಳು ಈ ವರ್ತನೆಯನ್ನು ಬದಲಾಯಿಸಿ, script‌ಗಳನ್ನು ವಿಭಿನ್ನ ನಿಯಮಗಳೊಂದಿಗೆ ಲೋಡ್/ಕಾರು ಮಾಡುತ್ತವೆ.

defer ಹೇಗೆ ಕೆಲಸ ಮಾಡುತ್ತದೆ?

defer script ಫೈಲ್‌ನ್ನು HTML ಪಾರ್ಸಿಂಗ್ ನಡೆಯುತ್ತಿರುವಾಗ ಬ್ಯಾಕ್ಗ್ರೌಂಡ್‌ನಲ್ಲಿ ಡೌನ್‌ಲೋಡ್ ಮಾಡುತ್ತದೆ; ಆದರೆ ಕಾರ್ಯಗೊಳಿಸುವುದು HTML ಪಾರ್ಸಿಂಗ್ ಮುಗಿದ ಮೇಲೆ. defer ಬಳಸಿ ಹಲವು script‌ಗಳು ಇದ್ದರೂ, ಅವು HTML ನಲ್ಲಿ ಬರೆಯಲಾದ ಕ್ರಮವನ್ನು ಕಾಯ್ದುಕೊಳ್ಳುತ್ತವೆ. ಇದರಿಂದ ಪರಸ್ಪರ ಅವಲಂಬಿತ script‌ಗಳಿಗೆ defer ಸುರಕ್ಷಿತ ಆಯ್ಕೆ. ಉದಾಹರಣೆ: ಮೊದಲು ಲೈಬ್ರರಿ, ನಂತರ ಥೀಮ್ script ಬೇಕಾದರೆ defer ಬಳಸಿದರೆ ಸರಿಯಾಗಿದೆ.

ಉದಾಹರಣೆ: <script defer src="/js/app.js"></script>. app.js ಪುಟ ರೆಂಡರ್ ಮಾಡಲು ತಡೆಗಟ್ಟದೆ ಲೋಡ್ ಆಗುತ್ತದೆ, DOM ಸಿದ್ಧವಾದಾಗ ಕ್ರಮದಲ್ಲಿ ಕಾರ್ಯಗೊಳಿಸಲಿದೆ. ಆಧುನಿಕ ಬ್ರೌಸರ್‌ಗಳಲ್ಲಿ defer ಬಹಳಷ್ಟು ಸಪೋರ್ಟ್ ಇದೆ.

async ಹೇಗೆ ಕೆಲಸ ಮಾಡುತ್ತದೆ?

async script‌ಗೂ HTML ಪಾರ್ಸಿಂಗ್ ನಡೆಯುತ್ತಲೇ ಡೌನ್‌ಲೋಡ್ ಆಗುತ್ತದೆ; ಆದರೆ ಡೌನ್‌ಲೋಡ್ ಮುಗಿದ ಕೂಡಲೇ ಕಾರ್ಯಗೊಳಿಸುತ್ತದೆ. ಈ ವೇಳೆ HTML ಪಾರ್ಸಿಂಗ್ ಸ್ವಲ್ಪ ಕಾಲ ನಿಲ್ಲಬಹುದು. async script‌ಗಳಲ್ಲಿ ಕ್ರಮ ಖಚಿತವಿಲ್ಲ; ಮೊದಲಿಗೆ ಲೋಡ್ ಆಗಿದ್ದ script ಮೊದಲು ಕಾರ್ಯಗೊಳಿಸುತ್ತದೆ. ಅನಾಲಿಟಿಕ್ಸ್, ಜಾಹೀರಾತು, ಪಿಕ್ಸೆಲ್, ಚಾಟ್ widget ಅಥವಾ ಸೋಶಿಯಲ್ ಮೀಡಿಯಾ script‌ಗಳಿಗೆ async ಸೂಕ್ತ.

ಉದಾಹರಣೆ: <script async src="/js/analytics.js"></script>. analytics.js script ಯಾವುದೇ dependencie ಇಲ್ಲದೆ ಸ್ವತಂತ್ರವಾಗಿ ಕಾರ್ಯಗೊಳಿಸಬೇಕು. dependencie ಇದ್ದರೆ async ಬಳಸುವುದು ಅಪಾಯಕಾರಿ.

Defer ಮತ್ತು Async ಹೋಲಿಕೆಯ ಟೇಬಲ್

ಪರಿಶೀಲನೆ: script‌ಗಳು ಕ್ರಮದಲ್ಲಿ ಕಾರ್ಯಗೊಳಿಸಬೇಕಿದ್ದರೆ defer ಬಳಸಿ. ಸ್ವತಂತ್ರ script‌ಗಳಿಗೆ async ಬಳಸಿ. ಅನುಮಾನವಾದರೆ, staging environment ನಲ್ಲಿ defer ಪ್ರಯತ್ನಿಸಿ, console errors ಮತ್ತು interaction ಪರೀಕ್ಷಿಸಿ. ಸ್ಟೇಜಿಂಗ್ ಪರಿಸರ ಮತ್ತು ಬ್ಯಾಕ್‌ಅಪ್ ಮಾರ್ಗದರ್ಶಿ

ವಿಳಂಬ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಲೋಡಿಂಗ್‌ಗೆ ಹಂತ ಹಂತದ ಕಾರ್ಯಯೋಜನೆ

ಪ್ರತಿ script ಟ್ಯಾಗ್‌ಗೆ defer ಅಥವಾ async ಸೇರಿಸುವುದು ತಕ್ಷಣ PageSpeed ಪಾಯಿಂಟ್‌ ಹೆಚ್ಚಿಸಬಹುದು ಅನ್ನಿಸುತ್ತದೆ; ಆದರೆ, ಲೈವ್ ಸೈಟ್‌ನಲ್ಲಿ ಪೇಮೆಂಟ್, ಸರ್ಚ್, ಮೆನು, ಫಾರ್ಮ್ validation ಅಥವಾ ಕಾರ್ಟ್‌ಗಳಿಗೆ ಹಾನಿ ಮಾಡಬಹುದು. ಆರೋಗ್ಯಕರ ಅನುಷ್ಠಾನಕ್ಕಾಗಿ: ಅಳೆಯುವುದು, ವರ್ಗೀಕರಿಸುವುದು, ಚಿಕ್ಕ ಬದಲಾವಣೆ, ಪರೀಕ್ಷೆ ಮತ್ತು ನಿಗಾದ ಚಕ್ರ ಅನುಸರಿಸಿ.

1. ಪ್ರಸ್ತುತ ಪರ್ಫಾರ್ಮೆನ್ಸ್ ಅಳೆಯಿರಿ

ಪ್ರಾರಂಭದಲ್ಲಿ PageSpeed Insights ಮೂಲಕ ಮೊಬೈಲ್ ಮತ್ತು ಡೆಸ್ಕ್‌ಟಾಪ್ ಸ್ಕೋರ್‌ಗಳನ್ನು ನೋಟ್ ಮಾಡಿ. Lighthouse ನಲ್ಲಿ TBT, First Contentful Paint, Largest Contentful Paint ಮತ್ತು Speed Index ಅಳೆಯಿರಿ. Chrome DevTools Performance ಟ್ಯಾಬ್‌ನಲ್ಲಿ ಮುಖ್ಯ ಥ್ರೆಡ್‌ ಪರಿಶೀಲಿಸಿ; ದೀರ್ಘ ಹಳದಿ ಬ್ಲಾಕ್‌ಗಳು ಸಾಮಾನ್ಯವಾಗಿ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಕಾರ್ಯಗೊಳಿಸುವ ವೆಚ್ಚವನ್ನೂ ಸೂಚಿಸುತ್ತವೆ.

ಉದಾಹರಣೆಗೆ: ಮೊಬೈಲ್ TBT 780ms, JavaScript execution time 2.8s, main-thread work 4.5s. ಆಪ್ಟಿಮೈಜೇಶನ್ ನಂತರ TBT 280ms ಬರುವುದಾದರೆ ಸುಮಾರು 64% ಸುಧಾರಣೆ. ಈ ದಾಖಲೆಗಳು ಯಾವ ಬದಲಾವಣೆ ಫಲಿತಾಂಶ ನೀಡುತ್ತಿವೆ ಎನ್ನುವುದನ್ನು ತಂಡದಲ್ಲಿ ಸ್ಪಷ್ಟಪಡಿಸಲು ಸಹಾಯ.

2. script ಇನ್‌ವೆಂಟರಿ ತಯಾರಿಸಿ

ಪುಟದ ಕೋಡ್ ಅಥವಾ Network ಟ್ಯಾಬ್‌ನಲ್ಲಿ ಎಲ್ಲ JavaScript ಫೈಲ್‌ಗಳನ್ನು ಪಟ್ಟಿಮಾಡಿ. ಪ್ರತಿಯೊಂದು script‌ದ ಮೂಲ, ಗಾತ್ರ, ಅಗತ್ಯ ಸಮಯ ಮತ್ತು dependencie ಗುರುತಿಸಿ. ಈ script‌ಗಳನ್ನು ಹೀಗಾಗಿ ವರ್ಗೀಕರಿಸಿ:

• ಮುಖ್ಯ script‌ಗಳು: ಪುಟದ ಮೊದಲಿನ ದೃಷ್ಯ ಅಥವಾ ನ್ಯಾವಿಗೇಷನ್‌ಗೆ ಅಗತ್ಯ.
• dependencie ಇರುವ ಸ್ಥಳೀಯ script‌ಗಳು: ಥೀಮ್, slider, filter, gallery, modules.
• ಸ್ವತಂತ್ರ ತೃತೀಯ-ಪಕ್ಷ script‌ಗಳು: analytics, ads, pixels, chat, social widgets.
• ಅನವಶ್ಯಕ/ಹಳೆಯ script‌ಗಳು: ಬಳಸದೆ ಉಳಿದ plugins scripts.
• ಶರತ್ತುಬದ್ಧ script‌ಗಳು: ಪ್ರಾಮಾಣಿಕವಾಗಿ ಕೆಲವು ಪುಟಗಳಲ್ಲಿ (ಉದಾ: contact page) ಮಾತ್ರ ಅಗತ್ಯ.

ಉತ್ತಮ ಆಪ್ಟಿಮೈಜೇಶನ್ ಎಂದರೆ defer ಸೇರಿಸುವುದಕ್ಕೂ ಮುನ್ನ ಅನವಶ್ಯಕ script ತೆಗೆದು ಹಾಕುವುದು. 90KB compress ಮಾಡಿದ script ಮೊಬೈಲ್‌ನಲ್ಲಿ 300ms ಗಿಂತ ಹೆಚ್ಚು ಕಾರ್ಯಗೊಳಿಸುವ ವೆಚ್ಚ ಕೊಡಬಹುದು. ಆದ್ದರಿಂದ, ಮೊದಲಿಗೆ script‌ಗಳನ್ನು ಸ್ವಚ್ಛಗೊಳಿಸಿ, ನಂತರ defer/async ಬಳಸಿ.

3. defer ಅನ್ವಯಿಸಲು script‌ಗಳನ್ನು ಆಯ್ಕೆಮಾಡಿ

ಥೀಮ್ script, menu behaviour, slider code, gallery modules, app bundle ಫೈಲ್‌ಗಳು defer candidate ಆಗಿವೆ. script document.write ಅಥವಾ ಬ್ಲಾಕಿಂಗ್ ವಿಧಾನಗಳಿಗೆ ಅವಲಂಬಿತವಾಗಿರಬಾರದು ಮತ್ತು DOM ಸಿದ್ಧವಾದ ನಂತರ ಕಾರ್ಯಗೊಳಿಸುವುದು ಒಪ್ಪಿಕೊಳ್ಳಬಹುದಾಗಿದೆ.

WordPress ಥೀಮ್‌ನಲ್ಲಿ jquery-migrate, main theme script ಮತ್ತು plugin script‌ಗಳು ಜಟಿಲ dependencie ಉಳ್ಳವು. jQuery core ಅನ್ನು async ಮಾಡಿದರೆ ಅನೇಕ plugins error ಕೊಡುತ್ತವೆ; jQuery dependent script‌ಗಳಿಗೆ defer ಬಳಸಿ, plugin-ನಲ್ಲಿಯೇ ಆಪ್ಟಿಮೈಜ್ಡ್ ಲೋಡಿಂಗ್ ಆಯ್ಕೆಗಳನ್ನು ಬಳಸುವುದು ಉತ್ತಮ. ವೋರ್ಡ್‌ಪ್ರೆಸ್ ವೇಗ ಆಪ್ಟಿಮಯ್ಜೇಶನ್ ಮಾರ್ಗದರ್ಶಿ

4. async ಅನ್ವಯಿಸಲು script‌ಗಳನ್ನು ಆಯ್ಕೆಮಾಡಿ

Google Analytics, ad tags, Facebook Pixel, LinkedIn Insight Tag, chat widgets, social share script‌ಗಳು async candidate. ಆದರೆ ಎಲ್ಲ ತೃತೀಯ-ಪಕ್ಷ script‌ಗಳು ಒಂದೇ ರೀತಿಯಲ್ಲ. ಕೆಲವು live chat script‌ಗಳು user session ಕ್ರಿಯೇಟ್ ಮಾಡಬೇಕೆಂದರೆ loading ವೇಳೆ dependencie ಇರಬಹುದು; ad scripts container‌ನ ನಿರ್ದಿಷ್ಟ ಕ್ರಮ ಕಾಯಬಹುದು. Documentation ಪರಿಶೀಲಿಸಿ.

ಸ್ವತಂತ್ರ analytics code async ಮಾಡಿದರೆ ಬಳಕೆದಾರ ಅನುಭವಕ್ಕೆ ಹಾನಿಯಿಲ್ಲ. data loss ಕಡಿಮೆ ಮಾಡಲು real-time reports trigger check ಮಾಡಿ. Tag manager ಬಳಸುತ್ತಿದ್ದರೆ trigger conditions edit ಮಾಡಿ. ಉದಾಹರಣೆಗೆ: comment tracking script comment form ಇಲ್ಲದ page‌ಗಳಲ್ಲಿ ಅಥವಾ product interaction script product page‌ಗಳಲ್ಲದೆ page‌ಗಳಲ್ಲಿ ಲೋಡ್ ಆಗಬಾರದು.

5. ಶರತ್ತುಬದ್ಧ ಮತ್ತು event-based ಲೋಡಿಂಗ್ ಸೇರಿಸಿ

defer/async ಉತ್ತಮ ಆರಂಭ; ಆದರೆ, script‌ಗಳನ್ನು ಬಳಕೆದಾರ ಚಟುವಟಿಕೆಗೆ ಅನುಸಾರವಾಗಿ ಲೋಡ್ ಮಾಡುವುದು TBT ಮೇಲೆ ಹೆಚ್ಚು ಪರಿಣಾಮ ಬೀರುತ್ತದೆ. live chat widget page open ಆದ ಕೂಡಲೇ ಅಲ್ಲ, user 5 seconds wait ಮಾಡಿದಾಗ ಅಥವಾ help button click ಮಾಡಿದಾಗ ಲೋಡ್ ಮಾಡಬಹುದು. Map embed code user contact section scroll ಮಾಡಿದಾಗ ಲೋಡ್ ಮಾಡಬಹುದು. Video player script user play button click ಮಾಡಿದಾಗ ಮಾತ್ರ ಲೋಡ್ ಮಾಡಬಹುದು.

ಈ ವಿಧಾನ content sites ಮತ್ತು corporate sites‌ಗೆ ಹೆಚ್ಚು ಸೂಕ್ತ. ಏಕೆಂದರೆ, ಪ್ರತಿಯೊಂದು visitorಗೆ ಪ್ರತಿಯೊಂದು widget ಅಗತ್ಯವಿಲ್ಲ. First load‌ನಲ್ಲಿ 200KB JavaScript ಕಡಿಮೆ ಮಾಡಿದರೆ, ದುರ್ಬಲ ಮೊಬೈಲ್‌ಗಳಲ್ಲಿ TBT ನೂರಾರು milliseconds ಕಡಿಮೆಯಾಗುತ್ತದೆ.

6. ಪರೀಕ್ಷಿಸಿ ಮತ್ತು ಹಂತ ಹಂತವಾಗಿ ಲೈವ್ ಮಾಡಿ

ಬದಲಾವಣೆಗಳನ್ನು live site‌ನಲ್ಲಿ ತಕ್ಷಣ ಅನ್ವಯಿಸದೆ staging environment‌ನಲ್ಲಿ ಪರೀಕ್ಷಿಸಿ. homepage, category page, product/service page, contact page, login form ಮತ್ತು payment flowಗಳಲ್ಲಿ manual test ಮಾಡಿ. browser console‌ನಲ್ಲಿ error ಇದೆ ಎಂದು ಪರಿಶೀಲಿಸಿ. Cannot read property, is not defined, undefined function errors script sequence ಅಥವಾ dependencie ಸಮಸ್ಯೆ ಸೂಚನೆ.

liveಗೆ small groups‌ನಲ್ಲಿ deploy ಮಾಡಿ. ಮೊದಲು third-party script‌ಗಳನ್ನು optimize ಮಾಡಿ, ನಂತರ theme script‌ಗಳಿಗೆ ಹೋಗಿ. ಪ್ರತಿಯೊಂದು ಬದಲಾವಣೆ ನಂತರ Lighthouse report‌‌ನ್ನು ಒಂದೇ network/device simulation‌ನಲ್ಲಿ ಪುನಃ ನಡೆಸಿ. ಒಟ್ಟಿಗೆ 3 test‌ಗಳ ಸರಾಸರಿ ತೆಗೆದುಕೊಳ್ಳಿ.

WordPress ಸೈಟ್‌ಗಳಲ್ಲಿ defer ಮತ್ತು async ಅನ್ವಯಿಸುವ ಸೂಚನೆಗಳು

WordPress‌ನಲ್ಲಿ JavaScript ಫೈಲ್‌ಗಳು wp_enqueue_script function ಮೂಲಕ ಲೋಡ್ ಆಗುತ್ತವೆ. 2026ರ ವೇಳೆಗೆ WordPress script strategies ಹೆಚ್ಚು ನಿಯಂತ್ರಣ ಹೊಂದಿವೆ; ಆದರೆ ಹಳೆಯ themes, page builder plugins ಮತ್ತು incompatibility ಇರುವ optimization plugins conflicts ಕೊಡಬಹುದು.

performance plugin ಬಳಸಿ JavaScript‌ನ್ನು ಒಟ್ಟಿಗೆ defer ಮಾಡದೆ exclusion list ತಯಾರಿಸಿ. payment page, login, admin bar, security verification ಮತ್ತು captcha script‌ಗಳು ಹೆಚ್ಚು sensitive. WooCommerce sites‌ನಲ್ಲಿ cart fragments, payment gateway scripts ಮತ್ತು variation selectors ಪರೀಕ್ಷಿಸಿ. WooCommerce ಹೋಸಟಿಂಗ್ ಪರಿಹಾರಗಳು

WordPress practical order: ಮೊದಲು unused plugins ತೆಗೆದು ಹಾಕಿ; ನಂತರ plugin script‌ಗಳು page-ನಿಗೆ ಮಾತ್ರ ಲೋಡ್ ಆಗುವಂತೆ condition ಮಾಡಿ; theme/plugin script‌ಗಳಲ್ಲಿ defer ಪ್ರಯತ್ನಿಸಿ; ಕೊನೆಯಲ್ಲಿ third-party script‌ಗಳಿಗೆ async ಅಥವಾ delayed loading ಬಳಸಿ. ಇದು major breakage‌ಗಳನ್ನ ತಪ್ಪಿಸುತ್ತದೆ.

ಕಸ್ಟಮ್ ಸಾಫ್ಟ್ವೇರ್ ಮತ್ತು ಫ್ರೇಮ್‌ವರ್ಕ್ ಪ್ರೊಜೆಕ್ಟ್‌ಗಳಲ್ಲಿ ಎಚ್ಚರಿಕೆ

React, Vue, Angular, Next.js, Nuxt ಮತ್ತು ಇತರ modern frameworks‌ಗಳಲ್ಲಿ JavaScript optimize ಮಾಡುವುದು HTML ಟ್ಯಾಗ್‌ಗೆ defer ಸೇರಿಸುವಷ್ಟಲ್ಲ. package size, code splitting, tree shaking, dynamic import, hydration costಗಳು TBT ಅನ್ನು ನಿರ್ಧರಿಸುತ್ತವೆ. ಒಂದು ದೊಡ್ಡ bundle file 700KB ಇದ್ದರೆ defer ಮಾಡಿದರೂ main thread ವೇಗವಾಗಿ block ಆಗಬಹುದು.

custom projects‌ಗಳಲ್ಲಿ route-based code splitting ಬಳಸಿರಿ. homepage‌ಗೆ admin panel, chart library ಅಥವಾ editor code ಲೋಡ್ ಆಗಬಾರದು. heavy components‌ನ್ನು dynamic import ಮೂಲಕ ಅಗತ್ಯವಿದ್ದಾಗ ಮಾತ್ರ ಲೋಡ್ ಮಾಡಿರಿ. unused dependencies‌ನ್ನು package analysis tool ಮೂಲಕ ಗುರುತಿಸಿ. date/chart/animation libraries‌ಗೆ lightweight alternatives‌ನ್ನು ಅನುಸರಿಸಿ.

server-side rendering ಅಥವಾ static generation‌ನಲ್ಲಿ HTML ವೇಗವಾಗಿ ಬರಬಹುದು, hydration‌ನಲ್ಲಿ ನೂರಾರು components ಒಂದೇ ಸಮಯದಲ್ಲಿ activate ಆಗಬಹುದು, TBT value ಹೆಚ್ಚಾಗಬಹುದು. non-interactive content‌ಗಳಲ್ಲಿ client-side JavaScript‌ನ್ನು ಕಡಿಮೆ ಮಾಡಿ; ಇದು 2026ರ ಪರ್ಫಾರ್ಮೆನ್ಸ್ ತತ್ತ್ವಗಳಲ್ಲಿ ಪ್ರಮುಖವಾಗಿದೆ.

ಹೋಸ್ಟಿಂಗ್, ಸರ್ವರ್ ಪ್ರತಿಕ್ರಿಯೆ ಮತ್ತು ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಪರ್ಫಾರ್ಮೆನ್ಸ್ ಸಂಬಂಧ

TBT ನೇರವಾಗಿ ಬ್ರೌಸರ್‌ನ JavaScript execution time‌ಗೆ ಸಂಬಂಧಪಟ್ಟಿದೆ; ಆದರೆ hosting infrastructure ಪರೋಕ್ಷವಾಗಿ ಪರಿಣಾಮ ಬೀರುತ್ತದೆ. Slow TTFB, compression ಇಲ್ಲ, HTTP/2/HTTP/3 support ಇಲ್ಲ, poor caching, remote location latency script files‌ನ್ನು ವಿಳಂಬದಿಂದ ತಲುಪಿಸುತ್ತದೆ. ಕಡLate script files page lifecycle‌ನ್ನು drag ಮಾಡುತ್ತವೆ, user experience‌ಗಿಂತ ಕಡಿಮೆ.

ಉತ್ತಮ hosting infra: Brotli/Gzip compression, effective browser cache, latest PHP version, fast SSD/NVMe disks, CDN integration. SSL certificate ಸರಿಯಾದ configure ಮಾಡಬೇಕು, modern browser features, HTTP/2 ಮತ್ತು secure third-party integration‌ಗಳಿಗೆ ಅಗತ್ಯ. Hostragons SSL ಪ್ರಮಣಪತ್ರಗಳು Hostragons ಡೊಮೇನ್ ಪರಿಶೀಲನೆ

ಉದಾಹರಣೆಗೆ, compress ಇಲ್ಲದ script 320KB ಇದ್ದರೆ Brotli compress ಮಾಡಿದರೆ 95KB ಆಗಬಹುದು. ಇದು TBT value‌ನ್ನು ನೇರವಾಗಿ ಕಡಿಮೆ ಮಾಡದು; ಯಾಕೆಂದರೆ TBT execution cost‌ನ್ನ ಅಳೆಯುತ್ತದೆ. ಆದರೆ download time ಕಡಿಮೆಯಾಗುತ್ತದೆ, resource prioritization ಸುಲಭ, total load experience ಸುಧಾರಣೆ. ಆದ್ದರಿಂದ defer, async, caching, right hosting ಒಟ್ಟಿಗೆ combine ಮಾಡಬೇಕು.

ಅಳೆಯುವ ಮತ್ತು ದೃಢೀಕರಣ checklist

• ಮೊಬೈಲ್ TBT value optimize ಮಾಡುವ ಮೊದಲು ಮತ್ತು ನಂತರ compare ಮಾಡಿದ್ದೀರಾ?
• JavaScript execution report‌ನಲ್ಲಿ costly files ಕಡಿಮೆಯಾಗಿದ್ದಾವೆ?
• Chrome DevTools Performance recording‌ನಲ್ಲಿ long tasks ಕಡಿಮೆಯಾಗಿದ್ದಾವೆ?
• Console error ಇದ್ದೆ?
• Menu, search, filter, form, cart, payment flow flawless ಆಗಿ ಕೆಲಸ ಮಾಡುತ್ತಿರಾ?
• third-party analytics/ad tags correct trigger ಆಗುತ್ತಿರಾ?
• real user data INP ಮತ್ತು interaction latency ಸುಧಾರಣೆ ಆಗುತ್ತಿದೆಯಾ?
• cache clean ಮಾಡಿದ ನಂತರ re-test ಮಾಡಿದ್ದೀರಾ?

lab ಮತ್ತು real user data ವಿಭಿನ್ನ. TBT, Lighthouse lab metric. real user experience‌ನಲ್ಲಿ Interaction to Next Paint (INP) ಮುಖ್ಯ. ಆದರೆ TBT ಕಡಿಮೆ ಮಾಡಿದರೆ INP ಸುಧಾರಣೆಗೆ ಸಹಾಯ; ಯಾಕೆಂದರೆ main thread‌ನಲ್ಲಿ block ಕಡಿಮೆ.

ಪ್ರಮುಖ ತಪ್ಪುಗಳು ಮತ್ತು ತಪ್ಪಿಸಿಕೊಳ್ಳುವ ಮಾರ್ಗಗಳು

ಎಲ್ಲ script‌ಗಳನ್ನು async ಮಾಡುವುದು

ಇದು ಸಾಮಾನ್ಯ ತಪ್ಪು. async orderly loading ಖಾತರಿ ಕೊಡದು; dependencie script‌ಗಳಲ್ಲಿ random error ಆಗಬಹುದು. dependencie script‌ಗಳಿಗೆ defer ಸೂಕ್ತ.

jQuery ಮತ್ತು dependencie plugin‌ಗಳನ್ನು ತಪ್ಪಾಗಿ ವಿಳಂಬಗೊಳಿಸುವುದು

WordPress‌ನಲ್ಲಿ ಹಲವು plugin‌ಗಳು jQuery loading sequence‌ಗೆ depend. jQuery core async ಮಾಡಿದರೆ plugin‌ಗಳು error ಕೊಡುತ್ತವೆ. ಪರಿಹಾರ: dependencie network ನೋಡಿ, critical script exclusion list‌ಗೆ ಸೇರಿಸಿ.

third-party script‌ಗಳನ್ನು ನಿರ್ಲಕ್ಷ್ಯ ಮಾಡುವುದು

site owner theme script‌ಗಳನ್ನು optimize ಮಾಡಿದಾಗ ads/chat/analytics script‌ಗಳನ್ನು ಮರೆತು ಬಿಡುತ್ತಾರೆ. ಆದರೆ Lighthouse report‌ದಲ್ಲಿ ಗಂಭೀರ JavaScript task‌ಗಳು ಬಹುತೇಕ third-party source‌ಗಳಿಂದ ಬರುತ್ತವೆ. unused tags ತೆಗೆದು ಹಾಕಿ, conditional trigger ಮಾಡಿ, interaction‌ಗೆ defer ಮಾಡಿ.

measurement ಇಲ್ಲದೆ plugin install ಮಾಡುವುದು

performance plugins ಉಪಯುಕ್ತ; measurement ಇಲ್ಲದೆ install ಮಾಡಿದರೆ ಹೊಸ JavaScript/CSS load ಆಗಬಹುದು. ಮೊದಲಿಗೆ ಸಮಸ್ಯೆ ಗುರುತಿಸಿ, ನಂತರ plugin ಆಯ್ಕೆ ಮಾಡಿ. plugin TBT value‌ನ್ನು ಕಡಿಮೆ ಮಾಡುತ್ತಿದೆ ಎಂದು test report‌ನಿಂದ ದೃಢೀಕರಿಸಿ.

cache/minification conflicts‌ನ್ನು ನಿರ್ಲಕ್ಷ್ಯ ಮಾಡುವುದು

minification, bundling, defer, async ಒಟ್ಟಿಗೆ ಬಳಸಿದರೆ script sequence‌ನಲ್ಲಿ error ಆಗಬಹುದು. production‌ನಲ್ಲಿ unexpected error ಬರಬಹುದು. CDN, server cache, application cache‌ಗಳು ಇದ್ದರೆ change ಮಾಡಿದ ನಂತರ ಎಲ್ಲಾ layer clean ಮಾಡಿ.

ಪ್ರಾಯೋಗಿಕ ಆಪ್ಟಿಮೈಜೇಶನ್ ಉದಾಹರಣೆ

ಒಂದು midsize corporate site homepage‌ನಲ್ಲಿ 18 JavaScript requests ಇದ್ದವೆಂದರೆ, 5 theme/menu script, 4 slider/animation, 3 form/map, 6 analytics/pixel/live chat scripts. Starting Lighthouse mobile TBT 920ms.

ಮೊದಲಿಗೆ 2 unused animation plugins ತೆಗೆದು ಹಾಕಿ, 140KB compress JavaScript ಕಡಿಮೆ ಮಾಡಿ, TBT 760ms. ನಂತರ theme/slider script‌ಗಳಿಗೆ defer ನೀಡಿದರೆ, sequence test ಮಾಡಿ, TBT 480ms. ನಂತರ map script‌ನ್ನು contact section scroll ಮಾಡಿದಾಗ ಮಾತ್ರ ಲೋಡ್ ಮಾಡಿ, live chat 7 seconds wait ಮಾಡಿ, analytics/pixel async ಮಾಡಿ; final TBT 210ms.

ಇದು layered approach​ನ ಮಹತ್ವವನ್ನು ತೋರಿಸುತ್ತದೆ. defer/async ಶಕ್ತಿಶಾಲಿ tools; ಆದರೆ, best results ಅನವಶ್ಯಕ code removal, conditional loading, caching ಮತ್ತು quality infra ಜೊತೆ ಬರುತ್ತದೆ.

ನಗ್ನತೆ: ಕಡಿಮೆ TBT‌ಗಾಗಿ ಸಮತೋಲನ ಮತ್ತು ಪರೀಕ್ಷಿತ JavaScript ಪ್ಲಾನ್

ನಿಮ್ಮ ಸೈಟ್‌ನಲ್ಲಿ gecikmeli JavaScript yükleme, TBT value ಕಡಿಮೆ ಮಾಡುವ ಅತ್ಯಂತ ಪರಿಣಾಮಕಾರಿ ಮಾರ್ಗ. defer orderly, DOM ನಂತರ script‌ಗಳಿಗೆ ಸುರಕ್ಷಿತ; async third-party script‌ಗಳಿಗೆ flexible. ಉತ್ತಮ ಆಪ್ಟಿಮೈಜೇಶನ್‌ಗಾಗಿ measurement, script classify, code removal, staged testing, real user experience monitoring ಅಗತ್ಯ.

Hostragons‌ನಲ್ಲಿ ವೇಗವಾದ, ಸುರಕ್ಷಿತ ಮತ್ತು scalable infra‌ನ್ನು ಬಳಸುವುದು: JavaScript optimization, caching, SSL config ಜೊತೆಗೆ stable web performance ಕೊಡುತ್ತದೆ. ನಿಮ್ಮ site TBT value improve ಮಾಡಲು, report‌ನ್ನು ಮೊದಲು ಅಳೆಯಿರಿ, ನಂತರ staged steps‌ನಲ್ಲಿ optimize ಮಾಡಿ. right hosting/performance infra‌ಗಾಗಿ Hostragons‌ನ್ನು ಪರಿಗಣಿಸಿ. Hostragons ವೆಬ್ ಹೋಸ್ಟಿಂಗ್ ಪ್ಯಾಕ್‌ಗಳು

ಪದೇ ಪದೇ ಕೇಳಲಾಗುವ ಪ್ರಶ್ನೆಗಳು

defer ಮತ್ತು async ಒಂದೇ script‌ನಲ್ಲಿ ಬಳಸಬಹುದೇ?

script tag‌ನಲ್ಲಿ defer ಮತ್ತು async ಎರಡನ್ನು modern browser‌ಗಳಲ್ಲಿ ಬಳಸಿದರೆ async dominant ಆಗುತ್ತದೆ, orderly loading guarantee ಇಲ್ಲ. dependencie script‌ಗಳಲ್ಲಿ defer, independent script‌ಗಳಲ್ಲಿ async ಬಳಸುವುದು ಸುರಕ್ಷಿತ.

gecikmeli JavaScript yükleme SEO rank‌ನ್ನು ನೇರವಾಗಿ ಹೆಚ್ಚಿಸಬಹುದೇ?

ನೆರವಾಗಿ rank guarantee ನೀಡದು; ಆದರೆ, UX, interaction speed, Core Web Vitals improve ಮಾಡಿ SEO‌ಗೆ support ನೀಡುತ್ತದೆ. faster interaction site‌ಗಳು user satisfaction, conversion, crawl quality perception‌ನ್ನು ಹೆಚ್ಚಿಸುತ್ತವೆ.

ಪ್ರತಿ JavaScript script‌ಗೆ defer ನೀಡುವುದು ಸುರಕ್ಷಿತವೇ?

ಇಲ್ಲ. ಕೆಲವು script‌ಗಳು page initial stage‌ನಲ್ಲಿ ಕಾರ್ಯಗೊಳಿಸಬೇಕಾಗಬಹುದು ಅಥವಾ dependencie sequence ಇರಬಹುದು. ಪ್ರತಿಯೊಂದು scriptಕ್ಕೆ purpose, dependencie, execution timing check ಮಾಡಬೇಕು; staged testing ಅಗತ್ಯ.

TBT value ಕಡಿಮೆ ಮಾಡಲು defer/async ಮಾತ್ರ ಸಾಕಾ?

ಚಿಕ್ಕ/ಮಧ್ಯಮ site‌ಗಳಿಗೆ ಬಹುಶಃ ಸಾಕು; ಆದರೆ, heavy framework, third-party code, big bundle files site‌ಗಳಿಗೆ extra measures ಬೇಕು. code splitting, unused JavaScript removal, conditional loading, caching, robust hosting infra combine ಮಾಡಬೇಕು.

WordPress site‌ನಲ್ಲಿ ಯಾವ script‌ಗಳನ್ನು async ಮಾಡಬಾರದು?

jQuery dependencie plugins, payment/cart scripts, form validation, security verification, critical theme functions‌ನ್ನು random async ಮಾಡಬಾರದು. sequence error ಆಗಿದರೆ user interaction fail ಆಗಬಹುದು. ಮೊದಲಿಗೆ defer ಪ್ರಯತ್ನಿಸಿ, exclusion list ಬಳಸಿ.