पेज स्पीड की निरंतर खोज में, हम अक्सर खुद को एक ही बिंदु पर वापस आते हुए पाते हैं। तकनीकी टीमों को प्रेरित करने के लिए उत्पाद, विपणन और विकास टीमों के प्रयासों के बावजूद, साइट के प्रदर्शन को बेहतर बनाने वाले कार्य अक्सर रिफैक्टरिंग की आवश्यकता के कारण स्थगित कर दिए जाते हैं, और जब वे किए भी जाते हैं, तो वे हमेशा पूर्ण परिणाम नहीं देते हैं। इस चक्र में, वास्तविक प्रदर्शन प्राप्त करने के लिए कुछ व्यावहारिक दृष्टिकोणों पर विचार करना फायदेमंद है। उदाहरण के लिए, हम React.js और Vue.js या उनके SSR (सर्वर-साइड रेंडरिंग) एक्सटेंशन जैसे Next.js और Nuxt.js की गति से अन्य प्लेटफ़ॉर्म की तुलना में क्या सबक सीख सकते हैं? क्या jQuery और CSS फ़ाइलों के MB को अनुकूलित करने का समय नहीं आ गया है? बड़ी कंपनियाँ जो अपने वेब प्रदर्शन को गलत जानकारी वाले फ़्रंट-एंड डेवलपर्स के लिए बलिदान करती हैं, वे कब जागेंगी? आइए इन सवालों को एक-एक करके संबोधित करें।

Next.js और Nuxt.js आधारित साइटें तेज़ क्यों हैं?

नेक्स्ट और नक्सट प्लेटफ़ॉर्म, जो कि रिएक्ट और व्यू पर निर्मित SEO-फ्रेंडली संरचनाएँ हैं, गति प्रदर्शन के लिए सबसे अलग हैं। लेकिन ये प्लेटफ़ॉर्म इतने तेज़ क्यों हैं?

React.js और Vue.js घटक-आधारित फ्रेमवर्क हैं जो प्रत्येक पृष्ठ को उप-घटकों में विभाजित करते हैं, जैसा कि नीचे दिखाया गया है।

 

छवि (2) .png
स्रोत: https://dev.to/yakimych/seriously-do-react-hooks-replace-state-containers-3cpl

 

आइए इस बिंदु को स्पष्ट करने के लिए एक वास्तविक दुनिया का उदाहरण लेते हैं: एक ई-कॉमर्स लिस्टिंग पेज। इस लिस्टिंग पेज को निम्नलिखित उप-घटकों के रूप में माना जा सकता है:

  • हैडर
  • लिस्टिंग
    • लिस्टिंग प्रविष्टि जानकारी
      • पृष्ठ का शीर्षक
      • ब्रेडक्रम्ब
      • उत्पाद संख्या
    • फ़िल्टर
      • श्रेणी फिल्टर
      • मूल्य फ़िल्टर
      • ...
    • छंटाई
    • उत्पाद कार्ड
      • उत्पाद फोटो
    • उत्पाद विवरण
      • उत्पाद का नाम
      • उत्पाद की कीमत
        • स्ट्राइकथ्रू मूल्य
        • विक्रय कीमत
      • छूट की दर
      • अभियान की जानकारी
    • पृष्ठ पर अंक लगाना
    • श्रेणी सामग्री
  • पाद

Nuxt.js के साथ घटक-आधारित एप्लिकेशन बनाते समय, इनमें से प्रत्येक घटक को अलग से कोड किया जाता है और मास्टर पेज में शामिल किया जाता है। उदाहरण के लिए, ProductPhoto.js नामक फ़ाइल पर विचार करें। उत्पाद फ़ोटो (कैरोसेल, रिस्पॉन्सिव इमेज डिस्प्ले, आदि) के लिए जो भी फ़ंक्शन आवश्यक हैं, JS कोड इस घटक के भीतर लिखा गया है। इसी तरह, इस घटक द्वारा उपयोग की जाने वाली केवल CSS फ़ाइलें ही इसमें शामिल हैं। इसका मतलब यह है कि यदि घटक का उपयोग किया जाता है तो प्रत्येक घटक द्वारा आवश्यक फ़ाइलों को ही निष्पादित किया जाता है।

वर्तमान में अधिकांश वेब प्लेटफॉर्म पर यह प्रक्रिया कैसे संचालित की जाती है?

स्क्रिप्ट.js फ़ाइल में सदस्यता, फ़िल्टर और कार्ट पेज से लेकर मेनू तक सब कुछ के लिए कोड शामिल होता है, जो सभी पेजों पर चलता है। परिणाम? 

 

छवि-1 (2).png

 

वेबसाइटें जिनमें 3 MB JS फ़ाइल और 1.5 MB CSS फ़ाइल। मुख्य समस्या केवल फ़ाइल आकार नहीं है, बल्कि यह तथ्य है कि आप एक औसत Android मोबाइल डिवाइस के CPU से मिलीसेकंड के भीतर कोड की हज़ारों पंक्तियों को निष्पादित करने की उम्मीद नहीं कर सकते। केवल वही कोड चलाकर जिसकी आपको ज़रूरत है, आप प्रदर्शन लाभ प्राप्त कर सकते हैं।

रेंडर-ब्लॉकिंग संसाधनों को कैसे खत्म करें?

आज, शीर्ष 32 मिलियन वेबसाइटों में से 1% फ़ॉन्ट विस्मयकारी फ़ॉन्ट लाइब्रेरी का उपयोग करते हैं, जिसका औसत आकार लगभग 250 KB है। यह देखते हुए कि फ़्लिक प्रभाव के कारण एसिंक्रोनस लोडिंग को प्राथमिकता नहीं दी जाती है, इस बारे में सोचें कि मोबाइल या डेस्कटॉप पर खुलने पर पृष्ठ की पहली स्क्रीन पर कितने फ़ॉन्ट दिखाई देते हैं। 50 अलग-अलग प्लेटफ़ॉर्म पर किए गए एक छोटे से अध्ययन में पाया गया कि औसतन 3.4 आइकन का उपयोग किया जाता है (सबसे आम तौर पर: कार्ट, उपयोगकर्ता, मेनू, अधिसूचना)। इस प्रकार, बिना किसी समस्या के केवल चार आइकन लोड करने के लिए, हम पूरी लाइब्रेरी लोड करते हैं।

 

छवि-2 (1).png
स्रोत: https://trends.builtwith.com/widgets/Font-Awesome

 

उन्नत JS फ्रेमवर्क इसे कैसे प्रबंधित करते हैं? प्रासंगिक घटक में उपयोग किए गए आइकन के केवल SVG प्रारूप को आयात करके, संपूर्ण फ़ॉन्ट या CSS लाइब्रेरी को लोड करने की आवश्यकता को समाप्त कर देता है।

बूटस्ट्रैप बनाम रिएक्ट जेएस उपयोग हमें क्या बताता है?

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

 

छवि-3 (1).png
स्रोत: https://w3techs.com/technologies/comparison/js-bootstrap,js-react

 

तो, आइए पूछें: उपयोग में 100% से अधिक की वृद्धि का क्या मतलब है? शीर्ष 10,000 से शीर्ष 1,000 साइटें इंगित करती हैंयह दर्शाता है कि सर्वश्रेष्ठ लोग विवरणों को अपने लाभ के लिए और भी बेहतर बना रहे हैं।

 

छवि-4 (2).png
स्रोत: https://w3techs.com/technologies/comparison/js-bootstrap,js-react

 

संक्षेप में, हमारी साइटों को प्रौद्योगिकियों के साथ फिर से लिखने के बजाय नेक्स्ट, नक्सट, एंगुलर, रिएक्ट, व्यू, आदि, हमें यह समझना चाहिए कि ये प्रौद्योगिकियां गति के लिए क्या सही करती हैं और इन सर्वोत्तम प्रथाओं को हमारे वेब अनुप्रयोगों पर लागू करना चाहिए।