नेक्स्ट पेंट से इंटरेक्शन: यह क्या है और इसे कैसे करें?

क्या आपने कभी धीमी और अनुत्तरदायी वेबसाइट या ऐप का अनुभव किया है?

शायद आपने कोई बटन क्लिक किया हो और स्क्रीन पर कुछ दिखाई देने में काफी समय लग गया हो। यह एक निराशाजनक अनुभव है, है ना?

बिल्कुल यही "इंटरेक्शन टू नेक्स्ट पेंट" (आईएनपी) के बारे में है।

इंटरेक्शन टू नेक्स्ट पेंट (आईएनपी) एक उभरता हुआ मीट्रिक है जिसका उपयोग Google यह मूल्यांकन करने के लिए करता है कि आपकी वेबसाइट उपयोगकर्ता इनपुट पर कितनी जल्दी प्रतिक्रिया देती है। 12 मार्च, 2024 को, यह Google रैंकिंग को प्रभावित करने वाले कोर वेब वाइटल्स मानदंडों में से एक बन गया।

यह क्यों मायने रखता है?

आज के डिजिटल युग में, लोग उम्मीद करते हैं कि चीजें तुरंत हो जाएंगी। यदि कोई वेबसाइट या ऐप आपके कार्यों पर तुरंत प्रतिक्रिया नहीं देता है, तो आप संभवतः असंतुष्ट हो जाएंगे और नौकरी छोड़ देंगे। आजकल किसी के पास धीमे ऐप्स के लिए समय नहीं है!

सहज, आनंददायक उपयोगकर्ता अनुभव प्रदान करने के लिए आईएनपी को अनुकूलित करना महत्वपूर्ण है जो उपयोगकर्ताओं को व्यस्त और संतुष्ट रखता है। INP जितना कम होगा, आपकी वेबसाइट या ऐप का प्रदर्शन उतना ही बेहतर होगा।

आइए आईएनपी की गहराई से जांच करें और जानें कि अपने मौजूदा स्कोर को बढ़ाने के लिए इसे कैसे मापें।

नेक्स्ट पेंट (आईएनपी) से इंटरेक्शन क्या है?

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

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

अधिकांश उपयोगकर्ता इंटरैक्शन के लिए, सुझाया गया INP मान 200 मिलीसेकंड (ms) से कम ��ै। 300ms से अधिक का INP मान खराब माना जाता है और उपयोगकर्ताओं द्वारा इसे धीमा माना जाएगा

कोर वेब वाइटल के रूप में नेक्स्ट पेंट से इंटरेक्शन

नेक्स्ट पेंट के साथ इंटरेक्शन को 12 मार्च, 2024 को तीन Google कोर वेब वाइटल्स मेट्रिक्स में से एक के रूप में पेश किया गया था। इसने पिछले फर्स्ट इनपुट डिले मेट्रिक को बदल दिया।

कोर वेब वाइटल्स मीट्रिक के रूप में, नेक्स्ट पेंट के साथ खराब इंटरेक्शन आपकी Google खोज रैंकिंग को प्रभावित कर सकता है।

अगले पेंट के साथ इंटरेक्शन पहले इनपुट विलंब से किस प्रकार भिन्न है?

INP प्रथम इनपुट विलंब (FID) का उत्तराधिकारी माप है। दोनों प्रतिक्रियात्मकता मेट्रिक्स हैं।

FID और INP दो प्रकार से भिन्न होते हैं:

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

प्रथम इनपुट विलंब यह अनुमान लगाता है कि ब्राउज़र को उपयोगकर्ता इनपुट संसाधित करना शुरू करने में कितना समय लगता है। घटनाओं पर प्रतिक्रिया देने या उपयोगकर्ता इंटरफ़ेस बदलने में बिताया गया वास्तविक समय शामिल नहीं है।

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

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

इसलिए, यदि किसी पृष्ठ की INP 250 मिलीसेकंड है, तो 2% उपयोगकर्ता इंटरैक्शन की विलंबता उससे अधिक थी।

इंटरेक्शन टू नेक्स्ट पेंट (आईएनपी) कैसे काम करता है?

आईएनपी एक प्रतिक्रियात्मकता मीट्रिक है जो उपयोगकर्ता इंटरैक्शन के बीच बीते समय पर केंद्रित है। यह मापता है कि जब कोई वेब पेज तत्व उस पर कोई विशिष्ट कार्रवाई करता है तो वह कितनी तेजी से प्रतिक्रिया क��ता है।

आईएनपी इस प्रकार काम करता है:

• एक उपयोगकर्ता एक बटन पर क्लिक करके एक वेब पेज के साथ इंटरैक्ट करता है।
• ब्राउज़र वेब सर्वर से नई सामग्री का अनुरोध करता है।
• वेब सर्वर ब्राउज़र पर ताज़ा सामग्री वितरित करता है।
• ब्राउज़र पृष्ठ पर नई सामग्री प्रदर्शित करता है।
• ब्राउज़र नई सामग्री बनाने के लिए आवश्यक समय की गणना करता है और इसे INP स्कोर के रूप में रिपोर्ट करता है।

कम INP रेटिंग इंगित करती है कि पृष्ठ उपयोगकर्ता इनपुट के प्रति बेहद संवेदनशील है। कोर वेब वाइटल्स के भाग के रूप में, INP निम्नलिखित कारणों से महत्वपूर्ण है:

• उपयोगकर्ता अनुभव में सुधार:एक उच्च आईएनपी स्कोर इंगित करता है कि आगंतुकों को उनकी गतिविधियों पर प्रतिक्रिया देने के लिए वेब पेज पर लंबे समय तक इंतजार करना होगा, जो कष्टप्रद हो सकता है।

• एसईओ (खोज इंजन अनुकूलन):आईएनपी और अन्य कोर वेब वाइटल्स Google के पेज अनुभव संकेतों का हिस्सा हैं, जो खोज परिणाम पृष्ठों पर वेबसाइट की रैंकिंग को प्रभावित करते हैं। यह INPके महत्व पर जोर देता है एसईओ मीट्रिक.

• बाउंस दर कम करें:धीमे लोडिंग समय के कारण ग्राहक पेज छोड़ सकते हैं, जिससे आपकी कंपनी का मुनाफा कम हो सकता है।

आईएनपी कैसे मापा जाता है?

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

एक। इनपुट विलंब

इवेंट हैंडलर को चलने से रोकने के लिए वेबसाइट पर पृष्ठभूमि संचालन की प्रतीक्षा की जा रही है।

बी। ���्रसंस्करण समय

जावास्क्रिप्ट में ईवेंट हैंडलर निष्पादित करना।

सी। प्रस्तुति विलंब

अन्य लंबित कार्यों से निपटना, पृष्ठ लेआउट की पुनर्गणना करना, और पृष्ठ सामग्री को चित्रित करना। आईएनपी को मिल��सेकंड (एमएस) में मापा जाता है। एक अच्छा बेंचमार्क 200 एमएस से कम है, और उसके और 500 एमएस के बीच कुछ भी सुधार की आवश्यकता माना जाता है। 500 एमएस या उससे अधिक की विलंबता को खराब माना जाता है।

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

नेक्स्ट पेंट से इंटरेक्शन का मूल्यांकन करने के लिए आप कई टूल का उपयोग कर सकते हैं, जैसे:

• डिबगबियर की वेबसाइट स्पीड टेस्ट
• Google पेज स्पीड इनसाइट्स
• हमारी साइट स्पीड क्रोम एक्सटेंशन
• आईएनपी डिबगर
• गूगल सर्च कंसोल
• वेब वाइटल्स लाइब्रेरी

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

Google पेज���्पीड इनसाइट्स INP औरका विश्लेषण करने के लिए एक लोकप्रिय उपकरण है वेबसाइट प्रदर्शन. यह एक साइट का मूल्यांकन करेगा और सर्वोत्तम प्रथाओं को लागू करने के लिए सिफारिशें करेगा। आप यह भी जांच सकते हैं कि आपकी वेबसाइट मोबाइल और डेस्कटॉप डिवाइस पर कितनी तेजी से लोड होती है।

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

नीचे दी गई रिपोर्ट में दिखाए गए मान एक नियंत्रित लैब सेटिंग से हैं जो Google लाइटहाउस का उपयोग करता है। इस डेटा का उपयोग नई सुविधाओं के लाइव होने से पहले उनका परीक्षण करने के लिए किया जा सकता है।

यदि साइट का INP डेटा अनुपलब्ध है, तो इसके कुल अवरोधन समय (TBT) पर गौर करें। यह मीट्रिक प्रतिक्रिया के एक नए रूप का मूल्यांकन करता है। यह इस बात पर ध्यान केंद्रित करता है कि कोई वेबसाइट लोड करते समय उपयोगकर्ता की बातचीत पर कितनी देर तक प्रतिक्रिया नही��� दे सकती है।

नीचे की ओर, कोर वेब वाइटल्स मेट्रिक्स को कैसे बढ़ाया जाए, इस पर विचार इस प्रकार हैं:

नेक्स्ट पेंट (आईएनपी) के साथ इंटरेक्शन के लिए अनुकूलन कैसे करें?

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

एक। जावास्क्रिप्ट प्रदर्शन में सुधार करें

जावास्क्रिप्टकई वेबसाइटों का एक प्रमुख घटक है। यह कई इंटरैक्टिव तत्व प्रदान करता है; हालाँकि, यह साइट की गति को धीमा भी कर सकता है।

जब जावास्क्रिप्ट निष्पादित होता है, तो यह मुख्य थ्रेड पर चलता है, जो एक वेब पेज को प्रस्तुत करने के लिए जिम्मेदार होता है। यदि कोड अक्षम है, तो यह थ्रेड को रोक सकता है और वेबसाइट को उपयोगकर्ता इनपुट पर प्रतिक्रिया देने से रोक सकता है।

प्रतिक्रियाशीलता में सुधार के लिए, अपनी जावास्क्रिप्ट को अनुकूलित करें। आप इसे इस प्रकार प्राप्त कर सकते हैं:

• जावास्क्रिप्ट फ़ाइलों को छोटा करनाजावास्क्रिप्ट की मात्रा कम कर देता है, जिससे इसे अधिक लोड करने की अनुमति मिलती हैजल्दी से।

• GZip संपीड़न सक्षम करें.वेबसाइट फ़ाइलों और डेटा को संपीड़ित करने का एक और सामान्य तरीका।

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

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

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

बी। वेब वर्कर्स का उपयोग करें

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

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

मुख्य थ्रेड को रुकने से बचाने का दूसरा तरीका बड़ी जावास्क्रिप्ट नौकरियों को छोटे में विभाजित करना है।

सी। लंबे कार्यों को तोड़ना

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

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

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

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

डी। इनपुट तत्परता को प्राथमिकता दें

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

इनपुट तत्परता को प्राथमिकता देने और INP को बढ़ावा देने का तरीका यहां बताया गया है:

1. गैर-महत्वपूर्ण जावास्क्रिप्ट को स���थगित कर दिया जाएगा

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

2. गला घोंटना

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

3. बहस करना

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

4. इवेंट श्रोता जो सक्रिय रूप से भाग नहीं ले रहे हैं

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

ई. तत्काल प्रतिक्रिया प्रदान करें

कुछ गतिविधियाँ, जैसे कई डेटा इनपुट के साथ एक फॉर्म पूरा करना, के परिणामस्वरूप प्रतिक्रिया में बड़ी देरी हो सकती है।

यहीं से तुरंत प्रतिक्रिया मिलती है। यह रणनीति ग्राहकों को एक दृश्यमान संकेत प्रदान ��रती है कि वेबसाइट ने उनका अनुरोध प्राप्त कर लिया है और उस पर कार्रवाई कर रही है।

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

त्वरित प्रतिक्रिया संकेतों के इन उदाहरणों को देखें:

1. लोड संकेतक

जब कोई प्रक्रिया चल रही हो तो एक स्पिनर या प्रगति पट्टी प्रदर्शित करें, विशेष रूप से डेटा प्रस्तुत करते समय या किसी नए पृष्ठ पर स्विच करते समय।

2. पॉप-अप पावती संदेश

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

3. प्रपत्र फ़ील्ड सत्यापन

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

निष्कर्ष

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

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

तो आगे बढ़ें और अनुकूलित आईएनपी की शक्ति को अनलॉक करें!

उस त्वरित प्रतिक्रिया की खोज करें जो औसत वेबसाइटों को उन वेबसाइटों से अलग करती है जो शानदार रूप से तेज़ और सहज दिखाई देती हैं। आपके उपयोगकर्ताओं की संतुष्टि और आपके डिजिटल अनुभवों की सफलता दोनों इस पर निर्भर हैं।

अक्��र पूछे जाने वाले प्रश्न