सबसे सस्ते सस्ते फोन पर फास्ट पेज लोड हो रहा है

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


Jio Phone

यदि साइट अपने काम की उच्च गति सुनिश्चित करने के उद्देश्य से प्रौद्योगिकियों पर आधारित है, तो हर कोई इससे लाभान्वित होगा - दोनों सरल सस्ते फोन के मालिक और जो लोग ताजा शक्तिशाली स्मार्टफोन से वेब पेज देखते हैं।

स्थिति अवलोकन

जिन डिवाइसों के बारे में हम बात कर रहे हैं, फीचर फोन, वे सस्ते हैं। इसलिए, उनके पास कमज़ोर हार्डवेयर क्षमताएं हैं। इसलिए, वे धीमी सीपीयू का उपयोग करते हैं (उदाहरण के लिए, एक सस्ते फोन का प्रोसेसर शीर्ष स्मार्टफोन के प्रोसेसर की तुलना में 6 गुना धीमा हो सकता है)। वे बहुत कम रैम स्थापित करते हैं (यह 256-512 एमबी के क्षेत्र में कुछ हो सकता है, आमतौर पर 4 जीबी से कम)। डेटा संग्रहीत करने के लिए आंतरिक मेमोरी की मात्रा पर वही लागू होता है, जो आमतौर पर 4 जीबी से अधिक नहीं होता है। ऐसे फोन में अक्सर टच स्क्रीन नहीं होती है। इसके बजाय, उनके पास नेविगेशन उद्देश्यों के लिए उपयोग किए जाने वाले कीबोर्ड और सरल जॉयस्टिक हैं। सीडीपीवी दिखाता है कि एक समान फोन कैसे दिख सकता है।

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


शीर्ष 10 आधुनिक स्मार्टफोन: प्रोसेसर प्रदर्शन (2019 की पहली छमाही)

ऊपर 2019 में 10 सबसे अधिक बिकने वाले स्मार्टफोन के प्रदर्शन अध्ययन के परिणाम हैं। यह अध्ययन गीकबेंच 4 बेंचमार्क का उपयोग करके आयोजित किया गया था। यहां, ऊपरी भाग में, आप लोकप्रिय सस्ती फोन - नोकिया 3110 के परीक्षा परिणाम देख सकते हैं।

पृष्ठों की जावास्क्रिप्ट सामग्री मुख्य रूप से एकल-कोर मोड में निष्पादित की जाती है (यहां यह याद रखने योग्य है कि जेएस कोड, इसकी प्रकृति से, बाकी वेब सामग्री का "अधिक थ्रेडेड" है), इसलिए जावास्क्रिप्ट प्रदर्शन प्रोसेसर क्षमताओं से बंधा हुआ है। इससे पता चलता है कि विकासशील देशों के लिए वेब परियोजनाओं के बारे में सोचते समय, आपको वहां उपयोग किए जाने वाले उपकरणों की विशेषताओं को याद रखना होगा।

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

सामान्य जानकारी

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

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


सस्ते फोन

स्मार्टफोन क्षमताओं वाले सस्ते फोन का बाजार 2017 से काफी बढ़ गया है। उम्मीद है कि 2019 में दुनिया भर में इस तरह के लगभग 400 मिलियन डिवाइस बेचे जाएंगे।

कम लागत वाले हैंडसेट बाजार की वृद्धि इस तथ्य से सुगम थी कि नोकिया ने अपने पुराने लोकप्रिय मॉडल, जैसे कि नोकिया 3110 और 8110 ( यहां काईओएस के साथ नोकिया 8110 पर वेब पेज डिबगिंग के लिए एक गाइड है) को पुनर्जीवित किया। भारत में, रिलायंस जियो फोन अपने उपयोगकर्ताओं को वेब संसाधनों के लिए एक सस्ता, आधुनिक मोबाइल एक्सेस प्रदान करते हैं। Jio ने KaiOS के विकास में योगदान दिया है, एक लिनक्स-आधारित ऑपरेटिंग सिस्टम है जिसे सरल सस्ती फोन के लिए डिज़ाइन किया गया है।

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


कम लागत वाले फोन के लिए तैयार किए गए विभिन्न प्रोजेक्ट

पिछली छवि Google छवियां लाइट और फेसबुक mBasic परियोजनाओं की स्क्रीन दिखाती है। ये परियोजनाएं सरल फोन पर जल्दी से लोड होती हैं, वे ग्राहक स्क्रिप्ट की क्षमताओं पर कम से कम भरोसा करते हैं। एक और स्क्रीनशॉट Proxx गेम है, जो कि लिपियों पर बहुत अधिक निर्भर है, लोडिंग को गति देने के लिए आक्रामक कोड पृथक्करण का उपयोग करता है।

सस्ती फोन की सीमाएं

विकासशील देशों में निम्न-अंत वाले फ़ोन उपयोगकर्ता तीन कारकों द्वारा सीमित हैं:

• सस्ती उच्च गुणवत्ता वाले उपकरणों की एक छोटी संख्या।
• उच्च गति संचार नेटवर्क की दुर्गमता।
• डेटा ट्रांसफर की उच्च लागत।

इन सीमाओं को उन लोगों के लिए याद किया जाना चाहिए जो "फीचर फोन के प्रिज़्म" के माध्यम से वेब विकास की धारणा में ट्यून करना चाहते हैं। यदि हम इस तरह के फोन की सीमाओं और पर्यावरण के बारे में अधिक विस्तार से बात करते हैं, जिसमें उनका उपयोग किया जाता है, तो हमें निम्नलिखित मिलते हैं:

1. हार्डवेयर। साधारण फोन में आमतौर पर धीमी (1.1 गीगाहर्ट्ज की तरह) सिंगल-कोर या डुअल-कोर प्रोसेसर और 512 एमबी से कम रैम होती है। यह समझने के लिए कि यह उपकरणों की क्षमताओं को कैसे सीमित करता है, इसकी तुलना मल्टी-कोर प्रोसेसर और 4 जीबी रैम iPhone XS से करें।
2. डेटा ट्रांसफर। मोबाइल प्लान सस्ते हो रहे हैं, लेकिन जिन क्षेत्रों में कम कीमत के फोन वितरित किए जा सकते हैं, वहां योजनाएं अभी भी बहुत सीमित हैं। इसका मतलब यह है कि जब फीचर फोन के लिए डिज़ाइन किए गए पृष्ठों को विकसित करते हैं, तो आपको उन डेटा को जितना संभव हो उतना कम करने का प्रयास करना चाहिए। यह साइटों को पहले, तेजी से लोड करने के लिए, और दूसरी बात, उपयोगकर्ताओं के लिए ऐसी साइटों पर जाने की लागत को कम करने की अनुमति देगा।
3. सीमित स्क्रीन आकार। एक सस्ती फोन की स्क्रीन का आकार आमतौर पर स्मार्टफोन के स्क्रीन आकार से बहुत छोटा होता है। हम एक स्क्रीन के बारे में बात कर रहे हैं जिसमें लगभग 2.4 इंच का विकर्ण है। ऐसी स्क्रीन आपको केवल बहुत सीमित संख्या में तत्वों को प्रदर्शित करने की अनुमति देती हैं। इसका मतलब यह है कि साइट डेवलपर को वही डाउनलोड करने का प्रयास करना चाहिए जो स्क्रीन पर जल्द से जल्द प्रदर्शित हो।
4. एक टच स्क्रीन की कमी। यदि डिवाइस टच स्क्रीन से लैस नहीं है, तो इसका मतलब है कि उपयोगकर्ता जो कुछ भी बातचीत कर सकता है वह कीबोर्ड का उपयोग करते हुए पृष्ठ के साथ काम करते समय आसानी से सुलभ हो सकता है। आपको पृष्ठ पर ऐसे कई तत्वों को प्रदर्शित नहीं करना चाहिए जिनके साथ आप काम कर सकते हैं।
5. कीबोर्ड। कम लागत वाले फोन पर, हार्डवेयर कीबोर्ड का उपयोग किया जाता है, जो स्मार्टफोन मालिकों से परिचित ऑन-स्क्रीन QWERTY कीबोर्ड से पूरी तरह से अलग होते हैं। हार्डवेयर कीबोर्ड में लगभग 15 कुंजियाँ होती हैं, जिसमें कुछ अक्षरों में प्रवेश करने के लिए कई कीस्ट्रोक्स होते हैं। परिणामस्वरूप, यह पता चला है कि UX के संदर्भ में यह पाठ इनपुट की आवश्यकता को कम करने के लिए प्रयास करने योग्य है।

यह ध्यान दिया जाना चाहिए कि जापान में भी, सीमित टैरिफ योजनाएं वेब संसाधनों वाले उपयोगकर्ताओं की उपयोगिता को प्रभावित करती हैं।


जापान में 4 जी उपकरणों के लिए पृष्ठ लोड समय

इस ट्वीट से ऊपर एक छवि है, जो कहती है कि जापान में महीने के अंत में, टैरिफ प्लान प्रतिबंधों के कारण पृष्ठ अधिक धीरे-धीरे लोड होते हैं।

वेबसाइट डिजाइन दिशानिर्देश

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

The जब आप पहली बार साइट लोड करते हैं, तो डेटा की मात्रा पर सीमा निर्धारित करें

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

पृष्ठ प्रदर्शन लक्ष्य बाधाओं द्वारा निर्धारित किए जाते हैं जो विकास टीम अपने प्रोजेक्ट के लिए अच्छा प्रदर्शन प्रदान करने का प्रयास करती है। ये मैट्रिक्स की सीमाएं हैं जिनके आगे यह तय किया गया था कि इससे आगे नहीं जाना है। संकेतकों पर ऐसे अवरोध स्थापित करना, जिन्हें मापा जा सकता है, और काम शुरू होने से पहले बनाई गई बाधाओं को स्थापित करने से टीम को यह सुनिश्चित करने में मदद मिलती है कि परियोजना का प्रदर्शन दिए गए ढांचे के भीतर है जब इसमें नई सुविधाएँ जोड़ी जाती हैं।

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

आप अपने स्वयं के एप्लिकेशन कोड के साथ-साथ तृतीय-पक्ष स्क्रिप्ट और इस तरह की अन्य चीजों के संबंध में प्रतिबंधों की एक प्रणाली विकसित कर सकते हैं। निरंतर एकीकरण प्रणाली में, लाइटहाउस (लाइटवैल्ट) का उपयोग करके परियोजना के निर्माण के दौरान बाधाओं की जाँच की जा सकती है।

▍ PRPL पैटर्न का उपयोग करें

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

PRPL-50 पैटर्न 50 Kb के बराबर शुरू में लोड संसाधनों की मात्रा पर एक सीमा निर्धारित करता है। चूंकि कम लागत वाले फोन में बहुत मामूली हार्डवेयर संसाधन होते हैं, इसलिए आपको और भी कड़े प्रतिबंध लगाने होंगे। यहां मैं आपको PRPL-30 पैटर्न पर विचार करने की सलाह दूंगा। 30 30 स्रोत संसाधनों का 30 Kb है, यह पहले पृष्ठ लोड पर लोड किए गए संपीड़ित और छोटा बंडल का आकार है।


एक 30 Kb जेएस बंडल में अंतरिक्ष आवंटन का उदाहरण। इसमें एप्लिकेशन लॉजिक, फ्रेमवर्क कोड, हेल्पर यूटिलिटीज और थर्ड-पार्टी निर्भरताएं शामिल हैं

इस दृष्टिकोण के साथ, एसएसएल कनेक्शन प्रक्रिया पूरी होने के बाद, एक अच्छा बॉर्डर कैशिंग सर्वर से साइट सामग्री का पहला बाइट लगभग 2 सेकंड में डिवाइस पर आ जाएगा। यह हमें मूल मार्ग की सामग्री को डाउनलोड करने, उन्हें प्रदर्शित करने और उपयोगकर्ता सहभागिता के लिए पृष्ठ तैयार करने के लिए 3 सेकंड का समय देता है। जावास्क्रिप्ट पर आधारित परियोजनाओं के लिए, इसका मतलब है कि पहले पृष्ठ के आउटपुट पर लोड किए गए न्यूनतम और संकुचित बंडल का कुल आकार 30 Kb से अधिक नहीं होना चाहिए।


PRPL-30 पैटर्न का उपयोग करने से डेवलपर को लगभग 5 सेकंड में सस्ते फोन पर पेज को इंटरैक्टिव मोड में लाने की अनुमति मिलती है

शायद यह किसी को आश्चर्यचकित करेगा: “हम किस बारे में बात कर रहे हैं? मूल बंडल का आकार 30 Kb? यह अजीब है। आखिरकार, मैंने इस वॉल्यूम में रिएक्ट और एप्लिकेशन कोड को भी फिट नहीं किया है! ”यह ध्यान दिया जाना चाहिए कि जब उपयोगकर्ता की सुविधा के लिए, प्रोजेक्ट के निर्माता, वास्तव में कमजोर उपकरणों के लिए डिज़ाइन किए गए विकासशील साइटों को कठिन समझौता करना होगा। उदाहरण के लिए, रिएक्ट का उपयोग फीचर फोन साइटों के लिए किया जा सकता है, यदि रिएक्ट का उपयोग सर्वर रेंडरिंग (1) तक सीमित है, जो बहुत समझदार लगता है, या यदि (2) कोड तर्क युक्त एप्लिकेशन के टुकड़े बहुत, बहुत छोटे और यदि उनकी तैयारी में आलसी लोडिंग के सबसे गंभीर नियम लागू होंगे। एक तीसरा विकल्प है - Preact (3) की तरह एक हल्का रिएक्ट एनालॉग चुनें। हम ऐसे समझौतों के बारे में नीचे बात करेंगे।

30 Kb सीमा का उपयोग करके बनाए गए एप्लिकेशन का एक उदाहरण Proxx है । प्रारंभिक प्रोजेक्ट डेटा सेट का आकार 25 Kb है, यह TTI (टाइम टू इंटरएक्टिव) संकेतक से भिन्न है, जो 5 सेकंड से कम है। यहां एक कैलकुलेटर है जिसका उपयोग आप वेब परियोजनाओं के लिए लक्ष्य खोजने और अपनी स्वयं की सीमाओं का चयन करने के लिए कर सकते हैं।

आलसी मोड में लोड किए गए मार्गों के लिए अनुशंसित आकार 35 Kb से अधिक नहीं है। लेकिन "टुकड़े", जिसका आकार 30-35 Kb की सीमा में है, स्क्रिप्ट के साथ स्ट्रीमिंग कार्य के लिए V8 की क्षमताओं का उपयोग करके उनके समानांतर प्रसंस्करण के बारे में बात करने के लिए भी काफी बड़ा है।

जावास्क्रिप्ट संसाधनों को बचाओ

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


स्थैतिक प्रतिपादन

जावास्क्रिप्ट सरल फोन की मुख्य अड़चन है

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

URL प्रविष्टि; लोड हो रहा है सर्वर प्रतिपादन परिणाम; पृष्ठ को संवादात्मक मोड में लाने के लिए आवश्यक जावास्क्रिप्ट कोड लोड करना; उपयोगकर्ता सहभागिता के लिए पृष्ठ तैयार है

जावास्क्रिप्ट की कीमत में दो संकेतक होते हैं: लोड समय और कोड का निष्पादन समय। एक धीमा नेटवर्क (उदाहरण के लिए, एक स्थिर 3 जी कनेक्शन) जेएस बूट समय बढ़ा सकता है। एक धीमी प्रोसेसर स्क्रिप्ट को निष्पादित करने के लिए आवश्यक समय बढ़ाएगा। निम्न आंकड़ा लोकप्रिय reddit.com संसाधन के जावास्क्रिप्ट कोड को संसाधित करने के लिए विभिन्न उपकरणों के लिए आवश्यक समय दिखाता है। यह देखना आसान है कि एक धीमा डिवाइस (अल्काटेल 1 एक्स 5059 डी) एक तेज़ (पिक्सेल 3) की तुलना में 6 गुना अधिक समय लेता है।


एक लोकप्रिय साइट के जेएस कोड को संसाधित करने के लिए विभिन्न उपकरणों के लिए आवश्यक समय

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

पृष्ठ को अंतःक्रियात्मक रूप से लाने के लिए आवश्यक कोड की मात्रा को कम करने के लिए प्रयास करें

यहाँ कुछ सुझाव दिए गए हैं जिनसे आपको अपने पृष्ठों की संवादात्मक सुविधाएँ प्रदान करने के लिए कोड की मात्रा कम करने में मदद मिलेगी:

1. यथासंभव व्यापक रूप से आलसी लोडिंग तंत्र का उपयोग करें। हम मार्ग, घटकों के बारे में बात कर रहे हैं, उन संसाधनों के बारे में जो स्क्रीन के दृश्यमान क्षेत्र के बाहर हैं, इस बारे में जो पृष्ठ के स्वास्थ्य को सुनिश्चित करने के लिए अत्यंत महत्वपूर्ण नहीं कहा जा सकता है।
2. जावास्क्रिप्ट कोड को भागों में विभाजित करने के लिए और प्रारंभिक मार्ग के साथ काम करते समय उपयोगकर्ता को केवल वही डाउनलोड करने के लिए कोड विभाजन तंत्र का उपयोग करें। यह लोडेड और प्रोसेस्ड स्क्रिप्ट की मात्रा को कम करके फास्ट पेज लोडिंग को बढ़ावा देगा।
3. जितना संभव हो उतना उनके आकार को कम करने के लिए जावास्क्रिप्ट बंडलों से अप्रयुक्त कोड निकालें। ऐसा करने के लिए, आपको बंडल का विश्लेषण करने और उन पुस्तकालयों की पहचान करने की आवश्यकता होगी जो कि बिल्कुल भी उपयोग नहीं किए जाते हैं, और जिन्हें आपकी परियोजना की आवश्यकताओं के अनुकूल कुछ अधिक कॉम्पैक्ट के साथ बदला जा सकता है। जब पृष्ठ पहली बार लोड किया जाता है तो लाइब्रेरीज़ का उपयोग आलसी मोड में नहीं किया जा सकता है।
4. अंतर कोड लोडिंग तंत्र का उपयोग करने पर विचार करें। यह आपको आधुनिक ब्राउज़र को आधुनिक जावास्क्रिप्ट कोड देने की अनुमति देगा, ट्रांसप्लड कोड के अत्यधिक उपयोग से छुटकारा पाने और पॉलीफिल्स से बचने से। पुराने ब्राउज़रों के लिए कोड कम करने से आधुनिक ब्राउज़रों में कोड प्रदर्शन में सुधार हो सकता है।
5. यदि जेएस कोड पृष्ठ को रेंडर करने के लिए और इंटरेक्टिव मोड में इसके इंटरफ़ेस को प्रदर्शित करने के लिए बिल्कुल आवश्यक है, तो आवश्यक स्क्रिप्ट के प्रारंभिक लोडिंग को व्यवस्थित करें। नीचे दी गई विशेषता, जैसा कि ब्राउज़र में बताया गया है कि स्क्रिप्ट महत्वपूर्ण है और इसे जल्द से जल्द डाउनलोड करने की आवश्यकता है।

<link rel="preload" as="script" href="critical.js"> 

। सोच समझकर इस्तेमाल की गई तकनीकों का ढेर चुनें

फ्रेमवर्क और यूटिलिटीज

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

1. सस्ते फोन संसाधनों में बहुत सीमित हैं। इसलिए, यदि संभव हो, तो जेएस फ्रेमवर्क का उपयोग करने से बचें या उनके उपयोग को सीमित करें। इस टिप का उद्देश्य अनुप्रयोग तर्क के लिए अधिक से अधिक कमरे को छोड़ना है। ऐसी स्थिति में जहां एक डेवलपर पृष्ठ का आकार कम करने और अपने प्रदर्शन को बढ़ाने के लिए जावास्क्रिप्ट के उपयोग को सीमित करने का प्रयास करता है, जेएस फ्रेमवर्क अत्यधिक पृष्ठ को अधिभारित कर सकता है। यदि प्रोजेक्ट रीऐक्ट पर आधारित है, तो इस लाइब्रेरी के उपयोग को सर्वर रेंडरिंग तक सीमित करने पर विचार करें, या बंडल के आकार को कम करने के लिए बिल्ड के दौरान प्रीक्ट पर स्विच करने और प्री-कॉम्पटिशन का उपयोग करने पर विचार करें। प्रकाश बंडल बनाने के लिए, यह Svelte , lit-html और सादे जावास्क्रिप्ट जैसी प्रौद्योगिकियों को देखने के लिए समझ में आता है।
2. यह सुनिश्चित करने की कोशिश करें कि तृतीय-पक्ष निर्भरताएं यथासंभव कम स्थान लेती हैं। यह सुनिश्चित करेगा कि पृष्ठ के प्रारंभिक लोडिंग के दौरान उपयोग किए गए बंडलों के आकार निर्दिष्ट सीमाओं में फिट होते हैं। तृतीय-पक्ष पुस्तकालयों द्वारा किए गए बंडलों के आकार में योगदान का विश्लेषण करने के लिए, आप bundlephobia.com का उपयोग कर सकते हैं। यह निर्धारित करने के लिए कि उनके स्थान का कुशलता से उपयोग किया जा रहा है, अपने बंडलों की संरचना का गंभीर रूप से विश्लेषण करें। उदाहरण के लिए, Moment.js लाइब्रेरी के बजाय, जिसमें एक मानक रूप में, राष्ट्रीय मानकों से संबंधित बड़ी मात्रा में डेटा है, आप दिनांक-fns या लक्सन का उपयोग कर सकते हैं।
3. Redux का उपयोग करते समय अत्यधिक सावधानी बरतें और अनुप्रयोग स्वास्थ्य का प्रबंधन करने के लिए उपयोग किए गए Redux निर्मित रिपॉजिटरी का उपयोग करें। Redux रिपॉजिटरी डेटा को अक्सर HTML में एम्बेड किया जाता है, ताकि इसका उपयोग पृष्ठों के संचालन को रेंडर करने के लिए किया जा सके। यह आसानी से क्लाइंट अनुरोधों के जवाब में सर्वर द्वारा भेजे गए डेटा के आकार में अत्यधिक वृद्धि का कारण बन सकता है।

KyAdapt साइट सामग्री ताकि धीमी कनेक्शन पर भारी संसाधनों को लोड न करें

तुरंत मैं आपको सलाह देना चाहता हूं कि कमजोर उपकरणों के आधार पर संसाधनों के अनुकूलन पर इस सामग्री पर एक नज़र डालें।


अनुकूली संसाधन लोडिंग नेटवर्क कनेक्शन की गति पर निर्भर करती है

अनुकूली संसाधन लोडिंग नेटवर्क सूचना एपीआई के माध्यम से ब्राउज़र के लिए उपलब्ध प्रभावी कनेक्शन प्रकार (ईसीटी) के बारे में जानकारी के आधार पर उपयोगकर्ता को भेजी गई "एडैप्टिंग" सामग्री की एक तकनीक है । यहाँ इस एपीआई के साथ काम करना कैसा दिखता है:

 console.log(navigator.connection.effectiveType); // 3G 

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

कृपया ध्यान दें कि "तेज़" 4 जी कनेक्शन पर भी, उपयोगकर्ता कम डेटा ट्रांसफर गति का सामना कर सकते हैं। शायद आप किसी रेस्तरां या वाईफाई सम्मेलन में वाईफाई इंटरनेट का उपयोग करते हुए कुछ इस तरह से मिले हों।

अनुकूली सामग्री लोडिंग का उपयोग करने के एक विशिष्ट उदाहरण पर विचार करें। यह उस घटक के बारे में होगा जो साइट पर एक निश्चित उत्पाद का प्रतिनिधित्व करता है। धीमी कनेक्शन पर काम करने वाले उपयोगकर्ता को उत्पाद छवि का एक संकुचित संस्करण दिखाई देगा। और जो कोई भी उच्च गति पर इंटरनेट पर जाता है, वह एक उच्च-गुणवत्ता वाली छवि देखेगा, और इसके अलावा, अतिरिक्त सुविधाओं का उपयोग करने में सक्षम होगा जिन्हें लागू करने के लिए बहुत सारे जावास्क्रिप्ट कोड की आवश्यकता होती है। उदाहरण के लिए - यह उत्पाद की छवि को बढ़ाने, या "हिंडोला", उत्पाद की विभिन्न तस्वीरों को देखने की क्षमता है।

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

-सेव-डेटा हेडर की सामग्री को देखते हुए, उपयोगकर्ता की टैरिफ योजना का सम्मान करें

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

जब उपयोगकर्ता इस मोड का समर्थन करने वाले ब्राउज़रों में डेटा सेविंग मोड को सक्षम करते हैं, तो ब्राउज़र HTTP और HTTPS अनुरोधों में सेव-डेटा हेडर संलग्न करते हैं। वेब प्रोजेक्ट के डेवलपर, जावास्क्रिप्ट का उपयोग करके यह देख सकते हैं कि अनुरोध में ऐसा शीर्षक है या नहीं, यदि हां, तो उपयोगकर्ता को साइट सामग्री का एक अनुकूलित संस्करण दे सकता है। नतीजतन, यह पता चलता है कि उपयोगकर्ता जानबूझकर "कठिन" अवसरों को छोड़ देता है, और डेवलपर बस उसकी इच्छा को पूरा करता है। अनुरोध में सहेजें-डेटा शीर्ष लेख की जाँच करने के लिए, आप इस कोड की तरह कुछ का उपयोग कर सकते हैं:

 if ("connection" in navigator) {  if (navigator.connection.saveData === true) {    //  ,    .  } } 

यहाँ पृष्ठ के लाइट संस्करण के साथ काम करना कैसा दिखता है।


Google द्वारा तैयार पृष्ठ का लाइट संस्करण

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

Into वेब कर्मचारियों में संसाधन-गहन तर्क और अनुप्रयोग राज्य प्रबंधन तंत्र खींचो

यहां कमजोर फोन पर वेब एप्लिकेशन लोडिंग को तेज करने के लिए टिप्स खोजने के लिए कुछ अच्छी सामग्री है।

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

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

यहां वह सामग्री है जहां कार्यकर्ता प्रवाह के उपयोग के साथ और उनके बिना Proxx परियोजना के काम का अध्ययन किया जाता है। अध्ययन के दौरान, यह पाया गया कि श्रमिकों के उपयोग के बिना, एक एप्लिकेशन जो नोकिया 2 फोन (1 जीबी मेमोरी, क्वाड-कोर प्रोसेसर 1.3 गीगाहर्ट्ज की आवृत्ति के साथ) 6.6 सेकंड के लिए एक निश्चित ऑपरेशन "फ्रीज" करता है। समान शर्तों के तहत, लेकिन एक कार्यकर्ता के उपयोग के साथ, सिस्टम का प्रतिक्रिया समय केवल 48 एमएस है। नतीजतन, यदि आपके पास कोड है जिसे गंभीर प्रोसेसर संसाधनों की आवश्यकता है, तो आपको विचार करना चाहिए कि क्या इसे किसी वेब कर्मचारी को पोर्ट करने से स्थिति में सुधार होगा।

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

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

1. Imagemin जैसे टूल का उपयोग करके छवियों को संपीड़ित करें । वे आपको उनकी गुणवत्ता में उल्लेखनीय कमी के बिना छवि आकार में कमी प्राप्त करने की अनुमति देते हैं।
2. एनिमेटेड GIFs को वीडियो फ़ाइलों के साथ बदलें जो बहुत तेज़ी से लोड होते हैं। लेकिन, जब वीडियो की बात आती है, तो यह विचार करने योग्य है कि क्या एक साधारण सस्ते फोन के लिए डिज़ाइन की गई साइट पर भारी मीडिया की आवश्यकता है।
3. छवियों के आलसी लोडिंग के जब भी संभव तंत्र का उपयोग करें । चूंकि इस तरह के तंत्र जावास्क्रिप्ट पर आधारित हैं, इसलिए यह सुनिश्चित करने का प्रयास करें कि उनका सॉफ़्टवेयर कार्यान्वयन बहुत "भारी" नहीं है। यहां आपको नई मानक लोडिंग विशेषता उपयोगी मिल सकती है।
4. ग्राहक को सही आकार की संवेदनशील छवियां भेजें । यह छवियों के कई संस्करणों को बनाकर और क्लाइंट को उनकी स्क्रीन के अनुकूल सबसे अच्छा विकल्प देकर किया जा सकता है।
5. उन चित्रों का उपयोग करें जो स्क्रीन पर फिट होते हैं कमजोर फोन पर काम करने वाले उपयोगकर्ता को पर्याप्त रूप से संकुचित छोटी छवियों का उत्पादन इस तथ्य को जन्म देगा कि ऐसी छवियां डिकोड करने के लिए तेज़ होंगी।

▍ क्लाइंट संसाधनों को दें जो डिवाइस के स्क्रीन आकार से मेल खाते हैं

कई आधुनिक उपकरणों को "स्मार्ट फीचर फोन" के रूप में वर्गीकृत किया जा सकता है, जिनमें क्षैतिज और लंबवत 320x240 पिक्सल के एक संकल्प के साथ QVGA स्क्रीन हैं। यदि आपको पृष्ठ लोड करते समय डिवाइस का स्क्रीन आकार पता करने की आवश्यकता है (उदाहरण के लिए, कुछ अनुकूलन का उपयोग करने के लिए), तो आप इस कोड के टुकड़े की तरह कुछ का उपयोग कर सकते हैं:

 const isFeaturePhone = Math.min(screen.width, screen.height) <= 240; 

Proxx प्रोजेक्ट में एक समान दृष्टिकोण का उपयोग किया जाता है।

वास्तविक उपकरणों पर या एमुलेटर में onTest साइटें

यदि आप सरल सस्ते फोन के लिए डिज़ाइन की गई साइटों को विकसित कर रहे हैं, तो उन्हें ऐसे फोन पर परीक्षण करने की सिफारिश की जाती है। वे सस्ती हैं। उदाहरण के लिए, एक ट्वीट जो कहता है कि जो डेवलपर्स यूएसए में रहते हैं और काईओएस उपकरणों पर अपनी साइटों का परीक्षण करना चाहते हैं, उन्हें बेस्टबीयू में जाने और $ 15 के लिए एक फोन प्राप्त करने की सिफारिश की जाती है।


KaiOS पर परीक्षण साइटों के लिए सस्ता फोन

यदि आप एक समान फोन का अनुकरण करना चाहते हैं (उदाहरण के लिए, KaiOS पर चलने वाला Jio फोन जैसा कुछ), तो आप इसके लिए Chrome डेवलपर टूल का उपयोग कर सकते हैं:

• Chrome डेवलपर टूल खोलें।
• Device टूलबार खोलें।
• Device टूलबार में, उपकरण मेनू खोलें और Edit चुनें। दिखाई देने वाली विंडो में, Add custom device बटन पर क्लिक करें।
• नए KaiOS डिवाइस का नाम (या जो भी आप चाहते हैं)।
• स्क्रीन का आकार 240x320 सेट करें।
• User agent string फ़ील्ड में, निम्न दर्ज करें: Mozilla/5.0 (Mobile; LYF/F90M/LYF-F90M-000-02-23-181217; Android; rv:48.0) Gecko/48.0 Firefox/48.0 KAIOS/2.5 YouTube/1.66.51.J ।
• Add बटन पर क्लिक करके डिवाइस को सेव करें।
• यदि आवश्यक हो, तो प्रोसेसर को धीमा करने में सक्षम करें, लेकिन ध्यान रखें कि एक एमुलेटर की मदद से आप किसी साइट की जांच नहीं कर पाएंगे और साथ ही यह एक वास्तविक डिवाइस का उपयोग करके भी किया जा सकता है।

Chrome डेवलपर टूल में एक नया उपकरण सेट करें

परिणाम

आप ऐसी साइटें बना सकते हैं, जहाँ वे जहाँ भी रहें, सभी मोबाइल उपयोगकर्ताओं के लिए काम करना सुविधाजनक होगा। लेकिन इसके लिए, डेवलपर को कुछ प्रयास करने की आवश्यकता है, क्योंकि विभिन्न मूल्य श्रेणियों के मोबाइल डिवाइस एक-दूसरे से बहुत अलग हैं।

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

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

प्रिय पाठकों! क्या आप कमजोर मोबाइल उपकरणों के लिए अपनी वेब परियोजनाओं का अनुकूलन करते हैं?