मोबाइल साइट की गति अनुकूलन

मोबाइल इंटरनेट की वृद्धि के साथ, मोबाइल साइटों की गति को अनुकूलित करने की आवश्यकता बढ़ रही है। यहां तक ​​कि एंड्रॉइड, आईओएस, वेबओएस, ब्लैकबेरी ओएस, आदि पर सबसे आधुनिक स्मार्टफोन में 1Ghz से अधिक नहीं की आवृत्ति वाले प्रोसेसर हैं, और 3 जी की गति काफी धीमी मानी जा सकती है (डाउनलोड की गति डीएसएल से 3 गुना कम है)।

मोबाइल उपकरणों को "बड़ी" मशीनों की समस्याएं विरासत में मिली हैं: http के अनुरोधों की संख्या से जावास्क्रिप्ट के प्रदर्शन तक।

मोबाइल सुविधाएँ

इस तथ्य के अलावा कि वे अक्सर आपकी जेब में फिट होते हैं और खोने में आसान होते हैं, मोबाइल उपकरणों और डेस्कटॉप के बीच कई महत्वपूर्ण अंतर हैं:

• कम स्क्रीन रिज़ॉल्यूशन;
• धीमे कनेक्शन;
• सीमित कैश आकार;
• कई अलग-अलग डिवाइस और फॉर्म कारक;
• कम प्रोसेसर शक्ति;
• व्यापक HTML5 समर्थन
• अपेक्षाकृत नए ब्राउज़र (वे इस दुनिया में IE6 के बारे में नहीं जानते हैं)।

सामान्य सिफारिशें

"बड़ी साइटों" की अधिकांश प्रदर्शन समस्याएं मोबाइल साइटों में अंतर्निहित हैं, इसलिए ऊपर सूचीबद्ध कई तकनीकें डेस्कटॉप अनुकूलन से आई हैं।

• पाठ डेटा को संपीड़ित करने के लिए gzip का उपयोग करें;
• HTML दस्तावेज़ के शीर्षक में सीएसएस रखो, और पृष्ठ के नीचे जावास्क्रिप्ट;
• जावास्क्रिप्ट और सीएसएस फ़ाइलों को मिलाएं जो पूरी साइट पर उपयोग की जाती हैं। यह HTTP अनुरोधों की संख्या को कम करेगा, जो मोबाइल साइटों के लिए अत्यंत महत्वपूर्ण है;
• सीएसएस और जावास्क्रिप्ट कोड के कम से कम उपयोग और obfuscation;
• जेएस और सीएसएस जो साइट पर केवल 1 बार उपयोग किए जाते हैं, साथ ही छोटे जेएस और सीएसएस (5 केबी तक), सीधे पृष्ठ में शामिल करना बेहतर है, अर्थात। अलग-अलग फाइलों में न डालें;
• कई मोबाइल ब्राउज़रों (उदाहरण के लिए, एंड्रॉइड या ओपेरा मोबाइल) में 4-6 से अधिक नहीं कनेक्शन की संख्या पर एक सामान्य सीमा है। ऐसे ब्राउज़रों के लिए डोमेन शार्किंग का उपयोग केवल साइट की गति को नुकसान पहुंचा सकता है;
• उसी समय, एंड्रॉइड ब्राउज़र HTTP पाइपलाइनिंग का समर्थन करता है, जो आपको एक कनेक्शन में एक बार में सर्वर को 3 अनुरोध भेजने की अनुमति देता है। यह सुनिश्चित करने के लिए याद रखें कि सर्वर HTTP पाइपलाइनिंग का भी समर्थन करता है;
• फ़ाइलों को सही तरीके से संपीड़ित करना बहुत महत्वपूर्ण है (गुणवत्ता में दृश्यमान हानि के बिना) - उदाहरण के लिए, Smush.it - इस पर अधिक ;
• बचें या कम से कम कैश पुनर्निर्देशित करें।
• iOS के लिए, क्विकटाइम रेफरेंस मूवीज का उपयोग करें, इससे आप अपने इंटरनेट कनेक्शन की क्षमताओं के आधार पर आगंतुक को विभिन्न वीडियो फ़ाइलों को "दे" सकते हैं।
• जहां भी संभव हो, वेबसॉकेट्स का लाभ उठाएं (पूर्ण समर्थन केवल iOS सफारी 4.2-4.3 में उपलब्ध है, जो कि ओपेरा मोबाइल 11.1 में आंशिक है)।

HTML और CSS का अनुकूलन

मोबाइल ब्राउज़र में HTML5 और CSS3 के लिए व्यापक समर्थन आपको वेबसाइट अनुकूलन के लिए सबसे आधुनिक तकनीकों का उपयोग करने की अनुमति देता है:

• HTML कोड बेहद सरल होना चाहिए। HTML5 अर्थ तत्वों का उपयोग करें, निर्दिष्ट करें <! DOCTYPE html>, वैकल्पिक xmlns विशेषताओं को बाहर करें। डिव और कक्षाओं की संख्या को कम करने का भी प्रयास करें;
• इनपुट का उपयोग कम बार करने का प्रयास करें, और यदि आप इसका उपयोग करते हैं, तो एचटीएमएल 5 प्रारूपों में;
• पृष्ठभूमि चित्रों के बजाय सीएसएस ग्रेडिएंट का उपयोग करें - यह सर्वर पर कॉल की संख्या को काफी कम कर देगा;
• CSS कई अन्य उपयोगी सुविधाएँ प्रदान करता है, जिनमें से उपयोग छवियों (छाया, गोलाकार सीमाओं, svg और कैनवास पृष्ठ में एम्बेडेड कई पृष्ठभूमि) की तुलना में अधिक प्रभावी है।

छवि अनुकूलन

सर्वर पर अनावश्यक कॉल के खिलाफ लड़ाई के साथ, डाउनलोड की गई फ़ाइलों के आकार को कम करना बहुत महत्वपूर्ण है। इस परिप्रेक्ष्य में, छवि अनुकूलन सबसे महत्वपूर्ण तत्व है।

• लोगो और आइकन को अनुकूलित करने के लिए CSS स्प्राइट्स का उपयोग करें;
• html में और css बेस 64 में छवियों को सांकेतिक शब्दों में बदलना - एक बहुत ही कुशल तरीका है, क्योंकि यह अधिकांश मोबाइल ब्राउज़र द्वारा समर्थित है, और सर्वर साइड पर एन्कोडिंग होता है। PHP - base64_encode () के अतिरिक्त, आप कैनवस - toDataURL () से एचटीएमएल 5 तकनीक का उपयोग कर सकते हैं;
• तस्वीरों के बजाय यूनिकोड में इमोजी आइकन सांकेतिक शब्दों में बदलना (iOS 2.2 के बाद से, साथ ही कई जापानी फोन में समर्थित है);

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

/* Screens bigger than 480px */ @media only screen and (min-device-width: 481px) { #header { background-image: url(header-full.png); } } 

उपरोक्त कोड यह निर्धारित करता है कि उपयोगकर्ता की स्क्रीन की चौड़ाई 480px से अधिक है और ब्राउज़र को हेडर-फुल डाउनलोड करने का निर्देश देता है।
लेकिन निम्न कोड टुकड़ा, यह निर्धारित करते हुए कि स्क्रीन की चौड़ाई 480px से कम है, ब्राउज़र को छोटे स्क्रीन के लिए अनुकूलित चित्र प्रदान करता है:

 /* Screens smaller than 480px */ @media only screen and (max-device-width: 480px) { #header { background-image: url(header-small.png); } } 

साइट और ब्राउज़र के बीच इस समझ के परिणामस्वरूप, मोबाइल डिवाइस पर डाउनलोड किए गए डेटा का आकार काफी कम हो जाएगा।

हालांकि, सबसे पहले, उपयोगकर्ता की सुविधा का ख्याल रखें। एक ही सिद्धांत (मोबाइल और डेस्कटॉप डिवाइस के लिए अलग-अलग सामग्री) का उपयोग करके, आप उच्च-रिज़ॉल्यूशन स्क्रीन वाले उपयोगकर्ताओं के लिए साइट को सुखद बना सकते हैं, जबकि एक ही समय में अन्य आगंतुकों को नुकसान नहीं पहुंचा सकते हैं।
उदाहरण के लिए, iPhone 4 उपयोगकर्ता पहले से ही अपने फोन स्क्रीन पर उच्च DPI चित्र (जैसे 300) होने के आदी हैं। और यदि आप चाहते हैं कि आपकी साइट रेटिना स्क्रीन पर खराब दिखे, तो आपको उच्च-रिज़ॉल्यूशन चित्रों का एक और अलग सेट तैयार करना होगा और उन्हें सीएसएस मीडिया क्वेरी का उपयोग करके अपलोड करना होगा।

 /* High dpi */ @media only screen and (min-resolution: 300dpi), only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min--moz-device-pixel-ratio: 1.5) { #header { background-image: url(header-300dpi.png); } } /* Low dpi */ @media only screen and (max-resolution: 299dpi), only screen and (-webkit-max-device-pixel-ratio: 1.5), only screen and (max--moz-device-pixel-ratio: 1.5) { #header { background-image: url(header-72dpi.png); } } 

यह वास्तव में मामला है जब यह उपयोगकर्ता की सुविधा के पक्ष में प्रदर्शन के लायक है।

कनेक्शन की गति अनुकूलन

Android 2.2 Froyo के साथ शुरू, डेवलपर्स के पास डिवाइस से वर्तमान प्रकार के इंटरनेट कनेक्शन पर डेटा प्राप्त करने का अवसर है। यह navigator.connection ऑब्जेक्ट का उपयोग करके कार्यान्वित किया जाता है।

यहां एक डिवाइस से प्राप्त डेटा का एक उदाहरण है जो 3 जी नेटवर्क पर चलता है:

navigator = {
connection: {
"type": "4",
"UNKNOWN": "0",
"ETHERNET": "1",
"WIFI": "2",
"CELL_2G": "3",
"CELL_3G": "4"
}
};
कनेक्शन प्रकार "4" है, जो CELL_3G से मेल खाता है। एक सरल स्क्रिप्ट का उपयोग करके, आप कनेक्शन के प्रकार को निर्धारित कर सकते हैं और इस जानकारी को एचटीएमएल तत्व में सीएसएस वर्ग के रूप में पास कर सकते हैं।

 // Initialize variables var connection, connectionSpeed, htmlNode, htmlClass; // Create a custom object fallback if navigator.connection isn't available connection = navigator.connection || {'type':'0'}; // Set connectionSpeed switch(connection.type) { case connection.CELL_3G: // 3G connectionSpeed = 'mediumbandwidth'; break; case connection.CELL_2G: // 2G connectionSpeed = 'lowbandwidth'; break; default: // WIFI, ETHERNET, UNKNOWN connectionSpeed = 'highbandwidth'; } // set the connection speed on the html element, ie <html class="lowbandwidth"> htmlNode = document.body.parentNode; htmlClass = htmlNode.getAttribute('class') || ''; htmlNode.setAttribute('class', htmlClass + ' ' + connectionSpeed); 

परिणामस्वरूप, कम गति वाले कनेक्शन को परिभाषित करते हुए, हम CSS को विज़िटर के ब्राउज़र में उपयोग करके अनुकूलित चित्र पास करते हैं:

 .highbandwidth .logo { background-image:url('logo-high.jpg'); } .mediumbandwidth .logo { background-image:url('logo-medium.jpg'); } .lowbandwidth .logo { background-image:url('logo-low.jpg'); } 

और फिर भी, उपयोगकर्ताओं को पसंद से वंचित न करें (हम तानाशाह नहीं होंगे)। इसलिए, आम पसंद के अलावा:

• desktop | mobile साइट संस्करण desktop | mobile desktop | mobile

एक विकल्प भी दें:

• कनेक्शन की गति: High | Medium | Low High | Medium | Low

सरल नियमों का उपयोग करें - "यदि पिक्सेल दिखाई नहीं देते हैं, तो उन्हें डाउनलोड करने की आवश्यकता नहीं है", लेकिन साथ ही साथ "आपको उपयोगकर्ता के लिए निर्णय नहीं लेना चाहिए, आप उसे सुझा सकते हैं"।

कैशिंग

यदि अधिकांश मामलों में डेस्कटॉप के मामले में समाधान बाहरी फ़ाइलों के पक्ष में होगा, तो मोबाइल के साथ इसके विपरीत होने की संभावना है। कैश के छोटे आकार के कारण, बड़ी और दीर्घकालिक बचत के बारे में बात करने की आवश्यकता नहीं है। पृष्ठ पुनः लोड करने की गति के अनुकूलन के लिए कई सुझाव दिए गए हैं:

• कैश अजाक्स;
• दूर के भविष्य के लिए फ़ाइलों की प्रासंगिकता के हेडर सेट करें (दूर-भविष्य कैश समाप्ति हेडर);
• कुकीज़ से बचें, इसके बजाय लोकलस्टोरेज का उपयोग करें (कुकीज़ HTTP-रिक्वेस्ट द्वारा प्रेषित होती हैं, संचरित डेटा का आकार काफी बढ़ाती हैं)। LocalStorage और SessionStorage HTML5 प्रौद्योगिकियाँ हैं जो कुकीज़ का अधिक प्रभावी विकल्प हैं। बाहरी सीएसएस और जावास्क्रिप्ट भी वहां संग्रहीत किया जा सकता है;

लोकलस्टोरेज और सेशनस्टोरेज के लिए एक महत्वपूर्ण सीमा यह है कि वे केवल टाइप स्ट्रिंग के डेटा को स्टोर कर सकते हैं। इसलिए, आपको पहले डेटा को एक स्ट्रिंग प्रारूप में अनुवाद करना चाहिए, और बाद में इसे JSON.stringify() और JSON.parse() का उपयोग करके मूल में पुनर्स्थापित करना चाहिए:

 var user = { firstName: 'Joe', lastName: 'Schmoe', age: 40 } // Store the object localStorage.userInfo = JSON.stringify(user); // Retrieve the object var user = JSON.parse(localStorage.userInfo); 

इन ऑब्जेक्ट्स में संग्रहीत डेटा का आकार ब्राउज़र से ब्राउज़र तक भिन्न हो सकता है, लेकिन अधिकांश के लिए 5 एमबी पर्याप्त होना चाहिए।
एक दिलचस्प बिंदु - एंड्रॉइड और ब्लैकबेरी ओएस पर डिवाइस डिवाइस को चालू / बंद करने के बाद भी कैश को स्टोर कर सकते हैं, उसी समय, आईफोन यह दावा नहीं कर सकता।

स्मार्टफोन	iPhone 4	गैलेक्सी एस	नेक्सस एस	ब्लैकबेरी मशाल
ओएस / वेर	iOS / 4.3	Android 2.2	Android 2.3	ब्लैकबेरी 6
स्थायी *	0	4	4	25
स्मृति में **	100	4	4	25

गोलियाँ	iPad 1	आईपैड 2	XOOM
ओएस / वेर	iOS / 4.3	iOS / 4.3	Android 3.0
स्थायी *	0	0	20
स्मृति में **	20	50	20

* स्थायी - यह वह कैश है जो ब्राउज़र को पुनरारंभ करने के बाद भी बना रहता है।
** मेमोरी में - यह एक कैश है जिसे रैम में संग्रहीत किया जाता है (उदाहरण के लिए, अनुप्रयोगों के बीच स्विच करते समय)। ब्लेज़ ब्लॉग पर मोबाइल उपकरणों पर कैश के बारे में और पढ़ें।

जावास्क्रिप्ट अनुकूलन

मोबाइल उपकरणों में अपर्याप्त प्रोसेसर शक्ति, एक बार फिर लोड को कम करने के लिए संघर्ष को प्रासंगिक बनाती है। इसलिए Google के शोध से पता चलता है कि जावास्क्रिप्ट कोड के प्रत्येक 1KB को पार्स करना लगभग 1ms है।

• जावास्क्रिप्ट टाइमआउट एनिमेशन से बचें, इसके बजाय CSS3 के संक्रमण का उपयोग करना बेहतर है (लेकिन सभी ब्राउज़र इस तकनीक का पूरी तरह से समर्थन नहीं करते हैं, इसलिए आपके पास इस मामले के लिए "अतिरिक्त" पुराने-स्कूल विकल्प होना चाहिए)
• स्पर्श उपकरणों पर, हैंडलर क्लिक करने से 300-500 एमएस की देरी हो जाती है, जो कि बहुत अधिक है, इसलिए, ऐसे उपकरणों के लिए "देशी" हैंडलर्स - ऑनटचेंड का उपयोग करना बेहतर होता है;
• केवल बड़े ढांचे (जैसे jQuery) के आवश्यक भागों का उपयोग करें, उनमें से पूरे नहीं। यह छोटे चौखटे (XUI, zepto.js, microjs) का उपयोग करने के लिए और भी अधिक इष्टतम होगा;
• जावास्क्रिप्ट को रूपों में कम से कम करने का प्रयास करें, एचटीएमएल 5 का उपयोग करना बेहतर है, जहां संभव हो;
• एचटीएमएल 5 की एक और उपयोगी उपलब्धि डेटाबेस का उपयोग है जो क्लाइंट साइड पर संग्रहीत है। मौजूदा समाधानों में, indexedDB ने सबसे अधिक लोकप्रियता हासिल की (हमें उम्मीद है कि जल्द ही इस तकनीक को मोबाइल ब्राउज़र द्वारा समर्थित किया जाएगा);
• ajax (onhashchange - इतिहास के प्रबंधन के लिए) का उपयोग करें और केवल अनुरोध करें कि जिसे बदलने की आवश्यकता है;
• मुख्य सामग्री के लिए जेएस अतुल्यकालिक रूप से डाउनलोड करें;
• देरी को कम करना। उदाहरण के लिए, जीमेल मोबाइल टीम ने "लज़ीज़" लोड मॉड्यूल का एक दिलचस्प तरीका प्रस्तावित किया है;

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

निष्कर्ष

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

यह दिलचस्प है कि ज्यादातर लोग स्मार्टफोन का उपयोग करते समय साइटों के धीमे संचालन के अधिक असहिष्णु हैं। अक्सर यह विशिष्ट कार्यों के कारण होता है जिन्हें कुछ सेकंड के भीतर हल करने की आवश्यकता होती है (उदाहरण के लिए, रेस्तरां का पता निर्दिष्ट करें)।

यह याद रखना महत्वपूर्ण है कि हमारा कार्य कार्यक्षमता और प्रयोज्य में कम से कम नुकसान के साथ वेबसाइट लोडिंग गति को कम करना है।