सुनिये सब लोग! जब से मैंने आखिरी बार ब्लॉग लिखा है तब से काफी समय हो गया है, और मैं मानता हूं कि इससे मुझे थोड़ा दुख होता है। वास्तविकता यह है कि सीखने के लिए बहुत कुछ है, और कभी-कभी ऐसा महसूस होता है कि हर चीज़ में गहराई से उतरने के लिए पर्याप्त समय नहीं है। हालाँकि, मैं किससे मज़ाक कर रहा हूँ? सच तो यह है कि, मैं हाल ही में बहुत काम टाल रहा हूँ।

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

तो, आइए गोता लगाएँ!

वेब प्रदर्शन क्यों मायने रखता है

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

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

भगवान के अनुसार Google ये चीजें प्रदर्शन में मायने रखती हैं

• एफसीपी (पहला कंटेंटफुल पेंट)
• एलसीपी (सबसे बड़ा कंटेंटफुल पेंट)
• सीएलएस (संचयी लेआउट शिफ्ट)
• टीटीआई (इंटरएक्टिव का समय)
• आईएनपी (नेक्स्ट पेंट से इंटरेक्शन)

आइए उन्हें और करीब से देखें

एफसीपी (पहला कंटेंटफुल पेंट)

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

एफसीपी में सुधार कैसे करें:

रेंडर-अवरुद्ध संसाधनों को कम करें: उन संसाधनों को कम करें या समाप्त करें जो पृष्ठ के प्रतिपादन को अवरुद्ध करते हैं, जैसे सिंक्रोनस जावास्क्रिप्ट या सीएसएस। महत्वपूर्ण संसाधनों के लिए का उपयोग करें।

गैर-महत्वपूर्ण जावास्क्रिप्ट को स्थगित करें: गैर-आवश्यक स्क्रिप्ट के लिए defer या async विशेषताओं का उपयोग करें ताकि यह सुनिश्चित हो सके कि वे प्रारंभिक पेंट को अवरुद्ध नहीं करते हैं।

*सर्वर-साइड रेंडरिंग (एसएसआर) का उपयोग करें: * एसएसआर प्रारंभिक HTML को तेजी से वितरित करने में मदद करता है, विशेष रूप से गतिशील सामग्री के लिए, ताकि उपयोगकर्ता सार्थक सामग्री को जल्दी देख सकें।

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

कंटेंट डिलीवरी नेटवर्क (सीडीएन) का उपयोग करें: विलंबता को कम करने और संसाधन वितरण में तेजी लाने के लिए सीडीएन से स्थिर संपत्तियों की सेवा करें।

एलसीपी (सबसे बड़ा कंटेंटफुल पेंट)

यह क्या मापता है: LCP व्यूपोर्ट के भीतर सबसे बड़े तत्व (आमतौर पर एक हीरो छवि, बड़ा टेक्स्ट ब्लॉक, या वीडियो) को पूरी तरह से प्रस्तुत करने में लगने वाले समय पर ध्यान केंद्रित करता है। यह अनुमानित लोड गति का एक बड़ा संकेतक है, क्योंकि सबसे बड़ी सामग्री लोड होने के बाद उपयोगकर्ता पृष्ठ को तैयार मानते हैं। तेज़ अनुभव के लिए LCP को 2.5 सेकंड से कम रखने का लक्ष्य रखें।

एलसीपी में सुधार कैसे करें:

छवियों को अनुकूलित और संपीड़ित करें: वेबपी जैसे आधुनिक छवि प्रारूपों का उपयोग करें, छवियों को संपीड़ित करें, और सुनिश्चित करें कि srcset और आकार विशेषताओं का उपयोग करके सही छवि आकार प्रदान किए जाते हैं।

फोल्ड के नीचे की छवियों को आलसी लोड करें: उन छवियों के लिए आलसी लोडिंग लागू करें जो फोल्ड के ऊपर की सामग्री को लोड करने को प्राथमिकता देने के लिए तुरंत दिखाई नहीं देती हैं।

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

रेंडर-ब्लॉकिंग सीएसएस को न्यूनतम करें: FCP की तरह, बड़ी सीएसएस फ़ाइलों का उपयोग कम से कम करें जो रेंडरिंग को ब्लॉक कर सकती हैं।

तृतीय-पक्ष स्क्रिप्ट कम करें: तृतीय-पक्ष विज्ञापन, विश्लेषण, या अन्य स्क्रिप्ट LCP को धीमा कर सकते हैं। गैर-आवश्यक स्क्रिप्ट को स्थगित या एसिंक्रोनस रूप से लोड करें।

सीएलएस (संचयी लेआउट शिफ्ट)

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

सीएलएस में सुधार कैसे करें:

छवियों और वीडियो के लिए आयाम सेट करें: हमेशा छवियों पर चौड़ाई और ऊंचाई विशेषताओं को शामिल करें, या लोड होने से पहले मीडिया तत्वों के लिए स्थान आरक्षित करने के लिए सीएसएस पहलू अनुपात बक्से का उपयोग करें।

मौजूदा सामग्री के ऊपर सामग्री डालने से बचें: मौजूदा सामग्री के ऊपर गतिशील रूप से सामग्री जोड़ने से बचें जब तक कि यह बिल्कुल आवश्यक न हो (उदाहरण के लिए, विज्ञापन)।

फ़ॉन्ट लोडिंग रणनीतियों का उपयोग करें: कस्टम फ़ॉन्ट लोड करते समय, फ़ॉन्ट-डिस्प्ले का उपयोग करें: स्वैप; फ़ॉन्ट लोडिंग के कारण होने वाले लेआउट बदलाव से बचने के लिए।

बिना स्थान के नए विज्ञापन या पॉपअप डालने से बचें: सुनिश्चित करें कि अप्रत्याशित बदलावों से बचने के लिए लेआउट स्थान में गतिशील रूप से लोड किए गए विज्ञापन, बैनर या पॉप-अप का ध्यान रखा जाए।

छवि के समान स्थान वाले छवि प्लेसहोल्डर या लोडर का उपयोग करें

टीटीआई (इंटरएक्टिव का समय)

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

टीटीआई में सुधार कैसे करें:

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

आईएनपी (नेक्स्ट पेंट से इंटरेक्शन)

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

आईएनपी में सुधार कैसे करें:

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

इनपुट रिस्पॉन्सिबिलिटी को प्राथमिकता दें: निष्क्रिय समय के दौरान गैर-जरूरी काम को संभालने के लिए requestAnimationFrame या requestIdleCallback का उपयोग करें, इंटरेक्शन हैंडलिंग के लिए मुख्य थ्रेड को खुला छोड़ दें।

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

आलसी लोड गैर-महत्वपूर्ण कोड: प्रारंभिक इंटरैक्शन के बाद तक गैर-महत्वपूर्ण कार्यक्षमता की लोडिंग को स्थगित करें।
उदाहरण के लिए, आप React.lazy() और Suspense का उपयोग करके रिएक्ट में घटकों को आलसी लोड कर सकते हैं।

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

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

प्रदर्शन, वेब सुरक्षा, प्रतिक्रिया, कोणीय, व्यू पर अधिक अद्भुत ब्लॉगों के लिए मुझे फ़ॉलो करते रहें