सीएसएस स्प्राइट्ससह आपल्या साइटला गती देत ​​आहे

spritmaster वेब

मी या साइटवर पृष्ठाच्या गतीबद्दल थोडीशी लिहीत आहे आणि आमच्या ग्राहकांच्या साइटवर आम्ही करतो त्या विश्लेषण आणि सुधारणांचा हा एक महत्वाचा भाग आहे. शक्तिशाली सर्व्हरकडे जाण्यासारख्या साधनांचा वापर करण्याऐवजी सामग्री वितरण नेटवर्क, अशी बर्‍याच प्रोग्रामिंग तंत्र आहेत जी सरासरी वेब विकसक वापरू शकतात.

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

सीएसएसचा एक घटक जो बर्‍याचदा कमी केला जातो सीएसएस स्प्राइट्स. जेव्हा एखादा वापरकर्ता आपल्या वेबसाइटला भेट देतो, तेव्हा आपल्याला कदाचित हे लक्षात येणार नाही की ते पृष्ठासाठी फक्त एक विनंती करत नाहीत. ते एकाधिक विनंत्या करापृष्ठासाठी, कोणत्याही शैली पत्रकांसाठी, कोणत्याही संलग्न जावास्क्रिप्ट फायलींसाठी आणि नंतर प्रत्येक प्रतिमेसाठी विनंती. आपल्याकडे थीम असल्यास ज्यात सीमा, नेव्हिगेशन बार, बॅकग्राउंड, बटणे इत्यादींसाठी प्रतिमांची मालिका आहे ... ब्राउझरला आपल्या वेब सर्व्हरवरून एकावेळी प्रत्येकाची विनंती करावी लागेल. हजारो अभ्यागतांकडून गुणाकार करा आणि आपल्या सर्व्हरवर केलेल्या दहा हजारो विनंत्या त्या असू शकतात!

हे यामधून आपली साइट मंदावते. ए संथ साइटवर प्रतिबद्धता आणि रूपांतरणांवर नाटकीय प्रभाव पडतो जे आपले प्रेक्षक करतात. महान वेब विकसक वापरणारी एक रणनीती म्हणजे सर्व प्रतिमा एकाच फाइलमध्ये ठेवणे… म्हणतात स्प्राइट. आपल्या प्रत्येक फाईल प्रतिमांसाठी विनंती करण्याऐवजी, आता फक्त एका स्प्राइट प्रतिमेसाठी फक्त एक विनंती आवश्यक आहे!

आपण याबद्दल वाचू शकता सीएसएस-ट्रिक्स सीएसएस स्प्राईट्स कसे कार्य करतात or स्मॅशिंग मॅगझिनच्या सीएसएस स्प्राइट पोस्ट. माझा मुद्दा त्यांचा वापर कसा करायचा हे दर्शविण्यासाठी नाही, फक्त आपला विकास कार्यसंघ साइटवर त्यांचा समावेश असल्याचे सुनिश्चित करण्यासाठी सल्ला देण्यासाठी. सीएसएस युक्त्या प्रदान केलेल्या उदाहरणात 10 विनंत्या आणि 10 केबी पर्यंत जोडल्या गेलेल्या 20.5 प्रतिमा दर्शविल्या जातात. जेव्हा एका स्प्राईटमध्ये एकत्र केले जाते, तेव्हा ते आहे 1 विनंती जी 13 केबी आहे! 9 प्रतिमांसाठी राऊंड ट्रिप विनंती आणि प्रतिसाद वेळा आता संपल्या आहेत आणि डेटाचे प्रमाण 30% पेक्षा जास्त कमी झाले आहे. आपल्या साइटवरील अभ्यागतांच्या संख्येनुसार गुणाकार करा आणि आपण खरोखर काही संसाधने दाढी करणार आहात!

ग्लोलनवअगोदर निर्देश केलेल्या बाबीसंबंधी बोलताना सफरचंद नेव्हिगेशन बार एक उत्तम उदाहरण आहे. प्रत्येक बटणावर काही राज्ये असतात ... आपण पृष्ठावर असलात, पृष्ठापासून दूर असलात किंवा बटणावर कुरतडणे. सीएसएस बटणाचे समन्वय परिभाषित करते आणि वापरकर्त्याच्या ब्राउझरला योग्य स्थितीचा प्रदेश प्रस्तुत करते. ही सर्व राज्ये एकाच ग्राफिकमध्ये एकत्र कोसळली आहेत - परंतु शैली पत्रकात निर्दिष्ट केल्यानुसार प्रदेशानुसार प्रदर्शित प्रदेश.

आपल्या विकसकांना साधने आवडत असल्यास, तेथे एक टन आहे जे त्यांना मदत करू शकेल कंपास सीएसएस फ्रेमवर्क, रिक्वेस्टरेड्यूस एएसपी.नेट, सीएसएस-स्प्राइटर रुबीसाठी, CSSSprite स्क्रिप्ट फोटोशॉपसाठी, स्प्राइटपॅड, स्प्राइटराइट, SpritCow, झिरोस्प्रीट्स, प्रोजेक्ट फोंड्यूचा सीएसएस स्प्राइट जनरेटर, स्प्राइट मास्टर वेब, आणि ते SpritMe बुकमार्क.

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

Martech Zone त्याच्या थीममध्ये पार्श्वभूमीच्या प्रतिमेचा उपयोग होत नाही, म्हणून आम्हाला यावेळी हे तंत्र तैनात करण्याची गरज नाही.

2 टिप्पणी

  1. 1

    प्रतीक्षा करा ... संपूर्ण संग्रह “प्रतिमा” (किंवा “विमान”) आणि प्रत्येक उप-प्रतिमा (किंवा अ‍ॅनिमेटेड किंवा परस्पर बदलणार्‍या गोष्टींच्या प्रतिमांचा उपसमूह) “स्प्राइट” नाही?

    मी जेव्हा या प्रकारची हाताळणी केली तेव्हापासून कदाचित सामग्रीचे नाव बदलले गेले असेल परंतु मी स्प्राईटची शपथ घेतल्यामुळे तो प्रदर्शित झाला की ती उघडली गेली, ती उघडली गेली नाही.

    (“स्प्राइट टेबल”… ते तर नव्हते ना?)

    • 2

      आम्ही दोन वेगळ्या गोष्टी बोलत आहोत मार्क. सीएसएस सह, आपण मूलभूतपणे निर्देशांक वापरुन प्रदर्शित करण्यासाठी प्रतिमा फाईलचा कोणता 'भाग' निर्दिष्ट करू शकता. हे आपल्याला आपल्या सर्व प्रतिमा एकाच 'स्प्राइट' मध्ये ठेवू देते आणि नंतर आपण सीएसएस सह प्रदर्शित करू इच्छित असलेल्या क्षेत्राकडे निर्देशित करते.

तुला काय वाटत?

ही साइट स्पॅम कमी करण्यासाठी अकिस्मेट वापरते आपल्या टिप्पणी डेटावर प्रक्रिया कशी केली जाते ते जाणून घ्या.