इसे व्यक्त

छवियों का अनुकूलन

अनुकूलन केवल छवि छोटा रखने के लिए आवश्यक स्तर पर छवि की गुणवत्ता के आकार रखने का मतलब है. वहाँ प्रक्रियाओं है कि एक बार बाहर ले जाने के लिए इससे पहले कि वे प्रसव के लिए सर्वर के लिए लोड कर रहे हैं छवियों का अनुकूलन कर सकते हैं लोड कर रहे हैं. उपकरण है कि हम इन छवियों के निर्माण के लिए उपयोग (Photoshop, पटाखे आदि) आमतौर पर उपकरण है कि उपयोगकर्ताओं को वेब इस्तेमाल के लिए छवि का अनुकूलन करने के लिए अनुमति है.
• GIF की जाँच करें देखने के लिए अगर वे एक पैलेट छवि में रंग की संख्या के लिए इसी आकार का उपयोग कर रहे हैं. जब एक छवि 4 रंग और एक 256 रंग पैलेट उपयोग कर रहा है, तो छवि के आगे अनुकूलित हो सकता है

• परिवर्तित GIF, PNG के संभव जहां है और देखने के लिए अगर वहाँ एक बचत है. अधिक बार नहीं, वहाँ है. संकोच नहीं पीएनजी का उपयोग करने के लिए, के रूप में वे पूरी तरह से आमतौर पर इस्तेमाल किया ब्राउज़रों के सबसे द्वारा समर्थित हैं. एक PNG एक GIF क्या करता पारदर्शिता सहित, कर सकते हैं एनीमेशन क्षमताओं की अपेक्षा करें.

सीएसएस sprites में इस्तेमाल किया छवियों के लिए •, प्रेत क्षैतिज रूप में खड़ी एक छोटे फ़ाइल आकार में आमतौर पर परिणाम के लिए विरोध में छवियों की व्यवस्था. इसके अलावा, एक प्रेत में इसी तरह के रंग के साथ छवियों गठबंधन. यह आप आदर्श PNG8 एक में फिट करने के लिए 256 रंग के तहत, रंग गिनती कम रखने में मदद करता है.

• यदि आप एक favicon.ico का उपयोग कर रहे हैं, यह छोटा सा 1K के तहत रखने के लिए, अधिमानतः.

ठीक से पहुंचा / का उपयोग करें छवि का आकार बदला.

हमेशा कोशिश करते हैं और आकार बदला छवियों का उपयोग करें, यानी एक बड़ा छवि की तुलना में आप की जरूरत सिर्फ इसलिए कि तुम और HTML में चौड़ाई और ऊंचाई सेट कर सकते हैं का उपयोग नहीं है. यदि आप पृष्ठ पर एक 100px एक्स 100px छवि प्रदर्शित करने की जरूरत है, तो एक छोटा 200x200px छवि नीचे का उपयोग नहीं करते हैं.

प्रगतिशील छवियाँ

एक वेब ब्राउज़र पहले से ही छवियाँ उत्तरोत्तर renders के. और भी बेहतर करने के लिए, बस "interlaced के विकल्प, या" प्रगतिशील "विकल्प के साथ अपने JPEG छवियों के साथ अपने GIF, या PNG छवियाँ को बचाने के.

वहाँ है कि प्रगतिशील छवि का उपयोग एक वरदान या एक बाधा के रूप में वेब उपयोगकर्ताओं के बीच बहस चल रही है. यह भी एक प्रगतिशील छवि लगभग 20% अपने गैर प्रगतिशील समकक्ष से अधिक वजन का होता है. तो, अगर आपको लगता है कि आप लेआउट छवियों कि यह प्रगतिशील जा रहा है के द्वारा उपयोगकर्ता अनुभव में बाधा नहीं होगा का उपयोग करता है, ऐसा करने के लिए स्वतंत्र महसूस हो रहा है.

जावास्क्रिप्ट HTML दस्तावेज़ के तल पर शामिल करें

यदि आप दस्तावेज़ नहीं है (या पृष्ठ javascripts का उपयोग कर सामग्री के किसी भी गतिशील पीढ़ी) करने के लिए अपने लिपियों में पृष्ठ की सामग्री का हिस्सा सम्मिलित करते हैं, स्क्रिप्ट चाल शरीर टैग के अंत से पहले पृष्ठ के नीचे करने के लिए बयान है, शामिल हैं.
HTTP/1.1 विनिर्देश पता चलता है कि ब्राउज़र मेजबाननाम प्रति समानांतर में कोई दो से अधिक घटकों डाउनलोड. यदि आप एकाधिक मेजबाननाम से अपनी छवियों की सेवा, आप दो से अधिक डाउनलोड करने के लिए समानांतर में हो सकता है. जबकि एक स्क्रिप्ट डाउनलोड कर रहा है, तथापि, ब्राउज़र किसी भी अन्य डाउनलोड विभिन्न मेजबाननाम पर भी शुरू नहीं होगा,.
वहाँ भी तरीके गतिशील स्क्रिप्ट नोड्स को बनाने के लिए और दूरस्थ स्क्रिप्ट लोड के बाद पृष्ठ के AJAX का उपयोग कर भरी हुई है.

आप जावास्क्रिप्ट Externalise

बाहरी जावास्क्रिप्ट फ़ाइलों का उपयोग कर पृष्ठों की तेजी से लोड करने में परिणाम क्योंकि जावास्क्रिप्ट फ़ाइलें ब्राउज़र द्वारा कैश्ड हैं. इनलाइन है जावास्क्रिप्ट HTML दस्तावेज़ में HTML दस्तावेज़ का अनुरोध किया जाता है हर बार डाउनलोड हो. यह वास्तव में HTTP के किए गए अनुरोध की संख्या कम हो सकता है लेकिन यह बाद में HTML दस्तावेज़ का आकार बढ़ जाती है. बाहरी जावास्क्रिप्ट ब्राउज़र द्वारा कैश्ड हैं, HTML दस्तावेज़ का आकार HTTP अनुरोधों की संख्या में वृद्धि के बिना कम है.
कृपया ध्यान दें कि, अगर आपकी साइट पर उपयोगकर्ताओं के प्रति सत्र एक से अधिक पृष्ठ विचार है और आपके पृष्ठों की पुनः उपयोग एक ही स्क्रिप्ट और स्टाइलशीट कई, वहाँ एक बड़ी कैश्ड बाह्य फ़ाइलों से संभावित लाभ है.

आपके जावस्क्रिप्ट फाइलों में पैक

, JavaScripts के मामले में सीएसएस के विपरीत, फाइलें कुछ मानक एल्गोरिदम कि बस रिक्त स्थान या टैब को हटाने से कम फ़ाइल आकार देना होगा का उपयोग crunched सकता है. जावास्क्रिप्ट पैकर का एक उदाहरण http://dean.edwards.name/packer/ यहाँ पाया जा सकता है

किसी भी डुप्लिकेट लिपियों से छुटकारा

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

डोम तत्वों तक पहुँचने जहां संभव न्यूनतम

जावास्क्रिप्ट के साथ डोम तत्वों क्रम में एक और अधिक उत्तरदायी पृष्ठ, तुम चाहिए के लिए इतनी धीमी है:
• पहुँचा तत्वों को कैश संदर्भ
• अद्यतन नोड्स "ऑफ़लाइन" और फिर पेड़ से उन्हें जोड़ने
जावास्क्रिप्ट के साथ लेआउट फिक्सिंग बचें

सामग्री और प्रस्तुति से अलग व्यवहार

बस के रूप में हम से अलग प्रस्तुति सामग्री (XHTML / XML) (सीएसएस / XSLT), हम भी व्यवहार अलग होना चाहिए (जावास्क्रिप्ट). यह विनीत जावास्क्रिप्ट कहा जाता है. बस के रूप में हम बाहरी सीएसएस फ़ाइलों के लिए लिंक, हम बाहरी जावास्क्रिप्ट फ़ाइलों को लिंक करना होगा.

सामग्री (जैसे onmouseover, onclick, आदि) में हार्ड कोडन व्यवहार के बजाय, व्यवहार गतिशील तत्व, वर्गों, और अद्वितीय (आईडी) तत्वों डोम का उपयोग करने के लिए जोड़ा जाना चाहिए. मूलभूत दस्तावेज़, सामग्री, केवल वैध XHTML XML / और कोई जावास्क्रिप्ट को शामिल करना चाहिए.
जावास्क्रिप्ट व्यवहार जोड़ने के द्वारा सामग्री को बढ़ाने चाहिए. सामग्री उपयोगी और जावास्क्रिप्ट (या पूर्ण जावास्क्रिप्ट समर्थन के बिना) के बिना प्रयोग करने योग्य रहना चाहिए.

मैं इस लेख उम्र बचाया है, तो क्षमा करें! मैं स्रोत याद न ... लेकिन यह उपयोगी है, जो हमें दर्शक जिनके लिए हम के लिए साइट के विकास के बारे में पता होना चाहिए के लिए, लग रहा था ... तो मैं यहाँ है

पृष्ठ वजन करने के लिए इंटरनेट कनेक्शन की गति की एक किस्म पर दिए गए पृष्ठ के लिए डाउनलोड समय निर्धारित करने के लिए इस्तेमाल किया जा सकता है. उदाहरण के वैसे, निम्न तालिका लोकप्रिय कनेक्शन की गति का एक संख्या में तीन अलग अलग पृष्ठों के लिए डाउनलोड समय से पता चलता है.

पृष्ठ वजन कम करने का लाभ?

पृष्ठ वजन लाभ दोनों वेबसाइट के मालिकों और उपभोक्ताओं को कम करने के सकारात्मक प्रभाव. संभावित लाभों में शामिल हैं:

1. पृष्ठों तेजी से लोड. पृष्ठ वजन कम करने का सबसे स्पष्ट प्रभाव है कि आपकी वेबसाइट के पृष्ठों आगंतुकों के लिए तेजी से लोड करने के लिए, उनके कनेक्शन की गति की परवाह किए बिना.
2. कम पृष्ठ लोड बार और अधिक आरामदायक आगंतुकों बनाने के लिए. आगंतुकों कम निराश हो जाते हैं और कहीं और जाना है अगर आपके पृष्ठों को जल्दी से लोड होने की संभावना है. दूसरी ओर, धीमी गति से लोड हो रहा है पृष्ठों पक्का तरीके आगंतुकों और संभावित ग्राहकों को खो रहे हैं.
3. तेजी से लोड बार बढ़ा रूपांतरण के लिए योगदान देगा. अधिक आगंतुकों को अब अपनी साइट पर रहना होगा. उनमें से अंत में खरीदारी करते समय, अपने न्यूज़लेटर के लिए साइन अप करने, या अपनी साइट पुस्तक अंकन.
4. अपने ब्रांड धारणा बढ़ाया जाएगा. रिटर्निंग ग्राहकों और पहली बार दर्शकों को समान रूप से अधिक "पेशेवर" के रूप में अपनी साइट और व्यापार का वर्णन अगर अपने पृष्ठों तेजी से लोड करने के लिए इच्छुक हो जाएगा.
5. स्वच्छ, ठोस कोड के साथ पृष्ठों अक्सर और अधिक प्रभावी ढंग से प्राकृतिक खोज इंजन द्वारा अनुक्रमित किया जाएगा.
6. वजन के लिए अनुकूलित पन्ने वास्तव में उच्च यातायात साइटों पर बैंडविड्थ शुल्क की बचत कर सकते हैं. 100.000 पृष्ठों प्रत्येक वजन 150 KB 100,000 प्रत्येक वजन 75 KB पन्नों से अपने ISP से दो बार के रूप में ज्यादा बैंडविड्थ की आवश्यकता होगी. आईएसपी है कि इस्तेमाल किया बैंडविड्थ के लिए या overages के लिए चार्ज के लिए, इस कमी बैंडविड्थ के आरोप में महत्वपूर्ण बचत बना सकते हैं.

निम्न डेटा, में प्रकाशित एक रिपोर्ट पर विचार

यदि XML / XSL के बदल अपने domian है, तो वहाँ कई बार जब हम पुस्तकालय मद में इस्तेमाल किया जा (के लिए फिर से प्रयोग करने योग्य बनाया जा) गतिशील कोड का एक टुकड़ा चाहते हैं. मैं क्या मतलब है, शायद इस उदाहरण परिदृश्य के साथ और अधिक स्पष्ट किया जा सकता है.

कल्पना कीजिए कि आप एक वेबसाइट का निर्माण कर रहे हैं (और एक्सएमएल, XSL transfroms बिल्कुल का उपयोग करके) और पृष्ठों की सबसे टिप्पणियां मॉड्यूल होगा. अच्छी तरह से! तो या तो आप कॉपी या प्रत्येक पृष्ठ (जो मैं कहना है लेकिन रखरखाव और rework एक बुरा सपना है) टेम्पलेट या और भी बेहतर में इस कोड को पेस्ट करने के लिए, आप एक फ़ाइल शामिल है जो कभी जहाँ आप यह चाहते हैं अपने पृष्ठ में खींचा जा सकता है (बनाने ) है ...
तो हम एक XSL शामिल फ़ाइल कैसे बना सकता हूँ और यह एक और XSL फ़ाइल के अंदर शामिल हैं? यहाँ है कैसे ...

बस बातें स्पष्ट करने के लिए ... यहाँ फ़ाइलों के त्वरित सूची है कि आप बना होता है ... यहाँ, हम एक माता पिता कहा जाता है पृष्ठ भोजन में फलों और सब्जियों के बारे में जानकारी सहित जाएगा.

1. XML डेटा फ़ाइल जिस पर परिवर्तन लागू किया जाएगा - food.xml
2. food.xsl मुख्य XSL फ़ाइल है, जो हमारे food.xml बदलना होगा
3. inc_fruits.xsl - XSL फ़ाइल है कि फल डेटा प्रस्तुत करना होगा शामिल
4. inc_vegtables.xsl - XSL फ़ाइल कि vetetables डेटा प्रस्तुत करना होगा शामिल

मैं न लगता है कि मैं बहुत समझाने, ऊपर तत्वों के लिए कोड, आत्म व्याख्यात्मक हो जाएगा ...

FOOD.XML


<?xml version="1.0" encoding="ISO-8859-1"?>
<?xml-stylesheet type="text/xsl" href="food.xsl"?>
<food>
<date>July 2008</date>
<description>All about things we eat everyday</description>
<fruits type="tropical">
<item name="mango" moreinfo="http://www.mango.com">Mango is the king of fruits</item>
<item name="banana" moreinfo="http://www.banana.com">Banana once a day , keeps the doctor away</item>
<item name="orange" moreinfo="http://www.orange.com">Orange is the color and rich in vitamin C</item>
<item name="Papaya" moreinfo="http://www.papaya.com">Papaya - Hot when raw, cold when ripe</item>
</fruits>

<vegetables>
<item name="spinach" moreinfo="http://www.spinach.com">Spinach is full of iron</item>
<item name="asparagus" moreinfo="http://www.asparagus.com">Asparagus contains loads of vitamin D </item>
<item name="fenugreek" moreinfo="http://www.fenugreek.com">Fenugreek is rich in vitamin C</item>
</vegetables>
</food>


<?xml version="1.0" encoding="ISO-8859-1"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:include href="inc_fruits.xsl" />
<xsl:include href="inc_vegetables.xsl" />
<xsl:template match="/">
<html>
<head>
<title>Title</title>
</head>
<body>
<h3><xsl:value-of select="/food/description" /></h3>
Modification Date : <xsl:value-of select="/food/date" />
<hr/>
<h5> About Fruits</h5>
<xsl:call-template name="about_fruits"/>

<hr/>
<h5> About Vegetables</h5>
<xsl:call-template name="about_vegetables"/>

<hr/>
</ Body>
</ Html>
</ Xsl: टेम्पलेट>
</ Xsl: स्टाइलशीट>

<?xml version="1.0" encoding="utf-8"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:output method="html" encoding="iso-8859-1" />
<xsl:template name="about_fruits">
<xsl:for-each select="/food/fruits/item/@*">
attribute name : <xsl:value-of select="name()"/>
attribute value : <xsl:value-of select="."/> <br />
</xsl:for-each>
</xsl:template>
</xsl:stylesheet>

<?xml version="1.0" encoding="utf-8"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:output method="html" encoding="iso-8859-1" />
<xsl:template name="about_vegetables">
<xsl:for-each select="/food/vegetables/item/@*">
attribute name : <xsl:value-of select="name()"/>
attribute value : <xsl:value-of select="."/> <br/>
</xsl:for-each>
</xsl:template>
</xsl:stylesheet>

सब से ऊपर यहाँ फ़ाइलें (253 डाउनलोड)