ಕ್ರಿಟಿಕಲ್ ರೆಂಡರಿಂಗ್ ಪಾತ್ ಅನ್ನು ವಿಶ್ಲೇಷಿಸುವ ಮತ್ತು ಆಪ್ಟಿಮೈಜ್ ಮಾಡುವ ಮೂಲಕ ವೆಬ್ ಕಾರ್ಯಕ್ಷಮತೆಯಲ್ಲಿ ಪರಿಣಿತಿ ಪಡೆಯಿರಿ. ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ರೆಂಡರಿಂಗ್ ಮೇಲೆ ಹೇಗೆ ಪರಿಣಾಮ ಬೀರುತ್ತದೆ ಮತ್ತು ಅದನ್ನು ಹೇಗೆ ಸರಿಪಡಿಸುವುದು ಎಂಬುದರ ಕುರಿತು ಡೆವಲಪರ್‌ಗಳಿಗಾಗಿ ಒಂದು ಸಮಗ್ರ ಮಾರ್ಗದರ್ಶಿ.
ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಕಾರ್ಯಕ್ಷಮತೆ ಆಪ್ಟಿಮೈಸೇಶನ್: ಕ್ರಿಟಿಕಲ್ ರೆಂಡರಿಂಗ್ ಪಾತ್‌ನ ಆಳವಾದ ನೋಟ
ವೆಬ್ ಡೆವಲಪ್‌ಮೆಂಟ್ ಜಗತ್ತಿನಲ್ಲಿ, ವೇಗ ಕೇವಲ ಒಂದು ವೈಶಿಷ್ಟ್ಯವಲ್ಲ; ಇದು ಉತ್ತಮ ಬಳಕೆದಾರ ಅನುಭವದ ಅಡಿಪಾಯ. ನಿಧಾನವಾಗಿ ಲೋಡ್ ಆಗುವ ವೆಬ್‌ಸೈಟ್ ಹೆಚ್ಚಿನ ಬೌನ್ಸ್ ದರಗಳು, ಕಡಿಮೆ ಪರಿವರ್ತನೆಗಳು ಮತ್ತು ನಿರಾಶೆಗೊಂಡ ಪ್ರೇಕ್ಷಕರಿಗೆ ಕಾರಣವಾಗಬಹುದು. ವೆಬ್ ಕಾರ್ಯಕ್ಷಮತೆಗೆ ಹಲವು ಅಂಶಗಳು ಕಾರಣವಾದರೂ, ಅತ್ಯಂತ ಮೂಲಭೂತ ಮತ್ತು ಹೆಚ್ಚಾಗಿ ತಪ್ಪಾಗಿ ಅರ್ಥೈಸಿಕೊಳ್ಳುವ ಪರಿಕಲ್ಪನೆಗಳಲ್ಲಿ ಒಂದು ಕ್ರಿಟಿಕಲ್ ರೆಂಡರಿಂಗ್ ಪಾತ್ (CRP). ಬ್ರೌಸರ್‌ಗಳು ವಿಷಯವನ್ನು ಹೇಗೆ ರೆಂಡರ್ ಮಾಡುತ್ತವೆ ಮತ್ತು ಮುಖ್ಯವಾಗಿ, ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಈ ಪ್ರಕ್ರಿಯೆಯೊಂದಿಗೆ ಹೇಗೆ ಸಂವಹಿಸುತ್ತದೆ ಎಂಬುದನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳುವುದು ಕಾರ್ಯಕ್ಷಮತೆಯ ಬಗ್ಗೆ ಗಂಭೀರವಾಗಿರುವ ಯಾವುದೇ ಡೆವಲಪರ್‌ಗೆ ಅತ್ಯಗತ್ಯ.
ಈ ಸಮಗ್ರ ಮಾರ್ಗದರ್ಶಿ ನಿಮ್ಮನ್ನು ಕ್ರಿಟಿಕಲ್ ರೆಂಡರಿಂಗ್ ಪಾತ್‌ನ ಆಳವಾದ ನೋಟಕ್ಕೆ ಕರೆದೊಯ್ಯುತ್ತದೆ, ನಿರ್ದಿಷ್ಟವಾಗಿ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್‌ನ ಪಾತ್ರದ ಮೇಲೆ ಕೇಂದ್ರೀಕರಿಸುತ್ತದೆ. ನಾವು ಅದನ್ನು ಹೇಗೆ ವಿಶ್ಲೇಷಿಸುವುದು, ಅಡಚಣೆಗಳನ್ನು ಗುರುತಿಸುವುದು ಮತ್ತು ನಿಮ್ಮ ವೆಬ್ ಅಪ್ಲಿಕೇಶನ್‌ಗಳನ್ನು ಜಾಗತಿಕ ಬಳಕೆದಾರರಿಗೆ ವೇಗವಾಗಿ ಮತ್ತು ಹೆಚ್ಚು ಸ್ಪಂದಿಸುವಂತೆ ಮಾಡುವ ಶಕ್ತಿಯುತ ಆಪ್ಟಿಮೈಸೇಶನ್ ತಂತ್ರಗಳನ್ನು ಅನ್ವಯಿಸುವುದು ಹೇಗೆ ಎಂದು ಅನ್ವೇಷಿಸುತ್ತೇವೆ.
ಕ್ರಿಟಿಕಲ್ ರೆಂಡರಿಂಗ್ ಪಾತ್ ಎಂದರೇನು?
ಕ್ರಿಟಿಕಲ್ ರೆಂಡರಿಂಗ್ ಪಾತ್ ಎನ್ನುವುದು HTML, CSS, ಮತ್ತು ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಅನ್ನು ಪರದೆಯ ಮೇಲೆ ಗೋಚರಿಸುವ ಪಿಕ್ಸೆಲ್‌ಗಳಾಗಿ ಪರಿವರ್ತಿಸಲು ಬ್ರೌಸರ್ ತೆಗೆದುಕೊಳ್ಳಬೇಕಾದ ಹಂತಗಳ ಅನುಕ್ರಮವಾಗಿದೆ. CRP ಆಪ್ಟಿಮೈಸೇಶನ್‌ನ ಪ್ರಾಥಮಿಕ ಗುರಿಯು ಆರಂಭಿಕ, "above-the-fold" (ಮೊದಲು ಕಾಣುವ) ವಿಷಯವನ್ನು ಬಳಕೆದಾರರಿಗೆ ಸಾಧ್ಯವಾದಷ್ಟು ಬೇಗ ರೆಂಡರ್ ಮಾಡುವುದು. ಇದು ಎಷ್ಟು ವೇಗವಾಗಿ ನಡೆಯುತ್ತದೆಯೋ, ಅಷ್ಟು ವೇಗವಾಗಿ ಪುಟ ಲೋಡ್ ಆಗುತ್ತಿದೆ ಎಂದು ಬಳಕೆದಾರರು ಗ್ರಹಿಸುತ್ತಾರೆ.
ಈ ಮಾರ್ಗವು ಹಲವಾರು ಪ್ರಮುಖ ಹಂತಗಳನ್ನು ಒಳಗೊಂಡಿದೆ:
- DOM ನಿರ್ಮಾಣ (Construction): ಬ್ರೌಸರ್ ಸರ್ವರ್‌ನಿಂದ HTML ಡಾಕ್ಯುಮೆಂಟ್‌ನ ಮೊದಲ ಬೈಟ್‌ಗಳನ್ನು ಸ್ವೀಕರಿಸಿದಾಗ ಈ ಪ್ರಕ್ರಿಯೆ ಪ್ರಾರಂಭವಾಗುತ್ತದೆ. ಇದು HTML ಮಾರ್ಕಪ್ ಅನ್ನು ಅಕ್ಷರದಿಂದ ಅಕ್ಷರಕ್ಕೆ ಪಾರ್ಸ್ ಮಾಡಲು ಪ್ರಾರಂಭಿಸುತ್ತದೆ ಮತ್ತು ಡಾಕ್ಯುಮೆಂಟ್ ಆಬ್ಜೆಕ್ಟ್ ಮಾಡೆಲ್ (DOM) ಅನ್ನು ನಿರ್ಮಿಸುತ್ತದೆ. DOM ಎನ್ನುವುದು HTML ಡಾಕ್ಯುಮೆಂಟ್‌ನಲ್ಲಿರುವ ಎಲ್ಲಾ ನೋಡ್‌ಗಳನ್ನು (ಎಲಿಮೆಂಟ್‌ಗಳು, ಗುಣಲಕ್ಷಣಗಳು, ಪಠ್ಯ) ಪ್ರತಿನಿಧಿಸುವ ಒಂದು ಮರದಂತಹ ರಚನೆಯಾಗಿದೆ.
- CSSOM ನಿರ್ಮಾಣ (Construction): ಬ್ರೌಸರ್ DOM ಅನ್ನು ನಿರ್ಮಿಸುವಾಗ, ಅದು CSS ಸ್ಟೈಲ್‌ಶೀಟ್ ಅನ್ನು ಎದುರಿಸಿದರೆ (ಒಂದು
<link>ಟ್ಯಾಗ್‌ನಲ್ಲಿ ಅಥವಾ ಇನ್‌ಲೈನ್<style>ಬ್ಲಾಕ್‌ನಲ್ಲಿ), ಅದು CSS ಆಬ್ಜೆಕ್ಟ್ ಮಾಡೆಲ್ (CSSOM) ಅನ್ನು ನಿರ್ಮಿಸಲು ಪ್ರಾರಂಭಿಸುತ್ತದೆ. DOM ನಂತೆಯೇ, CSSOM ಒಂದು ಮರದ ರಚನೆಯಾಗಿದ್ದು ಅದು ಪುಟಕ್ಕಾಗಿ ಎಲ್ಲಾ ಸ್ಟೈಲ್‌ಗಳು ಮತ್ತು ಅವುಗಳ ಸಂಬಂಧಗಳನ್ನು ಒಳಗೊಂಡಿರುತ್ತದೆ. HTML ಗಿಂತ ಭಿನ್ನವಾಗಿ, CSS ಡೀಫಾಲ್ಟ್ ಆಗಿ ರೆಂಡರ್-ಬ್ಲಾಕಿಂಗ್ ಆಗಿದೆ. ಎಲ್ಲಾ CSS ಅನ್ನು ಡೌನ್‌ಲೋಡ್ ಮಾಡಿ ಮತ್ತು ಪಾರ್ಸ್ ಮಾಡುವವರೆಗೆ ಬ್ರೌಸರ್ ಪುಟದ ಯಾವುದೇ ಭಾಗವನ್ನು ರೆಂಡರ್ ಮಾಡಲು ಸಾಧ್ಯವಿಲ್ಲ, ಏಕೆಂದರೆ ನಂತರದ ಸ್ಟೈಲ್‌ಗಳು ಹಿಂದಿನದನ್ನು ತಿದ್ದಿ ಬರೆಯಬಹುದು. - ರೆಂಡರ್ ಟ್ರೀ ನಿರ್ಮಾಣ (Construction): DOM ಮತ್ತು CSSOM ಎರಡೂ ಸಿದ್ಧವಾದ ನಂತರ, ಬ್ರೌಸರ್ ಅವೆರಡನ್ನೂ ಸೇರಿಸಿ ರೆಂಡರ್ ಟ್ರೀ ಅನ್ನು ರಚಿಸುತ್ತದೆ. ಈ ಟ್ರೀಯು ಪುಟವನ್ನು ರೆಂಡರ್ ಮಾಡಲು ಅಗತ್ಯವಿರುವ ನೋಡ್‌ಗಳನ್ನು ಮಾತ್ರ ಒಳಗೊಂಡಿರುತ್ತದೆ. ಉದಾಹರಣೆಗೆ,
display: none;ಹೊಂದಿರುವ ಎಲಿಮೆಂಟ್‌ಗಳು ಮತ್ತು<head>ಟ್ಯಾಗ್ ಅನ್ನು ರೆಂಡರ್ ಟ್ರೀಯಲ್ಲಿ ಸೇರಿಸಲಾಗುವುದಿಲ್ಲ ಏಕೆಂದರೆ ಅವು ದೃಷ್ಟಿಗೋಚರವಾಗಿ ರೆಂಡರ್ ಆಗುವುದಿಲ್ಲ. ರೆಂಡರ್ ಟ್ರೀಗೆ ಏನನ್ನು ಪ್ರದರ್ಶಿಸಬೇಕು ಎಂದು ತಿಳಿದಿರುತ್ತದೆ, ಆದರೆ ಎಲ್ಲಿ ಅಥವಾ ಎಷ್ಟು ದೊಡ್ಡದಾಗಿ ಎಂದು ತಿಳಿದಿರುವುದಿಲ್ಲ. - ಲೇಔಟ್ (ಅಥವಾ ರಿಫ್ಲೋ): ರೆಂಡರ್ ಟ್ರೀ ನಿರ್ಮಿಸಿದ ನಂತರ, ಬ್ರೌಸರ್ ಲೇಔಟ್ ಹಂತಕ್ಕೆ ಮುಂದುವರಿಯುತ್ತದೆ. ಈ ಹಂತದಲ್ಲಿ, ಇದು ವ್ಯೂಪೋರ್ಟ್‌ಗೆ ಸಂಬಂಧಿಸಿದಂತೆ ರೆಂಡರ್ ಟ್ರೀಯಲ್ಲಿನ ಪ್ರತಿಯೊಂದು ನೋಡ್‌ನ ನಿಖರವಾದ ಗಾತ್ರ ಮತ್ತು ಸ್ಥಾನವನ್ನು ಲೆಕ್ಕಾಚಾರ ಮಾಡುತ್ತದೆ. ಈ ಹಂತದ ಔಟ್‌ಪುಟ್ ಒಂದು "ಬಾಕ್ಸ್ ಮಾಡೆಲ್" ಆಗಿದ್ದು, ಇದು ಪುಟದ ಪ್ರತಿಯೊಂದು ಎಲಿಮೆಂಟ್‌ನ ನಿಖರವಾದ ಜ್ಯಾಮಿತಿಯನ್ನು ಸೆರೆಹಿಡಿಯುತ್ತದೆ.
- ಪೇಂಟ್: ಅಂತಿಮವಾಗಿ, ಬ್ರೌಸರ್ ಲೇಔಟ್ ಮಾಹಿತಿಯನ್ನು ತೆಗೆದುಕೊಂಡು ಪರದೆಯ ಮೇಲೆ ಪ್ರತಿಯೊಂದು ನೋಡ್‌ಗೆ ಪಿಕ್ಸೆಲ್‌ಗಳನ್ನು "ಪೇಂಟ್" ಮಾಡುತ್ತದೆ. ಇದು ಪಠ್ಯ, ಬಣ್ಣಗಳು, ಚಿತ್ರಗಳು, ಬಾರ್ಡರ್‌ಗಳು ಮತ್ತು ನೆರಳುಗಳನ್ನು ಚಿತ್ರಿಸುವುದನ್ನು ಒಳಗೊಂಡಿರುತ್ತದೆ—ಅಂದರೆ ಪುಟದ ಪ್ರತಿಯೊಂದು ದೃಶ್ಯ ಭಾಗವನ್ನು ರಾಸ್ಟರೈಸ್ ಮಾಡುವುದು. ದಕ್ಷತೆಯನ್ನು ಸುಧಾರಿಸಲು ಈ ಪ್ರಕ್ರಿಯೆಯು ಬಹು ಪದರಗಳಲ್ಲಿ ನಡೆಯಬಹುದು.
- ಕಂಪೋಸಿಟ್: ಪುಟದ ವಿಷಯವನ್ನು ಬಹು ಪದರಗಳ ಮೇಲೆ ಪೇಂಟ್ ಮಾಡಿದ್ದರೆ, ಅಂತಿಮ ಚಿತ್ರವನ್ನು ಪರದೆಯ ಮೇಲೆ ಪ್ರದರ್ಶಿಸಲು ಬ್ರೌಸರ್ ಈ ಪದರಗಳನ್ನು ಸರಿಯಾದ ಕ್ರಮದಲ್ಲಿ ಸಂಯೋಜಿಸಬೇಕು (composite). ಈ ಹಂತವು ವಿಶೇಷವಾಗಿ ಅನಿಮೇಷನ್‌ಗಳು ಮತ್ತು ಸ್ಕ್ರೋಲಿಂಗ್‌ಗೆ ಮುಖ್ಯವಾಗಿದೆ, ಏಕೆಂದರೆ ಲೇಔಟ್ ಮತ್ತು ಪೇಂಟ್ ಹಂತಗಳನ್ನು ಮರು-ಚಾಲನೆ ಮಾಡುವುದಕ್ಕಿಂತ ಕಂಪೋಸಿಟಿಂಗ್ ಸಾಮಾನ್ಯವಾಗಿ ಕಡಿಮೆ ಗಣನಾತ್ಮಕವಾಗಿ ದುಬಾರಿಯಾಗಿದೆ.
ಕ್ರಿಟಿಕಲ್ ರೆಂಡರಿಂಗ್ ಪಾತ್‌ನಲ್ಲಿ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್‌ನ ಅಡ್ಡಿಪಡಿಸುವ ಪಾತ್ರ
ಹಾಗಾದರೆ ಈ ಚಿತ್ರದಲ್ಲಿ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಎಲ್ಲಿ ಹೊಂದಿಕೊಳ್ಳುತ್ತದೆ? ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಒಂದು ಶಕ್ತಿಯುತ ಭಾಷೆಯಾಗಿದ್ದು ಅದು DOM ಮತ್ತು CSSOM ಎರಡನ್ನೂ ಮಾರ್ಪಡಿಸಬಹುದು. ಆದಾಗ್ಯೂ, ಈ ಶಕ್ತಿಗೆ ಒಂದು ಬೆಲೆ ಇದೆ. ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಕ್ರಿಟಿಕಲ್ ರೆಂಡರಿಂಗ್ ಪಾತ್ ಅನ್ನು ನಿರ್ಬಂಧಿಸಬಹುದು ಮತ್ತು ಆಗಾಗ್ಗೆ ಮಾಡುತ್ತದೆ, ಇದು ರೆಂಡರಿಂಗ್‌ನಲ್ಲಿ ಗಮನಾರ್ಹ ವಿಳಂಬಕ್ಕೆ ಕಾರಣವಾಗುತ್ತದೆ.
ಪಾರ್ಸರ್-ಬ್ಲಾಕಿಂಗ್ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್
ಡೀಫಾಲ್ಟ್ ಆಗಿ, ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಪಾರ್ಸರ್-ಬ್ಲಾಕಿಂಗ್ ಆಗಿದೆ. ಬ್ರೌಸರ್‌ನ HTML ಪಾರ್ಸರ್ <script> ಟ್ಯಾಗ್ ಅನ್ನು ಎದುರಿಸಿದಾಗ, ಅದು DOM ಅನ್ನು ನಿರ್ಮಿಸುವ ಪ್ರಕ್ರಿಯೆಯನ್ನು ವಿರಾಮಗೊಳಿಸಬೇಕು. ನಂತರ ಅದು ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಫೈಲ್ ಅನ್ನು ಡೌನ್‌ಲೋಡ್ ಮಾಡಲು (ಬಾಹ್ಯವಾಗಿದ್ದರೆ), ಪಾರ್ಸ್ ಮಾಡಲು ಮತ್ತು ಕಾರ್ಯಗತಗೊಳಿಸಲು ಮುಂದುವರಿಯುತ್ತದೆ. ಈ ಪ್ರಕ್ರಿಯೆಯು ಬ್ಲಾಕಿಂಗ್ ಆಗಿದೆ ಏಕೆಂದರೆ ಸ್ಕ್ರಿಪ್ಟ್ document.write() ನಂತಹ ಏನನ್ನಾದರೂ ಮಾಡಬಹುದು, ಇದು ಸಂಪೂರ್ಣ DOM ರಚನೆಯನ್ನು ಬದಲಾಯಿಸಬಹುದು. HTML ಪಾರ್ಸಿಂಗ್ ಅನ್ನು ಸುರಕ್ಷಿತವಾಗಿ ಪುನರಾರಂಭಿಸುವ ಮೊದಲು ಸ್ಕ್ರಿಪ್ಟ್ ಮುಗಿಯುವವರೆಗೆ ಕಾಯುವುದನ್ನು ಬಿಟ್ಟು ಬ್ರೌಸರ್‌ಗೆ ಬೇರೆ ಆಯ್ಕೆಯಿಲ್ಲ.
ಈ ಸ್ಕ್ರಿಪ್ಟ್ ನಿಮ್ಮ ಡಾಕ್ಯುಮೆಂಟ್‌ನ <head> ವಿಭಾಗದಲ್ಲಿ ಇದ್ದರೆ, ಅದು ಆರಂಭದಲ್ಲೇ DOM ನಿರ್ಮಾಣವನ್ನು ನಿರ್ಬಂಧಿಸುತ್ತದೆ. ಇದರರ್ಥ ಬ್ರೌಸರ್‌ಗೆ ರೆಂಡರ್ ಮಾಡಲು ಯಾವುದೇ ವಿಷಯವಿಲ್ಲ, ಮತ್ತು ಸ್ಕ್ರಿಪ್ಟ್ ಸಂಪೂರ್ಣವಾಗಿ ಪ್ರಕ್ರಿಯೆಗೊಳ್ಳುವವರೆಗೆ ಬಳಕೆದಾರರು ಖಾಲಿ ಬಿಳಿ ಪರದೆಯನ್ನು ನೋಡುತ್ತಾ ಉಳಿಯುತ್ತಾರೆ. ಇದು ಕಳಪೆ ಗ್ರಹಿಸಿದ ಕಾರ್ಯಕ್ಷಮತೆಗೆ ಪ್ರಾಥಮಿಕ ಕಾರಣವಾಗಿದೆ.
DOM ಮತ್ತು CSSOM ಮ್ಯಾನಿಪ್ಯುಲೇಷನ್
ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ CSSOM ಅನ್ನು ಪ್ರಶ್ನಿಸಬಹುದು ಮತ್ತು ಮಾರ್ಪಡಿಸಬಹುದು. ಉದಾಹರಣೆಗೆ, ನಿಮ್ಮ ಸ್ಕ್ರಿಪ್ಟ್ element.style.width ನಂತಹ ಕಂಪ್ಯೂಟೆಡ್ ಸ್ಟೈಲ್ ಅನ್ನು ಕೇಳಿದರೆ, ಬ್ರೌಸರ್ ಮೊದಲು ಎಲ್ಲಾ CSS ಡೌನ್‌ಲೋಡ್ ಆಗಿದೆ ಮತ್ತು ಸರಿಯಾದ ಉತ್ತರವನ್ನು ಒದಗಿಸಲು ಪಾರ್ಸ್ ಆಗಿದೆ ಎಂದು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಬೇಕು. ಇದು ನಿಮ್ಮ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಮತ್ತು ನಿಮ್ಮ CSS ನಡುವೆ ಅವಲಂಬನೆಯನ್ನು ಸೃಷ್ಟಿಸುತ್ತದೆ, ಅಲ್ಲಿ ಸ್ಕ್ರಿಪ್ಟ್ ಎಕ್ಸಿಕ್ಯೂಶನ್ CSSOM ಸಿದ್ಧವಾಗುವವರೆಗೆ ಕಾಯುವುದರಿಂದ ನಿರ್ಬಂಧಿಸಬಹುದು.
ಇದಲ್ಲದೆ, ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ DOM ಅನ್ನು ಮಾರ್ಪಡಿಸಿದರೆ (ಉದಾ., ಒಂದು ಎಲಿಮೆಂಟ್ ಅನ್ನು ಸೇರಿಸುವುದು ಅಥವಾ ತೆಗೆದುಹಾಕುವುದು) ಅಥವಾ CSSOM (ಉದಾ., ಒಂದು ಕ್ಲಾಸ್ ಅನ್ನು ಬದಲಾಯಿಸುವುದು), ಅದು ಬ್ರೌಸರ್ ಕೆಲಸದ ಒಂದು ಸರಣಿಯನ್ನು ಪ್ರಚೋದಿಸಬಹುದು. ಒಂದು ಬದಲಾವಣೆಯು ಬ್ರೌಸರ್ ಅನ್ನು ಲೇಔಟ್ ಅನ್ನು ಮರುಲೆಕ್ಕಾಚಾರ ಮಾಡಲು (ಒಂದು ರಿಫ್ಲೋ) ಮತ್ತು ನಂತರ ಪರದೆಯ ಪೀಡಿತ ಭಾಗಗಳನ್ನು ಅಥವಾ ಇಡೀ ಪುಟವನ್ನು ಮರು-ಪೇಂಟ್ ಮಾಡಲು ಒತ್ತಾಯಿಸಬಹುದು. ಆಗಾಗ್ಗೆ ಅಥವಾ ಕಳಪೆ ಸಮಯದ ಮ್ಯಾನಿಪ್ಯುಲೇಷನ್‌ಗಳು ನಿಧಾನ, ಪ್ರತಿಕ್ರಿಯಿಸದ ಬಳಕೆದಾರ ಇಂಟರ್ಫೇಸ್‌ಗೆ ಕಾರಣವಾಗಬಹುದು.
ಕ್ರಿಟಿಕಲ್ ರೆಂಡರಿಂಗ್ ಪಾತ್ ಅನ್ನು ವಿಶ್ಲೇಷಿಸುವುದು ಹೇಗೆ
ನೀವು ಆಪ್ಟಿಮೈಜ್ ಮಾಡುವ ಮೊದಲು, ನೀವು ಮೊದಲು ಅಳತೆ ಮಾಡಬೇಕು. CRP ಅನ್ನು ವಿಶ್ಲೇಷಿಸಲು ಬ್ರೌಸರ್ ಡೆವಲಪರ್ ಟೂಲ್‌ಗಳು ನಿಮ್ಮ ಉತ್ತಮ ಸ್ನೇಹಿತ. ಕ್ರೋಮ್ ಡೆವಲಪರ್ ಟೂಲ್ಸ್ ಮೇಲೆ ಗಮನಹರಿಸೋಣ, ಅದು ಈ ಉದ್ದೇಶಕ್ಕಾಗಿ ಶಕ್ತಿಯುತ ಪರಿಕರಗಳ ಸೂಟ್ ಅನ್ನು ನೀಡುತ್ತದೆ.
ಪರ್ಫಾರ್ಮೆನ್ಸ್ ಟ್ಯಾಬ್ ಬಳಸುವುದು
ಪರ್ಫಾರ್ಮೆನ್ಸ್ ಟ್ಯಾಬ್ ನಿಮ್ಮ ಪುಟವನ್ನು ರೆಂಡರ್ ಮಾಡಲು ಬ್ರೌಸರ್ ಮಾಡುವ ಎಲ್ಲದರ ವಿವರವಾದ ಟೈಮ್‌ಲೈನ್ ಅನ್ನು ಒದಗಿಸುತ್ತದೆ.
- ಕ್ರೋಮ್ ಡೆವಲಪರ್ ಟೂಲ್ಸ್ ತೆರೆಯಿರಿ (Ctrl+Shift+I ಅಥವಾ Cmd+Option+I).
- Performance ಟ್ಯಾಬ್‌ಗೆ ಹೋಗಿ.
- ಟೈಮ್‌ಲೈನ್‌ನಲ್ಲಿ ಪ್ರಮುಖ ಮೆಟ್ರಿಕ್‌ಗಳನ್ನು ನೋಡಲು "Web Vitals" ಚೆಕ್‌ಬಾಕ್ಸ್ ಅನ್ನು ಟಿಕ್ ಮಾಡಲಾಗಿದೆಯೇ ಎಂದು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಿ.
- ಪುಟದ ಲೋಡ್ ಅನ್ನು ಪ್ರೊಫೈಲ್ ಮಾಡಲು ಪ್ರಾರಂಭಿಸಲು ಮರುಲೋಡ್ ಬಟನ್ ಕ್ಲಿಕ್ ಮಾಡಿ (ಅಥವಾ Ctrl+Shift+E / Cmd+Shift+E ಒತ್ತಿರಿ).
ಪುಟ ಲೋಡ್ ಆದ ನಂತರ, ನಿಮಗೆ ಫ್ಲೇಮ್ ಚಾರ್ಟ್ ಅನ್ನು ಪ್ರಸ್ತುತಪಡಿಸಲಾಗುತ್ತದೆ. Main ಥ್ರೆಡ್ ವಿಭಾಗದಲ್ಲಿ ಏನನ್ನು ನೋಡಬೇಕು ಎಂಬುದು ಇಲ್ಲಿದೆ:
- ಲಾಂಗ್ ಟಾಸ್ಕ್‌ಗಳು: 50 ಮಿಲಿಸೆಕೆಂಡ್‌ಗಳಿಗಿಂತ ಹೆಚ್ಚು ಸಮಯ ತೆಗೆದುಕೊಳ್ಳುವ ಯಾವುದೇ ಕಾರ್ಯವನ್ನು ಕೆಂಪು ತ್ರಿಕೋನದಿಂದ ಗುರುತಿಸಲಾಗುತ್ತದೆ. ಇವುಗಳು ಆಪ್ಟಿಮೈಸೇಶನ್‌ಗೆ ಪ್ರಮುಖ ಅಭ್ಯರ್ಥಿಗಳಾಗಿವೆ ಏಕೆಂದರೆ ಅವು ಮುಖ್ಯ ಥ್ರೆಡ್ ಅನ್ನು ನಿರ್ಬಂಧಿಸುತ್ತವೆ ಮತ್ತು UI ಅನ್ನು ಪ್ರತಿಕ್ರಿಯಿಸದಂತೆ ಮಾಡಬಹುದು.
- ಪಾರ್ಸ್ HTML (ನೀಲಿ): ಬ್ರೌಸರ್ ನಿಮ್ಮ HTML ಅನ್ನು ಎಲ್ಲಿ ಪಾರ್ಸ್ ಮಾಡುತ್ತಿದೆ ಎಂಬುದನ್ನು ಇದು ತೋರಿಸುತ್ತದೆ. ನೀವು ದೊಡ್ಡ ಅಂತರಗಳು ಅಥವಾ ಅಡಚಣೆಗಳನ್ನು ನೋಡಿದರೆ, ಅದು ಬ್ಲಾಕಿಂಗ್ ಸ್ಕ್ರಿಪ್ಟ್‌ನಿಂದಾಗಿರಬಹುದು.
- ಇವ್ಯಾಲ್ಯುಯೇಟ್ ಸ್ಕ್ರಿಪ್ಟ್ (ಹಳದಿ): ಇಲ್ಲಿ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಅನ್ನು ಕಾರ್ಯಗತಗೊಳಿಸಲಾಗುತ್ತಿದೆ. ಉದ್ದನೆಯ ಹಳದಿ ಬ್ಲಾಕ್‌ಗಳನ್ನು ನೋಡಿ, ವಿಶೇಷವಾಗಿ ಪುಟ ಲೋಡ್‌ನ ಆರಂಭದಲ್ಲಿ. ಇವು ನಿಮ್ಮ ಬ್ಲಾಕಿಂಗ್ ಸ್ಕ್ರಿಪ್ಟ್‌ಗಳು.
- ರೀಕ್ಯಾಲ್ಕುಲೇಟ್ ಸ್ಟೈಲ್ (ನೇರಳೆ): ಇದು CSSOM ನಿರ್ಮಾಣ ಮತ್ತು ಸ್ಟೈಲ್ ಲೆಕ್ಕಾಚಾರಗಳನ್ನು ಸೂಚಿಸುತ್ತದೆ.
- ಲೇಔಟ್ (ನೇರಳೆ): ಈ ಬ್ಲಾಕ್‌ಗಳು ಲೇಔಟ್ ಅಥವಾ ರಿಫ್ಲೋ ಹಂತವನ್ನು ಪ್ರತಿನಿಧಿಸುತ್ತವೆ. ಇವುಗಳಲ್ಲಿ ಹಲವನ್ನು ನೀವು ನೋಡಿದರೆ, ನಿಮ್ಮ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಜ್ಯಾಮಿತೀಯ ಗುಣಲಕ್ಷಣಗಳನ್ನು ಪದೇ ಪದೇ ಓದುವುದು ಮತ್ತು ಬರೆಯುವುದರ ಮೂಲಕ "ಲೇಔಟ್ ಥ್ರಾಶಿಂಗ್" ಗೆ ಕಾರಣವಾಗಬಹುದು.
- ಪೇಂಟ್ (ಹಸಿರು): ಇದು ಪೇಂಟಿಂಗ್ ಪ್ರಕ್ರಿಯೆ.
ನೆಟ್‌ವರ್ಕ್ ಟ್ಯಾಬ್ ಬಳಸುವುದು
ಸಂಪನ್ಮೂಲ ಡೌನ್‌ಲೋಡ್‌ಗಳ ಕ್ರಮ ಮತ್ತು ಅವಧಿಯನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳಲು ನೆಟ್‌ವರ್ಕ್ ಟ್ಯಾಬ್‌ನ ವಾಟರ್‌ಫಾಲ್ ಚಾರ್ಟ್ ಅಮೂಲ್ಯವಾಗಿದೆ.
- ಡೆವಲಪರ್ ಟೂಲ್ಸ್ ತೆರೆಯಿರಿ ಮತ್ತು Network ಟ್ಯಾಬ್‌ಗೆ ಹೋಗಿ.
- ಪುಟವನ್ನು ಮರುಲೋಡ್ ಮಾಡಿ.
- ವಾಟರ್‌ಫಾಲ್ ವೀಕ್ಷಣೆಯು ಪ್ರತಿಯೊಂದು ಸಂಪನ್ಮೂಲವನ್ನು (HTML, CSS, JS, ಚಿತ್ರಗಳು) ಯಾವಾಗ ವಿನಂತಿಸಲಾಗಿದೆ ಮತ್ತು ಡೌನ್‌ಲೋಡ್ ಮಾಡಲಾಗಿದೆ ಎಂಬುದನ್ನು ತೋರಿಸುತ್ತದೆ.
ವಾಟರ್‌ಫಾಲ್‌ನ ಮೇಲ್ಭಾಗದಲ್ಲಿರುವ ವಿನಂತಿಗಳಿಗೆ ನಿಕಟ ಗಮನ ಕೊಡಿ. ಪುಟವು ರೆಂಡರ್ ಮಾಡಲು ಪ್ರಾರಂಭಿಸುವ ಮೊದಲು ಡೌನ್‌ಲೋಡ್ ಆಗುತ್ತಿರುವ CSS ಮತ್ತು ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಫೈಲ್‌ಗಳನ್ನು ನೀವು ಸುಲಭವಾಗಿ ಗುರುತಿಸಬಹುದು. ಇವು ನಿಮ್ಮ ರೆಂಡರ್-ಬ್ಲಾಕಿಂಗ್ ಸಂಪನ್ಮೂಲಗಳಾಗಿವೆ.
ಲೈಟ್‌ಹೌಸ್ ಬಳಸುವುದು
ಲೈಟ್‌ಹೌಸ್ ಎಂಬುದು ಕ್ರೋಮ್ ಡೆವಲಪರ್ ಟೂಲ್ಸ್‌ನಲ್ಲಿ (ಲೈಟ್‌ಹೌಸ್ ಟ್ಯಾಬ್ ಅಡಿಯಲ್ಲಿ) ನಿರ್ಮಿಸಲಾದ ಸ್ವಯಂಚಾಲಿತ ಆಡಿಟಿಂಗ್ ಸಾಧನವಾಗಿದೆ. ಇದು ಉನ್ನತ ಮಟ್ಟದ ಕಾರ್ಯಕ್ಷಮತೆ ಸ್ಕೋರ್ ಮತ್ತು ಕಾರ್ಯಸಾಧ್ಯವಾದ ಶಿಫಾರಸುಗಳನ್ನು ಒದಗಿಸುತ್ತದೆ.
CRP ಗಾಗಿ ಒಂದು ಪ್ರಮುಖ ಆಡಿಟ್ ಎಂದರೆ "ರೆಂಡರ್-ಬ್ಲಾಕಿಂಗ್ ಸಂಪನ್ಮೂಲಗಳನ್ನು ತೆಗೆದುಹಾಕಿ." ಈ ವರದಿಯು ಫಸ್ಟ್ ಕಂಟೆಂಟ್‌ಫುಲ್ ಪೇಂಟ್ (FCP) ಅನ್ನು ವಿಳಂಬಗೊಳಿಸುತ್ತಿರುವ CSS ಮತ್ತು ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಫೈಲ್‌ಗಳನ್ನು ಸ್ಪಷ್ಟವಾಗಿ ಪಟ್ಟಿ ಮಾಡುತ್ತದೆ, ಇದು ನಿಮಗೆ ಆಪ್ಟಿಮೈಸೇಶನ್‌ಗಾಗಿ ಸ್ಪಷ್ಟ ಗುರಿಗಳ ಪಟ್ಟಿಯನ್ನು ನೀಡುತ್ತದೆ.
ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್‌ಗಾಗಿ ಪ್ರಮುಖ ಆಪ್ಟಿಮೈಸೇಶನ್ ತಂತ್ರಗಳು
ಈಗ ನಾವು ಸಮಸ್ಯೆಗಳನ್ನು ಗುರುತಿಸುವುದು ಹೇಗೆ ಎಂದು ತಿಳಿದಿದ್ದೇವೆ, ಪರಿಹಾರಗಳನ್ನು ಅನ್ವೇಷಿಸೋಣ. ಆರಂಭಿಕ ರೆಂಡರ್ ಅನ್ನು ನಿರ್ಬಂಧಿಸುವ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಪ್ರಮಾಣವನ್ನು ಕಡಿಮೆ ಮಾಡುವುದು ಗುರಿಯಾಗಿದೆ.
1. `async` ಮತ್ತು `defer` ನ ಶಕ್ತಿ
ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ HTML ಪಾರ್ಸರ್ ಅನ್ನು ನಿರ್ಬಂಧಿಸುವುದನ್ನು ತಡೆಯಲು ಸರಳ ಮತ್ತು ಅತ್ಯಂತ ಪರಿಣಾಮಕಾರಿ ಮಾರ್ಗವೆಂದರೆ ನಿಮ್ಮ <script> ಟ್ಯಾಗ್‌ಗಳಲ್ಲಿ `async` ಮತ್ತು `defer` ಗುಣಲಕ್ಷಣಗಳನ್ನು ಬಳಸುವುದು.
- ಸ್ಟ್ಯಾಂಡರ್ಡ್
<script>:<script src="script.js"></script>
ನಾವು ಚರ್ಚಿಸಿದಂತೆ, ಇದು ಪಾರ್ಸರ್-ಬ್ಲಾಕಿಂಗ್ ಆಗಿದೆ. HTML ಪಾರ್ಸಿಂಗ್ ನಿಲ್ಲುತ್ತದೆ, ಸ್ಕ್ರಿಪ್ಟ್ ಡೌನ್‌ಲೋಡ್ ಆಗಿ ಕಾರ್ಯಗತಗೊಳ್ಳುತ್ತದೆ, ಮತ್ತು ನಂತರ ಪಾರ್ಸಿಂಗ್ ಪುನರಾರಂಭಗೊಳ್ಳುತ್ತದೆ. <script async>:<script src="script.js" async></script>
ಸ್ಕ್ರಿಪ್ಟ್ ಅನ್ನು HTML ಪಾರ್ಸಿಂಗ್‌ನೊಂದಿಗೆ ಸಮಾನಾಂತರವಾಗಿ, ಅಸಿಂಕ್ರೋನಸ್ ಆಗಿ ಡೌನ್‌ಲೋಡ್ ಮಾಡಲಾಗುತ್ತದೆ. ಸ್ಕ್ರಿಪ್ಟ್ ಡೌನ್‌ಲೋಡ್ ಮುಗಿದ ತಕ್ಷಣ, HTML ಪಾರ್ಸಿಂಗ್ ಅನ್ನು ವಿರಾಮಗೊಳಿಸಲಾಗುತ್ತದೆ ಮತ್ತು ಸ್ಕ್ರಿಪ್ಟ್ ಕಾರ್ಯಗತಗೊಳ್ಳುತ್ತದೆ. ಕಾರ್ಯಗತಗೊಳಿಸುವ ಕ್ರಮವು ಖಾತರಿಯಿಲ್ಲ; ಸ್ಕ್ರಿಪ್ಟ್‌ಗಳು ಲಭ್ಯವಾದಂತೆ ಕಾರ್ಯಗತಗೊಳ್ಳುತ್ತವೆ. ಇದು DOM ಅಥವಾ ಇತರ ಸ್ಕ್ರಿಪ್ಟ್‌ಗಳ ಮೇಲೆ ಅವಲಂಬಿತವಾಗಿರದ ಸ್ವತಂತ್ರ, ಮೂರನೇ-ಪಕ್ಷದ ಸ್ಕ್ರಿಪ್ಟ್‌ಗಳಿಗೆ ಉತ್ತಮವಾಗಿದೆ, ಉದಾಹರಣೆಗೆ ಅನಾಲಿಟಿಕ್ಸ್ ಅಥವಾ ಜಾಹೀರಾತು ಸ್ಕ್ರಿಪ್ಟ್‌ಗಳು.<script defer>:<script src="script.js" defer></script>
ಸ್ಕ್ರಿಪ್ಟ್ ಅನ್ನು HTML ಪಾರ್ಸಿಂಗ್‌ನೊಂದಿಗೆ ಸಮಾನಾಂತರವಾಗಿ, ಅಸಿಂಕ್ರೋನಸ್ ಆಗಿ ಡೌನ್‌ಲೋಡ್ ಮಾಡಲಾಗುತ್ತದೆ. ಆದಾಗ್ಯೂ, ಸ್ಕ್ರಿಪ್ಟ್ ಅನ್ನು HTML ಡಾಕ್ಯುಮೆಂಟ್ ಸಂಪೂರ್ಣವಾಗಿ ಪಾರ್ಸ್ ಆದ ನಂತರವೇ (DOMContentLoadedಈವೆಂಟ್‌ಗೆ ಸ್ವಲ್ಪ ಮೊದಲು) ಕಾರ್ಯಗತಗೊಳಿಸಲಾಗುತ್ತದೆ. `defer` ಹೊಂದಿರುವ ಸ್ಕ್ರಿಪ್ಟ್‌ಗಳು ಡಾಕ್ಯುಮೆಂಟ್‌ನಲ್ಲಿ ಕಾಣಿಸಿಕೊಳ್ಳುವ ಕ್ರಮದಲ್ಲಿ ಕಾರ್ಯಗತಗೊಳ್ಳುತ್ತವೆ ಎಂದು ಸಹ ಖಾತರಿಪಡಿಸಲಾಗಿದೆ. DOM ನೊಂದಿಗೆ ಸಂವಹನ ನಡೆಸಬೇಕಾದ ಮತ್ತು ಆರಂಭಿಕ ಪೇಂಟ್‌ಗೆ ನಿರ್ಣಾಯಕವಲ್ಲದ ಹೆಚ್ಚಿನ ಸ್ಕ್ರಿಪ್ಟ್‌ಗಳಿಗೆ ಇದು ಆದ್ಯತೆಯ ವಿಧಾನವಾಗಿದೆ.
ಸಾಮಾನ್ಯ ನಿಯಮ: ನಿಮ್ಮ ಮುಖ್ಯ ಅಪ್ಲಿಕೇಶನ್ ಸ್ಕ್ರಿಪ್ಟ್‌ಗಳಿಗಾಗಿ `defer` ಬಳಸಿ. ಸ್ವತಂತ್ರ ಮೂರನೇ-ಪಕ್ಷದ ಸ್ಕ್ರಿಪ್ಟ್‌ಗಳಿಗಾಗಿ `async` ಬಳಸಿ. <head> ನಲ್ಲಿ ಬ್ಲಾಕಿಂಗ್ ಸ್ಕ್ರಿಪ್ಟ್‌ಗಳನ್ನು ಬಳಸುವುದನ್ನು ತಪ್ಪಿಸಿ, ಅವು ಆರಂಭಿಕ ರೆಂಡರ್‌ಗೆ ಸಂಪೂರ್ಣವಾಗಿ ಅಗತ್ಯವಿಲ್ಲದಿದ್ದರೆ.
2. ಕೋಡ್ ಸ್ಪ್ಲಿಟಿಂಗ್
ಆಧುನಿಕ ವೆಬ್ ಅಪ್ಲಿಕೇಶನ್‌ಗಳನ್ನು ಸಾಮಾನ್ಯವಾಗಿ ಒಂದೇ, ದೊಡ್ಡ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಫೈಲ್‌ಗೆ ಬಂಡಲ್ ಮಾಡಲಾಗುತ್ತದೆ. ಇದು HTTP ವಿನಂತಿಗಳ ಸಂಖ್ಯೆಯನ್ನು ಕಡಿಮೆ ಮಾಡಿದರೂ, ಆರಂಭಿಕ ಪುಟ ವೀಕ್ಷಣೆಗೆ ಅಗತ್ಯವಿಲ್ಲದಿರುವ ಬಹಳಷ್ಟು ಕೋಡ್ ಅನ್ನು ಡೌನ್‌ಲೋಡ್ ಮಾಡಲು ಬಳಕೆದಾರರನ್ನು ಒತ್ತಾಯಿಸುತ್ತದೆ.
ಕೋಡ್ ಸ್ಪ್ಲಿಟಿಂಗ್ ಎನ್ನುವುದು ಆ ದೊಡ್ಡ ಬಂಡಲ್ ಅನ್ನು ಬೇಡಿಕೆಯ ಮೇರೆಗೆ ಲೋಡ್ ಮಾಡಬಹುದಾದ ಸಣ್ಣ ತುಣುಕುಗಳಾಗಿ ವಿಭಜಿಸುವ ಪ್ರಕ್ರಿಯೆಯಾಗಿದೆ. ಉದಾಹರಣೆಗೆ:
- ಆರಂಭಿಕ ಚಂಕ್: ಪ್ರಸ್ತುತ ಪುಟದ ಗೋಚರ ಭಾಗವನ್ನು ರೆಂಡರ್ ಮಾಡಲು ಅಗತ್ಯವಿರುವ ಅತ್ಯಗತ್ಯ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಅನ್ನು ಮಾತ್ರ ಒಳಗೊಂಡಿರುತ್ತದೆ.
- ಆನ್-ಡಿಮಾಂಡ್ ಚಂಕ್‌ಗಳು: ಇತರ ರೂಟ್‌ಗಳು, ಮೋಡಲ್‌ಗಳು, ಅಥವಾ ಕೆಳಭಾಗದ ವೈಶಿಷ್ಟ್ಯಗಳಿಗಾಗಿ ಕೋಡ್ ಅನ್ನು ಒಳಗೊಂಡಿರುತ್ತವೆ. ಬಳಕೆದಾರರು ಆ ರೂಟ್‌ಗೆ ನ್ಯಾವಿಗೇಟ್ ಮಾಡಿದಾಗ ಅಥವಾ ವೈಶಿಷ್ಟ್ಯದೊಂದಿಗೆ ಸಂವಹನ ನಡೆಸಿದಾಗ ಮಾತ್ರ ಇವುಗಳನ್ನು ಲೋಡ್ ಮಾಡಲಾಗುತ್ತದೆ.
Webpack, Rollup, ಮತ್ತು Parcel ನಂತಹ ಆಧುನಿಕ ಬಂಡ್ಲರ್‌ಗಳು ಡೈನಾಮಿಕ್ `import()` ಸಿಂಟ್ಯಾಕ್ಸ್ ಬಳಸಿಕೊಂಡು ಕೋಡ್ ಸ್ಪ್ಲಿಟಿಂಗ್‌ಗೆ ಅಂತರ್ನಿರ್ಮಿತ ಬೆಂಬಲವನ್ನು ಹೊಂದಿವೆ. React (`React.lazy` ನೊಂದಿಗೆ) ಮತ್ತು Vue ನಂತಹ ಫ್ರೇಮ್‌ವರ್ಕ್‌ಗಳು ಸಹ ಕಾಂಪೊನೆಂಟ್ ಮಟ್ಟದಲ್ಲಿ ಕೋಡ್ ಅನ್ನು ವಿಭಜಿಸಲು ಸುಲಭ ಮಾರ್ಗಗಳನ್ನು ಒದಗಿಸುತ್ತವೆ.
3. ಟ್ರೀ ಶೇಕಿಂಗ್ ಮತ್ತು ಡೆಡ್ ಕೋಡ್ ಎಲಿಮಿನೇಷನ್
ಕೋಡ್ ಸ್ಪ್ಲಿಟಿಂಗ್‌ನೊಂದಿಗೆ ಸಹ, ನಿಮ್ಮ ಆರಂಭಿಕ ಬಂಡಲ್ ವಾಸ್ತವವಾಗಿ ಬಳಸದ ಕೋಡ್ ಅನ್ನು ಒಳಗೊಂಡಿರಬಹುದು. ನೀವು ಲೈಬ್ರರಿಗಳನ್ನು ಆಮದು ಮಾಡಿಕೊಂಡಾಗ ಆದರೆ ಅವುಗಳ ಒಂದು ಸಣ್ಣ ಭಾಗವನ್ನು ಮಾತ್ರ ಬಳಸಿದಾಗ ಇದು ಸಾಮಾನ್ಯವಾಗಿದೆ.
ಟ್ರೀ ಶೇಕಿಂಗ್ ಎನ್ನುವುದು ನಿಮ್ಮ ಅಂತಿಮ ಬಂಡಲ್‌ನಿಂದ ಬಳಕೆಯಾಗದ ಕೋಡ್ ಅನ್ನು ತೆಗೆದುಹಾಕಲು ಆಧುನಿಕ ಬಂಡ್ಲರ್‌ಗಳು ಬಳಸುವ ಒಂದು ಪ್ರಕ್ರಿಯೆಯಾಗಿದೆ. ಇದು ನಿಮ್ಮ `import` ಮತ್ತು `export` ಹೇಳಿಕೆಗಳನ್ನು ಸ್ಥಿರವಾಗಿ ವಿಶ್ಲೇಷಿಸುತ್ತದೆ ಮತ್ತು ಯಾವ ಕೋಡ್ ತಲುಪಲಾಗುವುದಿಲ್ಲ ಎಂಬುದನ್ನು ನಿರ್ಧರಿಸುತ್ತದೆ. ನಿಮ್ಮ ಬಳಕೆದಾರರಿಗೆ ಅಗತ್ಯವಿರುವ ಕೋಡ್ ಅನ್ನು ಮಾತ್ರ ನೀವು ಸಾಗಿಸುತ್ತಿದ್ದೀರಿ ಎಂದು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳುವ ಮೂಲಕ, ನೀವು ಬಂಡಲ್ ಗಾತ್ರಗಳನ್ನು ಗಮನಾರ್ಹವಾಗಿ ಕಡಿಮೆ ಮಾಡಬಹುದು, ಇದು ವೇಗವಾಗಿ ಡೌನ್‌ಲೋಡ್‌ಗಳು ಮತ್ತು ಪಾರ್ಸಿಂಗ್ ಸಮಯಗಳಿಗೆ ಕಾರಣವಾಗುತ್ತದೆ.
4. ಮಿನಿಫಿಕೇಶನ್ ಮತ್ತು ಕಂಪ್ರೆಷನ್
ಇವು ಯಾವುದೇ ಪ್ರೊಡಕ್ಷನ್ ವೆಬ್‌ಸೈಟ್‌ಗೆ ಮೂಲಭೂತ ಹಂತಗಳಾಗಿವೆ.
- ಮಿನಿಫಿಕೇಶನ್: ಇದು ನಿಮ್ಮ ಕೋಡ್‌ನಿಂದ ಅನಗತ್ಯ ಅಕ್ಷರಗಳನ್ನು—ಖಾಲಿ ಜಾಗ, ಕಾಮೆಂಟ್‌ಗಳು ಮತ್ತು ಹೊಸ ಸಾಲುಗಳಂತಹ—ತೆಗೆದುಹಾಕುವ ಮತ್ತು ವೇರಿಯೇಬಲ್ ಹೆಸರುಗಳನ್ನು ಚಿಕ್ಕದಾಗಿಸುವ ಒಂದು ಸ್ವಯಂಚಾಲಿತ ಪ್ರಕ್ರಿಯೆಯಾಗಿದೆ, ಅದರ ಕಾರ್ಯವನ್ನು ಬದಲಾಯಿಸದೆ. ಇದು ಫೈಲ್ ಗಾತ್ರವನ್ನು ಕಡಿಮೆ ಮಾಡುತ್ತದೆ. Terser (ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್‌ಗಾಗಿ) ಮತ್ತು cssnano (CSS ಗಾಗಿ) ನಂತಹ ಸಾಧನಗಳನ್ನು ಸಾಮಾನ್ಯವಾಗಿ ಬಳಸಲಾಗುತ್ತದೆ.
- ಕಂಪ್ರೆಷನ್: ಮಿನಿಫಿಕೇಶನ್ ನಂತರ, ನಿಮ್ಮ ಸರ್ವರ್ ಫೈಲ್‌ಗಳನ್ನು ಬ್ರೌಸರ್‌ಗೆ ಕಳುಹಿಸುವ ಮೊದಲು ಅವುಗಳನ್ನು ಸಂಕುಚಿತಗೊಳಿಸಬೇಕು. Gzip ಮತ್ತು, ಹೆಚ್ಚು ಪರಿಣಾಮಕಾರಿಯಾಗಿ, Brotli ನಂತಹ ಅಲ್ಗಾರಿದಮ್‌ಗಳು ಫೈಲ್ ಗಾತ್ರಗಳನ್ನು 70-80% ರಷ್ಟು ಕಡಿಮೆ ಮಾಡಬಹುದು. ಬ್ರೌಸರ್ ನಂತರ ಅವುಗಳನ್ನು ಸ್ವೀಕರಿಸಿದ ನಂತರ ಡಿಕಂಪ್ರೆಸ್ ಮಾಡುತ್ತದೆ. ಇದು ಸರ್ವರ್ ಕಾನ್ಫಿಗರೇಶನ್ ಆಗಿದೆ, ಆದರೆ ನೆಟ್‌ವರ್ಕ್ ವರ್ಗಾವಣೆ ಸಮಯವನ್ನು ಕಡಿಮೆ ಮಾಡಲು ಇದು ನಿರ್ಣಾಯಕವಾಗಿದೆ.
5. ಇನ್‌ಲೈನ್ ಕ್ರಿಟಿಕಲ್ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ (ಎಚ್ಚರಿಕೆಯಿಂದ ಬಳಸಿ)
ಮೊದಲ ಪೇಂಟ್‌ಗೆ ಸಂಪೂರ್ಣವಾಗಿ ಅಗತ್ಯವಿರುವ ಅತ್ಯಂತ ಸಣ್ಣ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ತುಣುಕುಗಳಿಗಾಗಿ (ಉದಾ., ಥೀಮ್ ಅಥವಾ ಕ್ರಿಟಿಕಲ್ ಪಾಲಿಫಿಲ್ ಅನ್ನು ಹೊಂದಿಸುವುದು), ನೀವು ಅವುಗಳನ್ನು ನೇರವಾಗಿ ನಿಮ್ಮ HTML ನಲ್ಲಿ <head> ನಲ್ಲಿ <script> ಟ್ಯಾಗ್‌ನೊಳಗೆ ಇನ್‌ಲೈನ್ ಮಾಡಬಹುದು. ಇದು ನೆಟ್‌ವರ್ಕ್ ವಿನಂತಿಯನ್ನು ಉಳಿಸುತ್ತದೆ, ಇದು ಹೆಚ್ಚಿನ ಲೇಟೆನ್ಸಿ ಮೊಬೈಲ್ ಸಂಪರ್ಕಗಳಲ್ಲಿ ಪ್ರಯೋಜನಕಾರಿಯಾಗಬಹುದು. ಆದಾಗ್ಯೂ, ಇದನ್ನು ಮಿತವಾಗಿ ಬಳಸಬೇಕು. ಇನ್‌ಲೈನ್ ಮಾಡಿದ ಕೋಡ್ ನಿಮ್ಮ HTML ಡಾಕ್ಯುಮೆಂಟ್‌ನ ಗಾತ್ರವನ್ನು ಹೆಚ್ಚಿಸುತ್ತದೆ ಮತ್ತು ಬ್ರೌಸರ್‌ನಿಂದ ಪ್ರತ್ಯೇಕವಾಗಿ ಕ್ಯಾಶ್ ಮಾಡಲಾಗುವುದಿಲ್ಲ. ಇದು ಎಚ್ಚರಿಕೆಯಿಂದ ಪರಿಗಣಿಸಬೇಕಾದ ಒಂದು ಹೊಂದಾಣಿಕೆಯಾಗಿದೆ.
ಸುಧಾರಿತ ತಂತ್ರಗಳು ಮತ್ತು ಆಧುನಿಕ ವಿಧಾನಗಳು
ಸರ್ವರ್-ಸೈಡ್ ರೆಂಡರಿಂಗ್ (SSR) ಮತ್ತು ಸ್ಟ್ಯಾಟಿಕ್ ಸೈಟ್ ಜನರೇಷನ್ (SSG)
Next.js (React ಗಾಗಿ), Nuxt.js (Vue ಗಾಗಿ), ಮತ್ತು SvelteKit ನಂತಹ ಫ್ರೇಮ್‌ವರ್ಕ್‌ಗಳು SSR ಮತ್ತು SSG ಅನ್ನು ಜನಪ್ರಿಯಗೊಳಿಸಿವೆ. ಈ ತಂತ್ರಗಳು ಆರಂಭಿಕ ರೆಂಡರಿಂಗ್ ಕೆಲಸವನ್ನು ಕ್ಲೈಂಟ್‌ನ ಬ್ರೌಸರ್‌ನಿಂದ ಸರ್ವರ್‌ಗೆ ವರ್ಗಾಯಿಸುತ್ತವೆ.
- SSR: ಸರ್ವರ್ ವಿನಂತಿಸಿದ ಪುಟಕ್ಕಾಗಿ ಸಂಪೂರ್ಣ HTML ಅನ್ನು ರೆಂಡರ್ ಮಾಡುತ್ತದೆ ಮತ್ತು ಅದನ್ನು ಬ್ರೌಸರ್‌ಗೆ ಕಳುಹಿಸುತ್ತದೆ. ಬ್ರೌಸರ್ ಈ HTML ಅನ್ನು ತಕ್ಷಣವೇ ಪ್ರದರ್ಶಿಸಬಹುದು, ಇದು ಅತ್ಯಂತ ವೇಗದ ಫಸ್ಟ್ ಕಂಟೆಂಟ್‌ಫುಲ್ ಪೇಂಟ್‌ಗೆ ಕಾರಣವಾಗುತ್ತದೆ. ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ನಂತರ ಲೋಡ್ ಆಗಿ ಪುಟವನ್ನು "ಹೈಡ್ರೇಟ್" ಮಾಡುತ್ತದೆ, ಅದನ್ನು ಸಂವಾದಾತ್ಮಕವಾಗಿಸುತ್ತದೆ.
- SSG: ಪ್ರತಿ ಪುಟಕ್ಕಾಗಿ HTML ಅನ್ನು ಬಿಲ್ಡ್ ಸಮಯದಲ್ಲಿ ರಚಿಸಲಾಗುತ್ತದೆ. ಬಳಕೆದಾರರು ಪುಟವನ್ನು ವಿನಂತಿಸಿದಾಗ, ಒಂದು ಸ್ಥಿರ HTML ಫೈಲ್ ಅನ್ನು CDN ನಿಂದ ತಕ್ಷಣವೇ ಸರ್ವ್ ಮಾಡಲಾಗುತ್ತದೆ. ವಿಷಯ-ಭಾರೀ ಸೈಟ್‌ಗಳಿಗೆ ಇದು ಅತ್ಯಂತ ವೇಗದ ವಿಧಾನವಾಗಿದೆ.
SSR ಮತ್ತು SSG ಎರಡೂ ಕ್ಲೈಂಟ್-ಸೈಡ್ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್‌ನ ಹೆಚ್ಚಿನ ಭಾಗವು ಕಾರ್ಯಗತಗೊಳ್ಳಲು ಪ್ರಾರಂಭಿಸುವ ಮೊದಲೇ ಅರ್ಥಪೂರ್ಣವಾದ ಮೊದಲ ಪೇಂಟ್ ಅನ್ನು ತಲುಪಿಸುವ ಮೂಲಕ CRP ಕಾರ್ಯಕ್ಷಮತೆಯನ್ನು ತೀವ್ರವಾಗಿ ಸುಧಾರಿಸುತ್ತವೆ.
ವೆಬ್ ವರ್ಕರ್ಸ್
ನಿಮ್ಮ ಅಪ್ಲಿಕೇಶನ್ ಭಾರೀ, ದೀರ್ಘಕಾಲದ ಗಣನೆಗಳನ್ನು ನಿರ್ವಹಿಸಬೇಕಾದರೆ (ಸಂಕೀರ್ಣ ಡೇಟಾ ವಿಶ್ಲೇಷಣೆ, ಇಮೇಜ್ ಪ್ರೊಸೆಸಿಂಗ್, ಅಥವಾ ಕ್ರಿಪ್ಟೋಗ್ರಫಿಯಂತಹ), ಇದನ್ನು ಮುಖ್ಯ ಥ್ರೆಡ್‌ನಲ್ಲಿ ಮಾಡುವುದರಿಂದ ರೆಂಡರಿಂಗ್ ಅನ್ನು ನಿರ್ಬಂಧಿಸುತ್ತದೆ ಮತ್ತು ನಿಮ್ಮ ಪುಟವನ್ನು ಫ್ರೀಜ್ ಆದಂತೆ ಮಾಡುತ್ತದೆ. ವೆಬ್ ವರ್ಕರ್ಸ್ ಈ ಸ್ಕ್ರಿಪ್ಟ್‌ಗಳನ್ನು ಮುಖ್ಯ UI ಥ್ರೆಡ್‌ನಿಂದ ಸಂಪೂರ್ಣವಾಗಿ ಪ್ರತ್ಯೇಕವಾದ ಹಿನ್ನೆಲೆ ಥ್ರೆಡ್‌ನಲ್ಲಿ ಚಲಾಯಿಸಲು ನಿಮಗೆ ಅನುಮತಿಸುವ ಮೂಲಕ ಒಂದು ಪರಿಹಾರವನ್ನು ಒದಗಿಸುತ್ತದೆ. ಇದು ತೆರೆಮರೆಯಲ್ಲಿ ಭಾರೀ ಕೆಲಸ ನಡೆಯುತ್ತಿರುವಾಗ ನಿಮ್ಮ ಅಪ್ಲಿಕೇಶನ್ ಅನ್ನು ಸ್ಪಂದಿಸುವಂತೆ ಮಾಡುತ್ತದೆ.
CRP ಆಪ್ಟಿಮೈಸೇಶನ್‌ಗಾಗಿ ಒಂದು ಪ್ರಾಯೋಗಿಕ ಕಾರ್ಯಪ್ರবাহ
ಇದನ್ನೆಲ್ಲಾ ಒಟ್ಟಿಗೆ ಸೇರಿಸಿ ನೀವು ನಿಮ್ಮ ಪ್ರಾಜೆಕ್ಟ್‌ಗಳಿಗೆ ಅನ್ವಯಿಸಬಹುದಾದ ಒಂದು ಕಾರ್ಯಸಾಧ್ಯವಾದ ಕಾರ್ಯಪ್ರবাহವನ್ನು ರೂಪಿಸೋಣ.
- ಆಡಿಟ್: ಒಂದು ಬೇಸ್‌ಲೈನ್‌ನೊಂದಿಗೆ ಪ್ರಾರಂಭಿಸಿ. ನಿಮ್ಮ ಪ್ರೊಡಕ್ಷನ್ ಬಿಲ್ಡ್‌ನಲ್ಲಿ ಲೈಟ್‌ಹೌಸ್ ವರದಿ ಮತ್ತು ಪರ್ಫಾರ್ಮೆನ್ಸ್ ಪ್ರೊಫೈಲ್ ಅನ್ನು ರನ್ ಮಾಡಿ ನಿಮ್ಮ ಪ್ರಸ್ತುತ ಸ್ಥಿತಿಯನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳಿ. ನಿಮ್ಮ FCP, LCP, TTI ಅನ್ನು ಗಮನಿಸಿ ಮತ್ತು ಯಾವುದೇ ಲಾಂಗ್ ಟಾಸ್ಕ್‌ಗಳು ಅಥವಾ ರೆಂಡರ್-ಬ್ಲಾಕಿಂಗ್ ಸಂಪನ್ಮೂಲಗಳನ್ನು ಗುರುತಿಸಿ.
- ಗುರುತಿಸಿ: ಡೆವಲಪರ್ ಟೂಲ್ಸ್ ನೆಟ್‌ವರ್ಕ್ ಮತ್ತು ಪರ್ಫಾರ್ಮೆನ್ಸ್ ಟ್ಯಾಬ್‌ಗಳನ್ನು ಆಳವಾಗಿ ಪರಿಶೀಲಿಸಿ. ಯಾವ ಸ್ಕ್ರಿಪ್ಟ್‌ಗಳು ಮತ್ತು ಸ್ಟೈಲ್‌ಶೀಟ್‌ಗಳು ಆರಂಭಿಕ ರೆಂಡರ್ ಅನ್ನು ನಿರ್ಬಂಧಿಸುತ್ತಿವೆ ಎಂಬುದನ್ನು ನಿಖರವಾಗಿ ಗುರುತಿಸಿ. ಪ್ರತಿ ಸಂಪನ್ಮೂಲಕ್ಕಾಗಿ ನಿಮ್ಮನ್ನು ಕೇಳಿಕೊಳ್ಳಿ: "ಬಳಕೆದಾರರು ಆರಂಭಿಕ ವಿಷಯವನ್ನು ನೋಡಲು ಇದು ಸಂಪೂರ್ಣವಾಗಿ ಅಗತ್ಯವೇ?"
- ಆದ್ಯತೆ ನೀಡಿ: ನಿಮ್ಮ ಪ್ರಯತ್ನಗಳನ್ನು "above-the-fold" (ಮೊದಲು ಕಾಣುವ) ವಿಷಯದ ಮೇಲೆ ಪರಿಣಾಮ ಬೀರುವ ಕೋಡ್ ಮೇಲೆ ಕೇಂದ್ರೀಕರಿಸಿ. ಈ ವಿಷಯವನ್ನು ಬಳಕೆದಾರರಿಗೆ ಸಾಧ್ಯವಾದಷ್ಟು ವೇಗವಾಗಿ ತಲುಪಿಸುವುದು ಗುರಿಯಾಗಿದೆ. ಉಳಿದದ್ದನ್ನು ನಂತರ ಲೋಡ್ ಮಾಡಬಹುದು.
- ಆಪ್ಟಿಮೈಜ್ ಮಾಡಿ:
- ಅನಿವಾರ್ಯವಲ್ಲದ ಎಲ್ಲಾ ಸ್ಕ್ರಿಪ್ಟ್‌ಗಳಿಗೆ
deferಅನ್ವಯಿಸಿ. - ಸ್ವತಂತ್ರ ಮೂರನೇ-ಪಕ್ಷದ ಸ್ಕ್ರಿಪ್ಟ್‌ಗಳಿಗಾಗಿ
asyncಬಳಸಿ. - ನಿಮ್ಮ ರೂಟ್‌ಗಳು ಮತ್ತು ದೊಡ್ಡ ಕಾಂಪೊನೆಂಟ್‌ಗಳಿಗಾಗಿ ಕೋಡ್ ಸ್ಪ್ಲಿಟಿಂಗ್ ಅನ್ನು ಕಾರ್ಯಗತಗೊಳಿಸಿ.
- ನಿಮ್ಮ ಬಿಲ್ಡ್ ಪ್ರಕ್ರಿಯೆಯು ಮಿನಿಫಿಕೇಶನ್ ಮತ್ತು ಟ್ರೀ ಶೇಕಿಂಗ್ ಅನ್ನು ಒಳಗೊಂಡಿದೆ ಎಂದು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಿ.
- ನಿಮ್ಮ ಸರ್ವರ್‌ನಲ್ಲಿ Brotli ಅಥವಾ Gzip ಕಂಪ್ರೆಷನ್ ಅನ್ನು ಸಕ್ರಿಯಗೊಳಿಸಲು ನಿಮ್ಮ ಇನ್ಫ್ರಾಸ್ಟ್ರಕ್ಚರ್ ತಂಡದೊಂದಿಗೆ ಕೆಲಸ ಮಾಡಿ.
- CSS ಗಾಗಿ, ಆರಂಭಿಕ ವೀಕ್ಷಣೆಗೆ ಅಗತ್ಯವಿರುವ ಕ್ರಿಟಿಕಲ್ CSS ಅನ್ನು ಇನ್‌ಲೈನ್ ಮಾಡುವುದನ್ನು ಮತ್ತು ಉಳಿದದ್ದನ್ನು ಲೇಜಿ-ಲೋಡ್ ಮಾಡುವುದನ್ನು ಪರಿಗಣಿಸಿ.
- ಅನಿವಾರ್ಯವಲ್ಲದ ಎಲ್ಲಾ ಸ್ಕ್ರಿಪ್ಟ್‌ಗಳಿಗೆ
- ಅಳತೆ ಮಾಡಿ: ಬದಲಾವಣೆಗಳನ್ನು ಕಾರ್ಯಗತಗೊಳಿಸಿದ ನಂತರ, ಮತ್ತೊಮ್ಮೆ ಆಡಿಟ್ ರನ್ ಮಾಡಿ. ನಿಮ್ಮ ಹೊಸ ಸ್ಕೋರ್‌ಗಳು ಮತ್ತು ಸಮಯಗಳನ್ನು ಬೇಸ್‌ಲೈನ್‌ನೊಂದಿಗೆ ಹೋಲಿಕೆ ಮಾಡಿ. ನಿಮ್ಮ FCP ಸುಧಾರಿಸಿದೆಯೇ? ಕಡಿಮೆ ರೆಂಡರ್-ಬ್ಲಾಕಿಂಗ್ ಸಂಪನ್ಮೂಲಗಳಿವೆಯೇ?
- ಪುನರಾವರ್ತಿಸಿ: ವೆಬ್ ಕಾರ್ಯಕ್ಷಮತೆ ಒಂದು-ಬಾರಿಯ ಪರಿಹಾರವಲ್ಲ; ಇದು ನಿರಂತರ ಪ್ರಕ್ರಿಯೆ. ನಿಮ್ಮ ಅಪ್ಲಿಕೇಶನ್ ಬೆಳೆದಂತೆ, ಹೊಸ ಕಾರ್ಯಕ್ಷಮತೆಯ ಅಡಚಣೆಗಳು ಹೊರಹೊಮ್ಮಬಹುದು. ನಿಮ್ಮ ಡೆವಲಪ್‌ಮೆಂಟ್ ಮತ್ತು ನಿಯೋಜನೆ ಚಕ್ರದ ನಿಯಮಿತ ಭಾಗವಾಗಿ ಕಾರ್ಯಕ್ಷಮತೆ ಆಡಿಟಿಂಗ್ ಅನ್ನು ಮಾಡಿ.
ತೀರ್ಮಾನ: ಕಾರ್ಯಕ್ಷಮತೆಯ ಮಾರ್ಗವನ್ನು ಕರಗತ ಮಾಡಿಕೊಳ್ಳುವುದು
ಕ್ರಿಟಿಕಲ್ ರೆಂಡರಿಂಗ್ ಪಾತ್ ಎನ್ನುವುದು ಬ್ರೌಸರ್ ನಿಮ್ಮ ಅಪ್ಲಿಕೇಶನ್‌ಗೆ ಜೀವ ತುಂಬಲು ಅನುಸರಿಸುವ ನೀಲನಕ್ಷೆಯಾಗಿದೆ. ಡೆವಲಪರ್‌ಗಳಾಗಿ, ಈ ಮಾರ್ಗದ ಮೇಲೆ ನಮ್ಮ ತಿಳುವಳಿಕೆ ಮತ್ತು ನಿಯಂತ್ರಣ, ವಿಶೇಷವಾಗಿ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್‌ಗೆ ಸಂಬಂಧಿಸಿದಂತೆ, ಬಳಕೆದಾರರ ಅನುಭವವನ್ನು ಸುಧಾರಿಸಲು ನಾವು ಹೊಂದಿರುವ ಅತ್ಯಂತ ಶಕ್ತಿಶಾಲಿ ಲಿವರ್‌ಗಳಲ್ಲಿ ಒಂದಾಗಿದೆ. ಕೇವಲ ಕೆಲಸ ಮಾಡುವ ಕೋಡ್ ಬರೆಯುವ ಮನಸ್ಥಿತಿಯಿಂದ ಕಾರ್ಯನಿರ್ವಹಿಸುವ ಕೋಡ್ ಬರೆಯುವತ್ತ ಸಾಗುವ ಮೂಲಕ, ನಾವು ಕೇವಲ ಕ್ರಿಯಾತ್ಮಕವಲ್ಲದೆ, ಜಗತ್ತಿನಾದ್ಯಂತದ ಬಳಕೆದಾರರಿಗೆ ವೇಗವಾದ, ಪ್ರವೇಶಿಸಬಹುದಾದ ಮತ್ತು ಆನಂದದಾಯಕವಾದ ಅಪ್ಲಿಕೇಶನ್‌ಗಳನ್ನು ನಿರ್ಮಿಸಬಹುದು.
ಈ ಪ್ರಯಾಣವು ವಿಶ್ಲೇಷಣೆಯಿಂದ ಪ್ರಾರಂಭವಾಗುತ್ತದೆ. ನಿಮ್ಮ ಡೆವಲಪರ್ ಟೂಲ್‌ಗಳನ್ನು ತೆರೆಯಿರಿ, ನಿಮ್ಮ ಅಪ್ಲಿಕೇಶನ್ ಅನ್ನು ಪ್ರೊಫೈಲ್ ಮಾಡಿ ಮತ್ತು ನಿಮ್ಮ ಬಳಕೆದಾರ ಮತ್ತು ಸಂಪೂರ್ಣವಾಗಿ ರೆಂಡರ್ ಆದ ಪುಟದ ನಡುವೆ ನಿಂತಿರುವ ಪ್ರತಿಯೊಂದು ಸಂಪನ್ಮೂಲವನ್ನು ಪ್ರಶ್ನಿಸಲು ಪ್ರಾರಂಭಿಸಿ. ಸ್ಕ್ರಿಪ್ಟ್‌ಗಳನ್ನು ಮುಂದೂಡುವುದು, ಕೋಡ್ ಅನ್ನು ವಿಭಜಿಸುವುದು ಮತ್ತು ನಿಮ್ಮ ಪೇಲೋಡ್ ಅನ್ನು ಕಡಿಮೆ ಮಾಡುವ ತಂತ್ರಗಳನ್ನು ಅನ್ವಯಿಸುವ ಮೂಲಕ, ನೀವು ಬ್ರೌಸರ್‌ಗೆ ಅದರ ಅತ್ಯುತ್ತಮ ಕೆಲಸವನ್ನು ಮಾಡಲು ದಾರಿ ಮಾಡಿಕೊಡಬಹುದು: ಮಿಂಚಿನ ವೇಗದಲ್ಲಿ ವಿಷಯವನ್ನು ರೆಂಡರ್ ಮಾಡುವುದು.