मैं यह क्यों लिख रहा हूँ

मैं अब कुछ वेबसाइट चलाता हूं, और शुरू से ही मेरा प्रदर्शन बहुत ऊपर-नीचे होता रहा है। मुझे कई बार यह बेहद कष्टप्रद लगा है। स्थानीय स्तर पर मेरे लिए सब कुछ बहुत अच्छा काम करता प्रतीत होता है, लेकिन फिर मैं अपने सर्वर एनालिटिक्स की जांच करता हूं और मैं देख सकता हूं कि कुछ देशों के लिए मेरी गति बहुत खराब है।

ऐसा हमेशा से ही लगता रहा हैसीएलएसयाएल.सी.पीमेरे लिए यही मुद्दा रहा है. इसलिए मैंने सोचा कि मैं अपना अनुभव साझा करूंगा और दूसरों को इसका पता लगाने में मदद करने की कोशिश करूंगा, खासकर यदि आप भी इसी चीज से गुजर रहे हों। या हो सकता है कि आपको इससे परेशानी हुई हो और आपके पास कोई अनोखा दृष्टिकोण या समाधान हो? मुझे इसके बारे में सुनना चाहूंगी।

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

सीएलएस और एलसीपी वास्तव में क्या हैं?

इससे पहले कि मैं अपने संघर्षों में पड़ूं, मैं समझा दूं कि ये वास्तव में क्या हैं, क्योंकि जब मैंने पहली बार इन संक्षिप्त शब्दों को Google खोज कंसोल में देखा था, तो मुझे नहीं पता था कि उनका क्या मतलब है।

संचयी लेआउट शिफ्ट (सीएलएस)यह मापता है कि लोड होने के दौरान आपका पेज लेआउट कितना इधर-उधर घूमता है। क्या आप जानते हैं कि जब आप एक बटन पर टैप करने वाले होते हैं और पूरा पृष्ठ बदल जाता है, तो आप गलत चीज़ पर क्लिक कर देते हैं? वह एक सीएलएस समस्या है. एक उपयोगकर्ता के रूप में यह अविश्वसनीय रूप से निराशाजनक है, और यह पता चला है कि खोज इंजन आपको इसके लिए दंडित भी करते हैं।

सबसे बड़ा कंटेंटफुल पेंट (एलसीपी)यह मापता है कि आपके पृष्ठ पर सबसे बड़े दृश्यमान तत्व को लोड होने में कितना समय लगता है। आमतौर पर वह एक नायक की छवि या पाठ का एक बड़ा खंड होता है। यदि आपका एलसीपी धीमा है, तो आपके विज़िटर आधे-भरे पृष्ठ को देख रहे हैं, और कई लोग चले जाएंगे।

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

सीएलएस और एलसीपी के लिए अपनी वेबसाइट को अनुकूलित करें

🖼️

छवि आयाम सेट करें
छवियों के लिए चौड़ाई और ऊंचाई निर्दिष्ट करें

📢

विज्ञापनों का जिम्मेदारीपूर्वक उपयोग करें
अप्रत्याशित विज्ञापन आकार बदलने से बचें

⚡

महत्वपूर्ण संसाधन प्रीलोड करें
सुनिश्चित करें कि महत्वपूर्ण सामग्री शीघ्रता से लोड हो

🔄

गतिशील सामग्री कम से कम करें
लोडिंग के दौरान बदलने वाली सामग्री को सीमित करें

📊

प्रदर्शन की नियमित रूप से निगरानी करें
सीएलएस और एलसीपी स्कोर को ट्रैक करने के लिए टूल का उपयोग करें

मेरा सीएलएस दुःस्वप्न

सीएलएस पहला मुद्दा था जिसका सामना मुझे करना पड़ा। मेरे पन्ने मुझे ठीक लगे, लेकिन मेरे अंक बहुत ख़राब थे। बहुत खोजबीन के बाद, मुझे मुख्य अपराधी मिले:

बिना आयाम वाली छवियाँ:मैं अपनी छवियों पर चौड़ाई और ऊंचाई निर्धारित नहीं कर रहा था। ब्राउज़र को पता नहीं था कि कितनी जगह आरक्षित करनी है, इसलिए छवियां लोड होते ही सब कुछ बदल गया।
फ़ॉन्ट देर से लोड हो रहे हैं:पृष्ठ के रेंडर होने के बाद मेरे कस्टम फ़ॉन्ट लोड हो रहे थे, जिससे फ़ॉलबैक के स्थान पर नए फ़ॉन्ट के आते ही मेरा सारा टेक्स्ट उछल गया। यह सूक्ष्म था लेकिन इसमें और इजाफा हो गया।
गतिशील सामग्री:मेरे पास कुछ घटक थे जो पृष्ठ लोड होने के बाद सामग्री को इंजेक्ट करते थे, और उनके नीचे की सभी चीज़ों को नीचे धकेल देते थे।

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

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

फिर एलसीपी समस्या आई

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

मुझे जो मुख्य मुद्दे मिले वे थे:

बड़ी अअनुकूलित छवियाँ:मेरी नायक छवियाँ बहुत बड़ी थीं। मैं पूर्ण-रिज़ॉल्यूशन फ़ोटो को बिना संपीड़ित किए अपलोड कर रहा था।
सर्वर प्रतिक्रिया समय:सीडीएन के बिना, मेरे सर्वर से दूर के उपयोगकर्ता पहली प्रतिक्रिया के लिए वर्षों तक प्रतीक्षा कर रहे थे।
रेंडर-ब्लॉकिंग जावास्क्रिप्ट:मेरे दिमाग में स्क्रिप्ट लोड हो रही थीं जो पेज को समाप्त होने तक रेंडर होने से रोक रही थीं।

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

वास्तव में मेरी एलसीपी को क्या मदद मिली

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

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

कष्टप्रद हिस्सा - यह वास्तव में कभी भी "निश्चित" नहीं होता है

यहाँ वह है जिसके बारे में आपको कोई नहीं बतातासीएलएस और एलसीपी. आप उन्हें एक बार ठीक करके आगे नहीं बढ़ जाते। हर बार जब मैं कोई नई सुविधा, नई छवि जोड़ता हूं, या अपना लेआउट बदलता हूं, तो स्कोर फिर से बदल सकता है। यह एक चालू चीज़ है.

मेरे पास कई सप्ताह हैं जब Google खोज कंसोल में सब कुछ हरा है, और फिर मैं एक नया घटक जोड़ता हूं और अचानक मेरा सीएलएस फिर से ध्वजांकित हो जाता है। यह बिल्कुल कष्टप्रद है, लेकिन मैंने अब हर महत्वपूर्ण बदलाव के बाद अपने कोर वेब वाइटल्स की जांच करना सीख लिया है।

उपयोगकर्ता अनुभव पर सीएलएस और एलसीपी का प्रभाव

0.1 सेकंड

उपयोगकर्ता सहनशीलता

32%

बाउंस दर में वृद्धि

रूपांतरण दर में गिरावट

कोर वेब वाइटल्स

एसईओ रैंकिंग महत्व

की एक रिपोर्टवित्तीय ब्रांडइस बात पर प्रकाश डाला गया है कि कैसे धीमी वेबसाइटें सीधे राजस्व हानि का कारण बन सकती हैं। यह इसे शीर्ष पर बनाए रखने के लिए पर्याप्त प्रेरणा है, भले ही यह थकाऊ लगे।

वे उपकरण जिनसे मुझे सबसे अधिक मदद मिली है

यदि आप भी उन्हीं समस्याओं से जूझ रहे हैं, तो यहां वे उपकरण हैं जिनका मैं वास्तव में उपयोग करता हूं और उपयोगी पाता हूं:

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

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

यदि आप इससे गुजर रहे हैं तो मेरी सलाह

यदि आपका प्रदर्शन मेरे जैसा ही ऊपर-नीचे रहा है, तो मैं यही सुझाव दूंगा:

घबड़ाएं नहीं।सीएलएस और एलसीपी मुद्दे अविश्वसनीय रूप से सामान्य हैं। आप सब कुछ ग़लत नहीं कर रहे हैं - ये मीट्रिक्स केवल संवेदनशील हैं।
देश के अनुसार अपना विश्लेषण जांचें।आपकी साइट आपके लिए तेज़ हो सकती है लेकिन अन्यत्र विज़िटरों के लिए धीमी हो सकती है। एक सीडीएन इसे शीघ्रता से हल कर सकता है।
पहले छवियाँ ठीक करें.मेरे अनुभव में, अअनुकूलित छवियां और गायब आयाम अधिकांश सीएलएस और एलसीपी समस्याओं का कारण हैं।
प्रत्येक परिवर्तन के बाद परीक्षण करें.जब भी आप महत्वपूर्ण अपडेट करें तो पेजस्पीड इनसाइट्स चलाने की आदत डालें।
धैर्य रखें।Google सर्च कंसोल डेटा को अपडेट होने में कई दिन या सप्ताह लग सकते हैं। यह न मानें कि आपके सुधार केवल इसलिए काम नहीं कर रहे हैं क्योंकि डैशबोर्ड अभी तक नहीं बदला है।

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

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