ಕಾರ್ಯಕ್ಷಮತೆಯನ್ನು ಅನ್ಲಾಕ್ ಮಾಡಿ: ವರ್ಧಿತ ಲೋಡಿಂಗ್‌ಗಾಗಿ CSS @defer ನಿಯಮದ ಆಳವಾದ ವಿಶ್ಲೇಷಣೆ

ವೆಬ್ ಡೆವಲಪ್‌ಮೆಂಟ್‌ನ ನಿರಂತರವಾಗಿ ವಿಕಸಿಸುತ್ತಿರುವ ಕ್ಷೇತ್ರದಲ್ಲಿ, ವೆಬ್‌ಸೈಟ್ ಕಾರ್ಯಕ್ಷಮತೆಯನ್ನು ಉತ್ತಮಗೊಳಿಸುವುದು ಅತ್ಯಂತ ಮುಖ್ಯವಾಗಿದೆ. ನಿಧಾನವಾಗಿ ಲೋಡ್ ಆಗುವ ವೆಬ್‌ಸೈಟ್ ಬಳಕೆದಾರರನ್ನು ನಿರಾಶೆಗೊಳಿಸಬಹುದು, ಹೆಚ್ಚಿನ ಬೌನ್ಸ್ ದರಗಳಿಗೆ ಕಾರಣವಾಗಬಹುದು ಮತ್ತು ಅಂತಿಮವಾಗಿ ನಿಮ್ಮ ವ್ಯವಹಾರದ ಮೇಲೆ ನಕಾರಾತ್ಮಕ ಪರಿಣಾಮ ಬೀರಬಹುದು. ವೆಬ್‌ಸೈಟ್‌ನ ವೇಗದ ಮೇಲೆ ಪ್ರಭಾವ ಬೀರುವ ನಿರ್ಣಾಯಕ ಅಂಶಗಳಲ್ಲಿ ಒಂದು CSS, ಅಂದರೆ ಕ್ಯಾಸ್ಕೇಡಿಂಗ್ ಸ್ಟೈಲ್ ಶೀಟ್‌ಗಳನ್ನು ನಿರ್ವಹಿಸುವ ವಿಧಾನವಾಗಿದೆ. ಐತಿಹಾಸಿಕವಾಗಿ, CSS ಅನ್ನು ಬ್ಲಾಕಿಂಗ್ ಸಂಪನ್ಮೂಲವೆಂದು ಪರಿಗಣಿಸಲಾಗಿದೆ, ಅಂದರೆ ಎಲ್ಲಾ CSS ಫೈಲ್‌ಗಳನ್ನು ಡೌನ್‌ಲೋಡ್ ಮಾಡಿ ಪಾರ್ಸ್ ಮಾಡುವವರೆಗೆ ಬ್ರೌಸರ್ ಪುಟವನ್ನು ರೆಂಡರ್ ಮಾಡುವುದನ್ನು ನಿಲ್ಲಿಸುತ್ತದೆ. ಇದು ವಿಷಯದ ಆರಂಭಿಕ ಪ್ರದರ್ಶನವನ್ನು ಗಮನಾರ್ಹವಾಗಿ ವಿಳಂಬಗೊಳಿಸಬಹುದು ಮತ್ತು ಲಾರ್ಜೆಸ್ಟ್ ಕಂಟೆಂಟ್‌ಫುಲ್ ಪೇಂಟ್ (LCP) ಮತ್ತು ಫಸ್ಟ್ ಕಂಟೆಂಟ್‌ಫುಲ್ ಪೇಂಟ್ (FCP) ನಂತಹ ಪ್ರಮುಖ ಕಾರ್ಯಕ್ಷಮತೆ ಮೆಟ್ರಿಕ್‌ಗಳ ಮೇಲೆ ನಕಾರಾತ್ಮಕ ಪರಿಣಾಮ ಬೀರಬಹುದು.

@defer ಅನ್ನು ಪರಿಚಯಿಸಲಾಗುತ್ತಿದೆ, ಇದು ನಾವು CSS ಶೈಲಿಗಳನ್ನು ಹೇಗೆ ಲೋಡ್ ಮಾಡುತ್ತೇವೆ ಮತ್ತು ಅನ್ವಯಿಸುತ್ತೇವೆ ಎಂಬುದನ್ನು ಕ್ರಾಂತಿಗೊಳಿಸಲು ವಿನ್ಯಾಸಗೊಳಿಸಲಾದ ತುಲನಾತ್ಮಕವಾಗಿ ಹೊಸ ಮತ್ತು ಶಕ್ತಿಯುತ CSS ಅಟ್-ರೂಲ್ ಆಗಿದೆ. ಈ ವೈಶಿಷ್ಟ್ಯವು ಪ್ರಸ್ತುತ ಪ್ರಾಯೋಗಿಕವಾಗಿದ್ದು, ಅದರ ಕಾರ್ಯವನ್ನು ಸಕ್ರಿಯಗೊಳಿಸಲು ಬ್ರೌಸರ್ ಫ್ಲ್ಯಾಗ್‌ಗಳು ಅಥವಾ ನಿರ್ದಿಷ್ಟ ಬ್ರೌಸರ್ ಆವೃತ್ತಿಗಳ ಅಗತ್ಯವಿರುತ್ತದೆ. ಇದು ಡೆವಲಪರ್‌ಗಳಿಗೆ ನಿರ್ದಿಷ್ಟ CSS ಬ್ಲಾಕ್ ಅನ್ನು ಕಡಿಮೆ ಆದ್ಯತೆಯೊಂದಿಗೆ ಲೋಡ್ ಮಾಡಬೇಕು ಮತ್ತು ಅನ್ವಯಿಸಬೇಕು ಎಂದು ನಿರ್ದಿಷ್ಟಪಡಿಸಲು ಅನುಮತಿಸುತ್ತದೆ, ಪುಟದ ಆರಂಭಿಕ ರೆಂಡರಿಂಗ್ ನಂತರ ಅದರ ಅಪ್ಲಿಕೇಶನ್ ಅನ್ನು ಮುಂದೂಡುತ್ತದೆ.

ಬ್ಲಾಕಿಂಗ್ ಸಂಪನ್ಮೂಲಗಳು ಮತ್ತು ಕ್ರಿಟಿಕಲ್ ರೆಂಡರಿಂಗ್ ಪಾತ್ ಅನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳುವುದು

@defer ನ ಪ್ರಯೋಜನಗಳನ್ನು ಸಂಪೂರ್ಣವಾಗಿ ಗ್ರಹಿಸಲು, ಬ್ಲಾಕಿಂಗ್ ಸಂಪನ್ಮೂಲಗಳು ಮತ್ತು ಕ್ರಿಟಿಕಲ್ ರೆಂಡರಿಂಗ್ ಪಾತ್ ಪರಿಕಲ್ಪನೆಗಳನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳುವುದು ಅತ್ಯಗತ್ಯ.

ಒಂದು ಬ್ಲಾಕಿಂಗ್ ಸಂಪನ್ಮೂಲ ಎಂದರೆ ಬ್ರೌಸರ್ ಪುಟವನ್ನು ರೆಂಡರ್ ಮಾಡುವುದನ್ನು ಮುಂದುವರಿಸುವ ಮೊದಲು ಡೌನ್‌ಲೋಡ್, ಪಾರ್ಸ್ ಮತ್ತು ಎಕ್ಸಿಕ್ಯೂಟ್ ಮಾಡಬೇಕಾದ ಫೈಲ್. CSS ಸ್ಟೈಲ್‌ಶೀಟ್‌ಗಳು, ಡಿಫಾಲ್ಟ್ ಆಗಿ, ಬ್ಲಾಕಿಂಗ್ ಸಂಪನ್ಮೂಲಗಳಾಗಿವೆ. ಬ್ರೌಸರ್ HTML ನಲ್ಲಿ <link> ಟ್ಯಾಗ್ ಅನ್ನು ಎದುರಿಸಿದಾಗ, ಅನುಗುಣವಾದ CSS ಫೈಲ್ ಸಂಪೂರ್ಣವಾಗಿ ಲೋಡ್ ಆಗುವವರೆಗೆ ಅದು ರೆಂಡರಿಂಗ್ ಪ್ರಕ್ರಿಯೆಯನ್ನು ನಿಲ್ಲಿಸುತ್ತದೆ.

ಕ್ರಿಟಿಕಲ್ ರೆಂಡರಿಂಗ್ ಪಾತ್ (CRP) ಎನ್ನುವುದು ಬ್ರೌಸರ್ HTML, CSS ಮತ್ತು JavaScript ಅನ್ನು ರೆಂಡರ್ ಮಾಡಿದ ವೆಬ್‌ಪುಟವಾಗಿ ಪರಿವರ್ತಿಸಲು ತೆಗೆದುಕೊಳ್ಳುವ ಹಂತಗಳ ಅನುಕ್ರಮವಾಗಿದೆ. ವೇಗವಾದ ಲೋಡಿಂಗ್ ಸಮಯ ಮತ್ತು ಸುಗಮ ಬಳಕೆದಾರ ಅನುಭವವನ್ನು ಸಾಧಿಸಲು CRP ಯನ್ನು ಆಪ್ಟಿಮೈಜ್ ಮಾಡುವುದು ನಿರ್ಣಾಯಕ. ಬ್ಲಾಕಿಂಗ್ ಸಂಪನ್ಮೂಲಗಳು CRP ಗೆ ಲೇಟೆನ್ಸಿಯನ್ನು ಸೇರಿಸುತ್ತವೆ, ವಿಷಯದ ಆರಂಭಿಕ ಪ್ರದರ್ಶನವನ್ನು ವಿಳಂಬಗೊಳಿಸುತ್ತವೆ.

ಉದಾಹರಣೆಗೆ, ಒಂದು ವಿಶಿಷ್ಟವಾದ ವೆಬ್‌ಸೈಟ್ ರಚನೆಯನ್ನು ಪರಿಗಣಿಸಿ. ಬ್ರೌಸರ್ HTML ಡೌನ್‌ಲೋಡ್ ಮಾಡುವುದರೊಂದಿಗೆ ಪ್ರಾರಂಭವಾಗುತ್ತದೆ. ನಂತರ ಅದು <link rel="stylesheet" href="styles.css"> ಟ್ಯಾಗ್ ಅನ್ನು ಎದುರಿಸುತ್ತದೆ. ಬ್ರೌಸರ್ ತಕ್ಷಣವೇ `styles.css` ಅನ್ನು ವಿನಂತಿಸುತ್ತದೆ ಮತ್ತು ಅದು ಡೌನ್‌ಲೋಡ್ ಆಗುವವರೆಗೆ ಕಾಯುತ್ತದೆ. `styles.css` ಸಂಪೂರ್ಣವಾಗಿ ಲೋಡ್ ಆಗಿ ಮತ್ತು ಪಾರ್ಸ್ ಆದ ನಂತರವೇ ಬ್ರೌಸರ್ ಪುಟವನ್ನು ರೆಂಡರ್ ಮಾಡುವುದನ್ನು ಮುಂದುವರಿಸುತ್ತದೆ. ಈ ವಿಳಂಬವು ಗಮನಾರ್ಹವಾಗಿರಬಹುದು, ವಿಶೇಷವಾಗಿ ನಿಧಾನವಾದ ನೆಟ್‌ವರ್ಕ್ ಸಂಪರ್ಕಗಳಲ್ಲಿ ಅಥವಾ ದೊಡ್ಡ CSS ಫೈಲ್‌ಗಳನ್ನು ಹೊಂದಿರುವ ವೆಬ್‌ಸೈಟ್‌ಗಳಿಗೆ.

CSS @defer ನಿಯಮದ ಪರಿಚಯ

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

ಸಿಂಟ್ಯಾಕ್ಸ್:

            @defer {
  /* CSS rules to be deferred */
}
            

              
                Copy
              
            
          

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

@defer ಕಾರ್ಯಕ್ಷಮತೆಯನ್ನು ಹೇಗೆ ಸುಧಾರಿಸುತ್ತದೆ

• ವೇಗದ ಆರಂಭಿಕ ರೆಂಡರಿಂಗ್: ನಿರ್ಣಾಯಕವಲ್ಲದ CSS ಅನ್ನು ಮುಂದೂಡುವುದರಿಂದ, ಬ್ರೌಸರ್ ಪುಟದ ಪ್ರಮುಖ ವಿಷಯವನ್ನು ಹೆಚ್ಚು ವೇಗವಾಗಿ ರೆಂಡರ್ ಮಾಡಬಹುದು, ಇದರಿಂದಾಗಿ ಫಸ್ಟ್ ಕಂಟೆಂಟ್‌ಫುಲ್ ಪೇಂಟ್ (FCP) ಮತ್ತು ಲಾರ್ಜೆಸ್ಟ್ ಕಂಟೆಂಟ್‌ಫುಲ್ ಪೇಂಟ್ (LCP) ವೇಗವಾಗಿರುತ್ತದೆ.
• ಸುಧಾರಿತ ಬಳಕೆದಾರ ಅನುಭವ: ಬಳಕೆದಾರರು ವೆಬ್‌ಸೈಟ್ ವೇಗವಾಗಿ ಲೋಡ್ ಆಗುತ್ತಿದೆ ಎಂದು ಗ್ರಹಿಸುತ್ತಾರೆ, ಇದು ಉತ್ತಮ ಬಳಕೆದಾರ ಅನುಭವಕ್ಕೆ ಮತ್ತು ಕಡಿಮೆ ನಿರಾಶೆಗೆ ಕಾರಣವಾಗುತ್ತದೆ.
• ಕಡಿಮೆಯಾದ ಬ್ಲಾಕಿಂಗ್ ಸಮಯ: @defer ನಿಯಮವು ಕ್ರಿಟಿಕಲ್ ರೆಂಡರಿಂಗ್ ಪಾತ್‌ನಲ್ಲಿ CSS ನ ಪ್ರಭಾವವನ್ನು ಕಡಿಮೆ ಮಾಡುತ್ತದೆ, CSS ಲೋಡ್ ಆಗಲು ಬ್ರೌಸರ್ ಕಾಯುವ ಸಮಯವನ್ನು ಕಡಿಮೆ ಮಾಡುತ್ತದೆ.
• ಆಪ್ಟಿಮೈಸ್ಡ್ ಲೋಡಿಂಗ್ ಆದ್ಯತೆ: ಡಿಫರ್ಡ್ ಶೈಲಿಗಳನ್ನು ಅನ್ವಯಿಸುವ ಮೊದಲು ಬ್ರೌಸರ್ ಚಿತ್ರಗಳು ಮತ್ತು ಫಾಂಟ್‌ಗಳಂತಹ ಅಗತ್ಯ ಸಂಪನ್ಮೂಲಗಳನ್ನು ಲೋಡ್ ಮಾಡಲು ಆದ್ಯತೆ ನೀಡಬಹುದು.

CSS @defer ನ ಬಳಕೆಯ ಸಂದರ್ಭಗಳು

@defer ನಿಯಮವು ನಿರ್ಣಾಯಕವಲ್ಲದ CSS ಶೈಲಿಗಳಿಗೆ ವಿಶೇಷವಾಗಿ ಉಪಯುಕ್ತವಾಗಿದೆ, ಅವುಗಳೆಂದರೆ:

• ಅನಿಮೇಷನ್‌ಗಳು ಮತ್ತು ಟ್ರಾನ್ಸಿಶನ್‌ಗಳು: ಅನಿಮೇಷನ್‌ಗಳು ಮತ್ತು ಟ್ರಾನ್ಸಿಶನ್‌ಗಳನ್ನು ವ್ಯಾಖ್ಯಾನಿಸುವ ಶೈಲಿಗಳನ್ನು ಆರಂಭಿಕ ಬಳಕೆದಾರ ಅನುಭವದ ಮೇಲೆ ನಕಾರಾತ್ಮಕ ಪರಿಣಾಮ ಬೀರದಂತೆ ಮುಂದೂಡಬಹುದು.
• ಸಂಕೀರ್ಣ ಲೇಔಟ್ ಅಂಶಗಳು: ಪುಟ ಲೋಡ್‌ನಲ್ಲಿ ತಕ್ಷಣವೇ ಗೋಚರಿಸದ ಕಡಿಮೆ ನಿರ್ಣಾಯಕ ಲೇಔಟ್ ಅಂಶಗಳಿಗೆ ಸ್ಟೈಲಿಂಗ್ ಅನ್ನು ಮುಂದೂಡಬಹುದು.
• ಪ್ರಿಂಟ್ ಶೈಲಿಗಳು: ಪ್ರಿಂಟ್-ನಿರ್ದಿಷ್ಟ ಶೈಲಿಗಳು ಆರಂಭಿಕ ಪುಟ ಲೋಡ್ ಸಮಯದಲ್ಲಿ ವಿರಳವಾಗಿ ಬೇಕಾಗುತ್ತವೆ ಮತ್ತು ಅವುಗಳನ್ನು ಸುರಕ್ಷಿತವಾಗಿ ಮುಂದೂಡಬಹುದು.
• ಷರತ್ತುಬದ್ಧ ಶೈಲಿಗಳು: ಮೀಡಿಯಾ ಕ್ವೆರಿಗಳು ಅಥವಾ JavaScript ಈವೆಂಟ್‌ಗಳ ಆಧಾರದ ಮೇಲೆ ಅನ್ವಯಿಸುವ ಶೈಲಿಗಳನ್ನು ಅವು ನಿಜವಾಗಿ ಬೇಕಾಗುವವರೆಗೆ ಮುಂದೂಡಬಹುದು. ಉದಾಹರಣೆಗೆ, ಆರಂಭಿಕ ವ್ಯೂಪೋರ್ಟ್ ಗಾತ್ರವಲ್ಲದ ನಿರ್ದಿಷ್ಟ ಪರದೆಯ ಗಾತ್ರಗಳಿಗೆ ಶೈಲಿಗಳು.
• ಕಾಂಪೊನೆಂಟ್-ನಿರ್ದಿಷ್ಟ ಶೈಲಿಗಳು: ಒಂದು ಕಾಂಪೊನೆಂಟ್ ಪುಟದ ಕೆಳಭಾಗದಲ್ಲಿದ್ದರೆ ಮತ್ತು ಆರಂಭಿಕ ವ್ಯೂಪೋರ್ಟ್‌ನಲ್ಲಿ ತಕ್ಷಣವೇ ಗೋಚರಿಸದಿದ್ದರೆ, ಅದರ ಸಂಬಂಧಿತ CSS ಅನ್ನು ಮುಂದೂಡಬಹುದು.

@defer ಅಳವಡಿಕೆಯ ಪ್ರಾಯೋಗಿಕ ಉದಾಹರಣೆಗಳು

ವೆಬ್‌ಸೈಟ್ ಕಾರ್ಯಕ್ಷಮತೆಯನ್ನು ಸುಧಾರಿಸಲು @defer ನಿಯಮವನ್ನು ಹೇಗೆ ಬಳಸುವುದು ಎಂಬುದರ ಕೆಲವು ಪ್ರಾಯೋಗಿಕ ಉದಾಹರಣೆಗಳನ್ನು ಅನ್ವೇಷಿಸೋಣ.

ಉದಾಹರಣೆ 1: ಅನಿಮೇಷನ್ ಶೈಲಿಗಳನ್ನು ಮುಂದೂಡುವುದು

ನೀವು ಬಳಕೆದಾರರ ಅನುಭವವನ್ನು ಹೆಚ್ಚಿಸುವ ಆದರೆ ಪುಟದ ಆರಂಭಿಕ ರೆಂಡರಿಂಗ್‌ಗೆ ನಿರ್ಣಾಯಕವಲ್ಲದ ಸೂಕ್ಷ್ಮ ಅನಿಮೇಷನ್‌ಗಳನ್ನು ಹೊಂದಿರುವ ವೆಬ್‌ಸೈಟ್ ಅನ್ನು ಹೊಂದಿದ್ದೀರಿ ಎಂದು ಭಾವಿಸೋಣ. ಈ ಅನಿಮೇಷನ್ ಶೈಲಿಗಳನ್ನು ಮುಂದೂಡಲು ನೀವು ಈ ಕೆಳಗಿನ ಕೋಡ್ ಅನ್ನು ಬಳಸಬಹುದು:

            @defer {
  .animated-element {
    animation: fadeIn 1s ease-in-out;
  }

  @keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
  }
}
            

              
                Copy
              
            
          

ಈ ಉದಾಹರಣೆಯಲ್ಲಿ, fadeIn ಅನಿಮೇಷನ್ ಅನ್ನು animated-element ಕ್ಲಾಸ್ ಹೊಂದಿರುವ ಅಂಶಗಳಿಗೆ ಅನ್ವಯಿಸಲಾಗುತ್ತದೆ. ಈ ಶೈಲಿಗಳನ್ನು @defer ನಿಯಮದಲ್ಲಿ ಸುತ್ತುವರಿಯುವ ಮೂಲಕ, ಬ್ರೌಸರ್ ಅನಿಮೇಷನ್ ಅನ್ನು ಅನ್ವಯಿಸುವ ಮೊದಲು ಪುಟದ ಉಳಿದ ಭಾಗವನ್ನು ರೆಂಡರ್ ಮಾಡಲು ಆದ್ಯತೆ ನೀಡುತ್ತದೆ.

ಉದಾಹರಣೆ 2: ಪ್ರಿಂಟ್ ಶೈಲಿಗಳನ್ನು ಮುಂದೂಡುವುದು

ವೆಬ್‌ಪುಟವನ್ನು ಪ್ರಿಂಟ್ ಮಾಡುವಾಗ ಅದರ ನೋಟವನ್ನು ಉತ್ತಮಗೊಳಿಸಲು ಪ್ರಿಂಟ್ ಶೈಲಿಗಳನ್ನು ಬಳಸಲಾಗುತ್ತದೆ. ಈ ಶೈಲಿಗಳು ಆರಂಭಿಕ ಪುಟ ಲೋಡ್ ಸಮಯದಲ್ಲಿ ಅಗತ್ಯವಿಲ್ಲ ಮತ್ತು ಅವುಗಳನ್ನು ಸುರಕ್ಷಿತವಾಗಿ ಮುಂದೂಡಬಹುದು.

            @defer {
  @media print {
    body {
      font-size: 12pt;
      color: #000;
    }
    /* other print specific styles */
  }
}
            

              
                Copy
              
            
          

ಈ ಕೋಡ್ @media print ಬ್ಲಾಕ್‌ನಲ್ಲಿರುವ ಎಲ್ಲಾ ಶೈಲಿಗಳನ್ನು ಮುಂದೂಡುತ್ತದೆ, ಅವು ಪುಟದ ಆರಂಭಿಕ ರೆಂಡರಿಂಗ್ ಮೇಲೆ ಪರಿಣಾಮ ಬೀರದಂತೆ ಖಚಿತಪಡಿಸುತ್ತದೆ.

ಉದಾಹರಣೆ 3: ಕಾಂಪೊನೆಂಟ್-ನಿರ್ದಿಷ್ಟ ಶೈಲಿಗಳನ್ನು ಮುಂದೂಡುವುದು

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

            @defer {
  .testimonial-section {
    background-color: #f9f9f9;
    padding: 20px;
    border: 1px solid #ddd;
  }

  .testimonial-author {
    font-style: italic;
  }
}
            

              
                Copy
              
            
          

testimonial-section ಗಾಗಿ ಶೈಲಿಗಳನ್ನು ಮುಂದೂಡುವುದರಿಂದ ಬ್ರೌಸರ್ ಫೋಲ್ಡ್‌ನ ಮೇಲಿನ ವಿಷಯವನ್ನು ರೆಂಡರ್ ಮಾಡಲು ಆದ್ಯತೆ ನೀಡುತ್ತದೆ ಎಂದು ಖಚಿತಪಡಿಸುತ್ತದೆ.

ಸುಧಾರಿತ ತಂತ್ರಗಳು ಮತ್ತು ಪರಿಗಣನೆಗಳು

@defer ಅನ್ನು ಮೀಡಿಯಾ ಕ್ವೆರಿಗಳೊಂದಿಗೆ ಸಂಯೋಜಿಸುವುದು

ಪರದೆಯ ಗಾತ್ರ ಅಥವಾ ಇತರ ಸಾಧನದ ಗುಣಲಕ್ಷಣಗಳ ಆಧಾರದ ಮೇಲೆ ಶೈಲಿಗಳನ್ನು ಷರತ್ತುಬದ್ಧವಾಗಿ ಮುಂದೂಡಲು @defer ನಿಯಮವನ್ನು ಮೀಡಿಯಾ ಕ್ವೆರಿಗಳೊಂದಿಗೆ ಸಂಯೋಜಿಸಬಹುದು. ನಿರ್ದಿಷ್ಟ ಸಾಧನಗಳಲ್ಲಿ ಮಾತ್ರ ಅಗತ್ಯವಿರುವ ಶೈಲಿಗಳನ್ನು ಮುಂದೂಡಲು ಇದು ಉಪಯುಕ್ತವಾಗಬಹುದು.

            @defer {
  @media (max-width: 768px) {
    /* Styles for smaller screens */
  }
}
            

              
                Copy
              
            
          

ಈ ಉದಾಹರಣೆಯಲ್ಲಿ, @media (max-width: 768px) ಬ್ಲಾಕ್‌ನಲ್ಲಿರುವ ಶೈಲಿಗಳನ್ನು 768 ಪಿಕ್ಸೆಲ್‌ಗಳು ಅಥವಾ ಅದಕ್ಕಿಂತ ಕಡಿಮೆ ಪರದೆಯ ಅಗಲವಿರುವ ಸಾಧನಗಳಲ್ಲಿ ಮುಂದೂಡಲಾಗುತ್ತದೆ.

ಬ್ರೌಸರ್ ಬೆಂಬಲ ಮತ್ತು ಫಾಲ್‌ಬ್ಯಾಕ್‌ಗಳನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳುವುದು

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

JavaScript ಬಳಸುವ ಒಂದು ಸರಳ ಉದಾಹರಣೆ:

            if ('CSS' in window && CSS.supports('@defer', 'selector(body)')) {
  // Browser supports @defer
} else {
  // Browser does not support @defer, load styles normally.
  // You can dynamically insert a <link> tag here to load a fallback stylesheet.
}
            

              
                Copy
              
            
          

ಸಂಭಾವ್ಯ ನ್ಯೂನತೆಗಳು ಮತ್ತು ತಗ್ಗಿಸುವ ತಂತ್ರಗಳು

@defer ಗಮನಾರ್ಹ ಕಾರ್ಯಕ್ಷಮತೆಯ ಪ್ರಯೋಜನಗಳನ್ನು ನೀಡುತ್ತದೆಯಾದರೂ, ಸಂಭಾವ್ಯ ನ್ಯೂನತೆಗಳ ಬಗ್ಗೆ ತಿಳಿದಿರುವುದು ಮತ್ತು ಸೂಕ್ತವಾದ ತಗ್ಗಿಸುವ ತಂತ್ರಗಳನ್ನು ಅಳವಡಿಸುವುದು ಅತ್ಯಗತ್ಯ.

• ಶೈಲಿ ಇಲ್ಲದ ವಿಷಯದ ಫ್ಲ್ಯಾಶ್ (FOUC): ಶೈಲಿಗಳನ್ನು ಮುಂದೂಡುವುದರಿಂದ ಕೆಲವೊಮ್ಮೆ ಡಿಫರ್ಡ್ ಶೈಲಿಗಳು ಅನ್ವಯಿಸುವ ಮೊದಲು ಶೈಲಿ ಇಲ್ಲದ ವಿಷಯದ ಸಂಕ್ಷಿಪ್ತ ಫ್ಲ್ಯಾಶ್ ಉಂಟಾಗಬಹುದು. ಯಾವ ಶೈಲಿಗಳನ್ನು ಮುಂದೂಡಬೇಕು ಎಂಬುದನ್ನು ಎಚ್ಚರಿಕೆಯಿಂದ ಆಯ್ಕೆ ಮಾಡುವುದರಿಂದ ಮತ್ತು ನಿರ್ಣಾಯಕ CSS ಅನ್ನು ಮೊದಲೇ ಲೋಡ್ ಮಾಡುವಂತಹ ತಂತ್ರಗಳನ್ನು ಬಳಸುವುದರಿಂದ ಇದನ್ನು ಕಡಿಮೆ ಮಾಡಬಹುದು.
• ಲೇಔಟ್ ಶಿಫ್ಟ್‌ಗಳು: ಪುಟದ ಲೇಔಟ್ ಮೇಲೆ ಪರಿಣಾಮ ಬೀರುವ ಶೈಲಿಗಳನ್ನು ಮುಂದೂಡುವುದರಿಂದ ಆರಂಭಿಕ ರೆಂಡರಿಂಗ್ ನಂತರ ಲೇಔಟ್ ಶಿಫ್ಟ್‌ಗಳು ಉಂಟಾಗಬಹುದು. ಡಿಫರ್ಡ್ ಶೈಲಿಗಳು ಪುಟದ ಲೇಔಟ್ ಅನ್ನು ಗಮನಾರ್ಹವಾಗಿ ಬದಲಾಯಿಸುವುದಿಲ್ಲ ಎಂದು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳುವ ಮೂಲಕ ಅಥವಾ ಡಿಫರ್ಡ್ ವಿಷಯಕ್ಕಾಗಿ ಜಾಗವನ್ನು ಕಾಯ್ದಿರಿಸುವ ಮೂಲಕ ಇದನ್ನು ತಪ್ಪಿಸಬಹುದು. ಲೇಔಟ್ ಶಿಫ್ಟ್‌ಗಳನ್ನು ಕಡಿಮೆ ಮಾಡಲು content-visibility: auto ಅಥವಾ contain-intrinsic-size ನಂತಹ ತಂತ್ರಗಳನ್ನು ಬಳಸುವುದನ್ನು ಪರಿಗಣಿಸಿ.
• ಹೆಚ್ಚಿದ ಸಂಕೀರ್ಣತೆ: @defer ಅನ್ನು ಅಳವಡಿಸುವುದು ನಿಮ್ಮ CSS ಆರ್ಕಿಟೆಕ್ಚರ್‌ಗೆ ಸಂಕೀರ್ಣತೆಯನ್ನು ಸೇರಿಸುತ್ತದೆ. ಯಾವ ಶೈಲಿಗಳನ್ನು ಮುಂದೂಡಬೇಕು ಮತ್ತು ಫಾಲ್‌ಬ್ಯಾಕ್‌ಗಳನ್ನು ಹೇಗೆ ನಿರ್ವಹಿಸಬೇಕು ಎಂಬುದನ್ನು ನಿರ್ಧರಿಸಲು ಎಚ್ಚರಿಕೆಯ ಯೋಜನೆ ಮತ್ತು ಪರಿಗಣನೆ ಅಗತ್ಯವಿರುತ್ತದೆ.

ಕಾರ್ಯಕ್ಷಮತೆಯನ್ನು ಪರೀಕ್ಷಿಸುವುದು ಮತ್ತು ಮೇಲ್ವಿಚಾರಣೆ ಮಾಡುವುದು

ನಿಮ್ಮ ವೆಬ್‌ಸೈಟ್‌ನ ಕಾರ್ಯಕ್ಷಮತೆಯ ಮೇಲೆ @defer ನ ಪ್ರಭಾವವನ್ನು ಈ ಕೆಳಗಿನ ಸಾಧನಗಳನ್ನು ಬಳಸಿ ಸಂಪೂರ್ಣವಾಗಿ ಪರೀಕ್ಷಿಸುವುದು ನಿರ್ಣಾಯಕ:

• Google PageSpeed Insights: ನಿಮ್ಮ ವೆಬ್‌ಸೈಟ್‌ನ ಕಾರ್ಯಕ್ಷಮತೆಯ ಬಗ್ಗೆ ಒಳನೋಟಗಳನ್ನು ಒದಗಿಸುತ್ತದೆ ಮತ್ತು ಸುಧಾರಣೆಗೆ ಕ್ಷೇತ್ರಗಳನ್ನು ಗುರುತಿಸುತ್ತದೆ.
• WebPageTest: ವಿವಿಧ ಸ್ಥಳಗಳು ಮತ್ತು ಸಾಧನಗಳಿಂದ ನಿಮ್ಮ ವೆಬ್‌ಸೈಟ್‌ನ ಕಾರ್ಯಕ್ಷಮತೆಯನ್ನು ಪರೀಕ್ಷಿಸಲು ನಿಮಗೆ ಅನುಮತಿಸುತ್ತದೆ.
• Lighthouse: Chrome DevTools ನಲ್ಲಿ ನಿರ್ಮಿಸಲಾದ ಸ್ವಯಂಚಾಲಿತ ಸಾಧನವಾಗಿದ್ದು, ಇದು ನಿಮ್ಮ ವೆಬ್‌ಸೈಟ್‌ನ ಕಾರ್ಯಕ್ಷಮತೆ, ಪ್ರವೇಶಸಾಧ್ಯತೆ ಮತ್ತು SEO ಅನ್ನು ಆಡಿಟ್ ಮಾಡುತ್ತದೆ.
• ಬ್ರೌಸರ್ ಡೆವಲಪರ್ ಪರಿಕರಗಳು: ಸಂಪನ್ಮೂಲಗಳ ಲೋಡಿಂಗ್ ಅನುಕ್ರಮವನ್ನು ವಿಶ್ಲೇಷಿಸಲು ಮತ್ತು ಯಾವುದೇ ಕಾರ್ಯಕ್ಷಮತೆಯ ಅಡಚಣೆಗಳನ್ನು ಗುರುತಿಸಲು ನಿಮ್ಮ ಬ್ರೌಸರ್‌ನ ಡೆವಲಪರ್ ಪರಿಕರಗಳಲ್ಲಿನ ನೆಟ್‌ವರ್ಕ್ ಟ್ಯಾಬ್ ಅನ್ನು ಬಳಸಿ.

@defer ಅಪೇಕ್ಷಿತ ಪರಿಣಾಮವನ್ನು ಬೀರುತ್ತಿದೆ ಎಂದು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಲು ನಿಮ್ಮ ವೆಬ್‌ಸೈಟ್‌ನ ಕಾರ್ಯಕ್ಷಮತೆ ಮೆಟ್ರಿಕ್‌ಗಳಾದ FCP, LCP, ಮತ್ತು ಟೈಮ್ ಟು ಇಂಟರಾಕ್ಟಿವ್ (TTI) ಅನ್ನು ನಿಯಮಿತವಾಗಿ ಮೇಲ್ವಿಚಾರಣೆ ಮಾಡಿ.

CSS @defer ಬಳಸಲು ಉತ್ತಮ ಅಭ್ಯಾಸಗಳು

@defer ನ ಪ್ರಯೋಜನಗಳನ್ನು ಗರಿಷ್ಠಗೊಳಿಸಲು, ಈ ಉತ್ತಮ ಅಭ್ಯಾಸಗಳನ್ನು ಅನುಸರಿಸಿ:

• ನಿರ್ಣಾಯಕವಲ್ಲದ CSS ಅನ್ನು ಗುರುತಿಸಿ: ನಿಮ್ಮ CSS ಅನ್ನು ಎಚ್ಚರಿಕೆಯಿಂದ ವಿಶ್ಲೇಷಿಸಿ ಮತ್ತು ಪುಟದ ಆರಂಭಿಕ ರೆಂಡರಿಂಗ್‌ಗೆ ಅಗತ್ಯವಿಲ್ಲದ ಶೈಲಿಗಳನ್ನು ಗುರುತಿಸಿ.
• ಶೈಲಿಗಳನ್ನು ಆಯಕಟ್ಟಿನಿಂದ ಮುಂದೂಡಿ: ಅನಿಮೇಷನ್‌ಗಳು, ಟ್ರಾನ್ಸಿಶನ್‌ಗಳು ಮತ್ತು ಸಂಕೀರ್ಣ ಲೇಔಟ್ ಅಂಶಗಳಂತಹ ಕಾರ್ಯಕ್ಷಮತೆಯ ಅಡಚಣೆಗಳನ್ನು ಉಂಟುಮಾಡುವ ಸಾಧ್ಯತೆಯಿರುವ ಶೈಲಿಗಳನ್ನು ಮುಂದೂಡಿ.
• ಫಾಲ್‌ಬ್ಯಾಕ್‌ಗಳನ್ನು ಒದಗಿಸಿ: @defer ಅನ್ನು ಬೆಂಬಲಿಸದ ಬ್ರೌಸರ್‌ಗಳಲ್ಲಿ ನಿಮ್ಮ ವೆಬ್‌ಸೈಟ್ ಸರಿಯಾಗಿ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತದೆ ಎಂದು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಲು ಫಾಲ್‌ಬ್ಯಾಕ್ ಯಾಂತ್ರಿಕತೆಗಳನ್ನು ಅಳವಡಿಸಿ.
• ಲೇಔಟ್ ಶಿಫ್ಟ್‌ಗಳನ್ನು ಕಡಿಮೆ ಮಾಡಿ: ಪುಟದ ಲೇಔಟ್ ಅನ್ನು ಗಮನಾರ್ಹವಾಗಿ ಬದಲಾಯಿಸುವ ಶೈಲಿಗಳನ್ನು ಮುಂದೂಡುವುದನ್ನು ತಪ್ಪಿಸಿ.
• ಸಂಪೂರ್ಣವಾಗಿ ಪರೀಕ್ಷಿಸಿ: ವಿವಿಧ ಪರೀಕ್ಷಾ ಸಾಧನಗಳನ್ನು ಬಳಸಿ ನಿಮ್ಮ ವೆಬ್‌ಸೈಟ್‌ನ ಕಾರ್ಯಕ್ಷಮತೆಯ ಮೇಲೆ @defer ನ ಪ್ರಭಾವವನ್ನು ಪರೀಕ್ಷಿಸಿ.
• ಕಾರ್ಯಕ್ಷಮತೆಯನ್ನು ಮೇಲ್ವಿಚಾರಣೆ ಮಾಡಿ: @defer ಅಪೇಕ್ಷಿತ ಪರಿಣಾಮವನ್ನು ಬೀರುತ್ತಿದೆ ಎಂದು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಲು ನಿಮ್ಮ ವೆಬ್‌ಸೈಟ್‌ನ ಕಾರ್ಯಕ್ಷಮತೆ ಮೆಟ್ರಿಕ್‌ಗಳನ್ನು ನಿಯಮಿತವಾಗಿ ಮೇಲ್ವಿಚಾರಣೆ ಮಾಡಿ.
• ಎಚ್ಚರಿಕೆಯಿಂದ ಬಳಸಿ: @defer ಅನ್ನು ಅತಿಯಾಗಿ ಬಳಸಬೇಡಿ. ಡಿಫರ್ಡ್ ಶೈಲಿಗಳು ವೆಬ್‌ಸೈಟ್‌ನ ಕಾರ್ಯಚಟುವಟಿಕೆಗೆ ಅಗತ್ಯವಿದ್ದರೆ, ಅತಿಯಾಗಿ CSS ಅನ್ನು ಮುಂದೂಡುವುದರಿಂದ ಕಳಪೆ ಬಳಕೆದಾರ ಅನುಭವಕ್ಕೆ ಕಾರಣವಾಗಬಹುದು.

CSS ಕಾರ್ಯಕ್ಷಮತೆ ಆಪ್ಟಿಮೈಸೇಶನ್‌ನ ಭವಿಷ್ಯ

@defer ನಿಯಮವು CSS ಕಾರ್ಯಕ್ಷಮತೆ ಆಪ್ಟಿಮೈಸೇಶನ್‌ನಲ್ಲಿ ಒಂದು ಮಹತ್ವದ ಹೆಜ್ಜೆಯನ್ನು ಪ್ರತಿನಿಧಿಸುತ್ತದೆ. @defer ಗಾಗಿ ಬ್ರೌಸರ್ ಬೆಂಬಲ ಸುಧಾರಿಸಿದಂತೆ, ಇದು ವೆಬ್‌ಸೈಟ್ ಲೋಡಿಂಗ್ ಮತ್ತು ಬಳಕೆದಾರರ ಅನುಭವವನ್ನು ಹೆಚ್ಚಿಸಲು ಬಯಸುವ ವೆಬ್ ಡೆವಲಪರ್‌ಗಳಿಗೆ ಒಂದು ಪ್ರಮಾಣಿತ ಅಭ್ಯಾಸವಾಗುವ ಸಾಧ್ಯತೆಯಿದೆ. CSS ಕಂಟೈನ್‌ಮೆಂಟ್, ಫಾಂಟ್-ಡಿಸ್ಪ್ಲೇ ತಂತ್ರಗಳು, ಮತ್ತು ಆಪ್ಟಿಮೈಸ್ಡ್ ಅಸೆಟ್ ಡೆಲಿವರಿಯಂತಹ ತಂತ್ರಗಳ ಜೊತೆಗೆ, @defer ವೇಗವಾದ ಮತ್ತು ದಕ್ಷ ವೆಬ್‌ಸೈಟ್‌ಗಳನ್ನು ನಿರ್ಮಿಸಲು ಒಂದು ಶಕ್ತಿಯುತ ಟೂಲ್‌ಸೆಟ್ ಅನ್ನು ಒದಗಿಸುತ್ತದೆ. ಭವಿಷ್ಯದ ಪುನರಾವರ್ತನೆಗಳು ಮತ್ತು ಸಂಬಂಧಿತ ಪ್ರಸ್ತಾಪಗಳು ಡಿಫರ್ಡ್ ಶೈಲಿ ಅನ್ವಯದ ಮೇಲೆ ಸೂಕ್ಷ್ಮ-ನಿಯಂತ್ರಣವನ್ನು ಅನ್ವೇಷಿಸಬಹುದು, ಉದಾಹರಣೆಗೆ ಅವಲಂಬನೆಗಳನ್ನು ನಿಗದಿಪಡಿಸುವುದು ಅಥವಾ ಆದ್ಯತೆಯ ಮಟ್ಟಗಳು.

@defer ಮತ್ತು ಇತರ ಕಾರ್ಯಕ್ಷಮತೆ ಆಪ್ಟಿಮೈಸೇಶನ್ ತಂತ್ರಗಳನ್ನು ಅಳವಡಿಸಿಕೊಳ್ಳುವ ಮೂಲಕ, ಡೆವಲಪರ್‌ಗಳು ವೇಗವಾಗಿ ಲೋಡ್ ಆಗುವ, ಸುಗಮ ಬಳಕೆದಾರ ಅನುಭವವನ್ನು ಒದಗಿಸುವ ಮತ್ತು ಅಂತಿಮವಾಗಿ ಉತ್ತಮ ವ್ಯವಹಾರ ಫಲಿತಾಂಶಗಳನ್ನು ಸಾಧಿಸುವ ವೆಬ್‌ಸೈಟ್‌ಗಳನ್ನು ರಚಿಸಬಹುದು. ಜಾಗತಿಕ ಇಂಟರ್ನೆಟ್ ವೇಗ ಮತ್ತು ಪ್ರವೇಶವು ವ್ಯಾಪಕವಾಗಿ ಬದಲಾಗುತ್ತಿರುವಾಗ, ವಿಶ್ವಾದ್ಯಂತ ಬಳಕೆದಾರರಿಗೆ ಸಮಾನ ಪ್ರವೇಶ ಮತ್ತು ಸಕಾರಾತ್ಮಕ ಅನುಭವಗಳನ್ನು ಒದಗಿಸಲು ಕಾರ್ಯಕ್ಷಮತೆಯನ್ನು ಆಪ್ಟಿಮೈಜ್ ಮಾಡುವುದು ನಿರ್ಣಾಯಕ. ಸೀಮಿತ ಬ್ಯಾಂಡ್‌ವಿಡ್ತ್ ಹೊಂದಿರುವ ಗ್ರಾಮೀಣ ಪ್ರದೇಶದ ಬಳಕೆದಾರರು `@defer` ನೊಂದಿಗೆ ಆಪ್ಟಿಮೈಸ್ ಮಾಡಿದ ವೆಬ್‌ಸೈಟ್ ಅನ್ನು ಪ್ರವೇಶಿಸುವುದನ್ನು ಕಲ್ಪಿಸಿಕೊಳ್ಳಿ. ಅವರ ಆರಂಭಿಕ ವಿಷಯವು ಹೆಚ್ಚು ವೇಗವಾಗಿ ಲೋಡ್ ಆಗುತ್ತದೆ, ಸಂಪೂರ್ಣ ಸ್ಟೈಲಿಂಗ್ ಮತ್ತು ಅನಿಮೇಷನ್‌ಗಳು ಸ್ವಲ್ಪ ತಡವಾಗಿ ಲೋಡ್ ಆದರೂ ಸಹ ಪ್ರಮುಖ ಮಾಹಿತಿಯೊಂದಿಗೆ ತೊಡಗಿಸಿಕೊಳ್ಳಲು ಅವರಿಗೆ ಅನುವು ಮಾಡಿಕೊಡುತ್ತದೆ. ಇದು ಬಳಕೆದಾರರ ತೃಪ್ತಿ ಮತ್ತು ಪ್ರವೇಶಸಾಧ್ಯತೆಯಲ್ಲಿ ಗಮನಾರ್ಹ ವ್ಯತ್ಯಾಸವನ್ನುಂಟುಮಾಡುತ್ತದೆ.

ತೀರ್ಮಾನ

CSS @defer ನಿಯಮವು ವೆಬ್‌ಸೈಟ್ ಕಾರ್ಯಕ್ಷಮತೆಯನ್ನು ಉತ್ತಮಗೊಳಿಸಲು ಮತ್ತು ಬಳಕೆದಾರರ ಅನುಭವವನ್ನು ಸುಧಾರಿಸಲು ಒಂದು ಮೌಲ್ಯಯುತ ಸಾಧನವಾಗಿದೆ. ನಿರ್ಣಾಯಕವಲ್ಲದ CSS ಶೈಲಿಗಳನ್ನು ಆಯಕಟ್ಟಿನಿಂದ ಮುಂದೂಡುವುದರಿಂದ, ಡೆವಲಪರ್‌ಗಳು ಬ್ಲಾಕಿಂಗ್ ಸಮಯವನ್ನು ಕಡಿಮೆ ಮಾಡಬಹುದು, ಆರಂಭಿಕ ರೆಂಡರಿಂಗ್ ಅನ್ನು ಸುಧಾರಿಸಬಹುದು ಮತ್ತು ಒಟ್ಟಾರೆ ವೆಬ್‌ಸೈಟ್ ವೇಗವನ್ನು ಹೆಚ್ಚಿಸಬಹುದು. ಬ್ರೌಸರ್ ಬೆಂಬಲವು ಇನ್ನೂ ವಿಕಸಿಸುತ್ತಿದ್ದರೂ, @defer ನ ಸಂಭಾವ್ಯ ಪ್ರಯೋಜನಗಳು ಇದನ್ನು ಅನ್ವೇಷಿಸಲು ಮತ್ತು ಅಳವಡಿಸಲು ಯೋಗ್ಯವಾದ ತಂತ್ರವನ್ನಾಗಿ ಮಾಡುತ್ತದೆ, ವಿಶೇಷವಾಗಿ ಸೂಕ್ತವಾದ ಫಾಲ್‌ಬ್ಯಾಕ್ ಯಾಂತ್ರಿಕತೆಗಳು ಮತ್ತು ಸಂಪೂರ್ಣ ಪರೀಕ್ಷೆಯೊಂದಿಗೆ ಸಂಯೋಜಿಸಿದಾಗ. ಜಾಗತಿಕ ಪ್ರೇಕ್ಷಕರಿಗಾಗಿ ವೇಗವಾದ, ಹೆಚ್ಚು ಸ್ಪಂದಿಸುವ ವೆಬ್‌ಸೈಟ್‌ಗಳನ್ನು ರಚಿಸಲು ನೀವು ಶ್ರಮಿಸುತ್ತಿರುವಾಗ, ನಿಮ್ಮ CSS ಆಪ್ಟಿಮೈಸೇಶನ್ ತಂತ್ರದಲ್ಲಿ @defer ಅನ್ನು ಸಂಯೋಜಿಸುವುದನ್ನು ಪರಿಗಣಿಸಿ.