गाइड्स
सिंगल पेज एप्लिकेशन के लिए Core Web Vitals गाइड
सिंगल पेज एप्लिकेशन (SPA) क्लाइंट-साइड रूटिंग और भारी जावास्क्रिप्ट बंडलों के कारण पारंपरिक पृष्ठों की तुलना में विशिष्ट प्रदर्शन चुनौतियां पेश करते हैं।
CrUX फील्ड डेटा का विश्लेषण करें, सर्वर-साइड रेंडरिंग (SSR) के साथ शुरुआती LCP में सुधार करें, लंबे कार्यों को विभाजित करके INP घटाएं और CLS रोकने हेतु कंटेनर आकार तय करें।
SPA आर्किटेक्चर में हार्ड और सॉफ्ट नेविगेशन का अंतर
गूगल के आधिकारिक Core Web Vitals मेट्रिक्स (LCP, INP, CLS) प्रारंभिक दस्तावेज़ लोड पर दर्ज किए जाते हैं। जब कोई उपयोगकर्ता SPA में क्लाइंट-साइड राउटर के माध्यम से नेविगेट करता है, तो ब्राउज़र पृष्ठ को पुनः लोड नहीं करता है। वास्तविक रूट संक्रमण समय को मापने के लिए web-vitals लाइब्रेरी के प्रयोगात्मक सॉफ्ट नेविगेशन API का उपयोग करें।
क्लाइंट-साइड रेंडरिंग में LCP बाधाओं का समाधान
SPA में मुख्य सामग्री प्रदर्शित करने से पहले ब्राउज़र को भारी जावास्क्रिप्ट डाउनलोड और पार्स करना पड़ता है जिससे Largest Contentful Paint में देरी होती है। सर्वर-साइड रेंडरिंग (SSR) या स्टेटिक साइट जेनरेशन (SSG) अपनाएं। महत्वपूर्ण CSS के साथ 150KB से कम आकार का प्रारंभिक HTML भेजें और मुख्य इमेज को fetchpriority='high' दें।
उपयोगकर्ता इंटरैक्शन के दौरान Interaction to Next Paint (INP) में सुधार
INP यह मापता है कि क्लिक, टैप या कीबोर्ड इनपुट के बाद इंटरफ़ेस कितनी तेजी से प्रतिक्रिया देता है। SPA में जटिल स्टेट अपडेट मुख्य थ्रेड को अवरुद्ध कर देते हैं। 50ms से अधिक समय लेने वाले भारी कार्यों को scheduler.yield() के साथ छोटे टुकड़ों में बांटें और सघन गणनाओं को Web Workers में स्थानांतरित करें।
हाइड्रेशन प्रक्रिया के दौरान Cumulative Layout Shift (CLS) की रोकथाम
सर्वर से प्राप्त HTML में जावास्क्रिप्ट द्वारा इवेंट हैंडलर जोड़ने की हाइड्रेशन प्रक्रिया दृश्य अस्थिरता का प्रमुख कारण है। यदि सर्वर का HTML और क्लाइंट कंपोनेंट की प्रारंभिक स्थिति मेल नहीं खाती, तो लेआउट खिसक जाता है। सभी गतिशील ब्लॉकों पर aspect-ratio या min-height निर्दिष्ट करके लेआउट शिफ्ट रोकें।
लैब और वास्तविक फील्ड वातावरण में निरंतर निगरानी
डेवलपर मशीन पर एकांत परीक्षण कमजोर मोबाइल प्रोसेसर या अस्थिर नेटवर्क स्थितियों को नहीं दर्शाते। उपयोगकर्ताओं के 75वें प्रतिशतक (p75) को ट्रैक करने के लिए web-vitals लाइब्रेरी के साथ रियल यूजर मॉनिटरिंग (RUM) स्थापित करें। कोड का आकार बढ़ने से रोकने के लिए CI/CD पाइपलाइन में प्रदर्शन बजट निर्धारित करें।
वेबसाइट प्रदर्शन: HTML वितरण, पेलोड आकार और संभावित रेंडर अवरोधक।
मुफ्त ऑडिट शुरू करें →