डेवलपर के लिए Chrome का 2024 का रीकैप: DevTools में एआई, Gemini, और यूज़र इंटरफ़ेस (यूआई) की नई सुविधाओं की मदद से वेब को नए सिरे से डिज़ाइन करना

पब्लिश होने की तारीख: 13 दिसंबर, 2024

जब वेब की शुरुआत हुई थी, तब ऑनलाइन होने का मतलब था कि आपको धीमे डायल-अप कनेक्शन के साथ धैर्य रखना होगा. साथ ही, Perl और एचटीएमएल के कुछ हिस्सों के साथ काम करना होगा. हालांकि, वेब में बहुत कम समय में काफ़ी बदलाव हो गया है. चाहे आपको किराने का सामान तुरंत डिलीवर कराना हो या एआई का इस्तेमाल करके कई लंबे लेखों की खास जानकारी तैयार करनी हो, लिंक अब कई तरह के काम करने का एक ज़रिया बन गया है.

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

साल 2024 में लॉन्च की गई हमारी नई सुविधाओं के बारे में जानें. इनकी मदद से, कम लिफ़्ट के साथ ज़्यादा क्रिएटिव वेब अनुभव बनाए जा सकते हैं.

Chrome में पहले से मौजूद एआई की मदद से, डेवलपर Gemini की दमदार सुविधाएं उपलब्ध करा सकते हैं

Google I/O 2024 में, हमने बताया कि हम Chrome में सीधे तौर पर Gemini Nano को शामिल करके, वेब को बेहतर बनाने के लिए एआई का इस्तेमाल कैसे कर रहे हैं. अब तक, 13,000 से ज़्यादा लोग अर्ली प्रीव्यू प्रोग्राम में शामिल हो चुके हैं. इससे हमें वेब को बेहतर बनाने में मदद मिली है. हम आपके योगदान के लिए बहुत आभारी हैं. हमें आपके बनाए गए एआई के सभी नए अनुभवों का बेसब्री से इंतज़ार है.

एआई का ज़्यादा से ज़्यादा फ़ायदा पाने में आपकी मदद करने के लिए, हमने ओरिजिन ट्रायल में कई बिल्ट-इन एपीआई लॉन्च किए हैं. जैसे, एक्सपेरिमेंट के तौर पर उपलब्ध Prompt API, Translator API, Summarizer API, और Language Detector API. इन सभी की मदद से, सर्वर कॉल के बिना ब्राउज़र में एआई की मदद से टास्क पूरे किए जा सकते हैं. साथ ही, आपको अपने एआई मॉडल को मैनेज और डिप्लॉय करने की ज़रूरत नहीं होती. इन एपीआई का इस्तेमाल करके वेब ऐप्लिकेशन या Chrome एक्सटेंशन बनाने के लिए, 8,600 से ज़्यादा डेवलपर ने Google Chrome में शामिल एआई चैलेंज के लिए रजिस्टर किया. हम जनवरी के बीच में विजेताओं का एलान करेंगे. इसलिए, हमारे साथ बने रहें.

PolicyBazaar, Language Detector API का इस्तेमाल करता है. इससे यह पता चलता है कि बातचीत के दौरान ग्राहक ने कौनसी भाषा चुनी है.

WebAssembly (Wasm) और WebGPU की मदद से, उपयोगकर्ता के डिवाइस पर एआई की सुविधा को बेहतर बनाया गया है

हमारा मानना है कि वेब, एआई की सुविधा वाले ऐप्लिकेशन बनाने के लिए सबसे अच्छा रनटाइम है. इससे आपके ऐप्लिकेशन, सभी लोगों तक पहुंच सकते हैं. हमने एआई एपीआई को बेहतर बनाने के साथ-साथ, दो ऐसी टेक्नोलॉजी में भी सुधार किए हैं जिनकी मदद से, वेब पर अपने एआई मॉडल इस्तेमाल किए जा सकते हैं और उन्हें तेज़ी से चलाया जा सकता है: WebGPU और Wasm.

हमने WebGPU में 16-बिट फ़्लोटिंग पॉइंट वैल्यू और पैक किए गए पूर्णांक डॉट प्रॉडक्ट पेश किए हैं. इससे कंप्यूट शेडर के साथ डिवाइस के जीपीयू का ज़्यादा बेहतर तरीके से इस्तेमाल किया जा सकेगा. WebGPU में आने वाले समय में किए जाने वाले सुधारों में, सबग्रुप और सबग्रुप मैट्रिक्स शामिल हैं. इन सुविधाओं की मदद से, ऐप्लिकेशन जीपीयू थ्रेड के बीच तेज़ी से कम्यूनिकेट कर पाएंगे. साथ ही, फ़िक्स्ड साइज़ वाले मैट्रिक्स मल्टिप्लिकेशन का ज़्यादा से ज़्यादा फ़ायदा पा सकेंगे. हम 2025 में Wasm के लिए Memory64 भी लॉन्च करेंगे, ताकि बड़े एआई मॉडल को मेमोरी में इस्तेमाल किया जा सके.

Transformers.js का बेंचमार्क ग्राफ़.
Transformers.js के WebGPU बेंचमार्क से पता चलता है कि WebGPU, Wasm से 32.51 गुना ज़्यादा तेज़ है.

View Transition API की मदद से, साइटें पहले से ज़्यादा कनेक्टेड महसूस होती हैं. साथ ही, नेविगेशन में कोई रुकावट नहीं आती

क्रॉस-डॉक्यूमेंट व्यू ट्रांज़िशन जैसी नई सुविधाओं की मदद से, एक से ज़्यादा पेजों पर आसानी से नेविगेट किया जा सकता है. इन परेशान करने वाली रीलोड "ब्लिंक" से छुटकारा पाने के लिए, सीएसएस की कुछ लाइनें ही काफ़ी हैं. इससे आपको एक से ज़्यादा पेजों वाले आर्किटेक्चर के फ़ायदों को बनाए रखते हुए, ज़्यादा दिलचस्प अनुभव देने में मदद मिलती है. साथ ही, इससे आपको नेविगेशन को ज़्यादा आसान बनाने में मदद मिलती है.

व्यू ट्रांज़िशन की मदद से, एक पेज से दूसरे पेज पर आसानी से नेविगेट किया जा सकता है. व्यू ट्रांज़िशन का डेमो देखें.

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

अब popover की मदद से टूलटिप, मेन्यू, और अन्य ओवरले बनाए जा सकते हैं. साथ ही, सीएसएस ऐंकर पोज़िशनिंग एपीआई की मदद से, उन्हें ट्रिगर करने वाले एलिमेंट से विज़ुअली कनेक्ट किया जा सकता है. आपको बस थोड़ी सीएसएस और एचटीएमएल की ज़रूरत होती है. इससे यह पक्का किया जा सकता है कि ओवरले, एंकर किए गए हों और लोगों को दिखते रहें. भले ही, वे स्क्रोल करें या विंडो का साइज़ बदलें. इससे आपके उपयोगकर्ताओं को ज़्यादा भरोसेमंद और डाइनैमिक वेब अनुभव मिलता है. साथ ही, आपको z-index मैनेजमेंट और JavaScript की जटिल पोज़िशनिंग से जुड़ी गणित की समस्याओं से छुटकारा मिलता है. यह हर हाल में आपके लिए फ़ायदे की स्थिति है.

Speculation Rules API, पेजों को पहले से रेंडर करके, तुरंत नेविगेशन की सुविधा देता है

इस साल, Speculation Rules API की मदद से, पेज लोड होने में लगने वाला समय कम हो गया है. इस एपीआई को लागू करने के लिए, JSON की कुछ ही लाइनों की ज़रूरत होती है. इसकी मदद से, पेजों को बैकग्राउंड में पूरी तरह से पहले से रेंडर किया जा सकता है. इससे, जब भी उपयोगकर्ता चाहें, तब वे पेजों को ऐक्सेस कर सकते हैं.

web.dev को प्रीरेंडरिंग के बिना लोड होने में 1.6 सेकंड लगते हैं. वहीं, प्रीरेंडरिंग के साथ लोड होने में 0.2 सेकंड लगते हैं.

पेज के रिस्पॉन्स में लगने वाला समय (आईएनपी) अब वेबसाइट की परफ़ॉर्मेंस की अहम जानकारी देने वाली मेट्रिक है

मार्च में, वेबसाइट की परफ़ॉर्मेंस की अहम जानकारी देने वाली मेट्रिक के तौर पर आईएनपी ने फ़र्स्ट इनपुट डिले की जगह ले ली. इससे आपको पहले उपयोगकर्ता इनपुट के अलावा, पेज के रिस्पॉन्स को ज़्यादा बेहतर तरीके से मेज़र करने में मदद मिलती है. इसके बाद से, मोबाइल पर "अच्छा" आईएनपी स्कोर पाने वाली साइटों की संख्या में 9% की बढ़ोतरी हुई है. इसका मतलब है कि वेब पर लोगों को बेहतर और तेज़ी से काम करने वाली साइटों का अनुभव मिल रहा है.

ऑटोमैटिक भरने की सुविधा की मदद से, उपयोगकर्ताओं को ऑनलाइन चेकआउट की बेहतर सुविधा दी जा सकती है

ऑटोमैटिक भरने की सुविधा चालू करने से, लोगों को फ़ॉर्म सबमिट करने के लिए बढ़ावा मिल सकता है. इस सुविधा की मदद से, ब्राउज़र में सेव की गई जानकारी का इस्तेमाल करके, फ़ॉर्म फ़ील्ड अपने-आप भर जाते हैं. Chrome टीम ने हज़ारों ऑनलाइन फ़ॉर्म के अनाम और एग्रीगेट किए गए डेटा का विश्लेषण किया. इससे उन्हें पता चला कि ऑटोमैटिक भरने की सुविधा का इस्तेमाल करने पर, फ़ॉर्म छोड़ने वाले लोगों की संख्या में औसतन 75% की कमी आई. चेकआउट का अच्छा अनुभव देने में कई फ़ैक्टर अहम भूमिका निभाते हैं. हालाँकि, डेटा से पता चलता है कि ऑटोमैटिक भरने की सुविधा, इसमें अहम भूमिका निभा सकती है.

ऑटोमैटिक भरने की सुविधा, ई-कॉमर्स के चेकआउट फ़्लो के लिए खास तौर पर फ़ायदेमंद होती है. Shopify पर, ऑटोमैटिक तरीके से जानकारी भरने की सुविधा का इस्तेमाल करके गेस्ट के तौर पर चेकआउट करने वाले लोगों की कन्वर्ज़न दर, इस सुविधा का इस्तेमाल न करने वाले लोगों की तुलना में 45% ज़्यादा है.

Chrome DevTools में एआई की मदद से काम करने वाले सलूशन उपलब्ध हैं

आपको याद होगा कि हमने Chrome DevTools में Gemini को कंसोल इनसाइट के साथ लॉन्च किया था. इससे आपको एआई की मदद से डीबग करने की सुविधा मिलती है, ताकि समस्याओं को ज़्यादा आसानी से हल किया जा सके. Google I/O 2024 के बाद से, यह सुविधा दुनिया भर में उपलब्ध हो गई है.

हमने एआई की मदद से काम करने वाला पैनल भी लॉन्च किया है. यह Gemini का इस्तेमाल करके, आपके पेज की तकनीकी जानकारी को समझने में आपकी मदद करता है. जैसे, स्टाइलिंग, नेटवर्क अनुरोध, सोर्स, और परफ़ॉर्मेंस.

कंसोल की अहम जानकारी और एआई असिस्टेंट पैनल.
Console की इनसाइट और एआई की मदद वाला पैनल, 2024 में DevTools में किए गए कई सुधारों में से दो हैं.

आपने शायद ध्यान दिया हो कि इस साल भी परफ़ॉर्मेंस पैनल में कई सुधार किए गए हैं. इनमें रीयल टाइम में वेबसाइट की परफ़ॉर्मेंस की अहम जानकारी देने वाली मेट्रिक को मॉनिटर करने और एनोटेशन जोड़ने की सुविधा शामिल है. इसके अलावा, हमने परफ़ॉर्मेंस की अहम जानकारी की मदद से, परफ़ॉर्मेंस पैनल में Lighthouse की सुविधाओं को शामिल किया है.

एआई की मदद से बेहतर बनाई गई सुविधाओं, परफ़ॉर्मेंस पैनल में किए गए सुधारों, और स्क्रोल बैज जैसे कई अपडेट की वजह से, Chrome DevTools अब पहले से ज़्यादा मददगार है. Gemini 2.0 के नए मॉडल के साथ बेहतर परफ़ॉर्मेंस जैसे कई और सुधार 2025 में उपलब्ध होंगे.

Baseline 2024 की मदद से, डेवलपर को अलग-अलग ब्राउज़र पर काम करने वाली नई वेब सुविधाएं मिलती हैं

ग्रेडिएंट इंटरपोलेशन से लेकर रजिस्टर की गई कस्टम प्रॉपर्टी तक, Baseline 2024 में अब तक 39 नई, क्रॉस-ब्राउज़र वेब सुविधाएं शामिल हैं. अगर कोई सुविधा कम से कम 30 महीनों तक Baseline में शामिल रही है, तो आपको इंटरऑपरेबिलिटी के बारे में चिंता करने की ज़रूरत नहीं है. हालांकि, अगर आपको यह तय करना है कि नई सुविधा का इस्तेमाल करने से, पहुंच में संभावित तौर पर कमी आएगी या नहीं, तो Akamai के RUM Archive Insights पर जाएं. यहां आपको हर बेसलाइन वर्शन की सुविधाओं और दुनिया भर में उपयोगकर्ताओं की संख्या के बारे में जानकारी मिलेगी.

इस साल हमें Baseline के बारे में किया गया यह एलान सबसे ज़्यादा पसंद आया कि वेब प्लैटफ़ॉर्म स्टेटस डैशबोर्ड उपलब्ध है. इसमें सभी वेब सुविधाओं के साथ-साथ, यह भी बताया गया है कि वे अलग-अलग ब्राउज़र पर किस हद तक काम करती हैं. सबसे अच्छी बात यह है कि Web Platform Status डैशबोर्ड में इस्तेमाल किया गया डेटा ओपन सोर्स है और आपके लिए उपलब्ध है. इसका इस्तेमाल करके, इसे अपने टूल में इंटिग्रेट किया जा सकता है. इसका सबसे अच्छा उदाहरण बेसलाइन बैनर है.

मुख्य ब्राउज़र, Interop 2024 के साथ ज़्यादा सुविधाओं को बेसलाइन बनाते हैं

Baseline में ज़्यादा सुविधाएं उपलब्ध कराने के लिए, हम एक बार फिर अपने पार्टनर के साथ Interop 2024 पर काम कर रहे हैं. इस साल के टारगेट में, पॉपओवर, सीएसएस नेस्टिंग, फ़ॉन्ट-साइज़-एडजस्ट, और रिलेटिव कलर सिंटैक्स जैसी सुविधाएं शामिल हैं.

Interop, एक्सपेरिमेंटल और स्टेबल ब्राउज़र रिलीज़ के लिए स्कोर भी दिखाता है. फ़िलहाल, स्टेबल ब्राउज़र के लिए इंटरऑप का कुल स्कोर 87 है. साथ ही, साल के आखिर में Chrome स्टेबल का स्कोर 98 है. Interop Dashboard पर जाकर, ब्राउज़र की प्रोग्रेस के बारे में अपडेट पाएं. हम Interop 2025 के लिए पहले से ही योजना बना रहे हैं. इसके बारे में हम फ़रवरी में एलान करेंगे.

नए साल में, साथ मिलकर वेब की ग्रोथ को बेहतर बनाना

साल 2024 में हमने जो तरक्की की है वह काफ़ी उत्साह बढ़ाने वाली है. हालांकि, हमें पता है कि आने वाले समय में हम इससे भी ज़्यादा तरक्की करेंगे. यह सब आपकी वजह से हुआ है. आपने हमारी डेवलपर कम्यूनिटी के लिए, जुनून के साथ काम किया, हमें सुझाव/राय दी, और नए-नए आइडिया दिए. दुनिया भर के इवेंट में, हमें एक बात बार-बार समझ आई. जैसे, BrazilJS Conference, DevFest Paris, Google I/O 2024, और Web AI Summit. हमें यह समझ आया कि आप सभी को वेब की ताकत और क्षमता पर उतना ही भरोसा है जितना हमें है.

आपके पास पहले से ज़्यादा बेहतर आइडिया हैं. हम इन आइडिया को हकीकत में बदलने में आपकी मदद करने के लिए हमेशा तैयार हैं. इसलिए, हमारे साथ X, YouTube, और LinkedIn पर जुड़े रहें, ताकि आपको हमारे नए अपडेट मिलते रहें. आइए, हम सब मिलकर वेब की ताकत को फिर से परिभाषित करें.