सीएसएस स्प्राइट्स के साथ अपनी साइट को गति देना

Spritemaster वेब

मैं इस साइट पर पृष्ठ गति के बारे में काफी कुछ लिखता हूं और यह हमारे ग्राहकों की साइटों के विश्लेषण और सुधार का एक महत्वपूर्ण हिस्सा है। शक्तिशाली सर्वर पर जाने और जैसे उपकरणों का उपयोग करने के अलावा सामग्री वितरण नेटवर्कवहाँ अन्य प्रोग्रामिंग तकनीकों के एक औसत वेब डेवलपर का उपयोग कर सकते हैं।

मूल कैस्केडिंग स्टाइल शीट का मानक अब 15 वर्ष से अधिक पुराना है। वेब विकास में CSS एक महत्वपूर्ण विकास था क्योंकि इसने सामग्री को डिज़ाइन से अलग कर दिया था। इस ब्लॉग और किसी अन्य को देखें और अधिकांश स्टाइलिंग अंतर केवल संलग्न स्टाइलशीट में है। स्टाइलशीट इसलिए भी महत्वपूर्ण हैं क्योंकि वे आपके ब्राउज़र में कैश में स्थानीय रूप से संग्रहीत हैं। परिणामस्वरूप, जैसे-जैसे लोग आपकी साइट पर आना जारी रखते हैं, वे हर बार एक स्टाइल शीट डाउनलोड नहीं कर रहे हैं... केवल पृष्ठ सामग्री।

CSS का एक तत्व जिसे अक्सर कम उपयोग किया जाता है, वे हैं: सीएसएस स्प्राइट्स. जब कोई उपयोगकर्ता आपकी वेबसाइट पर जाता है, तो हो सकता है कि आपको पता न चले कि वे पृष्ठ के लिए केवल एक अनुरोध नहीं कर रहे हैं। वे कई अनुरोध करें… पेज के लिए किसी भी स्टाइल शीट के लिए, किसी भी संलग्न जावास्क्रिप्ट फ़ाइलों के लिए, और फिर प्रत्येक छवि के लिए एक अनुरोध। यदि आपके पास एक थीम है जिसमें सीमाओं, नेविगेशन बार, पृष्ठभूमि, बटन, आदि के लिए छवियों की एक श्रृंखला है ... ब्राउज़र को आपके वेब सर्वर से एक समय में एक, एक अनुरोध करना होगा। हजारों आगंतुकों द्वारा गुणा करें और जो आपके सर्वर से किए गए हजारों अनुरोध हो सकते हैं!

यह बदले में, आपकी साइट को धीमा कर देती है। ए धीमी साइट सगाई और रूपांतरणों पर एक नाटकीय प्रभाव डाल सकती है जो आपके दर्शक बनाते हैं। एक रणनीति जो महान वेब डेवलपर्स का उपयोग करती है वह सभी छवियों को एक एकल फ़ाइल में डाल रही है ... ए प्रेत। आपकी प्रत्येक फ़ाइल छवियों के लिए एक अनुरोध करने के बजाय, अब केवल एकल स्प्राइट छवि के लिए एक अनुरोध करने की आवश्यकता है!

के बारे में पढ़ सकते हैं CSS Sprites CSS-Tricks पर कैसे काम करता है or स्मैशिंग मैगज़ीन का सीएसएस स्प्राइट पद। मेरा उद्देश्य आपको यह दिखाने का नहीं है कि उनका उपयोग कैसे किया जाए, बस आपको यह सुनिश्चित करने की सलाह दी जाए कि आपकी विकास टीम उन्हें साइट में शामिल करे। सीएसएस ट्रिक्स जो उदाहरण प्रदान करता है वह 10 छवियों को दिखाता है जो 10 अनुरोध हैं और 20.5 केबी तक जोड़ते हैं। जब एक ही प्रेत में एकत्रित होते हैं, तो यह है 1 अनुरोध जो कि 13kb . है! 9 छवियों के लिए राउंड ट्रिप अनुरोध और प्रतिक्रिया समय अब ​​समाप्त हो गया है और डेटा की मात्रा 30% से अधिक कम हो गई है। इसे अपनी साइट पर आने वालों की संख्या से गुणा करें और आप वास्तव में कुछ संसाधनों को समाप्त करने जा रहे हैं!

Globalnavपिछली कक्षा का सेब नेविगेशन बार एक बेहतरीन उदाहरण है। प्रत्येक बटन की कुछ स्थितियाँ होती हैं... चाहे आप पृष्ठ पर हों, पृष्ठ के बाहर हों, या बटन पर माउस ले रहे हों। CSS बटन के निर्देशांक को परिभाषित करता है और उपयोगकर्ता ब्राउज़र को सही स्थिति का क्षेत्र प्रस्तुत करता है। इन सभी राज्यों को एक ही ग्राफ़िक में एक साथ संक्षिप्त किया गया है - लेकिन शैली पत्रक में निर्दिष्ट क्षेत्र के अनुसार प्रदर्शित किया गया है।

यदि आपके डेवलपर्स उपकरण पसंद करते हैं, तो वहां एक टन बाहर है जो उनकी मदद कर सकता है, जिसमें शामिल हैं कम्पास सीएसएस फ्रेमवर्क, अनुरोध ASP.NET के लिए, सीएसएस-Spriter रूबी के लिए, CSSSprite स्क्रिप्ट फ़ोटोशॉप के लिए, स्प्राइटपैड, स्प्राइट, स्प्राइटोको, ज़ीरोसाइट्स, प्रोजेक्ट फोंड्यू का सीएसएस स्प्राइट जेनरेटर, स्प्राइट मास्टर वेब, और स्प्राइटमाइ बुकमार्कलेट।

का स्क्रीनशॉट स्प्राइट मास्टर वेब:
Spritemaster वेब

Martech Zone अपनी संपूर्ण थीम में पृष्ठभूमि इमेजरी का उपयोग नहीं करता है, इसलिए हमें इस समय इस तकनीक को परिनियोजित करने की आवश्यकता नहीं है।

2 टिप्पणियाँ

  1. 1

    प्रतीक्षा करें ... संपूर्ण संग्रह "छवि" (या "विमान") और प्रत्येक उप-छवि (या एनिमेटेड या अंतःक्रियात्मक रूप से बदलते लोगों के मामले में छवियों का उप-समूह) "प्रेत" नहीं है?

    शायद सामान का नाम बदल दिया गया है क्योंकि पिछली बार जब मैंने इस तरह की चीज़ को संभाला था, लेकिन मैं स्प्रे कर सकता था स्प्राइट वह तत्व था जो समाप्त हो रहा था प्रदर्शित किया जा रहा था, न कि बड़े डेटा टेबल से इसे खींच लिया गया था।

    ("स्प्राइट टेबल" ... यही था न?)

    • 2

      हम दो अलग-अलग चीजों पर बात कर रहे होंगे, मार्क। सीएसएस के साथ, आप मूल रूप से निर्देशांक का उपयोग करने के लिए छवि फ़ाइल के कौन से भाग को निर्दिष्ट कर सकते हैं। यह आपको अपनी सभी छवियों को एक 'स्प्राइट' में डालने की अनुमति देता है और फिर सीएसएस के साथ प्रदर्शित करने की इच्छा वाले क्षेत्र को इंगित करता है।

तुम्हें क्या लगता है?

यह साइट स्पैम को कम करने के लिए अकिस्मेट का उपयोग करती है। जानें कि आपका डेटा कैसे संसाधित किया जाता है.