ಸಿಎಸ್ಎಸ್ ಸ್ಪ್ರೈಟ್‌ಗಳೊಂದಿಗೆ ನಿಮ್ಮ ಸೈಟ್‌ ಅನ್ನು ವೇಗಗೊಳಿಸುವುದು

ಸ್ಪ್ರಿಟ್ ಮಾಸ್ಟರ್ ವೆಬ್

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

ಮೂಲ ಕ್ಯಾಸ್ಕೇಡಿಂಗ್ ಸ್ಟೈಲ್ ಶೀಟ್‌ನ ಗುಣಮಟ್ಟವು ಈಗ 15 ವರ್ಷಕ್ಕಿಂತ ಹಳೆಯದಾಗಿದೆ. ವೆಬ್ ಅಭಿವೃದ್ಧಿಯಲ್ಲಿ ಸಿಎಸ್ಎಸ್ ಒಂದು ಪ್ರಮುಖ ವಿಕಾಸವಾಗಿತ್ತು ಏಕೆಂದರೆ ಅದು ವಿಷಯವನ್ನು ವಿನ್ಯಾಸದಿಂದ ಬೇರ್ಪಡಿಸಿತು. ಈ ಬ್ಲಾಗ್ ಮತ್ತು ಇನ್ನಾವುದನ್ನು ನೋಡಿ ಮತ್ತು ಹೆಚ್ಚಿನ ಸ್ಟೈಲಿಂಗ್ ವ್ಯತ್ಯಾಸವು ಲಗತ್ತಿಸಲಾದ ಸ್ಟೈಲ್‌ಶೀಟ್‌ನಲ್ಲಿದೆ. ಸ್ಟೈಲ್‌ಶೀಟ್‌ಗಳು ಸಹ ಮುಖ್ಯವಾಗಿದೆ ಏಕೆಂದರೆ ಅವುಗಳನ್ನು ನಿಮ್ಮ ಬ್ರೌಸರ್‌ನಲ್ಲಿ ಸಂಗ್ರಹದಲ್ಲಿ ಸ್ಥಳೀಯವಾಗಿ ಸಂಗ್ರಹಿಸಲಾಗುತ್ತದೆ. ಪರಿಣಾಮವಾಗಿ, ಜನರು ನಿಮ್ಮ ಸೈಟ್‌ಗೆ ಭೇಟಿ ನೀಡುತ್ತಿರುವುದರಿಂದ, ಅವರು ಪ್ರತಿ ಬಾರಿಯೂ ಸ್ಟೈಲ್ ಶೀಟ್ ಡೌನ್‌ಲೋಡ್ ಮಾಡುತ್ತಿಲ್ಲ… ಕೇವಲ ಪುಟದ ವಿಷಯ.

ಸಿಎಸ್ಎಸ್ನ ಒಂದು ಅಂಶವು ಹೆಚ್ಚಾಗಿ ಬಳಕೆಯಾಗುವುದಿಲ್ಲ ಸಿಎಸ್ಎಸ್ ಸ್ಪ್ರೈಟ್ಸ್. ಬಳಕೆದಾರರು ನಿಮ್ಮ ವೆಬ್‌ಸೈಟ್‌ಗೆ ಭೇಟಿ ನೀಡಿದಾಗ, ಅವರು ಪುಟಕ್ಕಾಗಿ ಕೇವಲ ಒಂದು ವಿನಂತಿಯನ್ನು ಮಾಡುತ್ತಿಲ್ಲ ಎಂದು ನಿಮಗೆ ತಿಳಿದಿಲ್ಲದಿರಬಹುದು. ಅವರು ಬಹು ವಿನಂತಿಗಳನ್ನು ಮಾಡಿ… ಪುಟಕ್ಕಾಗಿ, ಯಾವುದೇ ಸ್ಟೈಲ್‌ಶೀಟ್‌ಗಳಿಗಾಗಿ, ಯಾವುದೇ ಲಗತ್ತಿಸಲಾದ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಫೈಲ್‌ಗಳಿಗಾಗಿ ಮತ್ತು ನಂತರ ಪ್ರತಿ ಚಿತ್ರಕ್ಕಾಗಿ ಒಂದು ವಿನಂತಿ. ಗಡಿಗಳು, ನ್ಯಾವಿಗೇಷನ್ ಬಾರ್‌ಗಳು, ಹಿನ್ನೆಲೆಗಳು, ಗುಂಡಿಗಳು ಇತ್ಯಾದಿಗಳ ಚಿತ್ರಗಳ ಸರಣಿಯನ್ನು ಹೊಂದಿರುವ ಥೀಮ್ ಅನ್ನು ನೀವು ಹೊಂದಿದ್ದರೆ… ಬ್ರೌಸರ್ ನಿಮ್ಮ ವೆಬ್ ಸರ್ವರ್‌ನಿಂದ ಒಂದೊಂದಾಗಿ ವಿನಂತಿಸಬೇಕು. ಅದನ್ನು ಸಾವಿರಾರು ಸಂದರ್ಶಕರಿಂದ ಗುಣಿಸಿ ಮತ್ತು ಅದು ನಿಮ್ಮ ಸರ್ವರ್‌ಗೆ ಮಾಡಿದ ಹತ್ತು ಸಾವಿರ ವಿನಂತಿಗಳಾಗಿರಬಹುದು!

ಇದು ನಿಮ್ಮ ಸೈಟ್ ಅನ್ನು ನಿಧಾನಗೊಳಿಸುತ್ತದೆ. ಎ ನಿಧಾನಗತಿಯ ಸೈಟ್ ನಿಶ್ಚಿತಾರ್ಥ ಮತ್ತು ಪರಿವರ್ತನೆಗಳ ಮೇಲೆ ನಾಟಕೀಯ ಪರಿಣಾಮ ಬೀರುತ್ತದೆ ನಿಮ್ಮ ಪ್ರೇಕ್ಷಕರು ಮಾಡುವ. ಉತ್ತಮ ವೆಬ್ ಡೆವಲಪರ್‌ಗಳು ಬಳಸುವ ತಂತ್ರವೆಂದರೆ ಎಲ್ಲಾ ಚಿತ್ರಗಳನ್ನು ಒಂದೇ ಫೈಲ್‌ಗೆ ಹಾಕುವುದು… ಇದನ್ನು ಎ ಸ್ಪ್ರೈಟ್. ನಿಮ್ಮ ಪ್ರತಿಯೊಂದು ಫೈಲ್ ಚಿತ್ರಗಳಿಗಾಗಿ ವಿನಂತಿಯನ್ನು ಮಾಡುವ ಬದಲು, ಈಗ ಒಂದೇ ಸ್ಪ್ರೈಟ್ ಚಿತ್ರಕ್ಕಾಗಿ ಒಂದೇ ವಿನಂತಿಯ ಅಗತ್ಯವಿದೆ!

ನೀವು ಬಗ್ಗೆ ಓದಬಹುದು ಸಿಎಸ್ಎಸ್-ಟ್ರಿಕ್ಸ್‌ನಲ್ಲಿ ಸಿಎಸ್ಎಸ್ ಸ್ಪ್ರೈಟ್‌ಗಳು ಹೇಗೆ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತವೆ or ಸ್ಮಾಶಿಂಗ್ ಮ್ಯಾಗಜೀನ್‌ನ ಸಿಎಸ್ಎಸ್ ಸ್ಪ್ರೈಟ್ ಪೋಸ್ಟ್. ನಿಮ್ಮ ಅಭಿವೃದ್ಧಿ ತಂಡವು ಅವುಗಳನ್ನು ಸೈಟ್‌ಗೆ ಸೇರಿಸಿಕೊಳ್ಳುವುದನ್ನು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಲು ನಿಮಗೆ ಸಲಹೆ ನೀಡಲು, ಅವುಗಳನ್ನು ಹೇಗೆ ಬಳಸುವುದು ಎಂದು ನಿಮಗೆ ತೋರಿಸುವುದು ನನ್ನ ಉದ್ದೇಶವಲ್ಲ. ಸಿಎಸ್ಎಸ್ ಟ್ರಿಕ್ಸ್ ಒದಗಿಸುವ ಉದಾಹರಣೆಯು 10 ವಿನಂತಿಗಳಿರುವ 10 ಚಿತ್ರಗಳನ್ನು ತೋರಿಸುತ್ತದೆ ಮತ್ತು 20.5 ಕೆಬಿ ವರೆಗೆ ಸೇರಿಸುತ್ತದೆ. ಒಂದೇ ಸ್ಪ್ರೈಟ್ನಲ್ಲಿ ಸಂಗ್ರಹಿಸಿದಾಗ, ಅದು 1 ವಿನಂತಿಯ 13 ವಿನಂತಿ! 9 ಚಿತ್ರಗಳಿಗೆ ರೌಂಡ್ ಟ್ರಿಪ್ ವಿನಂತಿ ಮತ್ತು ಪ್ರತಿಕ್ರಿಯೆ ಸಮಯಗಳು ಈಗ ಹೋಗಿವೆ ಮತ್ತು ಡೇಟಾದ ಪ್ರಮಾಣವನ್ನು 30% ಕ್ಕಿಂತ ಕಡಿಮೆ ಮಾಡಲಾಗಿದೆ. ನಿಮ್ಮ ಸೈಟ್‌ನಲ್ಲಿನ ಸಂದರ್ಶಕರ ಸಂಖ್ಯೆಯಿಂದ ಗುಣಿಸಿ ಮತ್ತು ನೀವು ನಿಜವಾಗಿಯೂ ಕೆಲವು ಸಂಪನ್ಮೂಲಗಳನ್ನು ಕ್ಷೌರ ಮಾಡಲು ಹೊರಟಿದ್ದೀರಿ!

ಗ್ಲೋಬಲ್ನವ್ದಿ ಆಪಲ್ ನ್ಯಾವಿಗೇಷನ್ ಬಾರ್ ಒಂದು ಉತ್ತಮ ಉದಾಹರಣೆಯಾಗಿದೆ. ಪ್ರತಿಯೊಂದು ಬಟನ್ ಕೆಲವು ರಾಜ್ಯಗಳನ್ನು ಹೊಂದಿದೆ… ನೀವು ಪುಟದಲ್ಲಿರಲಿ, ಪುಟದಿಂದ ಹೊರಗಿರಲಿ ಅಥವಾ ಗುಂಡಿಯ ಮೇಲೆ ಮೂಸ್ ಆಗಿರಲಿ. ಸಿಎಸ್ಎಸ್ ಗುಂಡಿಯ ನಿರ್ದೇಶಾಂಕಗಳನ್ನು ವ್ಯಾಖ್ಯಾನಿಸುತ್ತದೆ ಮತ್ತು ಸರಿಯಾದ ಸ್ಥಿತಿಯ ಪ್ರದೇಶವನ್ನು ಬಳಕೆದಾರರ ಬ್ರೌಸರ್‌ಗೆ ಒದಗಿಸುತ್ತದೆ. ಈ ಎಲ್ಲಾ ರಾಜ್ಯಗಳು ಒಂದೇ ಗ್ರಾಫಿಕ್‌ನಲ್ಲಿ ಒಟ್ಟಿಗೆ ಕುಸಿಯುತ್ತವೆ - ಆದರೆ ಸ್ಟೈಲ್‌ಶೀಟ್‌ನಲ್ಲಿ ನಿರ್ದಿಷ್ಟಪಡಿಸಿದಂತೆ ಪ್ರದೇಶದಿಂದ ಪ್ರದೇಶವನ್ನು ಪ್ರದರ್ಶಿಸಲಾಗುತ್ತದೆ.

ನಿಮ್ಮ ಡೆವಲಪರ್‌ಗಳು ಪರಿಕರಗಳನ್ನು ಪ್ರೀತಿಸುತ್ತಿದ್ದರೆ, ಅವರಿಗೆ ಸಹಾಯ ಮಾಡುವಂತಹ ಒಂದು ಟನ್ ಅಲ್ಲಿದೆ ಕಂಪಾಸ್ ಸಿಎಸ್ಎಸ್ ಫ್ರೇಮ್ವರ್ಕ್, ರಿಕ್ವೆಸ್ಟ್ ರಿಡ್ಯೂಸ್ ASP.NET ಗಾಗಿ, ಸಿಎಸ್ಎಸ್-ಸ್ಪ್ರೈಟರ್ ರೂಬಿಗಾಗಿ, CSSSprite ಸ್ಕ್ರಿಪ್ಟ್ ಫೋಟೋಶಾಪ್ಗಾಗಿ, ಸ್ಪ್ರೈಟ್‌ಪ್ಯಾಡ್, ಸ್ಪ್ರೈಟ್‌ರೈಟ್, ಸ್ಪ್ರೈಟ್‌ಕೋ, Ero ೀರೋಸ್ಪ್ರಿಟ್ಸ್, ಪ್ರಾಜೆಕ್ಟ್ ಫಂಡ್ಯುನ ಸಿಎಸ್ಎಸ್ ಸ್ಪ್ರೈಟ್ ಜನರೇಟರ್, ಸ್ಪ್ರೈಟ್ ಮಾಸ್ಟರ್ ವೆಬ್, ಮತ್ತೆ ಸ್ಪ್ರೈಟ್‌ಮೀ ಬುಕ್‌ಮಾರ್ಕ್ಲೆಟ್.

ಸ್ಕ್ರೀನ್ಶಾಟ್ ಸ್ಪ್ರೈಟ್ ಮಾಸ್ಟರ್ ವೆಬ್:
ಸ್ಪ್ರಿಟ್ ಮಾಸ್ಟರ್ ವೆಬ್

Martech Zone ಅದರ ಥೀಮ್‌ನಾದ್ಯಂತ ಹಿನ್ನೆಲೆ ಚಿತ್ರಣವನ್ನು ಬಳಸುವುದಿಲ್ಲ, ಆದ್ದರಿಂದ ನಾವು ಈ ಸಮಯದಲ್ಲಿ ಈ ತಂತ್ರವನ್ನು ನಿಯೋಜಿಸಬೇಕಾಗಿಲ್ಲ.

2 ಪ್ರತಿಕ್ರಿಯೆಗಳು

  1. 1

    ನಿರೀಕ್ಷಿಸಿ ... ಇಡೀ ಸಂಗ್ರಹಣೆಯು "ಚಿತ್ರ" (ಅಥವಾ "ವಿಮಾನ"), ಮತ್ತು ಪ್ರತಿ ಉಪ-ಚಿತ್ರ (ಅಥವಾ ಅನಿಮೇಟೆಡ್ ಅಥವಾ ಸಂವಾದಾತ್ಮಕವಾಗಿ ಬದಲಾಗುತ್ತಿರುವ ಚಿತ್ರಗಳ ಸಂದರ್ಭದಲ್ಲಿ ಉಪ-ಗುಂಪು) "ಸ್ಪ್ರೈಟ್" ಅಲ್ಲವೇ?

    ಕಳೆದ ಬಾರಿ ನಾನು ಈ ರೀತಿಯ ವಿಷಯವನ್ನು ನಿರ್ವಹಿಸಿದಾಗಿನಿಂದ ಬಹುಶಃ ವಿಷಯವನ್ನು ಮರುಹೆಸರಿಸಲಾಗಿದೆ ಆದರೆ ಸ್ಪ್ರೈಟ್ ಅನ್ನು ಪ್ರದರ್ಶಿಸಲು ಕೊನೆಗೊಂಡ ಅಂಶವಾಗಿದೆ ಎಂದು ನಾನು ಪ್ರತಿಜ್ಞೆ ಮಾಡಬಲ್ಲೆ, ಅದನ್ನು ಎಳೆಯಲಾದ ದೊಡ್ಡ ಡೇಟಾ ಟೇಬಲ್ ಅಲ್ಲ.

    ("ಸ್ಪ್ರೈಟ್ ಟೇಬಲ್"... ಅದು ಅಲ್ಲವೇ?)

    • 2

      ನಾವು ಎರಡು ವಿಭಿನ್ನ ವಿಷಯಗಳನ್ನು ಮಾತನಾಡುತ್ತಿರಬಹುದು, ಮಾರ್ಕ್. CSS ನೊಂದಿಗೆ, ನಿರ್ದೇಶಾಂಕಗಳನ್ನು ಬಳಸಿಕೊಂಡು ಪ್ರದರ್ಶಿಸಲು ಇಮೇಜ್ ಫೈಲ್‌ನ ಯಾವ 'ಭಾಗ'ವನ್ನು ನೀವು ಮೂಲತಃ ನಿರ್ದಿಷ್ಟಪಡಿಸಬಹುದು. ಇದು ನಿಮ್ಮ ಎಲ್ಲಾ ಚಿತ್ರಗಳನ್ನು ಒಂದೇ 'ಸ್ಪ್ರೈಟ್' ಗೆ ಹಾಕಲು ಅನುಮತಿಸುತ್ತದೆ ಮತ್ತು ನಂತರ ನೀವು CSS ನೊಂದಿಗೆ ಪ್ರದರ್ಶಿಸಲು ಬಯಸುವ ಪ್ರದೇಶವನ್ನು ಸೂಚಿಸಿ.

ನೀವು ಏನು ಆಲೋಚಿಸುತ್ತೀರಿ ಏನು?

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