आज से, सीएलएस में बदलाव को Chrome के वेब टूल के कई प्लैटफ़ॉर्म पर लागू कर दिया गया है. इनमें Lighthouse, PageSpeed Insights, और Chrome UX रिपोर्ट शामिल हैं.
आज हम आपको बताना चाहते हैं कि हम Chrome के वेब टूल वाले कई प्लैटफ़ॉर्म पर, कुल लेआउट शिफ़्ट (सीएलएस) मेट्रिक के मेज़रमेंट को कैसे बेहतर बना रहे हैं. डेवलपर के लिए ये बदलाव, लंबे समय तक लाइव रहने वाले पेजों (जैसे कि इनफ़ाइनाइट स्क्रोलिंग या एक पेज वाले ऐप्लिकेशन वाले ऐप्लिकेशन) पर, उपयोगकर्ता अनुभव को बेहतर तरीके से दिखाएंगे. सीएलएस में किए गए ये अपडेट, Lighthouse, PageSpeed Insights, और Chrome UX रिपोर्ट जैसे टूल के लिए लॉन्च किए जाएंगे.
काश, वेब पर लेआउट शिफ़्ट कम होते. इसी जगह पर सीएलएस मेट्रिक से, किसी वेब पेज की विज़ुअल स्टैबिलिटी को मापने में मदद मिलती है. इससे साइटों को, इमेज या विज्ञापनों जैसे कॉन्टेंट के डाइमेंशन को बेहतर तरीके से सेट करने के लिए बढ़ावा मिलता है. इससे उपयोगकर्ताओं के लिए, कॉन्टेंट में अचानक उछाल आ सकता है.
इस मेट्रिक को "कुल" नाम दिया गया है, क्योंकि किसी पेज की पूरी अवधि के दौरान, हर शिफ़्ट का स्कोर एक साथ जोड़ा जाता है. वेब पर लेआउट शिफ़्ट होने की वजह से, उपयोगकर्ताओं को खराब अनुभव मिलता है. हालांकि, लंबे समय तक चलने वाले पेज, जैसे कि सिंगल-पेज ऐप्लिकेशन (एसपीए) या इनफ़ाइनाइट स्क्रोलिंग वाले ऐप्लिकेशन, समय के साथ ज़्यादा सीएलएस इकट्ठा करते हैं. शिफ़्ट की सबसे खराब 'विंडो' के लिए एग्रीगेशन की सीमा तय करके, सीएलएस को अब ज़्यादा समान रूप से मेज़र किया जा सकता है, भले ही सेशन की अवधि कुछ भी हो.
जैसा कि हमने सीएलएस मेट्रिक को बेहतर बनाने में बताया था, हम सीएलएस मेट्रिक को ज़्यादा से ज़्यादा एक सेकंड के अंतर वाली सेशन विंडो पर सेट कर रहे हैं. यह समयावधि पांच सेकंड की है. यह अपडेट, उपयोगकर्ता के अनुभव को ज़्यादा बेहतर बनाने वाले पेजों के बारे में बेहतर तरीके से बताता है. यह बदलाव होने के बाद, 70% ऑरिजिन को 75वें पर्सेंटाइल पर सीएलएस में कोई बदलाव देखने की उम्मीद नहीं होनी चाहिए. इसके अलावा, बाकी 30% ऑरिजिन में सुधार दिखेगा.
विंडो अडजस्टमेंट को सीएलएस के लिए रोल आउट किया जा रहा है
हमने अपडेट की गई सीएलएस परिभाषा के बारे में बात की है. इसमें एक सेकंड के अंतर वाली ज़्यादा से ज़्यादा सेशन विंडो है. यह पांच सेकंड की होती है. टूल के लिए इसका क्या मतलब है?
सीएलएस में किया गया यह बदलाव, Chrome के वेब टूल के कई प्लैटफ़ॉर्म पर आज से लागू किया गया है. इनमें Lighthouse, PageSpeed Insights, और Chrome UX रिपोर्ट शामिल हैं. यहां सीएलएस विंडो को घटाने या बढ़ाने की सुविधा के रोल आउट की खास जानकारी देखी जा सकती है. साथ ही, यहां यह भी देखा जा सकता है कि कौनसे टूल अब भी, मूल लागू करने के मुकाबले बेंचमार्क करने की सुविधा देते हैं.
| टूल | सीएलएस विंडोिंग अडजस्टमेंट 'लाइव' | "पुरानी" सीएलएस की उपलब्धता |
|---|---|---|
| लाइटहाउस DevTools पैनल | कैनरी चैनल, 2 जून, 2021 | लागू नहीं |
| लाइटहाउस सीएलआई | v8, 1 जून, 2021 को रिलीज़ किया गया | Lighthouse v8 में, TotalLayoutShift के तौर पर उपलब्ध |
| लाइटहाउस सीआई | v0.7.3, 3 जून, 2021 | लागू नहीं |
| PageSpeed Insights (पीएसआई) | 1 जून, 2021 | लागू नहीं |
| पीएसआई एपीआई | 1 जून, 2021 | lighthouseResult में totalCumulativeLayoutShift के तौर पर उपलब्ध है. loadingExperience डेटा फ़ील्ड में उपलब्ध नहीं है |
| Chrome UX रिपोर्ट (CrUX) - BigQuery | 202105 का डेटासेट, 8 जून, 2021 को पब्लिश किया गया | experimental.uncapped_cumulative_layout_shift से 202111 तक उपलब्ध |
| Chrome UX रिपोर्ट (CrUX) - एपीआई | 1 जून, 2021 | 1 जून, 2021 के बाद,
experimental_uncapped_cumulative_layout_shift
14 दिसंबर, 2021 के तौर पर उपलब्ध होगा |
Chrome DevTools को भी अपडेट किया जाएगा, ताकि विंडो में बदलाव करने की सुविधा जल्द ही काम कर सके. सीएलएस में किए गए बदलावों को Search Console में भी अपडेट कर दिया गया है. यह 1 जून, 2021 से लागू होगा.
ज़्यादातर डेवलपर को उम्मीद है कि यह बदलाव बिना किसी रुकावट के होगा. साथ ही, इस समस्या को ठीक करने के बाद, डेटा का फ़ायदा उठाने के लिए आपको कोई कार्रवाई करने की ज़रूरत नहीं होगी.
"पुराना" सीएलएस
आपको याद दिला दें कि "पुराना" सीएलएस, पेज के पूरे जीवनकाल में लेआउट शिफ़्ट को मापता है. ऐसा हो सकता है कि कुछ डेवलपर, विंडो में बदलाव करने की सुविधा के साथ-साथ सीएलएस की पुरानी परिभाषा पर नज़र रखना चाहें. इसलिए, हमारे पास आपके लिए अच्छी खबर है: हम लाइटहाउस और CrUX में "पुराने सीएलएस" के बारे में बता रहे हैं.
Lighthouse v8 में,
यह JSON में audits['cumulative-layout-shift'].details.items[0].totalCumulativeLayoutShift के तौर पर उपलब्ध है.
आपको यह CrUX API में
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 को बंद हो जाएगी. साथ ही, अगले छह महीने तक इस डेटा को इस्तेमाल किया जा सकेगा.
लाइटहाउस में सीएलएस वेटिंग को अपडेट किया जा रहा है
जब सीएलएस को पहली बार लाइटहाउस में पेश किया गया था, तो यह एक बेहतरीन मेट्रिक थी. इसलिए, परफ़ॉर्मेंस स्कोर में सीएलएस को बहुत कम अहमियत दी गई, ताकि यह पक्का किया जा सके कि डेवलपर के पास उसे टेस्ट करने, मानदंड बनाने, और उसे ऑप्टिमाइज़ करने का समय हो.
डेवलपर से कुछ समय मिलने के बाद, Lighthouse स्कोर में सीएलएस का महत्व 5% से बढ़ाकर 15% कर दिया गया है. यह सीएलएस के आकलन के तरीके के हिसाब से है, जो Lighthouse स्कोर में सबसे ज़्यादा ज़रूरी मेट्रिक है.
स्कोरिंग कैलकुलेटर में, Lighthouse v8 में मेट्रिक की अपडेट की गई वैल्यू देखी जा सकती है.
लाइटहाउस 8.0 के सीएलएस को लागू करने में, सबफ़्रेम से विंडो और सीएलएस, दोनों का योगदान शामिल होता है. 8.0 से पहले, लाइटहाउस के सीएलएस में मेट्रिक कैलकुलेशन में सबफ़्रेम का सीएलएस शामिल नहीं किया जाता था, लेकिन अब करता है. सिर्फ़ पुष्टि करने के लिए, CrUX फ़ील्ड को मेज़र किया गया फ़ील्ड सीएलएस, विंडो और सबफ़्रेम को भी हैंडल करता है.
फिर भी, लैब और फ़ील्ड सीएलएस के बीच मुख्य अंतर यह है कि लैब सीएलएस की निगरानी की विंडो, लैब की स्थितियों के हिसाब से "पूरी तरह से लोड" पर खत्म होती है. वहीं, फ़ील्ड में निगरानी की विंडो, पोस्ट-लोड गतिविधि के साथ-साथ पेज की पूरी लाइफ़टाइम गतिविधि तक बढ़ती है. हालांकि, विंडो के लिए बदलाव करने से यह फ़र्क़ काफ़ी हद तक कम हो जाता है.
फ़ील्ड में खुद मेज़र करना
अगर आपको सबसे नए सीएलएस लागू करने के तरीके को मेज़र करना है, तो इसे आरयूएम के ज़रिए अपने फ़ील्ड डेटा के लिए रिकॉर्ड भी किया जा सकता है. इसके लिए, इन Performanceऑब्जेक्टर स्निपेट का इस्तेमाल करें.
इसके अलावा, सीधे तौर पर वेबसाइट की परफ़ॉर्मेंस की जानकारी देने वाली JavaScript लाइब्रेरी पर भरोसा किया जा सकता है. इस लाइब्रेरी को भी इस बदलाव के साथ अपडेट किया गया है.
कुछ और अपडेट
कुल लेआउट शिफ़्ट में हुए अपडेट के अलावा, मेट्रिक से जुड़े नीचे दिए गए अपडेट भी हमारी वेब टूलिंग में किए गए हैं:
- हम सबसे बड़े कॉन्टेंटफ़ुल पेंट मेट्रिक की सबसे नई परिभाषा में अपडेट कर रहे हैं. CrUX API, PSI, PSI API, और Search Console 1 जून, 2021 को अपडेट हो जाएंगे. CrUX BigQuery, 8 जून, 2021 को अपडेट होगा.
- CrUX में, फ़र्स्ट कॉन्टेंटफ़ुल पेंट ट्राई-बाइंडिंग थ्रेशोल्ड को अपडेट किया गया है: अच्छा: [0-1.8s], सुधार की ज़रूरत है: (1.8 से 3 सेकंड), खराब: [3s-∞]
मीटिंग में सामने आए नतीजे
हमें उम्मीद है कि इस बदलाव से ज़्यादातर साइटों के लिए, ट्रांज़िशन आसान हो जाएगा. साथ ही, आपको वेबसाइट की परफ़ॉर्मेंस की जानकारी और सीएलएस ऑप्टिमाइज़ करें को देखना चाहिए. इनसे, अपने लेआउट शिफ़्ट को मेज़र और ऑप्टिमाइज़ करने के बारे में सुझाव और तरकीबें मिलती हैं. हमेशा की तरह, मेट्रिक के बारे में सुझाव/राय देने या शिकायत करने के लिए, वेब-वाइटल-फ़ीडबैक ग्रुप पर जाएं. Lighthouse और टूल से जुड़ी समस्याओं के लिए, Chrome UX रिपोर्ट के लिए, खास तौर पर बनाए गए सुझाव फ़ोरम. बधाई हो!
इस वीडियो में, योहानस हेन्केल, रिक विस्कोमी, विवेक शेखर, रेचल ऐंड्रू, मिलिका मिहाजलिया, जेफ़ जोस, और पॉल आइरिश को उनके सुझाव, राय या शिकायत भेजने के लिए धन्यवाद दिया गया.
Unsplash पर Barn Images / @barnimages की हीरो इमेज