आज से, सीएलएस में किए गए बदलाव को Chrome के कई वेब टूल प्लैटफ़ॉर्म पर रोल आउट किया जा चुका है. इनमें लाइटहाउस, PageSpeed Insights, और Chrome UX रिपोर्ट शामिल हैं.
आज हम आपको बताना चाहते हैं कि हम किस तरह से कुल लेआउट शिफ़्ट (सीएलएस) मेट्रिक को इकट्ठा किया है. डेवलपर के लिए, ये बदलाव ऐसे पेज जो लंबे समय तक ऐक्टिव रहते हों (जैसे, इनफ़ाइनाइट स्क्रोलिंग या एक पेज वाले ऐप्लिकेशन) सीएलएस में किए गए ये अपडेट, कई टूल में रोल आउट किए जाएंगे. इनमें लाइटहाउस, PageSpeed Insights और Chrome UX रिपोर्ट.
हम सभी चाहते हैं कि हमें वेब पर कम लेआउट शिफ़्ट दिखें. ऐसी स्थिति में सीएलएस मेट्रिक, किसी वेब पेज के विज़ुअल की स्थिरता को मेज़र करने में मददगार साबित हुई है. यह साइटों को सामग्री के लिए बेहतर आयाम सेट करने के लिए प्रोत्साहित करने में मदद करता है, जैसे कि इमेज या विज्ञापन, जिनकी वजह से उनके उपयोगकर्ताओं के कॉन्टेंट में बड़े पैमाने पर बढ़ोतरी देखने को मिल सकती है.
मेट्रिक का नाम "कुल" होता है क्योंकि किसी पेज के पूरे जीवनकाल में हर शिफ़्ट का स्कोर जोड़ दिया जाता है. वेब पर सभी लेआउट शिफ़्ट होने से उपयोगकर्ता अनुभव खराब होता है. सिंगल-पेज ऐप्लिकेशन (एसपीए) या इनफ़ाइनाइट स्क्रोलिंग जैसे ऐप्लिकेशन जैसे लंबे समय तक इस्तेमाल किए जाने वाले पेज, समय के साथ स्वाभाविक रूप से ज़्यादा सीएलएस जमा करते हैं. एग्रीगेशन को सबसे खराब 'विंडो' पर कैपिंग करके बदलावों के बारे में बताया है. सीएलएस को अब एक ही तरीके से मेज़र किया जा सकता है, भले ही सेशन कितनी भी अवधि का हो.
जैसा कि हमने सीएलएस मेट्रिक को बेहतर बनाने में बताया था, हम सीएलएस मेट्रिक को एक सेकंड के अंतर की ज़्यादा से ज़्यादा सेशन विंडो, जिसकी अवधि पांच सेकंड है, यह अपडेट लंबे समय तक रहने वाले पेजों के लिए उपयोगकर्ता अनुभव को बेहतर तरीके से दिखाता है. इस बदलाव के बाद, 70% ऑरिजिन को 75वें पर्सेंटाइल पर सीएलएस में कोई बदलाव दिखने की उम्मीद नहीं होनी चाहिए, और बाकी के 30% ऑरिजिन में सुधार दिखेगा.
विंडोइंग अडजस्टमेंट को सीएलएस में रोल आउट किया जा रहा है
हमने सीएलएस की अपडेट की गई परिभाषा के बारे में बताया कि इसमें एक सेकंड के अंतर के साथ एक मैक्स सेशन विंडो है. 5 सेकंड तक सीमित हो गया था. टूल के लिए इसका क्या मतलब है?
आज से, सीएलएस में किए गए इस बदलाव को Chrome के कई वेब टूल पर रोल आउट किया गया है. इनमें ये भी शामिल हैं लाइटहाउस, PageSpeed Insights, और Chrome UX रिपोर्ट. सीएलएस विंडो में बदलाव करने की सुविधा के लॉन्च की खास जानकारी नीचे देखी जा सकती है. और कौनसे टूल अब भी मूल रूप से लागू किए जाने की तुलना में बेंचमार्क करने की सुविधा दे रहे हैं.
| टूल | सीएलएस विंडोिंग अडजस्टमेंट 'लाइव' | "पुराना" सीएलएस की उपलब्धता |
|---|---|---|
| लाइटहाउस DevTools पैनल | कैनरी चैनल, 2 जून, 2021 | लागू नहीं |
| लाइटहाउस सीएलआई | v8, 1 जून, 2021 को रिलीज़ किया गया | लाइटहाउस v8 में TotalCumulativeLayoutShift के तौर पर उपलब्ध है |
| लाइटहाउस सीआई | v0.7.3, 3 जून, 2021 | लागू नहीं |
| PageSpeed Insights (पीएसआई) | 1 जून, 2021 | लागू नहीं |
| पीएसआई एपीआई | 1 जून, 2021 | lighthouseResult में totalCumulativeLayoutShift के तौर पर उपलब्ध है. loadingExperience डेटा फ़ील्ड में उपलब्ध नहीं है |
| Chrome के लिए उपयोगकर्ता अनुभव से जुड़ी रिपोर्ट (CrUX) - BigQuery | 8 जून, 2021 को पब्लिश किया गया, 202105 डेटासेट | साल 20211 तक experimental.uncapped_cumulative_layout_shift के तौर पर उपलब्ध है |
| Chrome के लिए उपयोगकर्ता अनुभव से जुड़ी रिपोर्ट (CrUX) - एपीआई | 1 जून, 2021 | 1 जून, 2021 के बाद, इस खाते से उपलब्ध होगा:
experimental_uncapped_cumulative_layout_shift अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
14 दिसंबर, 2021 |
Chrome DevTools को भी जल्द ही अपडेट किया जाएगा, ताकि विंडोिंग अडजस्ट की जा सके. सीएलएस को Search Console में भी अपडेट कर दिया गया है. यह 1 जून, 2021 से लागू हो जाएगा.
ज़्यादातर डेवलपर के लिए, उम्मीद है कि यह बदलाव आसानी से होगा. साथ ही, डेटा का फ़ायदा लेने के लिए किसी कार्रवाई की ज़रूरत नहीं होगी.
"पुराना" CLS
आपको याद दिला दें कि "पुराना" सीएलएस, किसी पेज के लंबे समय तक चलने वाले लेआउट में हुए बदलाव को मापता है. ऐसा हो सकता है कि कुछ डेवलपर, विंडोिंग-अडजस्टमेंट के साथ-साथ सीएलएस की पुरानी परिभाषा पर भी नज़र रखना चाहें, हमारे पास आपके लिए अच्छी खबर है: हम "पुराना सीएलएस" लॉन्च कर रहे हैं और CrUX में भी बदलाव किया है.
लाइटहाउस v8 में,
यह JSON में इस तौर पर उपलब्ध होता है
audits['cumulative-layout-shift'].details.items[0].totalCumulativeLayoutShift.
आपको यह इस तरह दिखेगा
experimental_uncapped_cumulative_layout_shift अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
इस्तेमाल कर रहे हैं.
CrUX BigQuery में experimental.uncapped_cumulative_layout_shift.
CrUX API के अनुरोधों पर 1 जून के बाद, "पुराना सीएलएस" दिखेगा मेट्रिक:
{
"origin": "https://web.dev",
"metrics": [
"experimental_uncapped_cumulative_layout_shift"
]
}
8 जून के बाद, CrUX BigQuery पुराने और नए सीएलएस की तुलना करेगा:
WITH
new_data AS (
SELECT
cls
FROM
`chrome-ux-report.all.202105`,
UNNEST(layout_instability.cumulative_layout_shift.histogram.bin) AS cls
WHERE
origin = 'https://web.dev'
AND effective_connection_type.name = '4G'
AND form_factor.name = 'phone'),
old_data AS (
SELECT
uncapped_cls
FROM
`chrome-ux-report.all.202105`,
UNNEST(experimental.uncapped_cumulative_layout_shift.histogram.bin) AS uncapped_cls
WHERE
origin = 'https://web.dev'
AND effective_connection_type.name = '4G'
AND form_factor.name = 'phone')
SELECT
cls.start AS start,
cls.`END` AS `end`,
cls.density AS cls_density,
uncapped_cls.density AS uncapped_cls_density
FROM
new_data
INNER JOIN
old_data
ON
new_data.cls.start = old_data.uncapped_cls.start
हम छह महीने तक, इस डेटा पर भरोसा करते रहेंगे. "पुराने सीएलएस" के साथ सेवा 14 दिसंबर, 2021 को बंद हो जाएगी.
लाइटहाउस में सीएलएस वेटेज (सीएलएस वेटेज) को अपडेट किया जा रहा है
जब सीएलएस को पहली बार लाइटहाउस में पेश किया गया था, यह बिलकुल नई स्पार्क्ली मेट्रिक थी. इसलिए, यह पक्का करने के लिए कि डेवलपर के पास ऐप्लिकेशन को टेस्ट करने, बेंचमार्क और ऑप्टिमाइज़ करने के लिए किया गया, तो सीएलएस को परफ़ॉर्मेंस स्कोर में कम अहमियत दी गई.
डेवलपर के काम करने के बाद, लाइटहाउस स्कोर को, सीएलएस के वेट को 5% से बढ़ाकर 15% किया गया है, जो वेबसाइट की परफ़ॉर्मेंस की अहम जानकारी देने वाली मेट्रिक से मेल खाती हों. सबसे ज़्यादा अहम मेट्रिक होंगी.
लाइटहाउस v8 में, मेट्रिक की अपडेट की गई अहमियत को यहां देखा जा सकता है: स्कोरिंग कैलकुलेटर.
लाइटहाउस 8.0 के सीएलएस को लागू करने पर, विंडोिंग और सबफ़्रेम, दोनों का सीएलएस योगदान शामिल होता है. 8.0 से पहले, लाइटहाउस में सीएलएस में सबफ़्रेम शामिल नहीं होता था मेट्रिक की गिनती में सीएलएस, लेकिन अब करता है. CrUX से मापा गया फ़ील्ड सीएलएस, विंडोिंग और सबफ़्रेम को भी इसी तरह हैंडल करता है.
हालांकि, लैब और फ़ील्ड सीएलएस के बीच मुख्य अंतर यह है कि लैब सीएलएस की ऑब्ज़र्वेशन की विंडो "पूरी तरह लोड" होने पर खत्म होती है जैसा कि लैब की शर्तों के तहत तय किया जाता है, जबकि फ़ील्ड में, निगरानी की विंडो, लोड होने के बाद की गतिविधि सहित पूरे पेज के लाइफ़टाइम तक फैली होती है. हालांकि, विंडो में बदलाव करने से यह अंतर काफ़ी कम हो जाता है.
फ़ील्ड में खुद को मेज़र करना
अगर आपको सीएलएस के नए अपडेट को लागू करने के तरीके को मेज़र करना है, तो RUM की मदद से, फ़ील्ड डेटा के लिए इसे रिकॉर्ड भी किया जा सकता है. इसके लिए, यहां दिए गए PerformanceObserver स्निपेट का इस्तेमाल करें.
या सीधे तौर पर वेबसाइट की परफ़ॉर्मेंस की अहम जानकारी वाली JavaScript लाइब्रेरी, जिसे इस बदलाव के साथ अपडेट कर दिया गया है.
कुछ और अपडेट
लेआउट शिफ़्ट के अपडेट के बाहर, हमारे वेब टूल में, मेट्रिक से जुड़े ये अपडेट भी किए गए हैं:
- हम अपडेट कर रहे हैं: सबसे बड़े एलिमेंट को रेंडर करने में लगने वाले समय की मेट्रिक की सबसे हाल की परिभाषा. CrUX API, PSI, PSI API, और Search Console को 1 जून, 2021 को अपडेट किया जाएगा. CrUX BigQuery को 8 जून, 2021 को अपडेट किया जाएगा.
- CrUX में, फ़र्स्ट कॉन्टेंटफ़ुल पेंट के ट्राई-बिनिंग थ्रेशोल्ड को अपडेट किया गया है, ताकि अच्छा: [0-1.8s], सुधार की ज़रूरत है: (1.8s-3s), खराब: [3s-∞]
मीटिंग में सामने आए नतीजे
हमें उम्मीद है कि इस बदलाव से, ज़्यादातर साइटों पर आसानी से स्विच किया जा सकेगा. साथ ही, हमारी सलाह है कि आप वेबसाइट की परफ़ॉर्मेंस की अहम जानकारी और सीएलएस ऑप्टिमाइज़ करें यहां आपको लेआउट शिफ़्ट को मापने और ऑप्टिमाइज़ करने के सुझाव मिलेंगे. हमेशा की तरह, इस ईमेल पते पर हमसे बेझिझक संपर्क करें वेब-वाइटल-सुझाव ग्रुप और हमारे टूल के बारे में सुझाव, राय या शिकायत के लिए, Lighthouse, और Chrome के लिए उपयोगकर्ता अनुभव से जुड़ी रिपोर्ट समस्याओं की जांच करें. बधाई हो!
इसके लिए, हम योहानस हेंकल, रिक विस्कोमी, विवेक शेखर, रेचल एंड्रयू, मिलिका मिहाजलीजा, जेफ़ जोस, और पॉल आइरिश को सुझाव देने के लिए धन्यवाद देते हैं.
Barn Images की हीरो इमेज / Unस्प्लैश पर @barnimages