नमस्कार दोस्तों , आपका Indo blogging में स्वागत है। आज में आपको बताऊंगा Cumulative layout Shift Kya hai aur isko kaise fix kare.
दोस्तों , गूगल ने अपने एक नए Update की घोसणा करना दी है जो Mid June 2021 से सभी websites के ऊपर लागु हो जायगा।
इस अपडेट के बारे में अपने शायद सुना होगा या नहीं सुना है पर में आपको बता दू इस अपडेट का नाम है Page Experience.
Page Experience अपडेट के अंदर 7 फैक्टर आते है। जिसमे से 3 फैक्टर Core Web Vital के अंदर आते है।
इन्ही Factor में से एक Factor है Cumulative Layout Shift.
दोस्तों , अगर इन में से एक भी फैक्टर खराब हो जाता है तो आपकी वेबसाइट की loading speed decrease हो जायगी।
वेबसाइट की speed खराब होने से आपकी वेबसाइट की Ranking भी Google में down होने लगती है।
इसलिए आपको अपनी website के सभी Factor को ध्यान में रख कर Speed Optimisation करना है।
दोस्तों , Cls और Lcp एक दूसरे के पूरक है इसलिए आपको दोनों को समझ कर फिर इनको ऑप्टिमाइजेशन करना है।
क्योकि जब आप एक फैक्टर को सही करने जाओगे तो दूसरा फैक्टर automatically खराब हो जायगा।
इसलिए दोनों में संतुलन बनाना जरूरी है।
चलिए अब हम Cumulative Layout Shift kya hai के बारे में सीखते है।
CLS Kya hai –
चलिए दोस्तों, अब हम CLS होता क्या है वह समझते है। दोस्तों , में आपको एक example से CLS समझता हूँ।
दोस्तों , Suppose करो आप किसी website में visit करते है तो उसका menu bar आपको Top में दिखाई देता है।
जब आप वेबसाइट के लिंक पर क्लिक करते है तो Text के एलीमेन्ट पहले Visible हो जाते है और Image बाद में Visible होती है।
जैसे ही आप menu bar के किसी element पर क्लिक करने वाले होते है तो उसी समय image Appear हो जाती है। जिससे मेनू बार थोड़ा ऊपर खिसक जाता है।
अब बताई आपका experience website के लिए कैसा रहा। आपको खराब एक्सपीरियंस हुआ ना। इसी को ही Cumulative layout shift कहते है।
मतलब आपकी वेबसाइट के element का अचानक से खिसक जाना।
अब में आपको कुछ कारण बताऊंगा जिसकी वजह से क्युमुलेटिव लेआउट शिफ्ट की problem आती है।
Also Read –
Cumulative Layout Shift आने के कारण –
1 ) सबसे पहला कारण website की Image काअच्छे से Optimise नहीं होना।
2 ) आप अपनी वेबसाइट में ऐसे Images Use करते है जिनकी Proper Dimension नहीं होती है।
3 ) अपनी वेबसाइट में Wrong Fonts का उपयोग करना है।
4 ) आपकी वेबसाइट में Unused JavaScript का होना।
5 ) ऐसी Ads का उपयोग करना जिनकी प्रॉपर dimension नहीं है।
6 ) आपकी वेबसाइट का layout Proper तरीके से optimise नहीं होना।
Page Speed Insight me CLS kaise Check kare-
दोस्तों, Page Speed Insights में Cls को चेक करने के लिए नीचे दिए गए steps को follow करे।
1 ) सबसे पहले आपको अपने Browser में Page Speed Insights Type करना है और सर्च पर क्लिक करना है।
2 ) अब आपके सामने पेज speed Insights की ओफिसिअल वेबसाइट आ जायगी।
3 ) आपको इसको open करना है और सर्च अपनी वेबसाइट का Url डालना है।
4 ) यूआरएल डालने के बाद आपको Analyse के ऊपर क्लिक करना है।
5 ) कुछ seconds में आपकी website Analyse हो जायगी।
6 ) अब आपके सामने आपकी वेबसाइट का Cls score आ गया होगा। अगर आपका स्कोर 0.1 से कम है तो स्कोर best है। 0.1 से 0.25 है तो needs Improvement और 0.25 से अधिक है तो वेबसाइट का स्कोर खराब है।
7 ) अब आपको थोड़ा नीचे स्क्रॉल करना है यहाँ पर आपको Avoid Large layout shift दिखाई देगा।
8 ) आपको इसको open करना है। यहाँ पर आपको वह सभी element दिखाई दे जायँगे जो आपके cls को contribute करता है।
Cumulative Layout Shift Score –
Good Score – Below 0.1
Needs Improvement – 0.1 to 0.25
Bad Score – Greater than 0.25
CLS ko Kaise Fix kare –
चलिए दोस्तों , अब में आपको Cls को कैसे fix कर सकते है वह बताता हूँ।
1 ) सबसे पहले आपको image optimise करना चाहिए। Image ऑप्टिमाइजेशन के लिए आपको Size और dimension को कम से कम रखना है और web P इमेजेज का उपयोग करना है।
2 ) Cls improve करने के लिए आपको Fonts को भी optimise करना चाहिए।
3 ) आपको JavaScript और Css File को Minify करना चाहिए और उनको अच्छे से ऑप्टिमाइज़ करना चाहिए।
4 ) आपको अपने layout की optimisation पर भी ध्यान देना चाहिए।
Cumulative layout Shift Score का पता कैसे करे –
दोस्तों , आप दो तरिके से पता कर सकते है की आपका CLS Score अच्छा है या खराब है।
पहले तरीके में आपको Page Speed Insight का उपयोग करना होगा। आपको पेज स्पीड को ओपन कर लेना है और उसके बाद आपको Url में अपनी वेबसाइट का Address डाल देना है और सर्च पर क्लिक कर देना है।
कुछ सेकण्ड्स बाद आपकी वेबसाइट का सारा डाटा आपके सामने आ जायगा।
यहाँ पर आपको अपनी वेबसाइट का Cls Score दिख जायगा।
दूसरे तरिके में आपको गूगल सर्च कंसोल को ओपन करना है और लॉगिन कर लेना है।
लॉगिन करने के बाद आपको होमपेज पर webcore Vital का option दिख रहा होगा इसके ऊपर क्लिक करे।
यहाँ पर अगर आपके Cls और Lcp में कोई issue होगा तो वह दिखाई दे जायगा।
Bonus Tip –
अब में आपको मेरी Bonus Tip दूंगा जिससे आप definitely Cls को improve कर पायंगे।
आपको Page Speed Insight में जाना है और Avoid Largest Layout shift को चेक करना है।
यहाँ पर आपको सभी elements को चेक करना है की आप कोन से element को अपनी website से remove कर सकते है और कोन से को नहीं।
जैसे – Labels, Author Name और Date
जिस भी element को आप remove कर सकता है उसको remove कर दे और फिर अपने cls को चेक करे।
आपकी वेबसाइट का cls improve हो चूका होगा।
Final words on Cumulative layout Shift kya hai aur isko kaise fix kare
दोस्तों , मुझे आशा है आपको आज की पोस्ट Cumulative layout Shift kya hai aur isko kaise fix kare बहुत पसंद आयी होगी।
आज मैंने आपको कम्पलीट गाइड दे दी है की यह issue किस वजह से आता है और आप कैसे इसको identify कर सकते है।
आपको मैंने यह भी बता दिया है की अगर यह issue आए तो आप कैसे इसको Fix कर सकते है।
आप इस गाइड को अच्छे से समझे और analyse करे ताकि आप इस प्रॉब्लम से अपनी वेबसाइट को safe कर पाए ,
आशा है आपको आज की पोस्ट इन्फोर्मटिवे लगी होगी।
CLS से जुड़े सवाल और जवाब –
Q1) How do you find the cumulative layout shift?
Ans – आप पेज स्पीड इनसाइट टूल की मदद से इस issue को identify कर सकते है। यह टूल आपकी वेबसाइट के cls score को भी Measure करता है।
Q2) What causes cumulative layout shift?
Ans – आपकी वेबसाइट की इमेज का अच्छे से ऑप्टिमाइज़ नहीं होना, layout का Fix नहीं होना ,unused JS और wrong Font के use करने से यह issue Create होता है।
Q3) How do I fix the layout shift?
Ans – layout Shift को fix करने के लिए आपको सबसे पहले अपनी इमेज को Optimise करना होता है।
js और Css को minify कर दीजिये और उन elements को identify करे जो cls को contribute कर रहे है उन्हें remove कर दीजिये।
Q4) क्या CLS से Indexing प्रभावित होती है ?
Ans – जी हाँ , यह Core Web Vitals का भाग है अगर इसका Score खराब होगा तो आपकी वेबसाइट की रैंकिंग पर प्रभाव पड़ेगा।
Q5) क्या CLS खराब होने से वेबसाइट के व्यूज डाउन होते है ?
Ans – जी हां , क्यूंकि इससे आपकी वेबसाइट की रैंक डाउन होआ जायगी जिससे आपके व्यूज भी डाउन होआ जायँगे.
Q6) What is cumulative layout shift page speed?
Ans – यह आपकी पेज स्पीड का 15% को Contribute करता है।
Q7) एक अच्छा संचयी लेआउट शिफ्ट स्कोर क्या है?
Ans – 0.1 या उससे कम का स्कोर अच्छा CLS स्कोर माना जाता है।
Also, Read –
Superb definition
Bhai image ki kitni size ki honi chahiye aur right font kaun sa hai
image ka size 600*300 ka font georgia