सीएलएस को 0.2 तक ऑप्टिमाइज़ करने से, हर सेशन में पेज व्यू में 15% की बढ़ोतरी हुई. साथ ही, सेशन 13% ज़्यादा समय तक चला और बाउंस रेट में 1.72 प्रतिशत की कमी आई.
Yahoo! JAPAN जापान की सबसे बड़ी मीडिया कंपनियों में से एक है, जो हर महीने 79 अरब से ज़्यादा पेज व्यू देती है. उनका समाचार प्लैटफ़ॉर्म, Yahoo! JAPAN News पर हर महीने 22 अरब से ज़्यादा पेज व्यू मिलते हैं. साथ ही, एक इंजीनियरिंग टीम भी है, जो उपयोगकर्ता अनुभव को बेहतर बनाने के लिए काम करती है.
वेबसाइट की परफ़ॉर्मेंस की जानकारी देने वाली मेट्रिक पर लगातार नज़र रखने से, ये साइट के कुल लेआउट शिफ़्ट (सीएलएस) के स्कोर को बेहतर बनाती हैं, क्योंकि हर सेशन में पेज व्यू में 15% और सेशन की अवधि में 13% की बढ़ोतरी होती है.
0.2
सीएलएस में सुधार
15.1%
हर सेशन में ज़्यादा पेज व्यू
13.3%
सेशन की अवधि ज़्यादा है
पेज पर अचानक दिखने वाला कॉन्टेंट अक्सर अनजाने में क्लिक करने, पेज पर मतिभ्रम, और उपयोगकर्ता को परेशान करता है. ऐसे उपयोगकर्ता, साइट पर ज़्यादा देर तक बने रहते हैं. उपयोगकर्ताओं को खुश रखने के लिए, पेज का लेआउट उपयोगकर्ता की पूरी लाइफ़साइकल के दौरान एक जैसा होना चाहिए. Yahoo! के लिए JAPAN Google Ads की इस बढ़ोतरी से कारोबार की अहम यूज़र ऐक्टिविटी वाली मेट्रिक पर काफ़ी अच्छा असर पड़ा है.
सीएलएस को बेहतर बनाने के बारे में तकनीकी जानकारी के लिए, Yahoo! JAPAN News की इंजीनियरिंग टीम की पोस्ट.
समस्या की पहचान करना
समस्याओं का पता लगाने और यह पता लगाने के लिए कि वे कहां से आ रही हैं, सीएलएस के साथ-साथ वेबसाइट की परफ़ॉर्मेंस की अहम जानकारी पर नज़र रखना बहुत ज़रूरी है. Yahoo! जापान से जुड़ी News, Search Console की मदद से, परफ़ॉर्मेंस की समस्याओं वाले पेजों के ग्रुप की खास जानकारी मिली. साथ ही, Lighthouse ने पेज की परफ़ॉर्मेंस को बेहतर बनाने के लिए, हर पेज के अवसरों की पहचान की. इन टूल का इस्तेमाल करके, उन्हें पता चला कि लेख की ज़्यादा जानकारी वाले पेज का सीएलएस खराब था.
![Google Search Console की वेबसाइट की परफ़ॉर्मेंस की जानकारी देने वाली रिपोर्ट, लेख की ज़्यादा जानकारी वाले पेज के लिए ज़्यादा सीएलएस दिखाती है.](https://web.dev/static/case-studies/yahoo-japan-news/image/google-search-console-cor-65713bd9c58c3.png?authuser=6&hl=hi)
![लाइटहाउस, पेज पर सीएलएस में सबसे ज़्यादा योगदान देने वाले डीओएम एलिमेंट दिखाने वाले बड़े लेआउट शिफ़्ट ऑडिट से बचें.](https://web.dev/static/case-studies/yahoo-japan-news/image/lighthouse-avoid-large-la-23c5555fd5f8f.png?authuser=6&hl=hi)
कुल लेआउट शिफ़्ट के कुल हिस्से का ध्यान रखना ज़रूरी है—स्कोर, पेज की पूरी लाइफ़साइकल के दौरान कैप्चर किया जाता है. असल दुनिया में, स्कोर में उन बदलावों को शामिल किया जा सकता है जो उपयोगकर्ता के इंटरैक्शन की वजह से होते हैं. इन इंटरैक्शन में, किसी पेज को स्क्रोल करना या किसी बटन पर टैप करना शामिल है. फ़ील्ड डेटा से सीएलएस स्कोर इकट्ठा करने के लिए, टीम ने वेब-वाइटल JavaScript लाइब्रेरी रिपोर्टिंग को इंटिग्रेट किया.
टीम ने Chrome DevTools का इस्तेमाल करके यह पता लगाया कि कौनसे एलिमेंट, पेज पर लेआउट शिफ़्ट कर रहे थे. DevTools में लेआउट शिफ़्ट रीजन, सीएलएस में योगदान देने वाले एलिमेंट को विज़ुअलाइज़ करता है. ऐसा करने के लिए, लेआउट शिफ़्ट होने पर, उन्हें नीले रेक्टैंगल से हाइलाइट किया जाता है.
![लेख की ज़्यादा जानकारी वाला पेज, जिसमें हीरो इमेज और टेक्स्ट के ऊपर नीले रंग के रेक्टैंगल हैं.](https://web.dev/static/case-studies/yahoo-japan-news/image/article-details-page-blu-565ff494e023.png?authuser=6&hl=hi)
उन्हें पता चला कि लेख में सबसे ऊपर हीरो इमेज को पहली बार लोड करने के बाद, लेआउट शिफ़्ट हुआ है.
![लेख की ज़्यादा जानकारी वाले पेज के स्क्रीनशॉट, जो लेआउट शिफ़्ट से पहले और बाद में, दोनों की तुलना करते हुए दिख रहे हैं.](https://web.dev/static/case-studies/yahoo-japan-news/image/screenshots-the-article-b6de7e5cb4ab7.jpg?authuser=6&hl=hi)
ऊपर दिए गए उदाहरण में, इमेज लोड होने के बाद, टेक्स्ट को नीचे धकेल दिया जाता है (जगह में बदलाव को लाल लाइन से दिखाया गया है).
इमेज के लिए सीएलएस में सुधार करना
तय साइज़ वाली इमेज के लिए, लेआउट शिफ़्ट को रोका जा सकता है. इसके लिए, img
एलिमेंट में width
और height
एट्रिब्यूट की जानकारी दें और मॉडर्न ब्राउज़र में उपलब्ध सीएसएस aspect-ratio
प्रॉपर्टी का इस्तेमाल करें. हालांकि, Yahoo! JAPAN News को सिर्फ़ आधुनिक ब्राउज़र के साथ-साथ, iOS 9 जैसे पुराने
ऑपरेटिंग सिस्टम में इंस्टॉल किए गए ब्राउज़र पर भी काम करने की ज़रूरत थी.
उन्होंने आसपेक्ट रेशियो बॉक्स का इस्तेमाल किया. यह एक ऐसा तरीका है जिसमें इमेज लोड होने से पहले, पेज पर जगह को रिज़र्व करने के लिए मार्कअप का इस्तेमाल किया जाता है. इस तरीके के लिए, इमेज के आसपेक्ट रेशियो (लंबाई-चौड़ाई का अनुपात) को पहले से जानना ज़रूरी है, जिसे वे बैकएंड एपीआई से हासिल कर सकते थे.
![लेख की ज़्यादा जानकारी वाले पेज के स्क्रीनशॉट, जो सीएलएस ऑप्टिमाइज़ेशन से पहले और बाद की तुलना को साथ-साथ दिखाते हैं.](https://web.dev/static/case-studies/yahoo-japan-news/image/screenshots-the-article-5191c90be0709.jpg?authuser=6&hl=hi)
नतीजे
Search Console में खराब परफ़ॉर्मेंस वाले यूआरएल की संख्या 98% गिर गई. साथ ही, लैब डेटा में सीएलएस करीब 0.2 से घटकर 0 हो गया. इससे भी अहम बात यह है कि कारोबार की मेट्रिक में, आपस में कई सुधार किए गए हैं.
![Search Console की रिपोर्ट, जिसमें परफ़ॉर्मेंस की समस्याओं वाले पेजों की संख्या में काफ़ी गिरावट आई है.](https://web.dev/static/case-studies/yahoo-japan-news/image/search-console-report-sho-a2a53f06e3baf.png?authuser=6&hl=hi)
जब Yahoo! JAPAN News ने सीएलएस ऑप्टिमाइज़ेशन से पहले और बाद में, यूज़र ऐक्टिविटी वाली मेट्रिक की तुलना की. इससे उसे कई सुधार दिखे:
15.1%
हर सेशन में ज़्यादा पेज व्यू
13.3%
सेशन की अवधि ज़्यादा है
1.72%*
कम बाउंस दर (*प्रतिशत अंक)
सीएलएस और वेबसाइट की परफ़ॉर्मेंस की जानकारी देने वाली अन्य मेट्रिक में सुधार करके, Yahoo! JAPAN News को Chrome Android के संदर्भ मेन्यू में "फ़ास्ट पेज" लेबल भी मिला.
![Android पर Chrome में तेज़ी से लोड होने वाले पेज लेबल.](https://web.dev/static/case-studies/yahoo-japan-news/image/fast-page-label-chrome-da3bd8521a851.png?authuser=6&hl=hi)
लेआउट शिफ़्ट परेशान करने वाली होती है और उपयोगकर्ताओं को ज़्यादा पेज पढ़ने से रोकती है. लेकिन सही टूल का इस्तेमाल करके, समस्याओं की पहचान करके, और सबसे सही तरीके लागू करके इन्हें बेहतर बनाया जा सकता है. सीएलएस में सुधार करने से आपके कारोबार को बेहतर बनाया जा सकता है.
ज़्यादा जानकारी के लिए, Yahoo! जापान की इंजीनियरिंग टीम की पोस्ट.