तीन दिनों तक चले हमारे ऑनलाइन समुदाय इवेंट के दौरान, एलान की गई मुख्य खबरों और अपडेट की खास जानकारी. साथ ही, आने वाले समय में होने वाले क्षेत्रीय इवेंट के बारे में रिमाइंडर.
हमने तीन दिनों तक चलने वाला अपना इवेंट, web.dev LIVE अभी-अभी खत्म किया है. इसमें वेब कम्यूनिटी के कुछ लोग ऑनलाइन इकट्ठा हुए और वेब डेवलपमेंट की स्थिति के बारे में बात की. हमने हर दिन की शुरुआत अलग-अलग क्षेत्रीय टाइमज़ोन में की. साथ ही, Google के कर्मचारियों ने अपडेट, खबरें, और सलाह शेयर कीं. इनका मकसद, डेवलपर को टूल और दिशा-निर्देश देकर उनकी मदद करना था, ताकि वेब को स्थिर, असरदार, और ऐक्सेस करने लायक बनाए रखा जा सके.
अगर आपने लाइव स्ट्रीम का कुछ हिस्सा नहीं देखा, तो चिंता न करें. सभी सेशन रिकॉर्ड किए जाते हैं और YouTube पर उपलब्ध होते हैं. दुनिया भर में होने वाले क्षेत्रीय इवेंट भी जल्द ही शुरू होने वाले हैं. इन्हें Google डेवलपर ग्रुप आयोजित करते हैं. इनमें उन विषयों पर ज़्यादा जानकारी वाले सेशन शामिल होंगे जिनके बारे में हमने web.dev LIVE के दौरान बताया था.
आइए, तीन दिनों तक शेयर की गई कुछ खबरों और अपडेट के बारे में जानें.
वेबसाइट की परफ़ॉर्मेंस से जुड़ी अहम जानकारी
Chrome की टीम ने Web Vitals पहल का एलान किया है. इसका मकसद, डेवलपर को एक ही जगह पर दिशा-निर्देश, मेट्रिक, और टूल उपलब्ध कराना है, ताकि वे वेब पर उपयोगकर्ताओं को बेहतर अनुभव दे सकें. Google Search की टीम ने भी हाल ही में एलान किया है कि वह रैंकिंग के लिए, पेज की परफ़ॉर्मेंस का आकलन करेगी. साथ ही, इसमें वेबसाइट की परफ़ॉर्मेंस की जानकारी देने वाली मेट्रिक को बुनियादी तौर पर शामिल किया जाएगा.
साल 2020 के Core Web Vitals के तीन मुख्य पिलर हैं: पेज के कॉन्टेंट की लोडिंग, इंटरैक्टिविटी, और विज़ुअल स्टेबिलिटी. इन्हें इन मेट्रिक से कैप्चर किया जाता है:
- सबसे बड़े एलिमेंट को रेंडर करने में लगने वाला समय, पेज लोड होने की अनुमानित स्पीड को मापता है. साथ ही, पेज लोड होने की टाइमलाइन में उस समय के बारे में बताता है जब पेज का मुख्य कॉन्टेंट लोड होने की संभावना होती है.
- क्लिक के बाद रिस्पॉन्स में लगा समय मेट्रिक से, पेज के रिस्पॉन्सिव होने का पता चलता है. साथ ही, इससे यह भी पता चलता है कि जब उपयोगकर्ता पहली बार किसी पेज से इंटरैक्ट करने की कोशिश करते हैं, तो उन्हें कैसा अनुभव मिलता है.
- लेआउट शिफ़्ट होने में लगने वाला समय: इससे विज़ुअल स्टेबिलिटी का आकलन किया जाता है. साथ ही, पेज के कॉन्टेंट में होने वाले अनचाहे बदलावों की संख्या का पता चलता है.
web.dev LIVE में, हमने वेबसाइट की परफ़ॉर्मेंस की अहम जानकारी को ऑप्टिमाइज़ करने और Chrome DevTools का इस्तेमाल करके, अपनी साइट की परफ़ॉर्मेंस की अहम जानकारी की वैल्यू को एक्सप्लोर करने के सबसे सही तरीके शेयर किए. हमने परफ़ॉर्मेंस से जुड़ी कई अन्य बातें भी शेयर की हैं. इन्हें web.dev/live पर जाकर, पहले दिन के शेड्यूल में देखा जा सकता है.
tooling.report
वेब जैसे बड़े प्लैटफ़ॉर्म के लिए ऐप्लिकेशन बनाना मुश्किल हो सकता है. बिल्ड टूल अक्सर आपके वेब डेवलपमेंट प्रोजेक्ट का अहम हिस्सा होते हैं. ये आपके डेवलपर और प्रॉडक्ट लाइफ़साइकल को मैनेज करने में अहम भूमिका निभाते हैं.
हम सभी ने ऐसी बिल्ड कॉन्फ़िगरेशन फ़ाइलें देखी हैं जिन्हें मैनेज करना मुश्किल होता है. इसलिए, वेब डेवलपर और टूल बनाने वाले लोगों को वेब की जटिलता से निपटने में मदद करने के लिए, हमने tooling.report बनाया है. यह एक ऐसी वेबसाइट है जो आपको अपने अगले प्रोजेक्ट के लिए सही बिल्ड टूल चुनने में मदद करती है. साथ ही, यह तय करने में मदद करती है कि एक टूल से दूसरे टूल पर माइग्रेट करना फ़ायदेमंद है या नहीं. इसके अलावा, यह पता लगाने में मदद करती है कि टूल कॉन्फ़िगरेशन और कोड बेस में सबसे सही तरीकों को कैसे शामिल किया जाए.
हमने टेस्ट का एक सुइट डिज़ाइन किया है, ताकि यह पता लगाया जा सके कि कौनसे बिल्ड टूल, वेब डेवलपमेंट के सबसे सही तरीकों को अपनाने में आपकी मदद करते हैं. हमने बिल्ड टूल बनाने वाले लोगों के साथ मिलकर काम किया, ताकि यह पक्का किया जा सके कि हम उनके टूल का सही तरीके से इस्तेमाल करें और उन्हें सही तरीके से पेश करें.
tooling.report के शुरुआती रिलीज़ में webpack v4, Rollup v2, Parcel v2, और Gulp के साथ Browserify शामिल हैं. ये फ़िलहाल सबसे लोकप्रिय बिल्ड टूल हैं. हमने tooling.report को इस तरह से बनाया है कि इसमें कम्यूनिटी की मदद से, ज़्यादा बिल्ड टूल और अतिरिक्त टेस्ट जोड़े जा सकें.
अगर हमसे कोई ऐसा सबसे सही तरीका छूट गया है जिसकी जांच की जानी चाहिए, तो कृपया GitHub पर समस्या के तौर पर उसका सुझाव दें. अगर आपको कोई टेस्ट लिखना है या कोई ऐसा नया टूल जोड़ना है जिसे हमने शुरुआती सेट में शामिल नहीं किया है, तो योगदान करें!
इस दौरान, tooling.report बनाने के हमारे तरीके के बारे में ज़्यादा जानें और web.dev LIVE का हमारा सेशन देखें.
इंटरनेट पर निजता और सुरक्षा
Chrome, एक ऐसे ओपन वेब पर भरोसा करता है जो उपयोगकर्ताओं की निजता का सम्मान करता है. साथ ही, इस्तेमाल के ऐसे मुख्य उदाहरणों को बनाए रखता है जिनसे वेब सभी के लिए काम करता रहे.
साल 2019 में, Chrome ने कुकी के स्टैंडर्ड में एक अपडेट का सुझाव दिया था. इसका मकसद, कुकी को डिफ़ॉल्ट रूप से पहले पक्ष के कॉन्टेक्स्ट तक सीमित करना था. साथ ही, तीसरे पक्ष के कॉन्टेक्स्ट के लिए कुकी को साफ़ तौर पर मार्क करना था. खास तौर पर, इससे किसी दूसरी साइट से किए जाने वाले फ़र्ज़ी अनुरोधों से सुरक्षा मिलती है. इस प्रस्ताव को अब Chrome, Firefox, Edge, और अन्य ब्राउज़र अपना रहे हैं.
COVID-19 की वजह से, Chrome ने इन बदलावों को कुछ समय के लिए वापस लेने का फ़ैसला किया. हालांकि, अफ़सोस की बात है कि जब लोग सबसे ज़्यादा कमज़ोर होते हैं, तब इस तरह के हमले बढ़ जाते हैं. इसलिए, Chrome 84 के स्टेबल वर्शन (जुलाई 2020 के मध्य) के साथ, Chrome के 80 और उसके बाद के सभी वर्शन में, बदलावों को फिर से रोल आउट करना शुरू कर दिया जाएगा. ज़्यादा जानने के लिए, SameSite कुकी से जुड़े दिशा-निर्देश और web.dev LIVE सेशन देखें.
इसके अलावा, Privacy Sandbox के तहत, Chrome कई स्टैंडर्ड प्रस्ताव पेश कर रहा है. इनका मकसद, इस्तेमाल के ऐसे उदाहरणों को बढ़ावा देना है जिनकी मदद से लोग वेब प्लैटफ़ॉर्म का इस्तेमाल करके अपनी रोज़ी-रोटी कमा सकें. हालांकि, इसके लिए ज़रूरी है कि उपयोगकर्ता की निजता का बेहतर तरीके से सम्मान किया जाए. Chrome इन प्रस्तावों पर सुझाव, राय या शिकायत पाने के लिए लगातार कोशिश कर रहा है. साथ ही, वह W3C के ओपन फ़ोरम में हिस्सा ले रहा है, ताकि इन प्रस्तावों के साथ-साथ अन्य पक्षों के सबमिट किए गए प्रस्तावों पर भी चर्चा की जा सके. इस पहल के बारे में ज़्यादा जानने के लिए, ओपन वेब के लिए सुरक्षा और निजता सेशन देखें.
आखिर में, उपयोगकर्ता की सुरक्षा को ध्यान में रखते हुए, Spectre एक ऐसी कमज़ोरी थी जिसका मतलब था कि किसी ब्राउज़र प्रोसेस में चल रहा नुकसान पहुंचाने वाला कोड, उस प्रोसेस से जुड़े किसी भी डेटा को पढ़ सकता है. भले ही, वह डेटा किसी दूसरे ऑरिजिन से हो. इससे बचने के लिए, ब्राउज़र में जोखिम कम करने की एक प्रोसेस है.इसे साइट आइसोलेशन कहते हैं. इसमें हर साइट को एक अलग प्रोसेस में रखा जाता है. ज़्यादा जानने के लिए, नई क्रॉस-ऑरिजिन ओपनर और एंबेडर नीतियों (सीओओपी और सीओईपी) पर web.dev का लाइव सेशन देखें.
बेहतरीन सुविधाओं वाला वेब बनाना
Chrome चाहता है कि आप बेहतरीन क्वालिटी के वेब ऐप्लिकेशन बनाएं, ताकि आप सभी डिवाइसों पर ज़्यादा से ज़्यादा उपयोगकर्ताओं तक पहुंच सकें. पीडब्ल्यूए को इंस्टॉल किया जा सकता है और ये भरोसेमंद होते हैं. साथ ही, कैपेबिलिटी प्रोजेक्ट (प्रोजेक्ट फ़ुगु) के साथ मिलकर, Chrome तीन चीज़ों पर फ़ोकस कर रहा है. इससे प्लैटफ़ॉर्म के हिसाब से बने ऐप्लिकेशन और वेब के बीच के अंतर को कम किया जा सकेगा. साथ ही, आपको बेहतरीन अनुभव देने और बनाने में मदद मिलेगी.
सबसे पहले, Chrome की टीमें वेब डेवलपर और उपयोगकर्ताओं को इंस्टॉल करने के अनुभव पर ज़्यादा कंट्रोल देने, खोज बार में इंस्टॉल करने का प्रमोशन जोड़ने, और अन्य सुविधाएं देने के लिए कड़ी मेहनत कर रही हैं. वेब की लोकप्रियता के बावजूद, कुछ कारोबारों के लिए स्टोर में अपना ऐप्लिकेशन उपलब्ध कराना अब भी ज़रूरी है. इस काम में मदद करने के लिए, Chrome ने Bubblewrap लॉन्च किया. यह एक लाइब्रेरी और सीएलआई है, जिससे Play Store में PWA को आसानी से पब्लिश किया जा सकता है. असल में, PWABuilder.com अब Bubblewrap का इस्तेमाल करता है. बस कुछ ही क्लिक में, एपीके जनरेट किया जा सकता है और Play Store पर अपना पीडब्ल्यूए अपलोड किया जा सकता है. इसके लिए, आपको ज़रूरी शर्तें पूरी करनी होंगी.
दूसरा, Chrome ऑपरेटिंग सिस्टम के साथ बेहतर इंटिग्रेशन उपलब्ध करा रहा है. जैसे, वेब शेयर एपीआई की मदद से सिस्टम-लेवल की शेयर सेवा को शुरू करके, फ़ोटो, गाना या कुछ भी शेयर करने की सुविधा. इसके अलावा, इंस्टॉल किए गए किसी दूसरे ऐप्लिकेशन से शेयर किया गया कॉन्टेंट पाने की सुविधा भी उपलब्ध है. ऐप्लिकेशन बैज की मदद से, उपयोगकर्ताओं को अप-टू-डेट रखा जा सकता है या उन्हें नई गतिविधि के बारे में सूचना दी जा सकती है. साथ ही, अब उपयोगकर्ताओं के लिए ऐप्लिकेशन शॉर्टकट का इस्तेमाल करके, तुरंत कोई कार्रवाई शुरू करना आसान हो गया है. यह सुविधा, Chrome 84 (जुलाई 2020 के मध्य) में उपलब्ध होगी.
आखिर में, Chrome नई सुविधाओं पर काम कर रहा है. इनसे ऐसी नई स्थितियां पैदा होती हैं जो पहले मुमकिन नहीं थीं. जैसे, ऐसे एडिटर जो उपयोगकर्ता के लोकल फ़ाइल सिस्टम पर मौजूद फ़ाइलों को पढ़ और लिख सकते हैं या लोकल तौर पर इंस्टॉल किए गए फ़ॉन्ट की सूची पा सकते हैं, ताकि उपयोगकर्ता उन्हें अपने डिज़ाइन में इस्तेमाल कर सकें.
web.dev LIVE के दौरान, हमने कई अन्य क्षमताओं और सुविधाओं के बारे में बात की. इनकी मदद से, प्लैटफ़ॉर्म के हिसाब से बनाए गए ऐप्लिकेशन की तरह ही, एक जैसा अनुभव और सुविधाएं दी जा सकती हैं. दूसरे दिन के शेड्यूल में, web.dev/live पर सभी सेशन देखें.
Chrome DevTools और Lighthouse 6.0 में नया क्या है
Chrome DevTools: नया Issues Tab, कलर डेफ़िशिएंसी एम्युलेटर, और Web Vitals सुविधा
Chrome DevTools की सबसे बेहतरीन सुविधाओं में से एक है, किसी वेब पेज पर मौजूद समस्याओं का पता लगाना और डेवलपर को उनके बारे में बताना. यह तब सबसे ज़्यादा काम आता है, जब हम निजता को प्राथमिकता देने वाले वेब के अगले चरण में आगे बढ़ते हैं. कंसोल में बार-बार मिलने वाली सूचनाओं और गड़बड़ियों को कम करने के लिए, Chrome DevTools ने समस्याएं टैब लॉन्च किया है. इसमें तीन तरह की गंभीर समस्याओं पर फ़ोकस किया जाता है: कुकी से जुड़ी समस्याएं, मिक्स्ड कॉन्टेंट, और सीओईपी से जुड़ी समस्याएं. शुरू करने के लिए, समस्याओं वाले टैब की मदद से समस्याओं को ढूंढने और उन्हें ठीक करने के बारे में web.dev का लाइव सेशन देखें.
इसके अलावा, Core Web Vitals, वेब डेवलपर के लिए ट्रैक और मेज़र करने के लिए सबसे अहम मेट्रिक सेट में से एक बन गया है. DevTools यह पक्का करना चाहता है कि डेवलपर आसानी से ट्रैक कर सकें कि वे इन थ्रेशोल्ड के मुकाबले कैसा परफ़ॉर्म कर रहे हैं. इसलिए, ये तीनों मेट्रिक अब Chrome DevTools के परफ़ॉर्मेंस पैनल में मौजूद हैं.
आखिर में, ऐक्सेसबिलिटी पर फ़ोकस करने वाले डेवलपर की बढ़ती संख्या को देखते हुए, DevTools ने कलर विज़न की कमी वाला एम्युलेटर भी पेश किया है. इससे डेवलपर, धुंधली नज़र और नज़र की अन्य कमियों को एम्युलेट कर सकते हैं. इस सुविधा और अन्य सुविधाओं के बारे में ज़्यादा जानने के लिए, DevTools में नया क्या है सेशन देखें.
Lighthouse 6.0: नई मेट्रिक, Core Web Vitals लैब मेज़रमेंट, अपडेट किया गया परफ़ॉर्मेंस स्कोर, और नए ऑडिट
Lighthouse एक ओपन-सोर्स ऑटोमेटेड टूल है. यह डेवलपर को उनकी साइट की परफ़ॉर्मेंस को बेहतर बनाने में मदद करता है. Lighthouse टीम ने अपने नए वर्शन में, मेट्रिक के आधार पर अहम जानकारी देने पर फ़ोकस किया है. इससे आपको अहम डाइमेंशन के हिसाब से, उपयोगकर्ता अनुभव की क्वालिटी के बारे में सही जानकारी मिलती है.
एक जैसा अनुभव देने के लिए, Lighthouse ने Core Web Vitals के लिए सहायता जोड़ी है: LCP, TBT (FID के लिए एक प्रॉक्सी, क्योंकि Lighthouse एक लैब टूल है और एफ़आईडी को सिर्फ़ फ़ील्ड में मेज़र किया जा सकता है), और CLS. Lighthouse ने तीन पुरानी मेट्रिक भी हटा दी हैं: फ़र्स्ट मीनिंगफ़ुल पेंट, फ़र्स्ट सीपीयू आइडल, और मैक्स पोटेंशियल एफ़आईडी. इन मेट्रिक को हटाने की वजहें हैं: मेट्रिक में होने वाले बदलाव और नई मेट्रिक, जो उपयोगकर्ता अनुभव के उस हिस्से को बेहतर तरीके से दिखाती हैं जिसे Lighthouse मेज़र करने की कोशिश कर रहा है. इसके अलावा, Lighthouse ने उपयोगकर्ताओं के सुझाव, शिकायत या राय के आधार पर, कुल परफ़ॉर्मेंस स्कोर में हर मेट्रिक के योगदान में कुछ बदलाव किए हैं.
Lighthouse ने स्कोरिंग कैलकुलेटर भी जोड़ा है. इससे आपको परफ़ॉर्मेंस स्कोर को समझने में मदद मिलती है. इसके लिए, वर्शन 5 और 6 के स्कोर की तुलना की जाती है. Lighthouse 6.0 की मदद से ऑडिट करने पर, रिपोर्ट में कैलकुलेटर का लिंक शामिल होता है. इस लिंक पर क्लिक करने पर, आपको अपने ऑडिट के नतीजे दिखते हैं.
आखिर में, Lighthouse ने कई नए ऑडिट जोड़े हैं. इनमें JavaScript के विश्लेषण और सुलभता पर खास ध्यान दिया गया है.
स्पीड टूलिंग में नया क्या है सेशन देखकर ज़्यादा जानें.
ज़्यादा जानें
कम्यूनिटी के उन सभी लोगों को धन्यवाद जो वेब प्लैटफ़ॉर्म के अवसरों और चुनौतियों पर चर्चा करने के लिए हमारे साथ जुड़े.
इस पोस्ट में इवेंट की कुछ खास बातें बताई गई हैं. हालांकि, इसमें और भी बहुत कुछ था. सभी सेशन देखें और अगर आपको अपने इनबॉक्स में ज़्यादा कॉन्टेंट चाहिए, तो web.dev न्यूज़लेटर की सदस्यता लें. साथ ही, अपने टाइमज़ोन में होने वाले कम्यूनिटी इवेंट के बारे में जानने के लिए, web.dev/live पर रीजनल इवेंट सेक्शन पर जाएं!