वेबसाइट प्रदर्शन को मापना - PerformanceObserver

Google द्वारा प्रदान की जाने वाली साइट के माध्यम से

वेब प्रदर्शन को आसानी से मापा जा सकता है।

https://pagespeed.web.dev/
पर URL दर्ज करके मापा जा सकता है, या क्रोम एक्सटेंशन के रूप में लाइटहाउस इंस्टॉल करके मापा जा सकता है।

संकेतकों को बेहतर बनाने से क्या फायदा होता है?

सर्च इंजन में बेहतर प्रदर्शन हो सकता है। SEO के कारण सर्वर साइड रेंडरिंग का अधिक उपयोग किया जाता है,

यदि उपरोक्त प्रदर्शन संकेतक कम हैं, तो इसका प्रभाव कम हो जाएगा।

इसे कैसे बेहतर बनाया जाए?

web.dev साइट पर बताया गया है कि प्रत्येक संकेतक को कैसे बेहतर बनाया जा सकता है।

विशेष रूप से, तीन संकेतक स्कोर में एक बड़ा हिस्सा बनाते हैं। (Web Core Vitals)

मैं उन प्रयासों को रिकॉर्ड करना चाहता हूँ जो मैंने संकेतकों को बेहतर बनाने के लिए किए हैं।

स्थानीय रूप से मापने के लिए?

उपरोक्त कोड डालें। Nuxt के मामले में, इसे प्लगइन्स में रखें और कंसोल लॉग देखें।

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

यह रेंडरिंग के दौरान लेआउट में बदलाव की मात्रा को मापता है।

उदाहरण के लिए, मान लीजिए कि एक ऐसा पृष्ठ है जो API प्रतिक्रिया के माध्यम से छवि URL प्राप्त करता है और 400x400 छवि को रेंडर करता है,

कुछ लेआउट स्थिति छवि के रेंडर होने पर 400px तक शिफ्ट हो जाएगी।

यह उपयोगकर्ता के लिए अप्रत्याशित गति है, जो UX के लिए हानिकारक है, और ब्राउज़र को स्क्रीन को रेंडर करने में भी

परोक्ष रूप से नकारात्मक प्रभावित करता है।

सुधार के लिए दो आसान तरीके हैं।

1. UI स्केलेटन लागू करें

- अधिकांश साइटें छवि के आकार या घटक के आकार के अनुसार स्केलेटन को ठीक से बनाती हैं। स्क्रीन विकसित करते समय इस पहलू पर विचार करें। Vue के मामले में, v-if और v-else का उपयोग करके प्रत्येक तत्व के लिए स्केलेटन बनाया जाता है।

2. ऊँचाई आरक्षित करें

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

- उत्तरदायी वेब आदि में, जहां छवि का आकार डिवाइस के आधार पर भिन्न होता है, ऊँचाई को स्थिर रूप से निर्धारित करना मुश्किल होता है। ऐसे मामलों में, आप सबसे छोटे डिवाइस या vh या vw का उपयोग कर सकते हैं।

3. छवि तत्वों में चौड़ाई और ऊँचाई निर्दिष्ट करें

- आप छवि तत्वों में चौड़ाई और ऊँचाई इस प्रकार जोड़ सकते हैं।

<img src="image.jpg" width="400" height="400">

भले ही वास्तविक छवि का आकार 400x400 न हो, यह ब्राउज़र को छवि के अनुमानित आकार के बारे में बताता है।

4. लेआउट परिवर्तन को रोकने के लिए वेब फ़ॉन्ट के लिए font-display: swap का उपयोग करें

- वैकल्पिक फ़ॉन्ट निर्दिष्ट करके, लेआउट शिफ्ट को रोका जा सकता है।

सबसे बड़ा सामग्रीपूर्ण पेंट (LCP)

स्क्रीन पर सबसे बड़ा तत्व रेंडर होने में लगने वाला समय है। आमतौर पर यह एक छवि होती है, और इसे सहज रूप से लोडिंग गति को तेज करने की आवश्यकता होती है।

1. छवि का आकार कम करें।

- जांचें कि क्या छवि का आकार रेंडरिंग आकार की तुलना में बहुत बड़ा है।

- छवि रेंडरिंग को अनुकूलित करने के लिए webp जैसे एक्सटेंशन का उपयोग करें। Webp हानिपूर्ण संपीड़न का उपयोग करते समय JPEG फ़ॉर्मेट की तुलना में लगभग 30% छोटा होता है, और बिना नुकसान वाले संपीड़न का उपयोग करते समय PNG की तुलना में लगभग 20% छोटा होता है।

- स्क्रॉल स्थिति के आधार पर लोडिंग के लिए लेज़ी लोडिंग पर भी विचार किया जा सकता है।

2. कैशिंग या CDN का उपयोग करें।

3. रेंडरिंग को अवरुद्ध करने वाले तत्वों को हटा दें।

- अधिकांश मेट्रिक प्रभावित होते हैं, इसलिए उन्हें हटा दें। जब ब्राउज़र स्क्रीन को रेंडर करता है, तो वह पहले हेड टैग में स्क्रिप्ट को लाता है और फिर रेंडर करता है, इसलिए जांचें कि क्या हेड टैग में स्क्रिप्ट (आमतौर पर बाहरी स्क्रिप्ट) को पहले रेंडर करने की आवश्यकता है। async और defer टैग का उपयोग करके, आप इसे आसानी से प्रबंधित कर सकते हैं।

* हेड में स्क्रिप्ट विशेषताओं के संबंध में, मैं बाद में एक अलग पोस्ट लिखूंगा।

4. बंडल आकार को कम करें।

- छवि रेंडरिंग गति धीमी होने के अलावा, यदि सर्वर से डेटा ट्रांसफर धीमा है, तो इसे बेहतर बनाने की आवश्यकता है।

यदि आप nginx जैसे प्रॉक्सी सर्वर का उपयोग कर रहे हैं, तो आप gzip संपीड़न का उपयोग कर सकते हैं।

* nginx कॉन्फ़िगरेशन के संबंध में, मैं बाद में एक और पोस्ट लिखूंगा।

पहला सामग्रीपूर्ण पेंट (FCP)

पृष्ठ पर पहली सामग्री के रेंडर होने का समय है।

1. इसी तरह, रेंडरिंग को अवरुद्ध करने वाले तत्वों को हटा दें।

2. HTML आकार को कम करें।

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

3. बाहरी वेब फ़ॉन्ट समस्या हो सकती है। font-display: swap; का सक्रिय रूप से उपयोग करके, डिफ़ॉल्ट फ़ॉन्ट को पहले रेंडर करें।

पहला इनपुट विलंब (FID)

जब उपयोगकर्ता पृष्ठ पर पहला इनपुट (क्लिक, स्क्रॉल, आदि) करता है, तो ब्राउज़र को इसे संसाधित करने में लगने वाला समय है। कभी-कभी, जब आप बटन दबाते हैं, तो यह अनुत्तरदायी हो सकता है, लेकिन वास्तव में यह अनुत्तरदायी नहीं है, बल्कि API प्रतिक्रिया की प्रतीक्षा कर रहा है।

1. अतुल्यकालिकता का अच्छी तरह से उपयोग करें ताकि जावास्क्रिप्ट मुख्य थ्रेड भारी कार्यों में फंस न जाए।

2. मुख्य थ्रेड से अलग, आप वेब वर्कर का उपयोग करके अन्य कार्य कर सकते हैं।

* वेब वर्कर के बारे में, मैं बाद में एक और पोस्ट लिखूंगा।

शब्द सीमा के कारण, मैं यहीं समाप्त करूँगा।