तपाइँको साइटलाई CSS Sprites को साथ स्पीड गर्दै

spritmaster वेब

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

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

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

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

तपाईं यसको बारेमा पढ्न सक्नुहुन्छ CSS स्प्रीट्सले कसरी CSS - ट्रिकहरूमा कार्य गर्दछ or Smashing Magazine's CSS Sprit पोष्ट मेरो पोइन्टले तपाईलाई कसरी प्रयोग गर्ने भनेर देखाउनको लागि होईन, केवल तपाईलाई सल्लाह दिनको लागि तपाईको विकास टोलीले उनीहरूलाई साइटमा समावेश गर्दछ। CSS ट्रिक्सले प्रदान गरेको उदाहरणले १० वटा छविहरू देखाउँदछ जुन १० अनुरोधहरू हुन् र २०..10 केबी सम्म थप्दछ। जब एकल स्प्राइटमा भेला हुन्छ, यो हो १ अनुरोध जुन १k किबी हो! राउन्ड ट्रिप अनुरोध र images छविहरूका लागि प्रतिक्रिया समयहरू अब गएका छन् र डाटाको मात्रा 9०% भन्दा बढि कम गरियो। तपाईको साइटमा आगन्तुकहरूको संख्याले गुणन गर्नुहोस् र तपाईले केहि स्रोतहरू श्याभ गर्न जाँदै हुनुहुन्छ!

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

यदि तपाइँका विकासकर्ताहरूले उपकरणहरू मन पराउँछन् भने, त्यहाँ त्यहाँ एक टोन छन् जसले तिनीहरूलाई मद्दत गर्न सक्दछ, सहित कम्पास CSS फ्रेमवर्क, अनुरोध ASP.NET का लागि, सीएसएस- Spriter रुबीका लागि, CSSSprite स्क्रिप्ट फोटोशपका लागि, SpritPad, SpritRight, SpriteCow, ZeroSprites, प्रोजेक्ट फन्डुको सीएसएस स्प्राइट जेनरेटर, स्प्रिट मास्टर वेबSpritMe बुकमार्केट।

स्क्रिनसटको स्प्रिट मास्टर वेब:
spritmaster वेब

Martech Zone यस विषयवस्तुको पृष्ठभूमि इमेजरी प्रयोग गर्दैन, त्यसैले हामी यस समयमा यस प्रविधी को तैनात गर्नु पर्दैन।

2 टिप्पणिहरु

  1. 1

    प्रतीक्षा गर्नुहोस् ... सम्पूर्ण संग्रह "छवि" (वा "प्लेन") होईन, र प्रत्येक उप-छवि (वा एनिमेटेड वा अन्तर्क्रियात्मक रूपमा व्यक्तिहरूलाई परिवर्तन गर्ने सन्दर्भमा छविहरूको उप-समूह) एक "स्प्राइट" हो?

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

    ("स्प्राइट तालिका" ... त्यो हो कि होइन?)

    • 2

      हामी दुई फरक कुरा गर्दैछौं, मार्क। सीएसएसको साथ, तपाईं मूल रूपमा छवि निर्देशकको कुन 'भाग' निर्दिष्ट गर्न प्रयोग निर्देशांकहरू प्रदर्शन गर्न सक्नुहुन्छ। यसले तपाईंलाई तपाईंको सबै छविहरू एकल 'sprit' मा राख्न अनुमति दिन्छ र त्यसपछि केवल तपाईंले CSS मार्फत प्रदर्शन गर्न चाहानु भएको क्षेत्रमा मात्र देखाउँदछ।

तिम्रो के बिचार छ?

यो साइट स्प्याम कम गर्न Akismet को उपयोग गर्दछ। जान्नुहोस् कि तपाईंको डेटा कसरी संसाधित छ.