आज का लेख How to Fix the Cumulative Layout Shift in 2024 पर है। आज मैं आपको बताऊंगा, कि (What is Cls Issue) CLS क्या है, 2024 में Cls Fix Kaise Kare और वेबसाइट की गुणवत्ता, यूजर एक्सपीरियंस, और SEO पर क्या प्रभाव होगा।
CLS क्या है- (CLS Fix Kaise Kare)
CLS Page Experience सुधारने के लिए एक जरूरी Metric है, इसका पूरा नाम Cumulative Layout Shift है। CLS से आप अपनी वेबसाइट की Visual Stability को देख सकते हैं।
CLS से पता चलता है, कि जब वेबसाइट का पेज लोड होता है, तब उसके लेआउट और एलिमेंट्स कितनी बार चेंज होते हैं। अगर वेबसाइट के एलिमेंट्स एक से ज्यादा बार शिफ्ट होते हैं, तो इससे वेबसाइट पर आने वाले यूजर को कंटेंट पढ़ने में, बटन और एलिमेंट्स पर क्लिक करने की समस्या का सामना करना पड़ सकता है। CLS Fix Kaise Kare ये जानने से पहले CLS Score के बारे में जानते हैं।
CLS का Score क्या होना चाहिए
स्कोर समझने के लिए इसको तीन पार्ट में बांट देते हैं और इसे सही से समझते हैं।
- Good
- Need Improvement
- Poor
1. Good
वेबसाइट की अच्छी रैंकिंग के लिए Cls Issue का स्कोर 0.1 या उससे कम का होना चाहिए।
2. Need Improvement (Cls Issue More Than 0.1)
अगर वेबसाइट का CLS स्कोर 0.1 से 0.15 के बीच का होता है, तो आपको CLS Fix करने की जरूरत है।
3. Poor (Cls Issue More Than 0.25)
वेबसाइट के लिए सबसे बुरा CLS Score 0.15 से 0.25 के बीच तक का होता है। अगर वेबसाइट का स्कोर 0.25 से ज्यादा है, तो यह वेबसाइट के लिए सबसे बुरा स्कोर माना जाता है।
CLS के Seo में क्या फायदे हैं
- CLS को कम करके आप अपनी वेबसाइट को रिस्पॉन्सिव बना सकते हैं।
- वेबसाइट का CLS Score सही होने से वेबसाइट को गूगल में अच्छा नंबर मिलता है। जिससे यूजर्स भी वेबसाइट के प्रति लॉयल रहता है।
- CLS का इस्तेमाल करके वेबसाइट की रैंकिंग को सुधार सकते हैं।
CLS Fix Kaise Kare- (How To Fix Cumulative Layout Shift)
CLS Fix करने के लिए उसके स्कोर को कम करना होगा, जिसके लिए आप इन तरीकों को फॉलो कर सकते हैं।
- Video Optimize करें
- Web और Icon Fonts का इस्तेमाल
- Embed and iFrames का इस्तेमाल
1. Video Optimize करें
विडीयो ऑप्टिमाइज करने से वीडियो फॉर्मेट का साइज, उसकी क्वालिटी और रिज़ॉल्यूशन को पहले से अच्छा और बेहतर बना सकते हैं। इससे फायदा यह होगा, कि वीडियो जल्दी लोड होने लगेगी। जिससे कम डेटा का इस्तेमाल होगा।
और वीडियो और ज्यादा अट्रैक्टिव लगेगी।
Video Optimize कैसे करें
आप वीडियो ऑप्टिमाइज़ करते समय इन तरीकों को फॉलो कर सकते हैं, जो इस प्रकार हैं।
1. वीडियो की फॉर्मेटिंग पर ध्यान दें
वीडियो की फॉर्मेटिंग पर इस प्रकार से ध्यान देना है, जिससे वीडियो ब्लॉग और यूज़र के डिवाइस पर सही से दिखाई दे। ज्यादातर ब्लॉग में Mp4, OGG और WebM ये तीन प्रकार के फार्मेट का इस्तेमाल करते हैं। आप किसी भी एक फॉर्मेट का इस्तेमाल अपनी वीडियो फॉर्मेटिंग के लिए कर सकते हैं।
2. वीडियो की रिज़ॉल्यूशन पर ध्यान दें
वीडियो की फॉर्मेटिंग साइज और क्वालिटी के अनुसार वीडियो का रिज़ॉल्यूशन को चुनना चाहिए। अगर आप वीडियो में हाई रिज़ॉल्यूशन का इस्तेमाल करते हैं, तो वीडियो को जल्दी लोड होने में समय लग सकता है। जिससे यूज़र का डाटा जल्दी खत्म होगा, इसलिए वीडियो रिज़ॉल्यूशन के लिए आम तौर पर 1080p या 720p का इस्तेमाल किया जाता है। आप किसी एक रिज़ॉल्यूशन का इस्तेमाल अपनी वीडियो में कर सकते हैं।
3. वीडियो डिस्टेंस पर ध्यान दें
वीडियो को टॉपिक के अनुसार छोटा या बड़ा रखना चाहिए, क्युकी इससे यूजर्स को वीडियो का कंटेंट समझने में आसानी रहेगी। इसके लिए आपको ध्यान देना की विडियो को ना ज्यादा छोटा रखना है, और नाही ज्यादा लंबा रखना है। अगर वीडियो ज्यादा समय की हुई तो यूजर्स वीडियो को बीच में देखना छोड़ सकते हैं। इसलिए वीडियो की डिस्टेंस को कम से कम 3 से 10 मिनट तक का इस्तेमाल करना अच्छा मानते हैं।
2. Web और Icon Fonts का इस्तेमाल करें
अक्सर सभी अपनी वेबसाइट पर अलग अलग तरह के फोंट्स का इस्तेमाल करते हैं जिन्हें कस्टम font कहते हैं।
सभी अपनी वेबसाइट के डिजाइन और ब्रांडिंग को अलग और दूसरों से बेहतर दिखाने के लिए इन फौंट्स का इस्तेमाल करते हैं।
लेकिन इन फौंट्स का इस्तेमाल करने से वेबसाइट लोडिंग टाइम बढ़ने के साथ वेबसाइट स्पीड पर बुरा प्रभाव पड़ता है। लेआउट शिफ्ट बदलती है और इसमें सुधार नहीं करने से बढ़ोतरी होती है। इससे वेबसाइट का CLS स्कोर खराब हो सकता है। यही नहीं इससे यूजर एक्सपीरियंस पर भी बुरा प्रभाव पड़ता है।
दोस्तों लेकिन ऐसा होता क्यों है – CLS Fix ना होने के मुख्य दो कारण हो सकते हैं
- Flashes Of Invisible Text (FOIT)
- Flashes Of Unstyled Text (FOUT)
1. Flashes Of Invisible Text (FOIT)
जब आप कस्टम Font का इस्तेमाल अपनी वेबसाइट पर करते हैं, तो कस्टम Font के लोड होने तक वेबपेज का टेक्स्ट Hide या Invisible रहता है।
इसीलिए जब कोई यूजर आपकी वेबसाइट को खोलता है, तो वेबसाइट का कस्टम फोंट लोड होने तक यूजर को कोई भी टेक्स्ट या इनफॉरमेशन दिखाई ही नहीं देती है। क्योंकि कस्टम फॉन्ट दिखने के लिए तैयार होने तक वेबपेज खाली दिखाई देता है।
अगर कस्टम फोंट लोड होने में थोड़ी भी देरी हो जाती है, तो इसका मतलब यह होगा कि आपकी वेबसाइट बहुत ज्यादा धीरे काम कर रही है। इससे आपकी वेबसाइट की लेआउट बदल सकती है।
यह देखकर यूजर आपकी वेबसाइट को बहुत जल्दी छोड़ कर चला जाता है। जिससे वेबसाइट का बाउंस रेट भी बढ़ता है। बाउंस रेट ज्यादा होने कारण गूगल इसे खराब यूजर एक्सपीरियंस की कैटेगरी में रखता है।
2. Flashes Of Unstyled Text (FOUT)
जब आप कस्टम Font का इस्तेमाल अपनी वेबसाइट पर करते हैं तो आपको कुछ परेशानियों का सामना करना पड़ता है
यूजर जब वेबसाइट पर आता है तो कस्टम फोंट लोड होने तक Default फोंट में वेबपेज टेक्स्ट यूजर डिवाइस में दिखाई देता हैं। जब आपका कस्टम Font दिखने के लिए तैयार हो जाता है तो Default Font की जगह कस्टम Font दिखने लगता है लेकिन इससे कई बार वेब पेज में लेआउट शिफ्ट की दिक्कत आती है। इसके कारण भी CLS स्कोर बढ़ जाता है।
कस्टम फोंट समस्या को ठीक कैसे करें
अगर आप अपनी वेबसाइट पर कस्टम फोंट का इस्तेमाल करते हैं, तो आपको Flashes Of Invisible Text (FOIT) और Flashes Of Unstyled Text (FOUT) दोनों समस्याओं का सामना करना पड़ रहा होगा। इसके कारण आपकी वेबसाइट का CLS स्कोर भी ज्यादा होगा। क्योंकि इनके कारण Layout Shift होती है इन्हें ठीक करने के लिए आपको Font:display Value को अपनी वेबसाइट पर सेट करना होगा।
यह भी पढ़ें:-
- LCP क्या है और इसे कैसे सुधार सकते हैं, इस लेख को पढ़ सकते हैं।
- FCP क्या है और इसे कैसे सुधार सकते हैं, इस लेख को पढ़ सकते हैं।
क) Font:Display क्या होता है
वेबसाइट पर कस्टम Font लोड ना होने के कारण वेबसाइट थोड़ी अलग दिखाई देती है। इस दिक्कत को दूर करने के लिए आप Font:Display का इस्तेमाल कर सकते हैं। इसमें आप Auto, Fallback, Swap और Optional फॉन्ट इस्तेमाल कर सकते हैं।
यह CSS का एक हिस्सा होता है, जो वेब ब्राउज़र को सन्देश देता है कि कस्टम Font को तभी दिखाया जाए जब वह लोड होकर तैयार हो जाए। लेकिन अगर कस्टम font तैयार नहीं है या किसी वजह से लोड नहीं हुआ है तब ब्राउज़र वेबसाइट के Default Font या Fallback Font को दिखाता है।
मुख्य बिंदु –
- Fallback Font वेबसाइट का आरक्षित या बैकअप फोंट होता हैं
- हमेशा कस्टम Font से मिलते-जुलते Fallback Font का इस्तेमाल करें
- Font Best Practices को समझने के लिए गूगल रिसोर्सेज पढ़ें
ख) Font Preload का इस्तेमाल करें
इसका इस्तेमाल करके आप फोंट्स को जल्दी लोड करवा सकते है। इसके लिए आपको <link rel=preload> का इस्तेमाल करना होगा। यह एक ऐसा HTML Tag होता है, जो वेबसाइट के कुछ रिसोर्सेज को जल्दी लोड करने के लिए ब्राउज़र को सन्देश देता है। जैसे – इमेज और फॉन्ट।
Font:Display Optional और Font Preload को WordPress और Blogger दोनों प्लेटफार्म पर इस्तेमाल कर सकते हैं। इसे वर्डप्रेस पर इस्तेमाल करने के लिए आप Better Resource Hints और Wp Rocket Plugin का इस्तेमाल कर सकते हैं। ब्लॉगर पर इनका इस्तेमाल करने के लिए आपको HTML कोड में बदलाव करना होगा। आप गूगल के रिसोर्सेज से इन कोड को ले सकते हैं, और CLS Fix कर सकते हैं।
3. Embed and iFrames का इस्तेमाल
CLS स्कोर खराब होने के पीछे इमेज के अलावा Embed, iFrame और Dynamically Injected Content भी होते हैं।
Embed content क्या होते हैं – वेबसाइट कंटेंट में हम अक्सर कुछ Embeddable विजेट का इस्तेमाल कंटेंट Embed करने के लिए करते हैं। काफी लोग अक्सर अपनी Websites में यूटूब विडियो या सोशल मीडिया पोस्ट Embed करते हैं।
iFrame content क्या होते हैं –
जब हम किसी वेब पेज में किसी दुसरे पेज के कंटेंट को एम्बेड करते हैं तो इसे iframe कंटेंट कहा जाता हैं। एक iframe जो HTML एलिमेंट होता है इसे inline फ्रेम भी कहा जाता है।
Embed content SEO का हिस्सा होते हैं। यह वेबपेज की वैल्यू बढ़ाते हैं। लेकिन यह भी सच है कि यह लेआउट शिफ्ट का कारण भी बन सकते हैं। इन विजेट के लिए वेबसाइट में जगह आरक्षित रखनी चाहिए। ताकि ब्राउज़र को वेब पेज कंटेंट को अच्छे से व्यवस्थित करने में परेशानी न हो। इससे CLS स्कोर भी अच्छा हो सकता है।
4. Dynamically Injected Content
Viewport – यह वेबसाइट का वह हिस्सा होता है जो यूजर डिवाइस पर दिखाई देता है।
देरी से लोड होने वाले कंटेंट( Late load content) को कभी भी viewport के सबसे ऊपरी और निचले हिस्से में मत रखें। इससे बड़ा लेआउट शिफ्ट देखने को मिल सकता है। क्योंकि यह कंटेंट अपने आस पास के कंटेंट को इधर-उधर खिसका सकता हैं। ऐसा करने से कभी-कभी कंटेंट स्क्रीन से ही हट जाता है।
इस कंटेंट से होने वाले लेआउट शिफ्ट को रोकने के लिए आप fix साइज़ के कंटेनर का इस्तेमाल कर सकते हैं
इसके अलावा आप Carousel का इस्तेमाल भी कर सकते हैं। वर्डप्रेस में इसे आसानी से किया जा सकता हैं। जब आप कोई पोस्ट लिखते हैं तो प्लस बटन पर जाकर आप Carousel को ले सकते हैं। इसके अलावा आप किसी पैराग्राफ को सेलेक्ट करके टूल्स से इसे आसानी से इस्तेमाल कर सकते हैं।
Dynamically Injected Content से होने वाले लेआउट शिफ्ट से बचने के लिए हमेशा इन कंटेंट के लिए जगह अरक्षित (Reserve) रखें, ताकि ब्राउज़र आसानी से वेब पेज कंटेंट को अच्छे से व्यवस्थित कर सके। आप अरक्षित जगह रखने के लिए CSS में Min-height को अपडेट कर सकते हैं। इससे CLS काफी हद्द तक कम की जा सकती है।
निष्कर्ष- CLS Fix 2024
आज का लेख CLS Fix Kaise Kare पर है। मैं आशा करता हूं, कि आपको इस लेख से कुछ सीखने को मिला होगा। मैं यह भी आशा करता हूं, कि इस लेख में मिली जानकारी आपको CLS Issue को ठीक करने में सहायता करेगी।
CLS, Google Search Console के Core Web Vitals के तीन जरूरी पॉइंट्स LCP, FCP और CLS हैं। जिन्हे मैने अपने इन सभी लेख में समझाने कि पूरी कोशिश की है। अगर अपने ये लेख नहीं पढ़ें हैं, तो इन्हे पढ़ सकते हैं। क्योंकि यह आपकी Google Core Web Vitals के Issue को सुधारने में मदद करेंगे।
आप कॉमेंट करके अपनी प्रतिक्रिया अवश्य दें, की आपको Techaasvik Blog पर दी जाने वाली जानकारी कैसी लगती है। लेख को पढ़ तक पढ़ने के लिए आपका धन्यवाद, राधे राधे।