अपनी साइट के प्रदर्शन को मापने के लिए रेल मॉडल का उपयोग करना

अपनी साइट के प्रदर्शन को मापने के लिए रेल मॉडल का उपयोग करना

आप वेबसाइट के प्रदर्शन को कैसे मापते हैं? वेबसाइटों को अनुकूलित करने के तरीके के बारे में ऑनलाइन बहुत सारी जानकारी है, लेकिन आप वास्तव में यह कैसे जानते हैं कि आपने पर्याप्त काम कर लिया है?

डेवलपर्स को उनके अनुकूलन प्रयासों को मापने में मदद करने के लिए—और उन्हें उपयोगकर्ताओं को प्रदर्शन की कहानी के बीच में रखने के लिए याद दिलाने के लिए—कुछ Googlers ने RAIL मॉडल विकसित किया है।

रेल एक उपयोगकर्ता-केंद्रित प्रदर्शन मॉडल है जो उपयोगकर्ता के वेब अनुभव को चार प्रमुख क्रियाओं में विभाजित करता है। यह डेवलपर्स को वेब प्रदर्शन के बारे में समग्र रूप से सोचने के लिए प्रोत्साहित करता है और यह पूछने के बजाय कि “धीमी गति का क्या मतलब है?” इसके बजाय पूछें “जब उपयोगकर्ता हमारे द्वारा बनाई गई चीज़ों के साथ इंटरैक्ट कर रहे हों तो उन्हें क्या लगता है?”

इस पोस्ट में, हम यह पता लगाएंगे कि रेल क्या है, दिशानिर्देश जो मॉडल निर्धारित करते हैं, यह निर्धारित करने में आपकी सहायता करने के लिए कि आपने कब “पर्याप्त काम किया है” और टूल का उपयोग आप अपनी वेबसाइट पर रेल को मापने के लिए कर सकते हैं।

रेल मॉडल क्या है?

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

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

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

रेल मॉडल इसे ध्यान में रखता है, वेबसाइट के साथ उपयोगकर्ता के अनुभव को चार प्रमुख कार्यों में विभाजित करता है: जवाब, एनीमेशन, निठल्लातथा भार.

रेल प्रदर्शन मॉडलछवि: पॉल आयरिश.

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

इससे पहले कि हम रेल की बारीकियों और इसके द्वारा तय किए गए बेंचमार्क पर ध्यान दें, सबसे पहले मानवीय धारणा की सीमा को समझना महत्वपूर्ण है।

समय और कथित प्रदर्शन

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

1993 में प्रकाशित होने के बाद से प्रतिक्रिया समय पर जैकब नीलसन का काम वेब प्रदर्शन की मानवीय धारणाओं के लिए अकादमिक शोध रहा है। 2015 में, जब Googlers पॉल आयरिश और पॉल लुईस ने अपने रेल मॉडल का प्रस्ताव रखा, तो उन्होंने नीलसन के मूल निष्कर्षों को संशोधित किया, एनिमेशन के लिए एक अतिरिक्त प्रतिक्रिया समय (0 से 16ms)।

  • 0 से 16 मि.से: लोग वास्तव में गति को ट्रैक करने में अच्छे होते हैं और जब एनिमेशन में परिवर्तनशील फ्रेम दर या अत्यधिक रुकावट होती है तो वे इसे पसंद नहीं करते हैं। एनिमेशन तब तक सहज माने जाते हैं जब तक कि हर सेकेंड में 60 नए फ्रेम प्रस्तुत किए जाते हैं। वह 16 एमएस प्रति फ्रेम है।
  • 0 से 100 मि.से: उपयोगकर्ता 100ms से कम समय में होने वाली अपनी क्रियाओं के प्रति प्रतिक्रिया को तत्काल महसूस करते हैं। अब और क्रिया और प्रतिक्रिया के बीच का संबंध टूट जाता है।
  • 100 से 300 मि.से: उपयोगकर्ताओं को थोड़ा बोधगम्य विलंब महसूस होता है।
  • 300 से 1000 मि: इस विंडो के भीतर, उपयोगकर्ता महसूस करते हैं कि “चीजें हो रही हैं,” अर्थात पृष्ठ लोड हो रहे हैं और कार्य प्रगति पर हैं।
  • 1000ms या अधिक: 1 सेकंड के बाद, उपयोगकर्ता अपने द्वारा किए जा रहे कार्य पर से ध्यान हटा देते हैं.
  • 10000ms या अधिक: 10 सेकंड के बाद, उपयोगकर्ता निराश हो जाते हैं और यदि वे पहले से कार्य नहीं करते हैं तो उनके कार्यों को छोड़ने की संभावना होती है।

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

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

मानवीय धारणा की सीमा के बारे में अधिक जानकारी के लिए देखें कि कथित प्रदर्शन क्या है और आपको इसे अनुकूलित करने की आवश्यकता क्यों है।

रेल मॉडल के प्रदर्शन बेंचमार्क

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

आइए रेल के चार प्रमुख क्षेत्रों में से प्रत्येक को अधिक विवरण में देखें।

जवाब

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

जैसा कि लुईस वर्णन करता है, यदि आपने कभी किसी चीज़ पर क्लिक किया है और प्रतिक्रिया देने में इतना समय लगा है कि आप सोचने लगे कि क्या इसने आपका क्लिक पंजीकृत किया है, तो आपने दूसरी बार क्लिक किया, लेकिन ऐसा करने में आपने अपने पहले क्लिक की प्रतिक्रिया को बाधित कर दिया… ठीक है , यह ठीक उसी तरह की चीज़ है जिससे रेल बचना चाहता है।

लक्ष्य: 50ms से कम में प्रक्रिया ईवेंट।

Google के दिशानिर्देश: 100ms के भीतर एक दृश्य प्रतिक्रिया सुनिश्चित करने के लिए साइटों को 50ms के भीतर उपयोगकर्ता क्रियाओं/इनपुट को संसाधित करना चाहिए। उन कार्रवाइयों के लिए जिन्हें पूरा होने में 50ms से अधिक समय लगता है, हमेशा प्रतिक्रिया दें, यानी एक लोडिंग संकेतक प्रदर्शित करें या सक्रिय स्थिति के लिए रंग बदलें।

एनीमेशन

वेब डिज़ाइन में एनिमेशन इतने सर्वव्यापी हो गए हैं कि उपयोगकर्ता बहुत सहज बातचीत की उम्मीद करते हैं और फ्रेम दर के थोड़ा सा भी बंद होने पर तुरंत ध्यान देते हैं।

एनिमेशन में शामिल हैं:

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

लक्ष्य: 10ms में एक फ्रेम तैयार करें।

Google के दिशानिर्देश: ठीक से एनिमेट करने के लिए, 60 फ्रेम प्रति सेकंड (यानी 1 सेकंड ÷ 60 = 16.6ms) प्राप्त करने के लिए एनीमेशन के प्रत्येक फ्रेम को 16ms से कम समय में पूरा किया जाना चाहिए। प्रत्येक फ्रेम के लिए अधिकतम “बजट” 16ms है, लेकिन प्रत्येक फ्रेम को रेंडर करने के लिए ब्राउज़रों को लगभग 6ms की आवश्यकता होती है।

निठल्ला

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

लक्ष्य: इस संभावना को बढ़ाने के लिए निष्क्रिय समय को अधिकतम करें कि पेज 50ms के भीतर किसी उपयोगकर्ता इंटरैक्शन का जवाब दे सके।

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

भार

लोड का तात्पर्य उपयोगकर्ता को पहले अर्थपूर्ण पेंट तक शीघ्रता से पहुँचाना है। इसका अर्थ है 1 सेकंड से भी कम समय में पेज लोड करना।

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

लक्ष्य: 1 सेकंड में पहला अर्थपूर्ण पेंट डिलीवर करें और 5 सेकंड के अंदर इंटरेक्टिव के लिए समय प्राप्त करें।

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

रेल को मापने के लिए उपकरण

RAIL द्वारा निर्धारित लक्ष्य बड़े लग सकते हैं, लेकिन वे वास्तव में तीन स्वतंत्र रूप से उपलब्ध टूल: Chrome DevTools, Lighthouse, और WebPageTest का उपयोग करके मापना और ट्रैक करना उतना कठिन नहीं हैं।

  • क्रोम देव उपकरण: क्रोम के अंतर्निहित डेवलपर टूल आपको पर्दे के पीछे से देखने की सुविधा देते हैं, ताकि आपके पेज के लोड होने या चलने के दौरान होने वाली हर चीज का गहन विश्लेषण किया जा सके। Google इस गाइड में रेल मेट्रिक्स को मापने के लिए DevTools का उपयोग करने के तरीके पर अधिक विशिष्ट निर्देश प्रदान करता है।
  • प्रकाशस्तंभ: यह शानदार ऑडिट टूल Chrome DevTools में, Chrome एक्सटेंशन के रूप में, Node.js मॉड्यूल के रूप में और WebPageTest के भीतर उपलब्ध है। मूल रूप से, आप एक URL दर्ज करते हैं और लाइटहाउस धीमे 3G कनेक्शन के साथ एक मध्य-श्रेणी के उपकरण का अनुकरण करता है। यह ऑडिट की एक श्रृंखला चलाता है और फिर आपको आपकी साइट के प्रदर्शन की जांच करने वाली एक रिपोर्ट देता है, चाहे वह सर्वोत्तम प्रथाओं, इसकी पहुंच और एसईओ को पूरा करती हो।
  • वेबपेजटेस्ट: हमने इस गति परीक्षण उपकरण को पहले इस ब्लॉग पर कवर किया है। जब आप परीक्षण के लिए एक यूआरएल दर्ज करते हैं, तो रेल के लोड दिशानिर्देशों का अनुकरण करने के लिए एक मोबाइल डिवाइस और एक धीमी 3जी कनेक्शन चुनने के लिए उन्नत सेटिंग्स का उपयोग करें।

निष्कर्ष

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

पुनर्कथन करने के लिए, यहाँ एक आसान ब्रेकडाउन है रेल के प्रदर्शन लक्ष्यों:

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



अपनी साइट के प्रदर्शन को मापने के लिए रेल मॉडल का उपयोग करना अपनी साइट के प्रदर्शन को मापने के लिए रेल मॉडल का उपयोग करना

प्रातिक्रिया दे

आपका ईमेल पता प्रकाशित नहीं किया जाएगा. आवश्यक फ़ील्ड चिह्नित हैं *