वर्डप्रेस में गूगल कोर वेब विटल्स: अपनी साइट को कैसे ऑप्टिमाइज़ करें

क्या आपने अभी तक Google कोर वेब विटल्स के लिए अपनी साइट को अनुकूलित करने में कामयाबी हासिल की है?

आप नहीं कह सकते, कोई बात नहीं। आप अकेले नहीं हैं। वास्तव में, Searchmetrics ने पाया कि शीर्ष 20 लाख साइटों में से 96% तक^[1] कोर वेब विटल्स परीक्षण विफल। मैं कोई गणितज्ञ नहीं हूँ, लेकिन यह बहुत कुछ लगता है।

Google कोर वेब विटल्स नवीनतम उपकरण हैं जो Google को आपकी वेबसाइट का विश्लेषण करने में सहायता करते हैं। वेबसाइटों को रैंक करने के लिए Google अभी भी गति, सामग्री की गुणवत्ता और मोबाइल-मित्रता जैसी चीज़ों का उपयोग करेगा। इसलिए, यदि आप अच्छी रैंकिंग कर रहे हैं, तो आप थोड़ा आराम कर सकते हैं।

लेकिन सिर्फ इसलिए कि आपके प्रतिस्पर्धी बढ़त की तलाश में हैं जो उन्हें शीर्ष पर ले जाएगा। आप उनसे आगे कैसे रह सकते हैं? आप शानदार उपयोगकर्ता अनुभव प्रदान करते हैं, जो कि Google भी चाहता है।

और, यदि आपकी वेबसाइट बेहतरीन अनुभव प्रदान करती है, तो आपको बड़े पुरस्कार मिलेंगे और महान सामग्री। इस लेख में, हम आपको ऐसी वेबसाइट बनाने में मदद करने जा रहे हैं।

हम Google कोर वेब विटल्स में गोता लगाने के साथ शुरुआत करेंगे, ताकि आप ठीक से जान सकें कि उनका क्या मतलब है और वे क्या मापते हैं। फिर, हम उन पेजों के निर्माण के लिए अपनी सर्वोत्तम युक्तियाँ साझा करेंगे जो हमेशा कोर वेब विटल्स को पास करते हैं।

हालांकि टाइमलाइन में बदलाव किया गया है, और जून के मध्य तक अपडेट को रोल आउट नहीं किया जाएगा, फिर भी हमारे पास करने के लिए बहुत काम है। आएँ शुरू करें!

📚 सामग्री तालिका:

Google कोर वेब विटल्स क्या हैं (और आपको उनकी परवाह क्यों करनी चाहिए)?

यदि Google अपडेट आपके बस की बात नहीं है, तो आप शायद सोच रहे होंगे कि उत्साह क्या है। आइए विवरण पर एक त्वरित नज़र डालें।

मई 2020 में वापस, Google ने अपनी खोज रैंकिंग, कोर वेब विटल्स में एक नए अतिरिक्त की घोषणा की। इस तरह की घोषणा का मतलब आमतौर पर बहुत काम होता है कोई व्यक्ति। वेबसाइटों को रैंक करने के लिए उपयोग किए जाने वाले 200 से अधिक अद्वितीय कारकों के साथ^[2]Google रैंकिंग कवर सब कुछ.

आप यह भी पाएंगे कि आपकी डोमेन आयु आपकी रैंकिंग में कुछ भूमिका निभाती है। इस मामले में, Google कोर वेब विटल्स उपयोगकर्ता अनुभव पर ध्यान केंद्रित करते हैं, या आपकी वेबसाइट का उपयोग करना कैसा लगता है।

आगे बढ़ते हुए, Google कोर वेब विटल्स में मेट्रिक्स की एक श्रृंखला होगी, लेकिन 2021 के अपडेट में तीन शामिल हैं: सबसे बड़ा कंटेंटफुल पेंट (LCP), संचयी लेआउट शिफ्ट (CLS), और पहला इनपुट विलंब (FID)।

सबसे बड़ा कंटेंटफुल पेंट (LCP)

आपका एलसीपी इस बात का माप है कि सामग्री के सबसे बड़े हिस्से को डाउनलोड होने में कितना समय लगता है। यह एक छवि या बस पाठ हो सकता है। जो भी हो, एक बार लोड होने के बाद, वेबसाइट महसूस करता तैयार।

बेहतर अभी तक, सबसे बड़ा सामग्रीपूर्ण पेंट केवल उपयोगकर्ता के व्यूपोर्ट में सामग्री को मापता है। फ़ोल्ड के नीचे की कोई भी इमेज आपके LCP स्कोर में नहीं गिनी जाएगी।

यदि आप उत्तीर्ण परिणाम प्राप्त करना चाहते हैं, तो आपको अपना LCP 2.5s से कम होना चाहिए।

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

सीएलएस लोडिंग प्रक्रिया के दौरान आपके पृष्ठ की स्थिरता को मापता है। यह उन सभी स्थानांतरणों को मापता है जो तब हो सकते हैं जब छवियों को देर से लोड किया जाता है या फोंट स्विच शैलियों को बदलते हैं। यहां तक ​​कि बटन जैसी चीजें भी पृष्ठ पर अनपेक्षित स्थानांतरण कर सकती हैं।

यदि आपके तत्व अचानक (और 0.1 से अधिक) बढ़ रहे हैं, तो आपके पास संबोधित करने के लिए सीएलएस समस्या है।

प्रथम इनपुट विलंब (FID)

FID मापता है कि कोई ब्राउज़र कितनी जल्दी इंटरैक्टिव हो जाता है। इसका मतलब है कि आगंतुक कर सकते हैं सामान और एक प्रतिक्रिया प्राप्त करें। इसमें लिंक क्लिक करना, बटन दबाना या चेकबॉक्स पूरा करना जैसी चीज़ें शामिल हैं।

आप इस मीट्रिक को पास कर सकते हैं यदि उपयोगकर्ता 100ms के भीतर प्रपत्रों और सर्वेक्षणों में डेटा दर्ज करने जैसी चीज़ें कर सकते हैं।

अपने Google कोर वेब विटल्स स्कोर का परीक्षण (और पढ़ें) कैसे करें

कोर वेब विटल्स के बारे में सबसे अच्छी चीजों में से एक उनका उपयोगकर्ता-अनुकूल दृष्टिकोण है। यह रहस्यमय मेट्रिक्स का एक गुच्छा नहीं है जो कि परीक्षण करना मुश्किल है (अकेले समझने दें)। इसके बजाय सब कुछ कर सकते हैं अपनी वेबसाइट का परीक्षण करने और उसमें सुधार करने के लिए कई आधिकारिक Google टूल का उपयोग करना बहुत आसान है।

जब परीक्षण की बात आती है, तो आपको दो मुख्य श्रेणियों के बारे में जानने की आवश्यकता होती है: प्रयोगशाला परीक्षण उपकरण और क्षेत्र परीक्षण उपकरण. फील्ड टेस्टिंग टूल वास्तविक दुनिया के डेटा द्वारा समर्थित हैं जो वास्तविक उपयोगकर्ताओं से लिए गए हैं जो क्रोम उपयोगकर्ता अनुभव रिपोर्ट में ऑप्ट इन करते हैं। यह उन्हें कोर वेब विटल्स के लिए अधिक मूल्यवान बनाता है। हम दो विकल्पों पर ध्यान केंद्रित करने जा रहे हैं:

• Google खोज कंसोल से Google कोर वेब विटल्स रिपोर्ट।
• पेज स्पीड इनसाइट्स परीक्षण जिसमें फ़ील्ड और लैब दोनों परिणाम होते हैं।

आइए Google कोर वेब विटल्स रिपोर्ट से शुरू करें क्योंकि यह हमें बताएगी कि कौन से URL में समस्या है।

Google खोज कंसोल का उपयोग करना

एक बार जब आप कंसोल में हों, तो खोजने के लिए नीचे स्क्रॉल करें अनुभव → कोर वेब विटल्स। यहां क्लिक करने पर एक पूरी-साइट रिपोर्ट खुलेगी जिसमें प्रत्येक URL को अच्छा, सुधार की आवश्यकता है, या खराब के रूप में वर्गीकृत किया गया है।

⚠️ यदि आपने Google खोज कंसोल सेट नहीं किया है, तो वर्डप्रेस के साथ Google खोज कंसोल का उपयोग करने के लिए हमारी मार्गदर्शिका को पढ़ने के लिए कुछ समय निकालें।

पर क्लिक करें खुली रिपोर्ट अधिक विशिष्ट जानकारी प्राप्त करने के लिए कि किस कोर वेब विटल्स मीट्रिक के कारण सबसे अधिक परेशानी हो रही है।

अगर आप क्लिक करते हैं प्रकार आपको उन URL की पूरी सूची मिलेगी जिनका परीक्षण किया जा सकता है पेज स्पीड इनसाइट्स अधिक जानकारी के लिए।

पेज स्पीड इनसाइट्स का उपयोग करना

अपना पृष्ठ URL दर्ज करें और क्लिक करें विश्लेषण परीक्षण शुरू करने के लिए। विश्लेषण को पूरा करने में बहुत अधिक समय नहीं लगना चाहिए जो डिफ़ॉल्ट रूप से पहले मोबाइल परिणाम प्रदर्शित करेगा। हालांकि, आप नया परीक्षण चलाए बिना मोबाइल और डेस्कटॉप दोनों से कोर वेब विटल्स डेटा देख सकते हैं। आपको पृष्ठ के बिल्कुल शीर्ष पर परिणाम मिलेंगे:

यदि आप अपने पूरे पृष्ठ का परीक्षण करना चाहते हैं तो क्लिक करें मूल सारांश। जैसा कि आप देख सकते हैं, कोर वेब विटल्स को प्रतिशत के साथ सहायक रूप से बुकमार्क किया गया है जो दर्शाता है कि वे कितनी बार पास होते हैं। यह पृष्ठ एक ठोस पास है, लेकिन विफल पृष्ठों के लिए हम क्या कर सकते हैं?

मैं अपना Google कोर वेब विटल्स स्कोर सुधारने के लिए क्या कर सकता हूं?

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

अपनी होस्टिंग को अपग्रेड करें

हां, सर्वर प्रतिक्रिया को बेहतर बनाने के लिए एक अच्छा तरीका होने से बेहतर कोई तरीका नहीं है। वास्तव में, मेजबानों को बदलना मुश्किल हो सकता है (कीमत का उल्लेख नहीं करना), लेकिन आपको साझा होस्टिंग से समर्पित होस्टिंग तक छलांग लगाने की आवश्यकता नहीं है। मेरा मतलब है, वह छलांग बहुत सारे प्रदर्शन के मुद्दों को हल करेगी, लेकिन एक तेज सर्वर के लिए एक छोटी सी छलांग भी ध्यान देने योग्य प्रदर्शन सुधार प्रदान कर सकती है।

ऐसा कहने के बाद, यदि आपने पहले ही बदलाव करने का फैसला कर लिया है, तो सबसे अच्छा प्रदर्शन करने वाले वर्डप्रेस होस्ट की हमारी तुलना पहले पढ़ें। लेकिन, यदि आप वास्तव में जल्दी में हैं, तो नीचे दी गई तालिका देखें:

मानक अनुकूलन के अलावा, उपरोक्त प्रत्येक होस्ट सर्वर-साइड कैशिंग के कुछ रूप प्रदान करता है। कैशिंग आपकी साइट के HTML संस्करण को आपके सर्वर पर संग्रहीत करने की प्रक्रिया है, जिससे इसे पुनः प्राप्त करना आसान हो जाता है। सर्वर-साइड कैशिंग को प्रबंधित और कॉन्फ़िगर करना मुश्किल हो सकता है, इसलिए आपको अपने संभावित होस्ट से उनकी प्रक्रिया के बारे में पूछना होगा।

कैशिंग प्लगइन का उपयोग करना

हालाँकि, सभी होस्ट सर्वर-साइड कैशिंग की पेशकश नहीं करते हैं, लेकिन पेज कैशिंग प्लगइन के साथ आप कुछ लाभों का आनंद ले सकते हैं। यहां तक ​​कि पेज लेवल पर कैशिंग करने से भी आपके लार्जेस्ट कंटेंटफुल पेंट को बेहतर बनाने के लिए काफी तेजी से कंटेंट डिलीवर होता है।

जब एक प्लगइन का उपयोग करने की बात आती है, तो मैं WP सुपर कैश की सिफारिश करता हूं क्योंकि यह सरल और उन्नत विकल्पों (जैसे प्रीलोड) के साथ पूरी तरह से नि: शुल्क (कोई अपग्रेड नहीं) है।

WP सुपर कैश का उपयोग करना कितना आसान है? इसकी जांच – पड़ताल करें:

एक बार प्लगइन स्थापित और सक्रिय हो जाने के बाद, सेटिंग्स को खोलें सेटिंग्स → WP सुपर कैश। पर क्लिक करें आसान और मुड़ें कैशिंग चालू और फिर अद्यतन स्थिति।

किसी बिंदु पर, आप अपने कैश के साथ कुछ समस्याओं का सामना करेंगे। न केवल आपके पास बहुत सारे पेज कैश हो जाएंगे बल्कि नए बदलाव साइट पर दिखाई नहीं देंगे। अगर ऐसा होता है तो आप क्लिक करके Cache Clear कर सकते हैं कैश हटाएं।

WP सुपर कैश आपके सबसे लोकप्रिय पृष्ठों को प्रीलोड करने का विकल्प भी प्रदान करता है। हालाँकि, प्रीलोडिंग में मूल्यवान संसाधन लगेंगे, इसलिए आपको बुद्धिमानी से चयन करने और अपने CPU की दैनिक निगरानी करने की आवश्यकता होगी।

इसे सेट अप करना आसान है। दबाएं प्रीलोड विकल्प। आप कैश रिफ्रेश की नियमितता सेट कर सकते हैं और यह भी निर्धारित कर सकते हैं कि पुरानी फाइलों को हटाया जाना चाहिए या नहीं।

एक बार जब आप सेटिंग्स से खुश हो जाएं, तो हिट करें प्रीलोड कैश नाउ प्रारंभ करना। एक बार कैशिंग प्रक्रिया समाप्त हो जाने के बाद, फ़ाइलें आपके पास होंगी wp-content/cache सर्वर पर फ़ोल्डर।

अपनी छवियों का अनुकूलन करें

लोग चित्रों को पसंद करते हैं। और, हम सभी उनमें से बहुत से उपयोग करते हैं, है ना? लेकिन, छवियां आपके कोर वेब वाइटल स्कोर को नुकसान पहुंचा सकती हैं। इसके कुछ कारण हैं:

• छवि बहुत भारी हो सकती है।
• छवि आयाम बहुत बड़े हैं।
• आप पृष्ठ पर प्रत्येक छवि लोड कर रहे हैं।
• छवियां आपके सर्वर से पूरी दुनिया के लोगों को भेजी जाती हैं।

सौभाग्य से, उपरोक्त सभी को ठीक करने का एक आसान तरीका है।

जब छवियों की बात आती है तो सबसे पहले कुछ बातों पर विचार करें:

• क्या आपको हर छवि की आवश्यकता है?
• आप किन आयामों का उपयोग करते हैं? हमारा लक्ष्य >2000px है।
• पृष्ठभूमि के लिए, पैटर्न, ग्रेडियेंट या एसवीजी का उपयोग करने का प्रयास करें।
• फ़ोल्ड के ऊपर वाली इमेज को लोगो और हीरो इमेज तक सीमित करें.
• फ़ोल्ड के ऊपर स्लाइडर्स या हिंडोला का उपयोग न करें।

एक बार जब आप अपनी छवियों को अव्यवस्थित कर देते हैं, तो आप बाकी को अनुकूलित कर सकते हैं। छवि अनुकूलन छवि के आकार को कम कर सकता है, उनके आयामों में सुधार कर सकता है, और उन्हें आपके उपयोगकर्ताओं के करीब सर्वर का उपयोग करके सामग्री वितरण नेटवर्क (CDN) से वितरित कर सकता है। इस सब के लिए, मैं अनुशंसा करता हूं ऑप्टिमोल.

ऑप्टिमोल उपरोक्त सभी को क्लाउड में करके आपके सर्वर को बहुत सारे काम बचाता है। वहां जाओ ऑप्टिमोल और एक एपीआई कुंजी के लिए साइन अप करें (क्लाउड ऑपरेशंस तक पहुंचने के लिए आपको इसकी आवश्यकता है)।

आप ऑप्टिमोल डैशबोर्ड के माध्यम से अपने खाते को सत्यापित करने के लिए एक ईमेल प्राप्त करेंगे। एपीआई कुंजी लें और अपनी वर्डप्रेस साइट पर जाएं।

एक बार जब आप ऑप्टिमोल को स्थापित और सक्रिय कर लेते हैं, तो सेटिंग्स से एक्सेस करें मीडिया → ऑप्टिमोल मेन्यू। अपनी एपीआई कुंजी को पेस्ट करें और कनेक्ट को हिट करें।

आपको भी इनेबल करना चाहिए स्केल इमेज और लेज़ी लोड.

इमेज को स्केल करने का मतलब है कि लेआउट शिफ्टिंग को कम करने के लिए ऑप्टिमोल डिवाइस के लिए पूरी तरह से आकार की इमेज भेजेगा (चाहे वह कुछ भी हो)।

आलसी लोडिंग का अर्थ है कि आप केवल उन्हीं छवियों को लोड करेंगे जिन्हें आपके उपयोगकर्ता व्यूपोर्ट में देख सकते हैं। उस सेटअप के साथ, ऑप्टिमोल को बाकी काम करने दें।

कोड अनुकूलन

वर्डप्रेस साइट चलाने वाली चीज सभी चलते हुए हिस्से हैं। विषयों और प्लगइन्स और उन्हें शक्ति देने वाली भाषाओं के बीच, एक गैर-तकनीकी व्यक्ति के लिए कोड का अनुकूलन करना कठिन है।

जाहिर है, हम अनुकूलित कोड बेस वाले थीम चुन सकते हैं और फूला हुआ कोड वाले प्लगइन्स से बच सकते हैं। इसके अलावा, हम कोड को दो मुख्य तरीकों से ऑप्टिमाइज़ कर सकते हैं:

एक नकारात्मक बात यह है कि Autoptimize में बहुत सारी सेटिंग्स हैं, जिसका अर्थ है कि कोई वास्तविक एक आकार-फिट-सभी समाधान नहीं है।

ऐसा कहकर, आप सुरक्षित रूप से चुन सकते हैं अनुकूलन सभी जावास्क्रिप्ट, सीएसएस, एचटीएमएल। यह सेटिंग स्पेस और लाइन ब्रेक जैसी चीज़ों को हटाकर आपके कोड को छोटा करती है। मिनिफिकेशन से परे, Autoptimize के पास कुछ और सीखने और बहुत परीक्षण करने के इच्छुक लोगों के लिए शानदार प्रदर्शन विकल्प हैं।

उदाहरण के लिए, आप उन्नत कार्यों का उपयोग करके महत्वपूर्ण गति बढ़ा सकते हैं, जैसे प्रीलोडिंग सीएसएस और महत्वपूर्ण CSS को इनलाइन करना, लेकिन इसका उपयोग करने से पहले आपको प्रत्येक विकल्प पर पढ़ना होगा।

फ़ॉन्ट्स और चिह्न

आप अपने फोंट को संभालने के लिए Autoptimize का उपयोग कर सकते हैं, खासकर यदि आप Google Fonts का उपयोग करने के लिए प्रतिबद्ध हैं। आप अपने संचयी लेआउट शिफ़्ट को हानि पहुँचाने वाले ‘अनस्टाइल्ड टेक्स्ट के फ़्लैश’ को रोकने के लिए अपने Google फ़ॉन्ट्स को पहले से लोड करने का भी प्रयास कर सकते हैं।

मेरा सुझाव है कि आप कुछ भिन्न विकल्पों को आज़माएँ और देखें कि आपकी साइट के लिए सबसे अच्छा क्या है। दुर्भाग्य से, यदि आप एलीमेंटर का उपयोग कर रहे हैं, तब भी आप लेआउट शिफ्टिंग देखेंगे। यदि यह आपका मामला है, तो सिस्टम फोंट पर स्विच करने पर विचार करें।

विज्ञापनों के लिए सर्वोत्तम अभ्यास

जब लेआउट बदलने की बात आती है, तो विज्ञापन सबसे बड़ी समस्याओं में से एक होते हैं। आम तौर पर, विज्ञापन सामग्री को नीचे धकेल देते हैं जिससे खराब उपयोगकर्ता अनुभव बनता है। सौभाग्य से, सर्वोत्तम प्रथाओं का पालन करके बदलाव को कम करना संभव है।

सबसे महत्वपूर्ण बात यह है कि विज्ञापन का प्लेसमेंट अधिक क्लिक प्राप्त करने और आपके लेआउट पर प्रभाव के बीच संतुलित होना चाहिए। उदाहरण के लिए, विज्ञापनों को व्यूपोर्ट के शीर्ष पर न रखें। यदि अंतिम विज्ञापन का आकार कंटेनर से बड़ा है, तो यह आपकी सभी सामग्री को नीचे धकेल देगा। पृष्ठ के मध्य के लिए लक्षित करें जहां विज्ञापन कम नुकसान करेगा।

जब आप सर्वोत्तम प्लेसमेंट का निर्णय कर लें, तो विज्ञापन के लिए एक स्थान आरक्षित कर लें। हालांकि यह आपके लिए कुछ खाली जगह छोड़ सकता है, यह व्यापार के लायक हो सकता है।

निष्कर्ष

इन युक्तियों के साथ, आपको अपने परिणामों में तत्काल सुधार देखना चाहिए। बेहतर अभी तक, प्रत्येक विकल्प आपको आगे के अनुकूलन के लिए एक अच्छा प्रारंभिक बिंदु देता है।

हमने बहुत सी जमीन को कवर किया है, इसलिए संक्षेप में:

• अपने होस्टिंग प्लान को अपग्रेड करने से आपको अपने परिणामों को बेहतर बनाने में मदद मिल सकती है।
• कैशिंग प्लगइन का उपयोग करने से सामग्री वितरण में तेजी आनी चाहिए।
• छवियों का अनुकूलन और सीडीएन का उपयोग करने से साइट के प्रदर्शन में सुधार होना चाहिए।
• कोड ऑप्टिमाइज़ेशन के साथ, आप नियंत्रित कर सकते हैं कि आपकी साइट कैसे लोड होती है।
• सुविचारित फ़ॉन्ट चयन और प्रीलोडिंग के साथ, आप गति बढ़ाने का आनंद ले सकते हैं।
• विज्ञापन की सर्वोत्तम प्रक्रियाओं का पालन करके, आप लेआउट बदलाव को कम कर सकते हैं।