बहुभाषी वेबसाइट पर कोर वेब वाइटल को कैसे सुधारें

कोर वेब विटल्स वेबसाइटों पर उपयोगकर्ता अनुभव की गुणवत्ता को मापने के लिए मीट्रिक का एक संग्रह है। Google उन्हें रैंकिंग सिग्नल के रूप में गिनता है और इसलिए, वे (बहुभाषी) SEO के लिए भी महत्वपूर्ण हैं। यदि आप उनकी उपेक्षा करते हैं, तो आप आगंतुकों और खोज इंजनों द्वारा समान रूप से तिरस्कृत होने का जोखिम उठाते हैं।

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

कोर वेब वाइटल क्या हैं?

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

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

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

इस अंतराल को सेकंड में मापा जाता है और LCP स्कोर के रूप में उपयोग किया जाता है। Google ने यह निर्धारित करने के लिए कई कटऑफ पॉइंट निर्धारित किए हैं कि आपकी साइट को किस तरह के समय पर शूट करना चाहिए।

जैसा कि आप ऊपर देख सकते हैं, LCP एलिमेंट को लोड होने में 2.5 सेकंड तक का समय अच्छा स्कोर है। 4 सेकंड तक का समय स्वीकार्य है, लेकिन इसमें सुधार किया जाना चाहिए, और इससे ज़्यादा समय को Google बहुत लंबा मानता है।

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

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

इसका क्या महत्व है?

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

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

0.1 से कम सीएलएस स्कोर अच्छा है; 0.25 तक सुधार की आवश्यकता है तथा इससे अधिक स्कोर अस्वीकार्य है।

एक नोट: पेज के साथ उपयोगकर्ता की बातचीत के 500 एमएस के भीतर पेज मूवमेंट (जैसे कि क्लिक) आपके सीएलएस स्कोर को प्रभावित नहीं करेगा। उन्हें जानबूझकर किया गया माना जाता है।

अगले पेंट के लिए इंटरेक्शन (INP)

इंटरेक्शन टू नेक्स्ट पेंट या INP कोर वेब विटल्स मेट्रिक्स का नवीनतम जोड़ है। यह मार्च 2024 में मूल मापों में से एक, फर्स्ट इनपुट डिले (FID) की जगह लेगा।

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

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

लक्ष्य प्राप्ति के लिए अच्छा INP स्कोर क्या है?

200 एमएस तक अच्छा है, तथा 500 एमएस तक उचित है; इससे अधिक कुछ भी आपकी साइट के प्रति Google के दृष्टिकोण पर नकारात्मक प्रभाव डालेगा।

अपनी वेबसाइट के कोर वेब वाइटल का परीक्षण कैसे करें

एक बार जब आप जान जाते हैं कि कोर वेब विटल्स क्या हैं, तो अगला तार्किक सवाल यह है कि आप कैसे पता लगा सकते हैं कि आपकी साइट किस स्थान पर है? यह पता लगाने का सबसे आसान तरीका पेजस्पीड इनसाइट्स जैसे स्पीड टेस्टिंग टूल का उपयोग करना है।

बस सबसे ऊपर अपनी वेबसाइट का यूआरएल डालें और टेस्ट चलाएँ। एक बार पूरा हो जाने पर, यह न केवल आपको बताता है कि आपकी वेबसाइट ने कोर वेब विटल्स मूल्यांकन पास किया है या नहीं, बल्कि प्रत्येक उल्लिखित डेटा पॉइंट के लिए मान भी प्रदान करता है।

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

अन्य उपकरण जो आपको आपके कोर वेब विटल्स प्रदर्शन के बारे में बता सकते हैं वे हैं GTmetrix , WebPageTest , या Chrome वेब विटल्स एक्सटेंशन ।

बहुभाषी वेबसाइटों पर कोर वेब वाइटल में सुधार

तो, अगर आपके मूल्य कम हैं तो आपको क्या करना चाहिए? चलिए अब इस बारे में बात करते हैं।

अब से, हम आपके बहुभाषी साइट पर प्रत्येक कोर वेब वाइटल मीट्रिक को बेहतर बनाने के तरीके के बारे में चरण-दर-चरण स्पष्टीकरण देंगे। हम इसे मैन्युअल रूप से कैसे करें, इसके बारे में बताएंगे, साथ ही WP Rocket प्लगइन की मदद से वर्डप्रेस उपयोगकर्ताओं के लिए इसे करने का एक आसान तरीका भी बताएंगे।

WP Rocket तकनीकी ज्ञान के बिना लोगों के लिए परिष्कृत प्रदर्शन सुधारों को जल्दी और आसानी से लागू करना बहुत आसान बनाता है। यह आसानी से सबसे शक्तिशाली और शुरुआती-अनुकूल कैशिंग प्लगइन्स में से एक है।

सामान्य प्रदर्शन सुधार

आइए कुछ सामान्य सुझावों से शुरुआत करें कि कैसे सुनिश्चित करें कि आपकी वेबसाइट तेजी से लोड हो:

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

उपरोक्त सुझाव सामान्यतः तीव्र निष्पादन के लिए एक अच्छी नींव रखेंगे, इससे पहले कि आप अधिक विशिष्ट उपाय अपनाएं।

सबसे बड़ा कंटेंटफुल पेंट ठीक करना

लार्जेस्ट कंटेंटफुल पेंट को बेहतर बनाने के दो मुख्य रास्ते हैं: सामान्य रूप से पेज लोडिंग गति को अनुकूलित करना (जैसा कि ऊपर बताया गया है) और आपके LCP तत्वों की डिलीवरी को तेज़ बनाना।

आपका LCP तत्व क्या है? पेजस्पीड इनसाइट्स आपको डायग्नोस्टिक्स के अंतर्गत यह बताएगा।

कैशिंग और संपीड़न को लागू करें

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

क्यों?

वर्डप्रेस जैसे CMS पर, पेज आमतौर पर PHP कोड से गतिशील रूप से बनाए जाते हैं और डेटाबेस से सामग्री खींची जाती है। सर्वर इसे HTML दस्तावेज़ों में बदल देता है और उन्हें ब्राउज़र को भेज देता है।

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

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

अपने सर्वर पर कैशिंग और कम्प्रेशन दोनों को सक्रिय करने के लिए, आपको .htaccess नामक फ़ाइल को संपादित करना होगा। इसमें आपके वेब सर्वर की कार्यक्षमता के लिए महत्वपूर्ण निर्देश शामिल हैं, और आप इसे आमतौर पर अपनी वेबसाइट की रूट निर्देशिका में पाते हैं।

आप उपरोक्त दोनों गति अनुकूलन तकनीकों को सक्रिय करने के लिए निम्नलिखित कोड को कॉपी और पेस्ट कर सकते हैं:

<IfModule mod_deflate.c>
   # Compress HTML, CSS, JavaScript, Text, XML and fonts
   AddOutputFilterByType DEFLATE application/javascript
   AddOutputFilterByType DEFLATE application/rss+xml
   AddOutputFilterByType DEFLATE application/vnd.ms-fontobject
   AddOutputFilterByType DEFLATE application/x-font
   AddOutputFilterByType DEFLATE application/x-font-opentype
   AddOutputFilterByType DEFLATE application/x-font-otf
   AddOutputFilterByType DEFLATE application/x-font-truetype
   AddOutputFilterByType DEFLATE application/x-font-ttf
   AddOutputFilterByType DEFLATE application/x-javascript
   AddOutputFilterByType DEFLATE application/xhtml+xml
   AddOutputFilterByType DEFLATE application/xml
   AddOutputFilterByType DEFLATE font/opentype
   AddOutputFilterByType DEFLATE font/otf
   AddOutputFilterByType DEFLATE font/ttf
   AddOutputFilterByType DEFLATE image/svg+xml
   AddOutputFilterByType DEFLATE image/x-icon
   AddOutputFilterByType DEFLATE text/css
   AddOutputFilterByType DEFLATE text/html
   AddOutputFilterByType DEFLATE text/javascript
   AddOutputFilterByType DEFLATE text/plain
   AddOutputFilterByType DEFLATE text/xml

   # Remove browser bugs (only needed for really old browsers)
   BrowserMatch ^Mozilla/4 gzip-only-text/html
   BrowserMatch ^Mozilla/4\.0[678] no-gzip
   BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
   Header append Vary User-Agent
</IfModule>

<IfModule mod_expires.c>
   ExpiresActive On

   # Images
   ExpiresByType image/jpeg "access plus 1 year"
   ExpiresByType image/gif "access plus 1 year"
   ExpiresByType image/png "access plus 1 year"
   ExpiresByType image/webp "access plus 1 year"
   ExpiresByType image/svg+xml "access plus 1 year"
   ExpiresByType image/x-icon "access plus 1 year"

   # Video
   ExpiresByType video/webm "access plus 1 year"
   ExpiresByType video/mp4 "access plus 1 year"
   ExpiresByType video/mpeg "access plus 1 year"

   # Fonts
   ExpiresByType font/ttf "access plus 1 year"
   ExpiresByType font/otf "access plus 1 year"
   ExpiresByType font/woff "access plus 1 year"
   ExpiresByType font/woff2 "access plus 1 year"
   ExpiresByType application/font-woff "access plus 1 year"
   ExpiresByType application/font-woff2 "access plus 1 year"

   # CSS, JavaScript
   ExpiresByType text/css "access plus 1 year"
   ExpiresByType text/javascript "access plus 1 year"
   ExpiresByType application/javascript "access plus 1 year"

   # Others
   ExpiresByType application/pdf "access plus 1 year"
   ExpiresByType image/vnd.microsoft.icon "access plus 1 year"
</IfModule>

दोनों कोड स्निपेट GTmetrix के सौजन्य से हैं और अपाचे सर्वर के लिए काम करते हैं। आप अन्य सर्वरों, जैसे NGINX, के लिए निर्देश ऑनलाइन पा सकते हैं, उदाहरण के लिए, KeyCDN पर इस ट्यूटोरियल में।

अगर यह डरावना लगता है, तो आप ऊपर बताए गए WP Rocket प्लगइन का उपयोग करके इसे प्राप्त कर सकते हैं। यहाँ, आपको केवल प्लगइन को इंस्टॉल और सक्रिय करना है - यह मोबाइल डिवाइस सहित स्वचालित रूप से संपीड़न और कैशिंग दोनों को लागू करता है।

कोड और कोड वितरण को अनुकूलित करें

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

• अनावश्यक मार्कअप हटाना - यदि आपकी साइट पर बहुत अधिक अनावश्यक जावास्क्रिप्ट और सीएसएस कोड है, तो आप उन सभी चीजों को हटाकर प्रदर्शन में सुधार कर सकते हैं जो कड़ाई से आवश्यक नहीं हैं।
• मिनिमाइजेशन - इसका मतलब है वेबसाइट फ़ाइलों से रिक्त स्थान और टिप्पणियाँ हटाना। ऐसा करने से फ़ाइल का आकार छोटा हो जाता है, जिससे उन्हें डाउनलोड करना और प्रोसेस करना तेज़ हो जाता है।
• CSS और JavaScript ऑप्टिमाइजेशन - यहाँ, आप अपनी वेबसाइट की फ़ाइलों को इस तरह सेट करते हैं कि वे आपकी वेबसाइट के बाकी हिस्सों को लोड होने से न रोकें। यह कुख्यात " रेंडर-ब्लॉकिंग रिसोर्स को खत्म करें " संदेश है जो आपको स्पीड टेस्टिंग टूल से मिल सकता है। इसके लिए दो लोकप्रिय उपकरण डिफर और एसिंक विशेषताएं हैं। क्रमशः, वे जावास्क्रिप्ट निष्पादन को लोडिंग कतार के अंत में ले जाते हैं और ब्राउज़र को पृष्ठभूमि में फ़ाइलें डाउनलोड करने और उन्हें उपलब्ध होने पर ही निष्पादित करने के लिए कहते हैं।

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

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

<script async src="important.js"></script>
<script defer src="not-so-important.js"></script>

आप कुछ कोड को विभाजित भी कर सकते हैं ताकि पहले केवल वही लोड हो जो ज़रूरी है। जब हम INP को अनुकूलित करने के बारे में बात करेंगे तो इस पर और अधिक जानकारी दी जाएगी।

यदि आप इन प्रक्रियाओं को स्वचालित करना चाहते हैं, तो WP Rocket कोड को छोटा कर सकता है, अप्रयुक्त CSS को हटा सकता है , जावास्क्रिप्ट को स्थगित कर सकता है, और बस कुछ बक्से पर टिक करके इसे अतुल्यकालिक रूप से लोड कर सकता है।

छवियाँ अनुकूलित करें

इमेज ऑप्टिमाइजेशन का मतलब है गुणवत्ता से समझौता किए बिना अपनी वेबसाइट पर विज़ुअल के आकार को कम करना। यह एक बेहतरीन सामान्य प्रदर्शन सुधार है और विशेष रूप से लार्जेस्ट कंटेंटफुल पेंट को बेहतर बनाने में मदद करता है क्योंकि इमेज अक्सर LCP तत्व बन जाती हैं।

आप अपनी साइट पर छवियों को कैसे अनुकूलित कर सकते हैं?

• चित्रों का अनुवाद करें - आपकी वेबसाइट का अनुवाद केवल पाठ तक ही सीमित नहीं है। आपको अपनी छवियों में पाठ का भी रूपांतरण करना होगा और/या सांस्कृतिक रूप से उपयुक्त चित्रों का उपयोग करना होगा। शुक्र है, Weglot इस क्षेत्र में आपकी मदद करता है ।
• संपीड़न - पाठ फ़ाइलों की तरह, आप छवियों से अनावश्यक डेटा हटाकर उनका आकार छोटा कर सकते हैं।
• आधुनिक प्रारूपों का उपयोग करें - अगली पीढ़ी के प्रारूपों , जैसे कि WebP या AVIF, में छवियां JPG या PNG की तुलना में बहुत छोटी होती हैं, जबकि देखने में उतनी ही अच्छी होती हैं।
• विज़ुअल का आकार सही रखें - इमेज को उतना ही बड़ा दिखाएँ जितना वे आपकी वेबसाइट पर दिखाई देते हैं। अन्यथा, आप अपने विज़िटर को अनावश्यक डेटा लोड करने पर मजबूर कर रहे हैं।
• आलसी लोडिंग चालू करें - यह तकनीक केवल उन छवियों को लोड करती है जो वास्तव में प्रारंभिक लोड के दौरान ब्राउज़र में दिखाई देती हैं और आगंतुकों द्वारा स्क्रॉल किए जाने पर उन्हें पृष्ठ के नीचे लाती हैं। यह गैर-LCP छवियों पर बैंडविड्थ की बर्बादी को भी रोकता है ताकि महत्वपूर्ण छवियां तेज़ी से लोड हो सकें।

उपलब्ध उपकरण

आप छवियों को संपीड़ित करने और उन्हें अन्य फ़ाइल स्वरूपों में बदलने के लिए TinyPNG जैसे टूल का उपयोग कर सकते हैं। Image Resizer जैसी कोई चीज़ उन्हें आपकी ज़रूरत के अनुसार किसी भी आयाम में काट सकती है। आपको वर्डप्रेस में सेटिंग्स > मीडिया के अंतर्गत इसके लिए विकल्प भी मिलते हैं।

इसके अलावा, यदि आप वर्डप्रेस का नवीनतम संस्करण (या संस्करण 5.4 से बाद का कुछ भी) चला रहे हैं, तो आपकी साइट पर डिफ़ॉल्ट रूप से आलसी लोडिंग सक्षम होनी चाहिए।

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

इसके अलावा, WP Rocket न केवल छवियों के लिए बल्कि CSS बैकग्राउंड और एम्बेडेड मीडिया, जैसे वीडियो के लिए भी आलसी लोडिंग प्रदान करता है। साथ ही, जब यह समझ में आता है तो आप मीडिया को आलसी-लोड होने से बाहर कर सकते हैं।

CDN का उपयोग करें

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

इसी वजह से, Weglot अपने आप एक CDN सेट अप कर देता है ताकि आप अपनी अनुवादित सामग्री दुनिया भर में तेज़ी से पहुँचा सकें। अगर आप एक नहीं हैं, तो Weglot उपयोगकर्ता के रूप में, आपको आमतौर पर एक CDN के लिए साइन अप करना होगा और उसे अपनी साइट के लिए कॉन्फ़िगर करना होगा। यह प्रदाता से प्रदाता के लिए अलग-अलग होता है; यहाँ उदाहरण निर्देश दिए गए हैं ।

अगर आपको कुछ मदद चाहिए, तो WP Rocket के पास Sucuri और Cloudflare के लिए समर्पित ऐड-ऑन हैं, जो दो लोकप्रिय समाधान हैं। वे आपकी साइट के लिए इन कंटेंट डिलीवरी नेटवर्क को कॉन्फ़िगर करना तेज़ और आसान बनाते हैं।

आप अपने प्रदाता का CNAME प्रदान करके CDN सेटिंग्स में अन्य नेटवर्क भी सक्षम कर सकते हैं।

अंत में, WP Rocket का अपना नेटवर्क भी है, जिसे RocketCDN कहा जाता है, जिसे आप प्लगइन के अंदर से स्वचालित रूप से कॉन्फ़िगर कर सकते हैं। इसके अलावा, WP Rocket की कोड फ़ाइलों को छोटा करने की क्षमता CDN ट्रैफ़िक और लागत को कम कर सकती है।

संचयी लेआउट शिफ्ट को संबोधित करना

आपकी बहुभाषी वेबसाइट को बेहतर बनाने के लिए कोर वेब वाइटल की हमारी सूची में अगला है CLS। यहाँ बताया गया है कि आप कैसे सुनिश्चित कर सकते हैं कि आप उस विभाग में सफल हों।

छवि आकार विशेषताएँ शामिल करें

खराब CLS स्कोर का सबसे बड़ा कारण अक्सर बिना परिभाषित ऊंचाई और चौड़ाई विशेषताओं वाली छवियां होती हैं।

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

तो, CLS को अनुकूलित करने का पहला नियम है अपनी छवियों में ऊंचाई और चौड़ाई की परिभाषाएँ जोड़ना। आप ऐसा कैसे करते हैं?

शुद्ध HTML में, यह कुछ इस तरह दिखता है:

<img src="image.jpg" alt="Insert alt text" width="600" height="700">

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

इसके अतिरिक्त, WP Rocket में आपके मीडिया फ़ाइलों में लापता चौड़ाई और ऊंचाई की घोषणाओं को जोड़ने का विकल्प है, यदि आपने कुछ छूट दिया है।

एम्बेड, आईफ्रेम और विज्ञापन स्लॉट के लिए स्थान आरक्षित करें

ऊपर बताए गए नियम ही डायनेमिक कंटेंट जैसे एम्बेडेड एलिमेंट या विज्ञापनों पर भी लागू होते हैं। उन्हें भी पेज लेआउट के बाकी हिस्सों में इधर-उधर जाने से बचने के लिए ऊंचाई और चौड़ाई की परिभाषा की आवश्यकता होती है।

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

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

वेब फ़ॉन्ट डिलीवरी को अनुकूलित करें

फ़ॉन्ट भी लेआउट में बदलाव का कारण बन सकते हैं, खासकर तब जब आप अपनी वेबसाइट पर कस्टम फ़ॉन्ट का इस्तेमाल कर रहे हों। यहाँ दो सबसे आम समस्याएँ हैं:

• फ्लैश ऑफ अनस्टाइल्ड टेक्स्ट (FOUT) - इसका मतलब है कि एक आगंतुक पहले आपके वेबसाइट टेक्स्ट को एक मानक फ़ॉन्ट में देखता है जो फ़ॉन्ट फ़ाइल लोड होने के क्षण में बदल जाता है, जिससे संभावित रूप से लेआउट में बदलाव हो सकता है।
• अदृश्य टेक्स्ट का फ्लैश (FOIT) - यहाँ, आप पहले तो कोई भी टेक्स्ट नहीं देख सकते। यह केवल वेब फ़ॉन्ट फ़ाइल के साथ ही दिखाई देता है।

आप निम्नलिखित रणनीतियों के माध्यम से इन समस्याओं से बच सकते हैं:

• आधुनिक फ़ॉन्ट फ़ॉर्मेट का उपयोग करें - छवियों की तरह, फ़ॉन्ट बड़े और छोटे फ़ाइल फ़ॉर्मेट में आते हैं। सबसे तेज़ लोड होने वाले फ़ॉन्ट आमतौर पर WOFF या WOFF2 होते हैं।
• एक समान फ़ॉलबैक फ़ॉन्ट परिभाषित करें - एक फ़ॉलबैक फ़ॉन्ट को जगह पर रखना जो आपके वास्तविक टाइपफ़ेस के समान है, स्विच होने पर पृष्ठ की गति को कम करता है। आप अच्छे संयोजन खोजने के लिए फ़ॉन्ट स्टाइल मैचर का उपयोग कर सकते हैं।
• प्रीलोड फ़ॉन्ट - वेब फ़ॉन्ट फ़ाइलों को दस्तावेज़ में पहले रखकर और कॉल में rel=preload जोड़कर प्राथमिकता दें। इस तरह, ब्राउज़र उन्हें ज़्यादा तेज़ी से लोड करेगा।

यदि आप WP Rocket का उपयोग कर रहे हैं, तो प्लगइन फ़ॉन्ट फ़ाइलों को प्रीलोड करने के विकल्प के साथ आता है। आपको बस उस पथ को इनपुट करना है जहाँ वे स्थित हैं।

वैसे, बहुभाषी वेबसाइट के लिए फ़ॉन्ट ऑप्टिमाइज़ेशन का एक हिस्सा ऐसे फ़ॉन्ट का उपयोग करना भी है जो अलग-अलग वर्णमाला के साथ संगत हों। यह विशेष रूप से सच है यदि आप अपनी साइट पर RTL भाषाएँ (दाएँ से बाएँ लिखी गई) प्रदान करते हैं।

गतिशील सामग्री से निपटें

गतिशील सामग्री से हमारा तात्पर्य ऐसे तत्वों से है जो पृष्ठ के लोड होने के बाद दिखाई देते हैं। इसके उदाहरणों में धीमी गति से लोड की गई छवियाँ, बैनर, फ़ॉर्म आदि शामिल हैं।

अपने CLS स्कोर पर उनके प्रभाव को कम रखने के लिए, ऊपर दी गई सलाह का पालन करें:

• उनके कंटेनर पहले से ही निर्धारित कर दें और उन्हें निश्चित आयाम दे दें।
• उनकी उपस्थिति को उपयोगकर्ता इंटरैक्शन से जोड़ें। इस तरह, आप CLS दंड से बच सकते हैं।

वैसे, Weglot गतिशील सामग्री का अनुवाद करने में पूरी तरह सक्षम है। इसलिए, आपको अपने दर्शकों द्वारा इसे न समझ पाने की चिंता करने की ज़रूरत नहीं है।

अगले पेंट के लिए इंटरेक्शन पर काम करना

अंत में, आइए बात करते हैं कि आप कैसे सुनिश्चित कर सकते हैं कि आपका INP सही है।

जावास्क्रिप्ट अनुकूलित करें

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

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

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

यदि आप WP Rocket का उपयोग कर रहे हैं, तो यह प्लगइन आपको विस्तृत कॉन्फ़िगरेशन करने की अनुमति देता है कि आप किन जावास्क्रिप्ट फ़ाइलों को लोड होने में विलंब करना चाहते हैं और किनको नहीं।

अप्रयुक्त CSS को कम करें

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

यहां, आप अप्रयुक्त CSS को खोजने के लिए स्पीड टेस्टिंग टूल का भी उपयोग कर सकते हैं। इसके अलावा, आप अपनी स्टाइल शीट को विभाजित करके महत्वपूर्ण CSS को पहले लोड कर सकते हैं या उसे इनलाइन कर सकते हैं।

जैसा कि बताया गया है, WP Rocket में अप्रयुक्त CSS को स्वचालित रूप से हटाने के विकल्प हैं।

आलसी लोडिंग जोड़ें

हमने पहले ही इमेज ऑप्टिमाइजेशन के लिए लेज़ी लोडिंग के बारे में बात की है। इसका INP पर भी सकारात्मक प्रभाव हो सकता है क्योंकि यह उपयोगकर्ता इनपुट पर प्रतिक्रिया करने के लिए ब्राउज़र संसाधनों को मुक्त करता है। इसे लागू करने के लिए ऊपर दिए गए निर्देशों का पालन करें।

वैसे, यदि आपको लेज़ी-लोडेड छवियों के अनुवाद में समस्या आ रही है, Weglot डिफ़ॉल्ट रूप से, data-src या srcset विशेषताओं में जोड़े गए छवि URL का अनुवाद करता है। यदि आपकी लेज़ी-लोडिंग कस्टम विशेषताओं का उपयोग करती है, Weglot उन्हें बॉक्स से बाहर अनुवाद नहीं करेगा - आपको एक PHP फ़िल्टर जोड़ना होगा, जो विशेष रूप से वर्डप्रेस एकीकरण के लिए है।

यदि आप उपयोग कर रहे हैं Weglot जावास्क्रिप्ट एकीकरण और/या अभी भी आपकी छवियों का अनुवाद नहीं कर सकते हैं, अधिक जानकारी के लिए समर्थन से संपर्क करें ।

आज ही अपनी बहुभाषी वेबसाइट पर कोर वेब वाइटल सुधारें!

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

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

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