नमस्कार दोस्तों Ishan Technical पर आपका स्वागत है इस पोस्ट में आपको Core Web Vitals के बारे में complete जानकारी मिलेगी ।
Table of contents
- Core Web Vitals क्या है ।
- Core Web Vitals के Metrics ।
- Core Web Vitals को Measure करने वाले टूल्स ।
- Core Web Vitals Issues को fixed करने के उपाय ।
Core Web Vitals क्या है
Core Web Vitals Mobile और Desktop पर किसी ब्लाग या बेवसाइट के पेजेज के real- world Users Experience को measure करता है और उसकी reports website Owners को provide करता है।
Core Web Vitals report में Mobile और Desktop दोनों section में हम देख सकते हैं कि user experience के हिसाब से कितने पेज अच्छे हैं, कितने पेज में improvement की आवश्यकता है और कितने पेज poor हैं । Open Reports पर क्लिक करके सभी पेजों के बारे में अधिक से अधिक जानकारी प्राप्त कर सकते हैं ।
Core Web Vitals के Metrics
- LCP (Largest Contentful Paint)
- FID (First Input Delay)
- CLS (Cumulative Layout Shift)
LCP (Largest Contentful Paint)
LCP उस समय को बताता है जो किसी users के द्वारा किसी बेवसाइट के URL को visits करने पर ब्राउजर को viewport में सबसे बड़े एलीमेन्ट को दिखाने में लगता है ।
अगर दूसरे शब्दों में कहें तो यदि कोई user किसी बेवसाइट के URL पर visit करता है तो उस URL के सबसे बड़े Elements(Images,Videos or Block-Level Text)के loading में Browser जो समय लेता है वह LCP समय होता है ।
एक अच्छे user experience के लिए LCP का समय 2.5 सेकेण्ड या इससे कम होना चाहिए यदि यह समय 2.5 -4.0 second है तो उस बेवसाइट के पेज को सुधारने की आवश्यकता पड़ेगी और यदि वही समय 4.0 second से अधिक है तो उस पेज को poor user-experience की श्रेणी में रखा जाता है ।
FID (First Input Delay)
जब पहली बार यूजर्स के द्वारा किसी लिंक या बटन पर क्लिक करने पर Browser को Respons देने में जितना समय लगता है उतना समय FID में Count होता है यह माप Users के द्वारा पहली बार क्लिक किये गये किसी Interactive Elements से ली जाती है ।
जिस पेज में FID का समय यदि 100ms या इससे कम है तो वह पेज यूजर एक्सपीरियंस के लिए अच्छा है, 100ms-300ms है तो उस पेज में सुधार करने की आवश्यकता है और यदि 300ms से अधिक है तो वह पेज यूजर एक्सपीरियंस के लिए बिल्कुल भी सही नहीं है ।
CLS (Cumulative Layout Shift)
किसी बेव पेज के लोड होने पर जो अनचाहा Layout Shift होता है उस अनचाहे लेआउट शिफ्ट का अलग- अलग स्कोर बना कर जोड़ने पर जो कुल स्कोर बनता है CLS उस स्कोर को measure करता है बेव पेज पर यह अनचाहा लेआउट शिफ्ट यूजर एक्सपीरियंस को खराब करता है क्योंकि जब यूजर किसी Interactive Elements को इंटरैक्ट करने की कोशिश करता है तो Layout Shift की वजह से वह Interact नहीं कर पाता है । किसी बेव पेज पर बटन, लिंक्स,इमेज, बैनर, टेक्स्ट आदि Elements अनचाहा लेआउट शिफ्ट create करते हैं ।
बेव पेज को लोड होने पर किसी Button, Links,Image,Banner और Text बिना किसी एनीमेशन के अपना स्थान बदलते हैं तो इसे ही अनचाहा लेआउट शिफ्ट कहते हैं CLS इन्हीं अनचाहे लेआउट शिफ्ट के कुल स्कोर को मापता है। CLS के लिए 0.1 या इससे कम का स्कोर अच्छा होता है, 0.25 या इससे कम का स्कोर होता है तो उस पेज को improvement की आवश्यकता होती है, 0.25 से अधिक स्कोर यूजर एक्सपीरियंस को प्रभावित करता है ।
अधिकतम लेआउट शिफ्ट की वजह से जब कोई यूजर बेव पेज पर किसी लिंक या बटन पर क्लिक करने की कोशिश करता है तो वह लिंक या बटन पर सही ढंग से क्लिक नहीं कर पाता है क्योंकि लिंक या बटन खिसक कर अपना स्थान बदल देते हैं यह यूजर एक्सपीरियंस के लिए बिल्कुल भी सही नहीं है ।
Core Web Vitals को Measure करने वाले टूल्स
- Google Search Console.
- PageSpeed Insights.
- Lighthouse.
- Chrome DevTools.
- Chrome UX Report.
- Web Vitals Extension.
Core Web Vitals Issues को fixed करने के उपाय
Core Web Vitals के issues को fixed करने से पहले आने वाले issues को समझना बहुत ही आवश्यक है जो ऊपर दिए गए टूल्स की मदद से इन issues के बारे में जान सकते हैं नीचे कुछ तरीके हैं जिनकी मदद से Core Web Vitals metrics को maintain करके Issues को fixed कर सकते हैं ।
- अच्छी Web Hosting प्रयोग करें क्योंकि यदि बेव होस्टिंग अच्छी नहीं होती है तो बेव पेजों को लोड होने में समस्या होती है ।
- Images,Banner,slider और videos को compress करके बेव पेज में लगाएँ और इनकी आवश्यक width, height को fixed कर दें ।
- Interactive Elements की position को fixed करने की कोशिश करें ।
- अनावश्यक CSS और JavaScript code का प्रयोग न करें ।
- यदि आवश्यक न हो तो CDN और third- party code का प्रयोग बेवसाइट में न करें ।
- सही Font का प्रयोग करें और जहाँ तक हो सके system Font का प्रयोग करने की कोशिश करें ।
- यदि आवश्यक न हो तो Render Blocking Resources को Remove करने की कोशिश करें ।
- async और defer JavaScript Attribute का प्रयोग करें ।
0 comentários:
एक टिप्पणी भेजें