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

वेबसाइट की परफ़ॉर्मेंस की अहम जानकारी देने वाली मेट्रिक की अहमियत लगातार बढ़ रही है. इस वजह से, साइट के मालिक और डेवलपर, वेबसाइट की परफ़ॉर्मेंस और उपयोगकर्ता के मुख्य अनुभवों पर लगातार ध्यान दे रहे हैं. पेजों का मूल्यांकन, उन्हें ऑप्टिमाइज़ करने, और उनकी निगरानी करने के लिए Google कई टूल उपलब्ध कराता है. हालांकि, उपयोगकर्ता अक्सर डेटा के अलग-अलग सोर्स और उन्हें असरदार तरीके से इस्तेमाल करने के बारे में उलझन में रहते हैं. इस गाइड में कई टूल को मिलाकर एक वर्कफ़्लो बताया गया है. साथ ही, यह भी बताया गया है कि डेवलपमेंट प्रोसेस में इन टूल का क्या मतलब है.

फ़रवरी 2025 के दौरान, Baseline से जुड़ी अलग-अलग घटनाओं के बारे में पढ़ें.

ruby-align अब Baseline का हिस्सा है

पब्लिश किया गया: 20 फ़रवरी, 2025 बड़े एआई मॉडल को भरोसेमंद तरीके से डाउनलोड करना एक मुश्किल काम है. अगर उपयोगकर्ताओं का इंटरनेट कनेक्शन बंद हो जाता है या वे आपकी वेबसाइट या वेब ऐप्लिकेशन बंद कर देते हैं, तो वे आंशिक रूप से डाउनलोड की गई मॉडल फ़ाइलें

rel=फ़ेच से जुड़े संसाधन के संकेत और इसे इस्तेमाल करने के तरीके के बारे में जानें.

कुल लेआउट शिफ़्ट (सीएलएस) एक मेट्रिक है, जिससे यह पता चलता है कि उपयोगकर्ता, पेज के कॉन्टेंट में अचानक कितनी बार बदलाव करते हैं. इस गाइड में, हम बिना डाइमेंशन या डाइनैमिक कॉन्टेंट वाली इमेज और iframe जैसे सीएलएस की सामान्य वजहों को ऑप्टिमाइज़ करने के बारे में बताएंगे.

लेआउट शिफ़्ट पहचानने और उन्हें ठीक करने का तरीका जानें.

सीएसएस scrollbar-color और scrollbar-gutter, सभी मुख्य ब्राउज़र इंजन में उपलब्ध हैं. इसलिए, ये बेसलाइन के तौर पर उपलब्ध हैं.

Emscripten में WasmFS और mimalloc सुविधा, एलोकेशन और I/O परफ़ॉर्मेंस में काफ़ी मदद कर सकती है. इस गाइड में बताया गया है कि इन सुविधाओं की मदद से, कुछ मामलों में 10 गुना या उससे ज़्यादा तक की स्पीड में सुधार कैसे किया जा सकता है.

Baseline के इस महीने के डाइजेस्ट के पहले एडिशन में, जनवरी 2025 में Google और वेब डेवलपर कम्यूनिटी, दोनों के Baseline में होने वाली गतिविधियों के बारे में बताया गया है.

वेब असेंबली गैरेबेज कलेक्शन और Wasm टेल कॉल ऑप्टिमाइज़ेशन, अब सभी मुख्य ब्राउज़र इंजन में उपलब्ध हैं. इससे, ये बेसलाइन के तौर पर नए सिरे से उपलब्ध हो गए हैं.

इस पोस्ट में, सबसे बड़े कॉन्टेंटफ़ुल पेंट (एलसीपी) की मेट्रिक के बारे में बताया गया है. साथ ही, मेट्रिक को मेज़र करने का तरीका भी बताया गया है

Promise.try अब सभी मुख्य ब्राउज़र इंजन में उपलब्ध है. इसलिए, इसे बेसलाइन के तौर पर उपलब्ध कराया गया है.

संक्षिप्त वर्णन

पब्लिश होने की तारीख: 13 जनवरी, 2024 एआई की मदद से, कई शानदार प्रोजेक्ट बनाए जा सकते हैं. इनमें क्लासिक मशीन लर्निंग मॉडल और नए लार्ज लैंग्वेज मॉडल (एलएलएम) का इस्तेमाल किया जा सकता है. एलएलएम की मदद से, कंप्यूटर नया कॉन्टेंट जनरेट कर सकते हैं, खास

आपसे कहा गया है कि "मुख्य थ्रेड को ब्लॉक न करें" और "अपने लंबे टास्क को ब्रेक करें", लेकिन इन कामों को करने का क्या मतलब है?

वेब पेमेंट्स का इस्तेमाल करके पैसे चुकाने के लिए लेन-देन, आपके पैसे चुकाने का तरीका खोजने के साथ शुरू होता है. पैसे चुकाने का तरीका सेट अप करने के बारे में जानें. साथ ही, व्यापारियों/कंपनियों और ग्राहकों के लिए, पैसे चुकाने के लिए अपने ऐप्लिकेशन को तैयार करें.

सीएसएस मास्किंग आपको मास्क लेयर के तौर पर किसी इमेज का इस्तेमाल करने का विकल्प देती है. इसका मतलब है कि इमेज एडिटर के बिना, दिलचस्प इफ़ेक्ट बनाने के लिए, मास्क के तौर पर किसी इमेज, SVG या ग्रेडिएंट का इस्तेमाल किया जा सकता है.

वेब-सुविधाओं का डेटासेट, वेब प्लैटफ़ॉर्म का स्टेटस डैशबोर्ड, बेसलाइन स्टेटस विजेट वगैरह! साल 2024 में बेसलाइन की परफ़ॉर्मेंस देखें.

इस पोस्ट में, लेज़ी लोडिंग के बारे में बताया गया है. साथ ही, वीडियो को लेज़ी लोड करने के लिए उपलब्ध विकल्पों के बारे में भी बताया गया है.

मॉड्यूल पहले से लोड करने की सुविधा के साथ, JavaScript मॉड्यूल को डिक्लेरेटिव तौर पर पहले से लोड किया जा सकता है.

उपयोगकर्ता अनुभव को ऑप्टिमाइज़ करने के लिए, यह समझना ज़रूरी है कि उपयोगकर्ता आपके फ़ॉर्म के साथ कैसे इंटरैक्ट करते हैं. इस प्रोसेस में, ब्राउज़र की ऑटोमैटिक भरने की सुविधा अहम भूमिका निभाती है. जानें कि उपयोगकर्ता आपके फ़ॉर्म में ऑटोमैटिक भरने की सुविधा का इस्तेमाल कैसे करते हैं. साथ ही, इस डेटा को इकट्ठा और विश्लेषण करने का तरीका भी जानें.

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

इस पोस्ट में टोटल ब्लॉकिंग टाइम (टीबीटी) मेट्रिक के बारे में बताया गया है. साथ ही, इसे मेज़र करने का तरीका भी बताया गया है

सबसे सही तरीकों का कलेक्शन, जिन्हें Chrome ने वेब की परफ़ॉर्मेंस को ऑप्टिमाइज़ करने और वेबसाइट की परफ़ॉर्मेंस की अहम जानकारी देने वाली मेट्रिक को बेहतर बनाने के सबसे बड़े अवसरों के तौर पर पहचाना है

बेहतर साइट के लिए ज़रूरी मेट्रिक

एलसीपी को छोटे-छोटे हिस्सों में बांटने और सुधार करने की ज़रूरी चीज़ों की पहचान करने के बारे में सिलसिलेवार निर्देश.

असल दुनिया और लैब, दोनों में अपनी साइट की वेबसाइट की परफ़ॉर्मेंस से जुड़ी अहम जानकारी को मेज़र करने का तरीका जानें.

सीएसएस content-visibility प्रॉपर्टी, अब बेसलाइन के तौर पर उपलब्ध है.

वेबसाइट की परफ़ॉर्मेंस की जानकारी देने के थ्रेशोल्ड के हिसाब से रिसर्च और तरीका

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

इस लेख में, Baseline की शुरुआत के बारे में बताया गया है. साथ ही, Google की इसमें भूमिका और WebDX कम्यूनिटी ग्रुप के मालिकाना हक के बारे में भी बताया गया है.

ब्राउज़र के 'वापस जाएं' और 'आगे बढ़ें' बटन का इस्तेमाल करते समय, अपने पेजों को तुरंत लोड होने के हिसाब से ऑप्टिमाइज़ करना सीखें.

सीएसएस नेस्टिंग की सुविधा को और बेहतर बनाया जा रहा है!

इस पोस्ट में, फ़र्स्ट इनपुट डिले (एफ़आईडी) मेट्रिक के बारे में जानकारी दी गई है और इसे मेज़र करने का तरीका बताया गया है

डीबग करने की जानकारी के साथ परफ़ॉर्मेंस डेटा को एट्रिब्यूट करने का तरीका जानें. इससे आपको आंकड़ों से जुड़ी असल उपयोगकर्ताओं की समस्याओं की पहचान करने और उन्हें ठीक करने में मदद मिलेगी

जानें कि Google के टूल का इस्तेमाल करके, वेबसाइट की परफ़ॉर्मेंस की अहम जानकारी को विज्ञापन से होने वाली आय से कैसे जोड़ा जा सकता है.

@प्रॉपर्टी का आपकी सीएसएस की परफ़ॉर्मेंस पर क्या असर पड़ता है?

इस पोस्ट में, लोड होने वाले एट्रिब्यूट के बारे में जानकारी दी गई है. साथ ही, यह भी बताया गया है कि iframe की लोडिंग को कंट्रोल करने के लिए, उसका इस्तेमाल कैसे किया जा सकता है.

ब्राउज़र में डेटा स्टोर करने के कई विकल्प हैं. आपकी ज़रूरतों के हिसाब से कौनसा विकल्प सबसे अच्छा है?

एक ही डोमेन का फिर से इस्तेमाल करने के लिए, सुझाए गए ऐसे तरीके जानें जो उनके फ़ायदे और नुकसान के साथ, एक से ज़्यादा PWA बनाने का सुझाव नहीं देते.

सिलसिलेवार इंटरैक्टिव ट्यूटोरियल में ऐसा सर्वर बनाने का तरीका बताया गया है जो पुश नोटिफ़िकेशन सदस्यताओं को मैनेज करता हो और किसी पुश सेवा को वेब पुश प्रोटोकॉल के अनुरोध भेजता हो.

एक अच्छा या बेहतरीन प्रोग्रेसिव वेब ऐप्लिकेशन क्या है?

प्रोग्रेसिव वेब ऐप्लिकेशन इंस्टॉल करने की ज़रूरी शर्तें.

आपके PWA के वेब ऐप्लिकेशन मेनिफ़ेस्ट में आइकॉन, शॉर्टकट, रंग, और दूसरे मेटाडेटा को बदलने के लिए क्या करना होता है.

वेब ऐप्लिकेशन मेनिफ़ेस्ट एक सामान्य JSON फ़ाइल है, जो ब्राउज़र को यह बताती है कि आपके वेब ऐप्लिकेशन को कैसा काम करना चाहिए.

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

इस लेख से, वेब डेवलपर को किसी डिवाइस के आधार पर, सही हार्डवेयर एपीआई चुनने में मदद मिलती है.

अपनी सभी साइटों पर पासकी का दोबारा इस्तेमाल करने की अनुमति देने के लिए, मिलते-जुलते ऑरिजिन अनुरोधों को इस्तेमाल करने का तरीका जानें.

इस पोस्ट में लोडिंग एट्रिब्यूट के बारे में बताया गया है. साथ ही, यह भी बताया गया है कि इमेज लोड होने की प्रोसेस को कंट्रोल करने के लिए, इसका इस्तेमाल कैसे किया जा सकता है.

सही इमेज फ़ॉर्मैट चुनना, अपनी वेबसाइट पर ऑप्टिमाइज़ की गई इमेज डिलीवर करने का पहला चरण है. इस पोस्ट से आपको सही विकल्प चुनने में मदद मिलेगी.

कस्टम मेट्रिक की मदद से, अपनी साइट के अनुभव के उन पहलुओं को मेज़र और ऑप्टिमाइज़ किया जा सकता है जो आपकी साइट के लिए खास हैं.

Google Analytics 4 प्रॉपर्टी में वेब विटल्स का डेटा भेजने और BigQuery और Looker Studio में विश्लेषण के लिए डेटा एक्सपोर्ट करने का तरीका जानें.

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

इस बारे में जानें कि कुकी सूचनाएं परफ़ॉर्मेंस, परफ़ॉर्मेंस मेज़रमेंट, और उपयोगकर्ता अनुभव पर कैसे असर डालती हैं.

वेब डेवलपर, मीडिया सूचनाओं को पसंद के मुताबिक बना सकते हैं. साथ ही, Media Session API की मदद से, मीडिया से जुड़े इवेंट के जवाब दे सकते हैं. जैसे, बदलावों को आगे बढ़ाना या ट्रैक करना.

अपनी वेबसाइट के इंटरैक्शन टू नेक्स्ट पेंट को ऑप्टिमाइज़ करने के लिए, लैब में धीमे इंटरैक्शन का फिर से सामना करने से पहले, आपको उन्हें ढूंढने के लिए फ़ील्ड डेटा का इस्तेमाल करना होगा. इसका तरीका जानने के लिए, इस गाइड को पढ़ें.

किसी एलिमेंट की टैब पोज़िशन को साफ़ तौर पर सेट करने के लिए, tabindex एट्रिब्यूट का इस्तेमाल करें.

इस पोस्ट में, टाइम टू फ़र्स्ट बाइट (टीटीएफ़बी) मेट्रिक के बारे में बताया गया है. साथ ही, मेट्रिक को मेज़र करने का तरीका भी बताया गया है.

अलग-अलग एलएलएम, मॉडल, और मॉडल साइज़ में अपने पसंदीदा नतीजे पाने के लिए, अपने प्रॉम्प्ट में बदलाव करने का तरीका जानें.

इस पोस्ट में, इंटरैक्शन टू नेक्स्ट पेंट (आईएनपी) की मेट्रिक के बारे में बताया गया है. साथ ही, यह भी बताया गया है कि यह कैसे काम करता है, इसे कैसे मेज़र किया जाता है, और इसे बेहतर बनाने के लिए सुझाव कैसे दिए जाते हैं.

ब्यौरा: Light-dark() फ़ंक्शन की मदद से, उन कलर को तय करें जो इस्तेमाल की गई कलर स्कीम के हिसाब से काम करते हैं.

इस गाइड में, उन वेब डेवलपर के लिए जानकारी दी गई है जिन्हें WebAssembly से फ़ायदा लेना है. आप एक मौजूदा उदाहरण की मदद से, Wasm के इस्तेमाल का तरीका जानेंगे, ताकि सीपीयू से जुड़े ज़्यादा काम पूरे किए जा सकें.

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

Gamepad API से वेब गेम को कंट्रोल करने का तरीका जानें.

इनर्ट प्रॉपर्टी, एक ग्लोबल एचटीएमएल एट्रिब्यूट है. इससे किसी एलिमेंट के लिए, उपयोगकर्ता के इनपुट इवेंट को हटाने और वापस लाने में मदद मिलती है. इनमें सहायक टेक्नोलॉजी के इवेंट और फ़ोकस इवेंट शामिल हैं.

भरोसेमंद पक्ष, AAGUID की जांच करके, यह पता लगा सकते हैं कि पासकी कहां से आई. जानें कि यह सुविधा कैसे काम करती है.

उदाहरण के लिए, सिंथेटिक टॉय लैंग्वेज का उदाहरण इस्तेमाल करके, बाइनरी.js API का इस्तेमाल करके, JavaScript में WebAssembly मॉड्यूल लिखने और ऑप्टिमाइज़ करने का तरीका जानें.

ऑडियो/वीडियो कैप्चर, वेब डेवलपमेंट के लिए लंबे समय से "सबसे ज़रूरी चीज़" रहा है. कई सालों तक, हमें ब्राउज़र प्लग इन ( Flash या Silverlight ) पर निर्भर रहना पड़ा. चलो! HTML5 की मदद से. ऐसा हो सकता है कि आपको यह न पता हो, लेकिन HTML5 के आने से डिवाइस

<मॉडल-व्यूअर> वेब कॉम्पोनेंट' आपको किसी वेब पेज पर 3D मॉडल का इस्तेमाल एलान के तौर पर करने देता है.

WebAuthn में `userverification` को इस्तेमाल करने का तरीका जानें

उन वजहों के बारे में जानें जिनकी वजह से, RUM के डेटा में CrUX और वेबसाइट की परफ़ॉर्मेंस की अहम जानकारी के अलग-अलग आंकड़े दिख सकते हैं.

ऐसी साइटें बनाना ज़रूरी है जो बिना किसी भेदभाव के सभी को शामिल कर सकें और सभी के लिए उपलब्ध हों. दिव्यांगता के कम से कम छह पहलू ऐसे हैं जिन्हें ऑप्टिमाइज़ किया जा सकता है: देखने, सुनने, हिलने-डुलने में परेशानियों का सामना करने वाले, सीखने-समझने की क्षमता, बोली, और न्यूरल.

तीसरे पक्ष की स्क्रिप्ट, वेब को ज़्यादा डाइनैमिक बनाने के लिए कई तरह की उपयोगी सुविधाएं उपलब्ध कराती हैं. परफ़ॉर्मेंस पर पड़ने वाले असर को कम करने के लिए, तीसरे पक्ष की स्क्रिप्ट की लोडिंग को ऑप्टिमाइज़ करने का तरीका जानें.

अगर उपयोगकर्ता के पासवर्ड मैनेजर में पहले से कोई पासकी मौजूद है, तो उसे बनाने से रोकने का तरीका जानें.

IndexedDB की बुनियादी बातों के लिए गाइड.

टूलबेल्ट लायक, दमदार, और स्थिर सीएसएस का इस्तेमाल करें, जिनका इस्तेमाल आज किया जा सकता है.

टाइम टू फ़र्स्ट बाइट मेट्रिक को ऑप्टिमाइज़ करने का तरीका जानें.

होस्ट, साइट, और ऑरिजिन में क्या अंतर है? eTLD क्या है+1? इस लेख में, इनके बारे में बताया गया है.

जानें कि खोजे जा सकने वाले क्रेडेंशियल क्या होते हैं. साथ ही, अपने इस्तेमाल के हिसाब से उपयोगकर्ता अनुभव देने का तरीका जानें.

साइटें और ऐप्लिकेशन ठीक से काम नहीं कर रहे हैं या नहीं, इसका पता उपयोगकर्ता देखते हैं. इसलिए, रेंडरिंग की परफ़ॉर्मेंस को ऑप्टिमाइज़ करना बहुत ज़रूरी है!

जब किसी एलिमेंट का कॉन्टेंट रेक्टैंगल साइज़ में बदलाव करता है, तो `Resize ब्लॉकर` आपको सूचना देता है, ताकि उस हिसाब से प्रतिक्रिया दी जा सके.

गैर-ज़रूरी संसाधन डाउनलोड को हटाने के बाद, पेज लोड होने की स्पीड को बेहतर बनाने का सबसे अच्छा तरीका यह है कि बाकी संसाधनों को ऑप्टिमाइज़ और कंप्रेस करके, डाउनलोड के पूरे साइज़ को कम किया जाए.

इस दस्तावेज़ में बताया गया है कि अपने वेब ऐप्लिकेशन में ग्राफ़िक को रेंडर करते समय, परफ़ॉर्मेंस को बेहतर बनाने के लिए, OffscreenCanvas API का इस्तेमाल कैसे किया जा सकता है.

इस पोस्ट में, फ़र्स्ट कॉन्टेंटफ़ुल पेंट (एफ़सीपी) की मेट्रिक के बारे में बताया गया है. साथ ही, मेट्रिक को मेज़र करने का तरीका भी बताया गया है

इस लेख में कॉन्टेंट डिलीवरी नेटवर्क (सीडीएन) के बारे में खास जानकारी दी गई है. साथ ही, यह बताता है कि सीडीएन सेटअप को कैसे चुना जाता है, उसे कैसे कॉन्फ़िगर और ऑप्टिमाइज़ किया जाता है.

जब कोई उपयोगकर्ता वेबसाइट से लॉग आउट हो जाए, तब क्या करना चाहिए, इस बारे में डेवलपर के लिए काम के दिशा-निर्देश.

इस पोस्ट में, इंटरैक्टिव में लगने वाले समय (टीटीआई) वाली मेट्रिक के बारे में बताया गया है. साथ ही, मेट्रिक को मेज़र करने का तरीका भी बताया गया है

फ़ेच प्राथमिकता एपीआई, ब्राउज़र पर रिसॉर्स की प्राथमिकता बताता है. इससे वेबसाइट की परफ़ॉर्मेंस की जानकारी को बेहतर तरीके से लोड किया जा सकता है.

इनपुट की पुष्टि के उपयोगकर्ता अनुभव को बेहतर बनाने के लिए, :user-valid और :user-invalid pseudo-classes के बारे में जानकारी. साथ ही, यह भी जानें कि इनका इस्तेमाल कैसे करें.

जानें कि कारोबार के बारे में ज़रूरी फ़ैसले लेने वाले और डेवलपर, वेबसाइट की परफ़ॉर्मेंस की अहम जानकारी देने वाली मेट्रिक को कैसे बेहतर बना सकते हैं.

स्ट्रिंग में Base64 एन्कोडिंग और डिकोडिंग लागू करते समय, आम समस्याओं को समझें और उनसे बचें.

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

आज की डिजिटल दुनिया में, ऑनलाइन विज्ञापन, मुफ़्त वेब का एक अहम हिस्सा है. हम सभी इसका आनंद लेते हैं. हालांकि, खराब तरीके से लागू किए गए विज्ञापनों की वजह से, ब्राउज़िंग का अनुभव खराब हो सकता है. साथ ही, उपयोगकर्ताओं को परेशानी हो सकती है और यूज़र ऐक्टिविटी कम हो सकती है. पेज की स्पीड पर असर डाले बिना, विज्ञापनों को असरदार तरीके से लोड करने का तरीका जानें. इससे, उपयोगकर्ताओं को बेहतर अनुभव मिलता है और वेबसाइट के मालिकों के लिए रेवेन्यू के अवसर बढ़ते हैं.

जानें कि कोड कवरेज क्या होता है और इसे मेज़र करने के चार आम तरीके जानें.

तय करें कि आपको किन चीज़ों की जांच करनी है और किन चीज़ों को अस्वीकार किया जा सकता है.

तय करें कि किसकी जांच करनी है, अपने टेस्ट केस तय करें, और प्राथमिकता दें.

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

उपयोगकर्ताओं को बेहतरीन अनुभव देने के लिए, रिस्पॉन्सिव इमेज को पहले से लोड करने की नई और दिलचस्प संभावनाओं के बारे में जानें.

फ़ॉन्ट को आपके उपयोगकर्ताओं की पसंद के मुताबिक बनाने का तरीका. इससे उन्हें आपके कॉन्टेंट को पढ़ने में आसानी होगी.

अपने प्रोजेक्ट से मेल खाने वाली सही रणनीति में, टेस्ट के अलग-अलग टाइप को जोड़ने का तरीका जानें.

आइए बुनियादी चीज़ों से शुरू करते हैं! दो सामान्य टेस्टिंग मोड और तीन सामान्य तरह के टेस्ट ऑटोमेशन के बारे में जानना.

आपको समय-समय पर अपने संसाधनों का ऑडिट करना चाहिए, ताकि यह पक्का किया जा सके कि हर संसाधन बेहतर उपयोगकर्ता अनुभव देने में मदद कर रहा है.

WebAssembly (इसे कभी-कभी Wasm के नाम से भी जाना जाता है) के बारे में जानकारी. यह पोर्टेबल बाइनरी-कोड फ़ॉर्मैट और एक्ज़ीक्यूटेबल प्रोग्राम के लिए इस्तेमाल किए जाने वाले टेक्स्ट फ़ॉर्मैट के साथ-साथ, ऐसे प्रोग्राम और उनके होस्ट एनवायरमेंट के बीच इंटरैक्शन की सुविधा देने वाले सॉफ़्टवेयर इंटरफ़ेस के बारे में जानकारी.

mkbitmap C प्रोग्राम, किसी इमेज को पढ़ता है और उस पर इनमें से एक या उससे ज़्यादा कार्रवाइयों को इस क्रम में लागू करता है: इन्वर्ज़न, हाईपास फ़िल्टर, स्केलिंग, और थ्रेशोल्डिंग. हर कार्रवाई को अलग-अलग कंट्रोल किया जा सकता है. साथ ही, उसे चालू या बंद किया जा सकता है. इस लेख में, WebAssembly में mkbitmap को कंपाइल करने का तरीका बताया गया है.

फ़ाइल सिस्टम स्टैंडर्ड में, ऑरिजिन प्राइवेट फ़ाइल सिस्टम (ओपीएफ़एस) को स्टोरेज एंडपॉइंट के तौर पर शामिल किया गया है. यह ऑरिजिन के लिए निजी है और उपयोगकर्ता को नहीं दिखता. यह एक खास तरह की फ़ाइल का ऐक्सेस देता है, जो परफ़ॉर्मेंस के लिए काफ़ी

वेब ऐप्लिकेशन पर, उपयोगकर्ता के कंट्रोल वाले कॉन्टेंट को सुरक्षित तरीके से दिखाने का तरीका.

इस बारे में खास जानकारी कि नेटवर्क में AVIF को कैसे अपनाया जाता है. साथ ही, स्टिल इमेज और ऐनिमेशन के लिए, डेवलपर को AVIF की परफ़ॉर्मेंस और क्वालिटी से जुड़े किस तरह के फ़ायदे मिल सकते हैं.

अपनी वेबसाइट के इंटरैक्शन टू नेक्स्ट पेंट को ऑप्टिमाइज़ करने का तरीका जानें.

Baseline की कुछ सुविधाओं के बारे में जानें.

स्क्रिप्ट लोड करते समय, ब्राउज़र को स्क्रिप्ट चलाने से पहले उनका आकलन करने में समय लगता है. इससे, स्क्रिप्ट को लोड होने में ज़्यादा समय लग सकता है. जानें कि स्क्रिप्ट की जांच कैसे की जाती है. साथ ही, यह भी जानें कि पेज लोड होने के दौरान, टास्क की अवधि ज़्यादा होने से रोकने के लिए क्या किया जा सकता है.

JavaScript के साथ एचटीएमएल को रेंडर करना, सर्वर से भेजे गए एचटीएमएल को रेंडर करने से अलग होता है—और इससे परफ़ॉर्मेंस पर असर पड़ सकता है. इस गाइड में अंतर के बारे में जानें. साथ ही, यह भी जानें कि अपनी वेबसाइट की रेंडरिंग परफ़ॉर्मेंस को बेहतर बनाए रखने के लिए क्या किया जा सकता है. खास तौर पर, जब इंटरैक्शन से जुड़ी समस्याएं होती हैं.

बड़े DOM साइज़ से यह पता चलता है कि इंटरैक्शन तेज़ हैं या नहीं. DOM साइज़ और INP के बीच के संबंध के बारे में ज़्यादा जानें. साथ ही, यह भी जानें कि पेज में बहुत ज़्यादा DOM एलिमेंट होने पर, DOM साइज़ को कम करने के लिए क्या किया जा सकता है. साथ ही, रेंडरिंग के काम को सीमित करने के अन्य तरीकों के बारे में भी जानें.

इनपुट में देरी से, इंटरैक्शन के इंतज़ार का कुल समय बढ़ सकता है. इससे आपके पेज की आईएनपी मेट्रिक (आईएनपी) पर बुरा असर पड़ सकता है. इस गाइड में, जानें कि इनपुट देर से क्या होता है और तेज़ी से इंटरैक्ट करने के लिए इसे कैसे कम किया जा सकता है.

PHP की मदद से काम करने वाला पूरा WordPress. यह पूरी तरह से WebAssembly के साथ काम करने वाले ब्राउज़र में चलता है

इस पोस्ट में, कुल लेआउट शिफ़्ट (सीएलएस) मेट्रिक के बारे में बताया गया है और उसे मेज़र करने का तरीका बताया गया है.

WebAssembly की मदद से, अब वेब पर उपलब्ध टूल का शोकेस.

प्रोग्रेसिव वेब ऐप्लिकेशन को, Android Play Store या Microsoft Store जैसे ऐप स्टोर पर सबमिट किया जा सकता है.

सोर्स मैप की मदद से, वेब डीबग करने के अनुभव को बेहतर बनाएं.

टूलबेल्ट लायक, दमदार, और स्थिर सीएसएस का इस्तेमाल करें, जिनका इस्तेमाल आज किया जा सकता है.

सीएसएस में साइन, कोसाइन, टैंजेंट वगैरह का हिसाब लगाएं.

requestVideoFrameCallback() मेथड की मदद से, वेब लेखक एक ऐसा कॉलबैक रजिस्टर कर सकते हैं जो कंपोज़िटर को कोई नया वीडियो फ़्रेम भेजे जाने पर, रेंडरिंग के चरणों में चलता है.

यह Google Developers Experts (GDE) प्रोग्राम के सदस्यों के साथ किए गए इंटरव्यू की सीरीज़ में से एक है.

इस ब्लॉग पोस्ट में, मीडिया ऐप्लिकेशन के लिए पैटर्न के एक नए कलेक्शन के बारे में बताया गया है.

आइए, स्कोप वाली कस्टम प्रॉपर्टी और बैकग्राउंड-क्लिप का इस्तेमाल करके, ऐनिमेशन वाला ग्रेडिएंट टेक्स्ट इफ़ेक्ट बनाते हैं CodePen पर जाएं और नया पेन बनाएं. अपने टेक्स्ट के लिए मार्कअप बनाएं. चलिए, "तेज़" शब्द वाले हेडर का इस्तेमाल करते हैं: इसके बाद,

इस Chrometober को जानें कि कैसे स्क्रोलिंग बुक ने मज़ेदार और डरावनी सलाह और तरकीबें शेयर की हैं.

रंगों के हिसाब से और ऐक्सेस करने लायक टूलटिप कस्टम एलिमेंट बनाने के बारे में बुनियादी खास जानकारी.

पासकी, वेबसाइट के उपयोगकर्ता खातों को ज़्यादा सुरक्षित, आसान, इस्तेमाल करने में आसान, और बिना पासवर्ड के इस्तेमाल करती हैं. इस लेख में बताया गया है कि बिना पासवर्ड के पासकी से साइन इन करने की सुविधा को, मौजूदा उपयोगकर्ताओं के हिसाब से कैसे बनाया जाना चाहिए.

पासकी, वेबसाइट के उपयोगकर्ता खातों को ज़्यादा सुरक्षित, आसान, इस्तेमाल करने में आसान, और बिना पासवर्ड के इस्तेमाल करती हैं. इस लेख में, उपयोगकर्ताओं को आपकी वेबसाइट के लिए पासकी बनाने की अनुमति देने का तरीका बताया गया है.

कलर के हिसाब से ढलने वाले, रिस्पॉन्सिव, और ऐक्सेस किए जा सकने वाले एफ़एबी कॉम्पोनेंट बनाने के तरीके के बारे में बुनियादी खास जानकारी.

वेबसाइट की परफ़ॉर्मेंस की अहम जानकारी के लिए, वेब फ़ॉन्ट ऑप्टिमाइज़ करने का तरीका जानें.

यह Google Developers Experts (GDE) प्रोग्राम के सदस्यों के साथ किए गए इंटरव्यू की सीरीज़ में से एक है.

अपने डिज़ाइन के कलर कंट्रास्ट की जांच करने और उसकी पुष्टि करने के लिए, तीन टूल और तकनीकों की खास जानकारी.

आइए, स्कोप वाली कस्टम प्रॉपर्टी और animation-timing-function की मदद से, ऐनिमेशन वाला सीएसएस लोडर बनाते हैं CodePen पर जाएं और नया पेन बनाएं. हमारे लोडर के लिए मार्कअप बनाएं. इनलाइन कस्टम प्रॉपर्टी के इस्तेमाल पर ध्यान दें: लाइनों की संख्या कॉन्फ़िगर

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

इस आसान सीएसएस pseudo-selector में, मॉडल एलिमेंट चुनने का तरीका बताया गया है.

किसी लिस्ट को एक स्टाइल देने के लिए, कुछ क्रिएटिव और काम के तरीकों के बारे में जानें.

वेबसाइट की परफ़ॉर्मेंस की अहम जानकारी देने के लिए, टैग और टैग मैनेजर को ऑप्टिमाइज़ करें.

सीएसएस की मदद से, ऑप्टिकल भ्रम को फिर से पैदा करने के तरीकों के बारे में मज़ेदार जानकारी.

डिज़ाइन सिस्टम और कॉम्पोनेंट लाइब्रेरी में कस्टम प्रॉपर्टी का इस्तेमाल करने के फ़ायदे.

जानें कि अलग-अलग ट्रांसलेट करने, बदलने, और स्केल करने वाली सीएसएस प्रॉपर्टी को आसानी से कैसे बदला जा सकता है.

सीएसएस में बॉर्डर को ऐनिमेट करने के कई तरीके ढूंढे जा रहे हैं

BBC ने अपनी वेबसाइट की सुरक्षा और परफ़ॉर्मेंस को बेहतर बनाने के लिए, एचएसटीएस को रोल आउट किया है. जानें कि इसका क्या मतलब है और एचएसटीएस आपकी मदद कैसे कर सकता है.

जानें कि वेबसाइट की परफ़ॉर्मेंस की जानकारी देने वाली मेट्रिक पर नज़र रखने वाले टूल, अलग-अलग आंकड़े क्यों रिपोर्ट कर सकते हैं और इन अंतर को कैसे समझा जा सकता है.

अपने एनजीओ के हेल्पडेव के ओपन सोर्स के बारे में जीडीई एनरीक फ़र्नांडेज़ गुएरा.

Maersk.com के ग्राहकों और डेवलपर के लिए Internet Explorer के आखिर में मिलने वाली सहायता का क्या मतलब है.

बहुत लंबे HTML5Rocks, आपको जानकर अच्छा लगा.

सुरक्षा, क्रॉस-ब्राउज़र के साथ काम करने की सुविधा को पक्का करने के लिए, पहले-पक्ष की कुकी सेट करने का तरीका जानें. साथ ही, यह भी जानें कि तीसरे पक्ष की कुकी के बंद होने पर उनके काम करने के तरीके के बंद होने की संभावना को कम से कम कैसे किया जाए.

Web Audio API का इस्तेमाल करके, AV सिंक्रनाइज़ेशन सही तरीके से हासिल किया जा सकता है.

कुछ दिलचस्प इफ़ेक्ट बनाने के लिए, कॉनिक ग्रेडिएंट का इस्तेमाल किया जा सकता है. जैसे, यह अच्छा बॉर्डर. ऐडम अर्गेल ने यह CodePen बनाया है. इसे मूल रूप से, Twitter पर इस ट्वीट के ज़रिए शेयर किया गया था. इसमें, बॉर्डर बनाने के लिए कोनिक ग्रेडिएंट का

फ़ेच एपीआई के साथ काम करते समय गड़बड़ियों का पता लगाना.

क्लाइंट-साइड JavaScript एनवायरमेंट के संदर्भ में फ़्रेमवर्क और लाइब्रेरी के बीच के अंतर को समझें.

JavaScript लाइब्रेरी या फ़्रेमवर्क का इस्तेमाल करने से जुड़े फ़ैसले समझना.

यह संसाधन आपको टर्मिनल के आस-पास तेज़ी से रास्ता ढूंढने में मदद कर सकता है.

Google Fonts CSS API से जुड़ा एक अपडेट. यह कैसे काम करता है, इसे कैसे इस्तेमाल किया जा सकता है, और आपके वेब फ़ॉन्ट को बेहतर तरीके से डिलीवर करने का तरीका क्या है.

GOV.UK ने अपनी jQuery डिपेंडेंसी को अपने फ़्रंट एंड से हटा दिया है. आप सोच भी नहीं पाएंगे कि क्या हुआ. (हां, ऐसा किया जा सकता है.)

रंग के हिसाब से ढल जाने वाले, रिस्पॉन्सिव, और ऐक्सेस किए जा सकने वाले कॉम्पोनेंट बनाने के बारे में बुनियादी जानकारी.

जानें कि ब्राउज़र को पहले से लोड करने वाला स्कैनर क्या है, यह परफ़ॉर्मेंस को बेहतर बनाने में कैसे मदद करता है, और इसे बिना किसी रुकावट के कैसे हटाया जा सकता है.

अपने मौजूदा ऐनलिटिक्स टूल की मदद से, वेबसाइट की परफ़ॉर्मेंस की जानकारी को मापने का तरीका

वेब के लिए निर्माण को आसान बनाना.

मेंटॉरशिप प्रोग्राम से जुड़े Google Developers के विशेषज्ञ, इस बारे में जानकारी दे रहे हैं कि कैसे उन्हें लीडर बनने में मदद मिली.

वैरिएबल फ़ॉन्ट के लिए एक व्यावहारिक गाइड शेयर करना, जिसमें कई उदाहरणों के बारे में बताया गया है.

जोश डब्ल्यू कोमाओ के इस टूल की मदद से, अच्छे दिखने वाले ग्रेडिएंट बनाना बहुत आसान हो जाता है.

वेब डेवलपर के साथ हुई कई बातचीत के आधार पर, आपको सबसे ज़्यादा ज़रूरी समस्याओं के बारे में अहम जानकारी मिलेगी.

इमेज टूल की स्थिति देखें.

दायरे और JavaScript में उसके काम करने के तरीके के बारे में जानें.

`` एलिमेंट की मदद से, रंग के हिसाब से अडजस्ट होने वाले, रिस्पॉन्सिव, और ऐक्सेस किए जा सकने वाले मिनी और मेगा मॉडल बनाने का बुनियादी तरीका.

वेब पर मीडिया चलाने से जुड़ी गड़बड़ियों को डीबग करने का तरीका जानें.

यह Google Developers Experts (GDE) प्रोग्राम के सदस्यों के साथ किए गए इंटरव्यू की सीरीज़ में से एक है.

शुरुआती व्यूपोर्ट में इमेज को तुरंत लोड करने और बाकी इमेज को लेज़ी लोड करने से, कम बाइट लोड करने के साथ-साथ वेबसाइट की परफ़ॉर्मेंस की मेट्रिक को भी बेहतर बनाया जा सकता है.

`` एलिमेंट की मदद से, रंगों के हिसाब से साइज़ बदलने वाला और ऐक्सेस किया जा सकने वाला लोडिंग बार बनाने के बारे में बुनियादी जानकारी.

रजिस्टर करने और साइन इन करने के फ़ॉर्म को जितना हो सके उतना आसान बनाएं. साइन इन फ़ॉर्म से क्रेडेंशियल सेव करें, ताकि उपयोगकर्ताओं को वापस आने पर फिर से साइन इन न करना पड़े. फ़ॉर्म से उपयोगकर्ता के क्रेडेंशियल सेव करने के लिए: आगे बढ़ने से पहले, देख

उपयोगकर्ता-एजेंट स्ट्रिंग में बदलाव, वे रणनीतियां जिन्हें Chrome और Firefox ने असर को कम करने के लिए अपनाया है. साथ ही, यह भी पता चलता है कि आपकी मदद कैसे की जा सकती है.

अडैप्टिव फ़ेविकॉन बनाने के बारे में खास जानकारी.

Emscripten के साथ WebAssembly की मदद से, 2D ग्राफ़िक को कैनवस पर रेंडर करने का तरीका जानें.

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

बेहतर साइट के लिए ज़रूरी मेट्रिक

जानें कि किसी वेब ऐप्लिकेशन से यूएसबी पर बाहरी कैमरे कंट्रोल करने के लिए, gPhoto2 को WebAssembly पर कैसे पोर्ट किया गया है.

क्लाइंट-साइड नेटवर्क की गड़बड़ियों की जानकारी इकट्ठा करने के लिए, नेटवर्क एरर लॉगिंग (NEL) का इस्तेमाल करें.

सभी ब्राउज़र के उपयोगकर्ताओं की मदद करते समय, WebAssembly की नई सुविधाओं को इस्तेमाल करने का तरीका जानें.

जानें कि बाहरी डिवाइसों से इंटरैक्ट करने वाले कोड को WebAssembly और Fugu API की मदद से, वेब पर कैसे पोर्ट किया जा सकता है.

अडैप्टिव और ऐक्सेस करने लायक थीम स्विच करने वाला कॉम्पोनेंट बनाने के बारे में बुनियादी जानकारी.

बाहर की दुनिया से संपर्क करने के लिए, अपनी WebAssembly लाइब्रेरी में JavaScript कोड को एम्बेड करने का तरीका जानें.

The Oculus Quest 2 एक वर्चुअल रिएलिटी (वीआर) हेडसेट है. इसे Meta के विभाग, Oculus ने बनाया है. डेवलपर अब 2D और 3D प्रोग्रेसिव वेब ऐप्लिकेशन (PWA) बना सकते हैं और उन्हें उपलब्ध करा सकते हैं, जो Oculus Quest 2' की मल्टीटास्किंग सुविधा का फ़ायदा लेते हैं. इस लेख में, Oculus Quest 2 पर PWA को बनाने, अलग से लोड करने, और उसकी जांच करने का तरीका बताया गया है. साथ ही, यह भी बताया गया है कि ऐसा कैसे किया जाता है.

Designcember के हॉलिडे कैलेंडर-स्टाइल का अनुभव देने के लिए इस्तेमाल की गई प्रोसेस और टूल की एक झलक.

वेब पर सोलर कैलकुलेटर को फिर से बनाने की कोशिश की गई है. इसमें, आस-पास की लाइट के सेंसर और विंडो कंट्रोल ओवरले सुविधा का इस्तेमाल किया गया है.

लंबे समय तक, आपको JavaScript वैल्यू की डीप कॉपी बनाने के लिए समस्याओं और लाइब्रेरी का इस्तेमाल करना पड़ा. प्लैटफ़ॉर्म अब `स्ट्रक्चर्डClone()` के साथ शिप किया जाता है, जो डीप-कॉपी करने के लिए एक बिल्ट-इन फ़ंक्शन है.

ज़रूरत के हिसाब से और आसानी से ऐक्सेस किया जा सकने वाला टोस्ट कॉम्पोनेंट बनाने के बारे में बुनियादी जानकारी.

Chrome की तरफ़ से यूज़र इंटरफ़ेस (यूआई) फ़ंड की घोषणा की गई है. इसे डिज़ाइन टूल, सीएसएस, और एचटीएमएल पर काम करने वाले लोगों को अनुदान देने के लिए डिज़ाइन किया गया है.

रिस्पॉन्सिव, आसानी से इस्तेमाल होने वाला, और ऐक्सेस किया जा सकने वाला 3D गेम मेन्यू बनाने के बारे में बुनियादी खास जानकारी.

साल 2021 के Chrome Dev Summit की सभी मुख्य सूचनाओं का राउंडअप. इसमें, ऐसे लिंक भी शामिल हैं जिनकी ज़रूरत आपको ज़्यादा है.

ऐनिमेशन को मापने, ऐनिमेशन फ़्रेम के बारे में सोचने, और पेज के पूरी तरह इस्तेमाल होने के बारे में जानें.

अपने पेज और साइट की क्वालिटी को बेहतर तरीके से मेज़र और ऑप्टिमाइज़ करने के लिए, PageSpeed Insights की नई जानकारी के बारे में जानें.

नए लाइटहाउस एपीआई को आज़माएं, ताकि यूज़र फ़्लो के दौरान परफ़ॉर्मेंस और सबसे सही तरीकों को मेज़र किया जा सके.

पिछले तीन सालों से, Chrome उन वेब ऐप्लिकेशन को बेहतर बनाने के लिए काम कर रहा है जो ब्राउज़र में उपलब्ध सुविधाओं से ज़्यादा का इस्तेमाल करना चाहते हैं. ऐसा ही एक वेब ऐप्लिकेशन Photoshop है. Photoshop की तरह जटिल सॉफ़्टवेयर को सीधे ब्राउज़र में चलाने की कल्पना भी कुछ साल पहले ही करना मुश्किल था. हालांकि, कई नई वेब तकनीकों का इस्तेमाल करके, Adobe ने अब Photoshop का सार्वजनिक बीटा वर्शन वेब पर लाया है.

उपयोगकर्ताओं के अनुभवों को क्रम से लगाने और फ़िल्टर करने के लिए, रिस्पॉन्सिव, ज़रूरत के हिसाब से, और ऐक्सेस किए जा सकने वाले एक से ज़्यादा कॉम्पोनेंट बनाने के तरीके के बारे में बुनियादी खास जानकारी.

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

नए Sanitizer API का मकसद, एक मज़बूत प्रोसेसर बनाना है. इससे, आर्बिट्ररी स्ट्रिंग को सुरक्षित तरीके से पेज में डाला जा सकेगा. इस लेख में, एपीआई के बारे में जानकारी और इसके इस्तेमाल के बारे में बताया गया है.

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

मेज़रमेंट की मौजूदा सीमाओं को ठीक करने के लिए, एसपीए, वेबसाइट की परफ़ॉर्मेंस की जानकारी, और Google के प्लान से जुड़े सामान्य सवालों के जवाब.

preventDefault और stopPropagation: किस तरीके का इस्तेमाल कब करना है और हर तरीका क्या करता है. JavaScript इवेंट को हैंडल करना अक्सर आसान होता है. यह बात खास तौर पर तब ज़्यादा सही होती है, जब किसी आसान (अपेक्षाकृत फ़्लैट) एचटीएमएल स्ट्रक्चर का इस्तेमाल

JavaScript से अलग-अलग तरह की एसेट को इस तरह से इंपोर्ट और बंडल करने का तरीका जानें, जो ब्राउज़र और बंडलर, दोनों में काम करें.

ऐक्सेस किए जा सकने वाले स्प्लिट बटन कॉम्पोनेंट बनाने के तरीके के बारे में बुनियादी खास जानकारी.

JavaScript मॉड्यूल जैसे सिंटैक्स का इस्तेमाल करके, सीएसएस स्टाइलशीट इंपोर्ट करने के लिए, सीएसएस मॉड्यूल स्क्रिप्ट को इस्तेमाल करने का तरीका जानें.

रिस्पॉन्सिव और ऐक्सेस किए जा सकने वाले स्विच कॉम्पोनेंट बनाने के तरीके के बारे में बुनियादी खास जानकारी.

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

क्लाइंट हिंट हेडर के सेट की मदद से, साइटें अनुरोध के समय उपयोगकर्ता की मीडिया प्राथमिकताएं हासिल कर सकती हैं. इससे सर्वर, परफ़ॉर्मेंस के लिए सही सीएसएस को इनलाइन कर सकते हैं. सीएसएस मीडिया क्वेरी और खास तौर पर, prefers-color-scheme या

आपकी साइट पर नेविगेट करने के लिए, रिस्पॉन्सिव और आसानी से ऐक्सेस किए जा सकने वाले ब्रेडक्रंब कॉम्पोनेंट बनाने के बारे में बुनियादी जानकारी.

दूसरी भाषाओं में लिखे गए मल्टीथ्रेड ऐप्लिकेशन को WebAssembly में लाने का तरीका जानें.

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

मीडिया स्ट्रीमिंग, किसी सर्वर से लगातार मल्टीमीडिया कॉन्टेंट डिलीवर करने का तरीका है. इसके लिए, कॉन्टेंट को डेटा के अलग-अलग हिस्सों में बांट दिया जाता है. इसे डीएएसएच और HLS जैसे प्रोटोकॉल का इस्तेमाल करके, एक खास क्रम में वीडियो चलाने के दौरान एक साथ जोड़ा जा सकता है.

डिजिटल राइट मैनेजमेंट के सिद्धांतों को जानें. साथ ही, रॉ फ़ाइल से एन्क्रिप्ट (सुरक्षित) किए गए मीडिया तक, MPEG-DASH या HLS के लिए पैकेज किए गए मीडिया को सुरक्षित करने के लिए, 'क्लियर कुंजी' या 'वाइडवाइन' एन्क्रिप्शन, दोनों का इस्तेमाल करने के लिए ज़रूरी निर्देश.

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

वेब फ़ॉन्ट लोड होने पर, अब दस्तावेज़ के फ़ॉन्ट साइज़ को सामान्य करने के लिए, इसके स्केल को अडजस्ट किया जा सकता है. साथ ही, फ़ॉन्ट के बीच स्विच करते समय लेआउट शिफ़्ट को रोका जा सकता है

डाइनैमिक और कॉन्फ़िगर करने लायक कलर स्कीम बनाने के बारे में बुनियादी जानकारी

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

इस लेख में, वेबसाइट की परफ़ॉर्मेंस की जानकारी को ऑप्टिमाइज़ करने के लिए, सीएसएस से जुड़ी तकनीकों के बारे में बताया गया है.

आज से, सीएलएस में बदलाव किया गया है. यह बदलाव Chrome के वेब टूल के कई प्लैटफ़ॉर्म पर लागू कर दिया गया है. इनमें Lighthouse, PageSpeed Insights, और Chrome UX रिपोर्ट शामिल हैं.

सीएसएस सिलेक्टर सिंटैक्स में नज़र आने वाले इन छोटे बदलावों का बड़ा असर होगा.

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

आपकी साइट को उपयोगकर्ता-एजेंट स्ट्रिंग पर भरोसा करने के बजाय, नए उपयोगकर्ता-एजेंट क्लाइंट हिंट पर माइग्रेट करने की रणनीतियां.

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

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

थॉमस स्टाइनर के Google I/O 2021 पर आधारित टॉक-अप का लेख, जिसका टाइटल है, एक्सकैलिड्रॉ और फ़ुगु: Core User Journeys को बेहतर बनाना

सर्विस वर्कर, ExportScripts() के विकल्प के तौर पर, अतिरिक्त कोड लाने के लिए, ES मॉड्यूल के स्टैटिक इंपोर्ट का इस्तेमाल कर सकते हैं.

टीवी, फ़ोन, डेस्कटॉप वगैरह के लिए, रिस्पॉन्सिव हॉरिज़ॉन्टल स्क्रोल व्यू बनाने के तरीके की बुनियादी जानकारी.

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

WebAssembly में, सिंक्रोनस भाषाओं को कंपाइल करते समय, असिंक्रोनस वेब एपीआई को कॉल करने का तरीका जानें.

तृतीय-पक्ष स्क्रिप्ट या "टैग" आपकी साइट पर प्रदर्शन समस्याओं का एक स्रोत हो सकते हैं, और इसलिए उन्हें अनुकूलन का लक्ष्य माना जा सकता है. हालांकि, अपने जोड़े गए टैग को ऑप्टिमाइज़ करना शुरू करने से पहले, पक्का करें कि आप उन टैग को ऑप्टिमाइज़ नहीं कर रहे हैं जिनकी आपको ज़रूरत नहीं है. इस लेख में, नए टैग के लिए अनुरोधों का आकलन करने और मौजूदा टैग को मैनेज करने और उनकी समीक्षा करने का तरीका बताया गया है.

विंडो कंट्रोल ओवरले सुविधा की मदद से, डेवलपर इंस्टॉल किए गए PWA के टाइटल बार को अपनी पसंद के मुताबिक बना सकते हैं, ताकि उनके PWA, ऐप्लिकेशन की तरह दिखें.

DataTransfer ऑब्जेक्ट में, 'खींचें और छोड़ें' कार्रवाई के दौरान ड्रैग किया जाने वाला डेटा होता है. इसमें एक या उससे ज़्यादा डेटा आइटम हो सकते हैं. हर तरह के डेटा में एक या उससे ज़्यादा तरह के डेटा हो सकते हैं. इस लेख में बताया गया है कि DataTransfer API की मदद से क्या किया जा सकता है.

WebOTP API अब iframe के अंदर ओटीपी पा सकता है.

अक्षर और शब्द वाले ऐनिमेशन बनाने के तरीके के बारे में बुनियादी खास जानकारी.

सीएलएस मेट्रिक को बेहतर बनाने की योजनाएं, ताकि उन पेजों के लिए सीएलएस मेट्रिक बेहतर बनाई जा सके जो किसी पेज पर लंबे समय तक रहते हैं.

वेब डेवलपर सैटिस्फ़ैक्शन, वेब डेवलपर की ज़रूरतों के बारे में जानकारी इकट्ठा करने का एक Google प्रोजेक्ट है. इसका लक्ष्य एक ज़्यादा भरोसेमंद, अनुमान लगाने वाला, और इंटरऑपरेबल वेब प्लैटफ़ॉर्म है, जो डेवलपर को इस पर निवेश करने और उस पर भरोसा करने के साथ-साथ प्लैटफ़ॉर्म और उनके कारोबार को बढ़ाने के लिए नई सुविधाओं को अपनाने और इस्तेमाल करने की सुविधा देता है.

स्लाइडर और चेकबॉक्स के सेटिंग कॉम्पोनेंट को बनाने के तरीके की बुनियादी जानकारी.

JavaScript में `इस` के मान का पता लगाना मुश्किल हो सकता है, यहां इसे करने का तरीका बताया गया है...

इस चैप्टर में अलग-अलग मिनी ऐप्लिकेशन प्लैटफ़ॉर्म के मार्कअप, स्टाइल, स्क्रिप्टिंग, और अपडेट करने के विकल्पों के बारे में बताया गया है.

इस चैप्टर में उदाहरण के तौर पर एक प्रोजेक्ट दिखाया गया है, जिसमें "मिनी ऐप्लिकेशन के लिए प्रोग्रामिंग करने के तरीके" तरीके को अपनाया गया है.

इस चैप्टर में प्रोजेक्ट स्ट्रक्चर, लाइफ़साइकल, और मिनी ऐप्लिकेशन का बंडल बनाने के बारे में बताया गया है.

इस चैप्टर में, मिनी ऐप्लिकेशन की प्रोग्रामिंग के तरीके के बारे में बताया गया है.

यह चैप्टर, मिनी ऐप्लिकेशन कलेक्शन की इस आखिरी बात को पूरा करता है कि कुछ अलग तरीके से सोचने और अपने बबल के बाहर से इनपुट और प्रेरणा लेने से, वेब पर एक बेहतर भविष्य बनाने में मदद मिल सकती है..

यह चैप्टर H5 ऐप्लिकेशन और QuickApp के बैकग्राउंड के बारे में बताता है, जो दोनों मिनी ऐप्लिकेशन से अलग हैं.

इस चैप्टर में कुछ दिलचस्प मिनी ऐप्लिकेशन ओपन सोर्स प्रोजेक्ट के बारे में बताया गया है.

इस चैप्टर में उन कॉम्पोनेंट की जानकारी दी गई है जिन्हें सभी मिनी ऐप्लिकेशन प्लैटफ़ॉर्म उपलब्ध कराते हैं.

Streams API, JavaScript को नेटवर्क से मिले डेटा की स्ट्रीम को प्रोग्राम के हिसाब से ऐक्सेस करने और उन्हें मनमुताबिक प्रोसेस करने की अनुमति देता है.

iOS और Android ऐप्लिकेशन में मिलने वाले टैब कॉम्पोनेंट से मिलते-जुलते टैब बनाने के तरीके की बुनियादी जानकारी.

क्रॉस-ऑरिजिन आइसोलेशन की सुविधा की मदद से, वेब पेज में SharedarrayBuffer जैसी सुविधाएं इस्तेमाल की जा सकती हैं. इस लेख में, आपकी वेबसाइट पर क्रॉस-ऑरिजिन आइसोलेशन की सुविधा चालू करने का तरीका बताया गया है.

ऑरिजिन-एजेंट-क्लस्टर हेडर, एक ही डोमेन पर अन्य ऑरिजिन के सिंक्रोनस ऐक्सेस को बंद कर देता है. साथ ही, आपके ऑरिजिन के लिए खास संसाधनों की जानकारी देने के लिए ब्राउज़र को संकेत देता है.

नई आसपेक्ट रेशियो सीएसएस प्रॉपर्टी की मदद से, इमेज और एलिमेंट में आसपेक्ट रेशियो (लंबाई-चौड़ाई का अनुपात) बनाए रखना अब आसान हो गया है.

परफ़ॉर्मेंस और इस्तेमाल के लिए, कैरसेल को ऑप्टिमाइज़ करने का तरीका जानें.

WebRTC के इतिहास, आर्किटेक्चर, इस्तेमाल के उदाहरण, और आने वाले समय के बारे में खास जानकारी.

कुल लेआउट शिफ़्ट से जुड़ी मेट्रिक को बेहतर बनाने के हमारे प्लान के बारे में जानें और हमें सुझाव, शिकायत या राय दें.

स्थानीय डेवलपमेंट के लिए http://localhost का इस्तेमाल ज़्यादातर मामलों में किया जा सकता है. हालांकि, कुछ खास मामलों में ऐसा नहीं किया जा सकता. इस पोस्ट में बताया गया है कि आपको अपनी लोकल डेवलपमेंट साइट को एचटीटीपीएस के साथ कब चलाना चाहिए. यह भी

ज़्यादातर समय, http://localhost डेवलपमेंट के लिए एचटीटीपीएस की तरह काम करता है. हालांकि, कुछ खास मामलों में, आपको अपनी डेवलपमेंट साइट को एचटीटीपीएस की तरह सेट अप करना होगा. जैसे, कस्टम होस्टनेम या सभी ब्राउज़र पर सुरक्षित कुकी का इस्तेमाल करना. इससे

बाईं ओर मौजूद नेविगेशन लेआउट कॉम्पोनेंट के लिए, रिस्पॉन्सिव स्लाइड बनाने का तरीका जानें.

साइड नेविगेशन के लिए रिस्पॉन्सिव स्लाइड बनाने के तरीके के बारे में बुनियादी खास जानकारी

सीएसएस की मदद से, ऑडियंस को सेंटर करने की पांच अलग-अलग तकनीकों के बारे में जानें.

टेस्ट की सीरीज़ से गुज़रने के दौरान, सेंटरिंग की 5 तकनीकों को अपनाएं, ताकि आप यह देख सकें कि किस मॉडल में बदलाव करने के लिए सबसे जल्दी तैयार किया जा सकता है.

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

Houdini Paint API' क्रॉस-ब्राउज़र को लागू करने का तरीका जानें. साथ ही, Houdini.how के साथ हौडीनी वर्कलेट की दुनिया के बारे में जानें.

पते के फ़ॉर्म बनाने के सबसे सही तरीके जानें.

यह एक नया मॉड्यूलर टूल है, जो कई सोर्स से परफ़ॉर्मेंस डेटा को अपने-आप इकट्ठा करने की सुविधा देता है.

उपयोगकर्ता से एसएमएस के ज़रिए डिलीवर किया गया ओटीपी (वन-टाइम पासवर्ड) देने के लिए कहना, उपयोगकर्ता के फ़ोन नंबर की पुष्टि करने का एक आम तरीका है. इस पोस्ट में, बेहतरीन उपयोगकर्ता अनुभव वाला एसएमएस ओटीपी फ़ॉर्म बनाने के सबसे सही तरीके बताए गए हैं.

एक आसान साइन-अप फ़ॉर्म बनाने के लिए क्रॉस-प्लैटफ़ॉर्म ब्राउज़र सुविधाओं का इस्तेमाल करें. यह फ़ॉर्म सुरक्षित, ऐक्सेस करने लायक, और इस्तेमाल में आसान होता है.

पैसे चुकाने के तरीकों को इस्तेमाल करने के सबसे सही तरीकों के बारे में जानें.

उपयोगकर्ताओं को पते और पेमेंट के फ़ॉर्म जल्दी और आसानी से भरने में मदद करके, कन्वर्ज़न बढ़ाएं.

अपने उपयोगकर्ताओं को साइन अप करने, लॉग इन करने, और अपने खाते की जानकारी को आसानी से मैनेज करने में मदद करें.

पेज और सर्विस वर्कर के बीच, दो-तरफ़ा कम्यूनिकेशन चैनल बनाने का तरीका.

सर्विस वर्कर, किसी खास इवेंट के बारे में जानकारी देने के लिए पेज पर कैसे संपर्क कर सकते हैं.

परफ़ॉर्मेंस, कैश मेमोरी में सेव करने, और ऑफ़लाइन होने से जुड़े टास्क करने के लिए, विंडो और सर्विस वर्कर से कैसे संपर्क करें.

वेब वर्कर और सर्विस वर्कर आपकी वेबसाइट की परफ़ॉर्मेंस को कैसे बेहतर बना सकते हैं. साथ ही, वेब वर्कर और सर्विस वर्कर का इस्तेमाल कब किया जाना चाहिए.

वेब ऐप्लिकेशन, अब पॉइंटर इवेंट कैप्चर करते समय, माउस से तेज़ी लाने की सुविधा को बंद कर सकते हैं.

वेब पर Instagram Stories जैसा अनुभव देने के लिए बुनियादी जानकारी.

वेब पर Instagram Stories जैसा अनुभव देने का तरीका जानें.

"same-site" की परिभाषा में, यूआरएल स्कीम को शामिल किया जा रहा है. इसलिए, किसी साइट के एचटीटीपी और एचटीटीपीएस वर्शन के बीच के लिंक, अब क्रॉस-साइट अनुरोधों के तौर पर गिने जाएंगे. जहां भी हो सके, होने वाली समस्याओं से बचने के लिए, डिफ़ॉल्ट रूप से एचटीटीपीएस पर अपग्रेड करें. इसके अलावा, SameSite एट्रिब्यूट की वैल्यू के बारे में जानने के लिए, आगे पढ़ें.

इस पोस्ट में, कॉन्टेंट मैनेजमेंट सिस्टम में लोडिंग एट्रिब्यूट इस्तेमाल करने का तरीका बताया गया है.

सिलसिलेवार इंटरैक्टिव ट्यूटोरियल में ऐसा सर्वर बनाने का तरीका बताया गया है जो पुश नोटिफ़िकेशन सदस्यताओं को मैनेज करता हो और किसी पुश सेवा को वेब पुश प्रोटोकॉल के अनुरोध भेजता हो.

सिलसिलेवार इंटरैक्टिव ट्यूटोरियल में, क्लाइंट बनाने का तरीका बताया गया है. इससे, आपको ऐसा क्लाइंट बनाने का तरीका पता चलता है जो उपयोगकर्ता को पुश नोटिफ़िकेशन की सदस्यता देता है, पुश मैसेज को सूचनाएं के तौर पर दिखाता है, और उपयोगकर्ता की पुश नोटिफ़िकेशन की सदस्यता छोड़ता है.

पुश नोटिफ़िकेशन क्या हैं, इनका इस्तेमाल क्यों किया जा सकता है, और ये कैसे काम करते हैं, इसकी खास जानकारी.

अपनी साइट के ऑफ़लाइन इस्तेमाल को ट्रैक करने का तरीका, ताकि आप यह जान सकें कि आपकी साइट को बेहतर ऑफ़लाइन अनुभव क्यों चाहिए.

यह दिखाना कि अच्छी परफ़ॉर्मेंस तकनीक से कैसे जटिल और खूबसूरत ऐनिमेशन बनाए जा सकते हैं.

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

एसएक्सजी एक ऐसी डिलीवरी का तरीका है जिसकी मदद से, किसी संसाधन के ऑरिजिन की पुष्टि की जा सकती है. इसके लिए, यह जानकारी इस्तेमाल नहीं की जाती कि उसे कैसे डिलीवर किया गया था.

Chromium के लिए, नई लॉजिकल प्रॉपर्टी के शॉर्टहैंड और नई इनसेट प्रॉपर्टी.

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

अपने सीएसएस ऐनिमेशन की परफ़ॉर्मेंस को बेहतर बनाने के लिए, ज़्यादा से ज़्यादा बदलाव और ओपैसिटी वाली सीएसएस प्रॉपर्टी का इस्तेमाल करें. साथ ही, लेआउट या पेंटिंग को ट्रिगर करने वाली किसी भी चीज़ से बचें.

पक्का करें कि आपके सर्विस वर्कर को पता है कि आंशिक जवाब का अनुरोध किए जाने पर क्या करना है.

कैमरों को पैन करने, झुकाने, और ज़ूम करने की सुविधाओं को अब वेब पर कंट्रोल किया जा सकता है.

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

अलग विंडो, एक सामान्य तरह की मेमोरी लीक होती है, जिसे ढूंढना और ठीक करना खास तौर पर मुश्किल होता है.

अपने ऐप्लिकेशन को आसानी से ऑफ़लाइन इस्तेमाल करने का तरीका जानें.

सीएसएस में क्लिपिंग का इस्तेमाल करके, हम अपने डिज़ाइन में बॉक्स की तरह दिखने वाले प्रॉडक्ट को छोड़कर बाकी सभी काम कर सकते हैं. अलग-अलग तरह के बुनियादी आकार या SVG का इस्तेमाल करके, क्लिप पाथ बनाया जा सकता है. इसके बाद, एलिमेंट के उन हिस्सों को हटा दें जिन्हें आपको नहीं दिखाना है.

`` या `` एलिमेंट में रंग, साइज़ या संख्या या बुलेट को पसंद के मुताबिक बनाने के लिए सीएसएस का इस्तेमाल करें.

अनुरोधों को /.well-known/change-password पर जाकर पासवर्ड बदलने के यूआरएल पर रीडायरेक्ट किया जा सकता है. ऐसा करके, उपयोगकर्ताओं को पहले से ज़्यादा आसानी से अपने पासवर्ड अपडेट करने की सुविधा दी जा सकती है.

वेब-आधारित पेमेंट ऐप्लिकेशन के रजिस्टर हो जाने के बाद, यह व्यापारियों से पेमेंट के अनुरोध स्वीकार करने के लिए तैयार होता है. इस लेख में आपको रनटाइम के दौरान सर्विस वर्कर से किए गए पेमेंट के लेन-देन को पूरा करने का तरीका बताया गया है.

वेब-आधारित पेमेंट ऐप्लिकेशन के रजिस्टर हो जाने के बाद, यह व्यापारियों से पेमेंट के अनुरोध स्वीकार करने के लिए तैयार होता है. इस लेख में आपको रनटाइम के दौरान सर्विस वर्कर से किए गए पेमेंट के लेन-देन को पूरा करने का तरीका बताया गया है.

स्क्रीन रीडर से झूठ बोलने से सुलभता तब कितनी ठीक हो जाती है, जब वह उसमें नमक खोता नहीं है!

अन्य भाषाओं में लिखी गई लाइब्रेरी को वेब पर सुरक्षित और आसानी से इस्तेमाल करने के लिए, WebAssembly का इस्तेमाल करने का तरीका जानें.

सीएसएस content-visibility प्रॉपर्टी, वेब कॉन्टेंट को रेंडर करने की परफ़ॉर्मेंस को बेहतर बनाती है. ऐसा, ऑफ़-स्क्रीन कॉन्टेंट को रेंडर न करके किया जाता है. इस लेख में, ऑटो कीवर्ड का इस्तेमाल करके, शुरुआती लोड समय को कम करने के लिए, इस नई सीएसएस प्रॉपर्टी का इस्तेमाल करने का तरीका बताया गया है. आपको कॉन्टेंट दिखने की सुविधा के लिए, सीएसएस कंटेनमेंट स्पेसिफ़िकेशन और अन्य वैल्यू के बारे में भी जानकारी मिलेगी. इनसे आपको यह कंट्रोल करने में मदद मिलेगी कि आपका कॉन्टेंट ब्राउज़र में कैसे रेंडर हो.

Async Clipboard API, अनुमतियों के हिसाब से कॉपी करने और चिपकाने को आसान बनाता है.

जानें कि Android ऐप्लिकेशन में वेब कॉन्टेंट को रेंडर करने के लिए, अलग-अलग कॉम्पोनेंट का इस्तेमाल कैसे किया जा सकता है.

`strict-origin-when-cross-origin` की रेफ़रल नीति सेट करें. यह डेटा के क्रॉस-ऑरिजिन लीक होने के जोखिम को कम करते हुए, रेफ़रल देने वाले की ज़्यादातर अहमियत बनाए रखती है.

PWA बनाते समय, बुलेटिन टीम ने सर्विस वर्कर के बारे में क्या सीखा.

Lighthouse सीआई सेटअप करने और इसे डेवलपर वर्कफ़्लो में इंटिग्रेट करने का तरीका जानें.

Google खातों में बेहतर सुरक्षा और बेहतर उपयोगकर्ता अनुभव देना.

सीधे अपनी सीएसएस फ़ाइल में सिमैंटिक टाइपिंग, फ़ॉलबैक वैल्यू वगैरह वाली सीएसएस कस्टम प्रॉपर्टी लागू करने का तरीका जानें.

किसी ग्राहक के ब्राउज़र पर, वेब पर आधारित पेमेंट ऐप्लिकेशन को रजिस्टर करने का तरीका जानें. आपको इन्हें डीबग करने का तरीका भी पता चलेगा.

वेब पेमेंट के साथ काम करने के लिए अपने वेब आधारित पेमेंट ऐप्लिकेशन में बदलाव करने का तरीका जानें और ग्राहकों को बेहतर उपयोगकर्ता अनुभव दें.

अपने Android पेमेंट ऐप्लिकेशन में बदलाव करने का तरीका जानें, ताकि जब भी व्यापारी/कंपनी से पेमेंट अनुरोध एपीआई के ज़रिए अनुरोध किया गया हो, तो उपयोगकर्ता के चुने गए शिपिंग पते के साथ-साथ संपर्क जानकारी भी दी जा सके.

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

A/B टेस्टिंग का इस्तेमाल करके, अपने कारोबार की मेट्रिक पर साइट स्पीड के असर का आकलन करें.

Chrome UX रिपोर्ट (जिसे आम तौर पर CrUX कहा जाता है), लाखों वेबसाइटों पर उपयोगकर्ता अनुभव से जुड़े असली डेटा का सार्वजनिक डेटासेट है. लैब डेटा के उलट, CrUX डेटा असल में फ़ील्ड में ऑप्ट-इन किए हुए उपयोगकर्ताओं से आता है.

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

इस पोस्ट में सीएसएस की कुछ बेहतरीन लाइनों को हाइलाइट किया गया है. इनसे, आपको बेहतर और आधुनिक लेआउट बनाने में मदद मिलेगी.

Chrome 84 के बाद से, Resize ऐब्ज़र्वर एक नए बॉक्स मेज़रमेंट के साथ काम करता है, जिसे device-pixel-content-box कहा जाता है, जो एलिमेंट के डाइमेंशन को फ़िज़िकल पिक्सल में मापता है. पिक्सल-परफ़ेक्ट ग्राफ़िक बनाने के लिए यह ज़रूरी है, खास तौर पर हाई-डेंसिटी स्क्रीन के मामले में.

तीन दिन के ऑनलाइन कम्यूनिटी इवेंट के दौरान, मुख्य खबरों और अपडेट के बारे में खास जानकारी और आने वाले इलाकों में होने वाले इवेंट के बारे में रिमाइंडर.

साइन इन फ़ॉर्म बनाने के लिए, क्रॉस-प्लैटफ़ॉर्म ब्राउज़र की सुविधाओं का इस्तेमाल करें. इन फ़ॉर्म को सुरक्षित, ऐक्सेस किया जा सकने वाला, और इस्तेमाल करने में आसान बनाया जा सकता है.

साइन इन करने के लिए ऐसा आसान फ़ॉर्म बनाएं जो सुरक्षित हो, ऐक्सेस किया जा सके, और इस्तेमाल करना आसान हो. इसके लिए, क्रॉस-प्लैटफ़ॉर्म ब्राउज़र की सुविधाओं का इस्तेमाल करें.

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

अलग-अलग पेजों या पूरी साइट पर, एसईओ से जुड़ी समस्याओं को डीबग करने का तरीका.

बैकग्राउंड सिंक और Push API का इस्तेमाल करके, वर्कबॉक्स की मदद से खोज के बेहतर नतीजे पाने का तरीका क्या है.

और टैग का इस्तेमाल करके, किसी वेब पेज में मीडिया फ़ाइल एम्बेड करें.

टेक्स्ट फ़्रैगमेंट की मदद से, यूआरएल फ़्रैगमेंट में टेक्स्ट स्निपेट तय किया जा सकता है. ऐसे टेक्स्ट फ़्रैगमेंट वाले किसी यूआरएल पर नेविगेट करते समय, ब्राउज़र इस पर ज़ोर दे सकता है और/या उसे उपयोगकर्ता के ध्यान में ला सकता है.

वेब प्लैटफ़ॉर्म को बेहतर बनाने के लिए, ज़रूरी है कि आप ब्राउज़र वेंडर को किसी खास डिवाइस या प्लैटफ़ॉर्म पर, उनके ब्राउज़र में आने वाली समस्याओं के बारे में बताएं!

वेब टेक्नोलॉजी की मदद से, प्लैटफ़ॉर्म के हिसाब से खास ऐप्लिकेशन पैटर्न लागू करने के तरीके के बारे में जानें और जानें कि अपने प्रोग्रेसिव वेब ऐप्लिकेशन को एक "असल" ऐप्लिकेशन जैसा बनाने का तरीका क्या है.

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

Quicklink एक लाइब्रेरी है, जो इस्तेमाल में न होने के दौरान इन-व्यूपोर्ट लिंक को प्रीफ़ेच करके, बाद में पेज लोड को तेज़ी से लोड करती है.

फ़ेच मेटाडेटा, वेब प्लैटफ़ॉर्म की नई सुविधा है. इसे सर्वर को क्रॉस-ऑरिजिन हमलों से सुरक्षित रखने के लिए डिज़ाइन किया गया है.

सीएसएस का इस्तेमाल करके लेआउट बनाते समय, आपको इस बात का ध्यान रखना होगा कि कीबोर्ड से नेविगेशन करने वाले उपयोगकर्ताओं को डिसकनेक्ट न हो.

आपके वेब ऐनिमेशन को रैप करना बहुत आसान होने वाला है.

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

वेब Payments के साथ काम करने के लिए अपने Android पेमेंट ऐप्लिकेशन में बदलाव करने और ग्राहकों को बेहतर उपयोगकर्ता अनुभव देने का तरीका जानें.

जानें कि व्यापारी/कंपनी/कारोबारी, पेमेंट ऐप्लिकेशन को कैसे इंटिग्रेट करते हैं. साथ ही, यह भी जानें कि पेमेंट रिक्वेस्ट एपीआई के साथ पेमेंट लेन-देन कैसे काम करते हैं और वेब पेमेंट में क्या-क्या किया जा सकता है.

macOS पर, Chromium 80 का फ़ॉन्ट वेट रिग्रेशन के लिए, सिस्टम-यूज़र इंटरफ़ेस (यूआई) का इस्तेमाल किया गया था. इसके टूटने की वजह और रिज़ॉल्यूशन के बाद आने वाले नए सुपर पावर के लिए, Chromium 83 में इंतज़ार करना पड़ सकता है.

अपने PWA के लिए, कारोबार का एक मज़बूत केस बनाएं. जानें कि आपको कब निवेश करना चाहिए और इसकी सफलता का आकलन कैसे किया जा सकता है.

ऐप्लिकेशन शॉर्टकट कुछ सामान्य कार्रवाइयों का तुरंत ऐक्सेस देते हैं, जिनकी उपयोगकर्ताओं को अक्सर ज़रूरत होती है.

Chrome और अन्य ब्राउज़र के विवरण, Appकैश को हटाने की योजना है.

स्थायी स्टोरेज से, अहम डेटा को हटाए जाने से बचाया जा सकता है. साथ ही, डेटा खोने की संभावना को कम किया जा सकता है.

इंस्टॉलेशन की दर बढ़ाने के साथ-साथ, प्लैटफ़ॉर्म के मुकाबले होने वाली प्रतिस्पर्धा और किसी भी तरह के नुकसान से बचने के लिए, इंस्टॉलेशन के अलग-अलग ऑफ़र को एक साथ मिलाने के सबसे सही तरीके.

CommonJS मॉड्यूल बहुत डायनेमिक होते हैं, जो JavaScript ऑप्टिमाइज़र को और बंडल को उन पर उन्नत ऑप्टिमाइज़ेशन करने से रोकता है.

कुछ वेब एपीआई से, स्पेक्टर जैसे साइड-चैनल हमलों का खतरा बढ़ जाता है. उस जोखिम को कम करने के लिए, ब्राउज़र एक ऑप्ट-इन-आधारित आइसोलेटेड एनवायरमेंट को ऑफ़र करते हैं जिसे क्रॉस-ऑरिजिन आइसोलेटेड कहा जाता है. जानें कि बेहतर सटीक तरीके से काम करने वाली बेहतरीन सुविधाओं, जैसे कि `SharedarrayBuffer`, `performance.measureUserAgentspecificMemory()`, और हाई रिज़ॉल्यूशन टाइमर का इस्तेमाल करने के लिए, क्रॉस-ऑरिजिन आइसोलेशन की ज़रूरत क्यों होती है.

Chrome DevTools में `about://tracing` और **WebAudio** एक्सटेंशन का इस्तेमाल करके, Chrome में वेब ऑडियो ऐप्लिकेशन की परफ़ॉर्मेंस को प्रोफ़ाइल कैसे बनाया जा सकता है.

जानें कि कैसे Next.js और Gatsby, दोनों ने अपने बिल्ड आउटपुट में सुधार किया है, ताकि डुप्लीकेट कोड को कम किया जा सके और पेज लोड करने की परफ़ॉर्मेंस को बेहतर बनाया जा सके

"same-site" और "same-origin" का अक्सर उद्धरण दिया जाता है, लेकिन अक्सर शब्दों का गलत मतलब निकाला जाता है. इस पेज पर बताया गया है कि कन्वर्ज़न ऐक्शन क्या हैं और उनमें अंतर कैसे है.

रिग्रेशन का पता लगाने के लिए, प्रोडक्शन में अपने वेब पेज की मेमोरी में हुए इस्तेमाल को मापने का तरीका जानें.

कुछ वेब एपीआई से, स्पेक्टर जैसे साइड-चैनल हमलों का खतरा बढ़ जाता है. उस जोखिम को कम करने के लिए, ब्राउज़र एक ऑप्ट-इन-आधारित आइसोलेटेड एनवायरमेंट को ऑफ़र करते हैं जिसे क्रॉस-ऑरिजिन आइसोलेटेड कहा जाता है. इस तरह के एनवायरमेंट को सेट अप करने के लिए, COOP और COEP का इस्तेमाल करें. साथ ही, `SharedarrayBuffer`, `performance.measureUserAgentspecificMemory()` जैसी बेहतरीन सुविधाएं या सटीक तरीके से हाई रिज़ॉल्यूशन टाइमर चालू करें.

web.dev की इंजीनियरिंग टीम की इस पहली पोस्ट में, जानें कि हम साइट को कैसे बनाते हैं—इसमें Eleventy और Web components का इस्तेमाल भी शामिल है.

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

यह कैसे पक्का करें कि आपकी वेबसाइट का मुख्य फ़ंक्शन हमेशा उपलब्ध हो, ऐक्सेस किया जा सके, सुरक्षित हो, इस्तेमाल किया जा सके, खोजा जा सके, और तेज़ी से ऐक्सेस किया जा सके.

सर्वर की बॉटलनेक का पता लगाने, बॉटलनेक को तुरंत ठीक करने, सर्वर की परफ़ॉर्मेंस सुधारने, और रिग्रेशन को रोकने का तरीका.

अपने रंग और कंट्रास्ट के इस्तेमाल को बेहतर बनाकर, अपने पेजों को ज़्यादा सुलभ बनाने का तरीका जानें.

हम जानते हैं कि बेहतरीन मल्टी-डिवाइस अनुभव देने के लिए रिस्पॉन्सिव डिज़ाइन बनाना एक अच्छा आइडिया है, लेकिन रिस्पॉन्सिव डिज़ाइन सुलभता के लिए भी फ़ायदेमंद है.

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

पेश है भरोसेमंद टाइप: आधुनिक वेब ऐप्लिकेशन में DOM-आधारित क्रॉस-साइट स्क्रिप्टिंग को रोकने के लिए एक ब्राउज़र API.

Android ऐप्लिकेशन में प्रोग्रेसिव वेब ऐप्लिकेशन खोलने का तरीका.

रेंडरिंग साइकल को ऑप्टिमाइज़ करके, Chrome 83 वैकल्पिक फ़ॉन्ट पहले से लोड करते समय लेआउट शिफ़्टिंग को हटा देता है. फ़ॉन्ट-डिसप्ले के साथ जोड़ना: कस्टम फ़ॉन्ट को जैंक-फ़्री रेंडरिंग की गारंटी देने का सबसे असरदार तरीका, वैकल्पिक है.

nginx का इस्तेमाल करके एसएक्सजी फ़ाइलें पाने और उन्हें उपलब्ध कराने का तरीका. साथ ही, सबरिसॉर्स को प्रीफ़ेच करने से जुड़ी चुनौतियां.

एसएक्सजी एक्सटेंशन की मदद से TLS सर्टिफ़िकेट जनरेट करने का तरीका जानें. साथ ही, एसएक्सजी फ़ाइलें जनरेट करने के लिए टूल इंस्टॉल करने और एसएक्सजी फ़ाइलें दिखाने के लिए nginx को कॉन्फ़िगर करने का तरीका जानें.

मीडिया क्वेरी का इस्तेमाल करके, ज़रूरत के हिसाब से बड़ी इमेज भेजें. इस तकनीक को रिस्पॉन्सिव इमेज कहा जाता है.

अन्य डिपार्टमेंट आपकी वेबसाइट की स्पीड ऑप्टिमाइज़ेशन के प्रोजेक्ट को ज़्यादा कामयाब बनाने में कैसे मदद कर सकते हैं.

Chrome 81 में, पेज के लेआउट में बदलाव होने पर भी स्क्रोल करने वाले लोगों की संख्या तेज़ी से बढ़ती रहती है. दूसरे शब्दों में, ज़बरदस्ती फिर से लेने के लिए, अब आपको इवेंट लिसनर को जोड़ने की ज़रूरत नहीं है.

वेब पैकेजर का इस्तेमाल करके, साइन किए गए एक्सचेंज (एसएक्सजी) सेवा देने का तरीका जानें.

अपने उपयोगकर्ताओं को ऐप्लिकेशन इंस्टॉल करने का मनमुताबिक, आसान, और इन-ऐप्लिकेशन अनुभव देने के लिए, before installprompt इवेंट का इस्तेमाल करें.

अगर आपने पहले ही WebXR Device API का इस्तेमाल किया है, तो आपको यह जानकर खुशी होगी कि इसके बारे में बहुत कम जानकारी है. WebXR सेशन में जाना, काफ़ी हद तक एक जैसा ही होता है. फ़्रेम लूप चलाने का तरीका काफ़ी हद तक एक जैसा ही होता है. ये अंतर उन कॉन्फ़िगरेशन में होते हैं जो ऑगमेंटेड रिएलिटी (एआर) के लिए, कॉन्टेंट को सही तरीके से दिखाने में मदद करते हैं.

WebXR हिट टेस्ट एपीआई, वेब की ऑगमेंटेड रिएलिटी (एआर) को बेहतर बनाने का एक बेहतर विकल्प है. इसकी मदद से, आप वर्चुअल ऑब्जेक्ट को असल दुनिया के सामने रख सकते हैं.

Chrome 79 में वर्चुअल रिएलिटी की सुविधा वेब पर उपलब्ध हुई. WebXR Device API के आधार पर, यह लॉन्च ऑगमेंटेड और वर्चुअल रिएलिटी, दोनों के लिए आधार तैयार किया गया है. यह सीरीज़ का दूसरा लेख है. इसमें फ़्रेम लूप के बारे में जानकारी दी गई है. यह XR सेशन का हिस्सा है, जिसमें दर्शक को इमेज दिखाई जाती हैं. जल्द ही, अन्य ब्राउज़र WebXR Device API के साथ काम करेंगे. इनमें Firefox रिएलिटी, Oculus Browser, Edge, और Magic Leap's Heio ब्राउज़र वगैरह शामिल हैं.

इस बारे में जानें कि Chrome, JavaScript नेटवर्क को बेहतर बनाने के लिए कई ओपन-सोर्स टूल में किस तरह निवेश कर रहा है

प्रोग्रेसिव वेब ऐप्लिकेशन (PWA) और तीन अहम जानकारी के बारे में जानकारी, जो उन्हें दूसरे वेब ऐप्लिकेशन से अलग करती हैं.

वर्कबॉक्स में रूट कैसे रजिस्टर करें, ताकि आपका प्रोग्रेसिव वेब ऐप्लिकेशन, प्लैटफ़ॉर्म के हिसाब से ऐप्लिकेशन के साथ-साथ सिस्टम लेवल पर शेयर किए जाने वाले यूज़र इंटरफ़ेस (यूआई) में दिखे.

मास्केबल आइकॉन का फ़ॉर्मैट, आपको ज़्यादा कंट्रोल देता है. साथ ही, यह आपके प्रोग्रेसिव वेब ऐप्लिकेशन को अडैप्टिव आइकॉन इस्तेमाल करने देता है. मास्केबल आइकॉन, सभी Android डिवाइसों पर अच्छा लग सकता है.

आम तौर पर, जब कोई उपयोगकर्ता पेज या ऐप्लिकेशन को बंद करता है, तब उस पर आंकड़े या अन्य डेटा, सबमिट नहीं किया गया होता है. साइटें, पेज या ऐप्लिकेशन को तब तक खुला रखने के लिए XMLHttpRequest() के सिंक्रोनस कॉल का इस्तेमाल करती हैं, जब तक कि उसका डेटा सर्वर पर नहीं भेजा जाता. इससे उपयोगकर्ता अनुभव को नुकसान पहुंचता है और डेटा सेव करने के बेहतर तरीकों पर ध्यान नहीं दिया जाता. इस समस्या को ठीक करने के लिए, Chrome 80 ने हाल ही में एक खास बदलाव किया है.

मॉड्यूल वर्कर, महंगे कोड को बैकग्राउंड थ्रेड में ले जाकर मुख्य थ्रेड को अनब्लॉक करना आसान बनाते हैं. साथ ही, इससे स्टैंडर्ड JavaScript मॉड्यूल की परफ़ॉर्मेंस और बेहतर सुविधाएं मिलती हैं.

अडैप्टिव लोडिंग के पैटर्न और उसे लागू करने के तरीके के बारे में जानें. साथ ही, यह भी जानें कि Facebook, Tinder, eBay, और अन्य कंपनियां प्रोडक्शन में अडैप्टिव लोडिंग का इस्तेमाल कैसे करती हैं.

स्पीड टूल से जुड़ी नई सुविधाओं के बारे में पढ़ें. इनमें नई परफ़ॉर्मेंस मेट्रिक, PageSpeed Insights और Chrome उपयोगकर्ता अनुभव रिपोर्ट (CrUX) के अपडेट, और वेब नेटवर्क के Web Almanac विश्लेषण से मिली अहम जानकारी शामिल है.

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

इमेज ऑप्टिमाइज़ेशन की अलग-अलग तकनीकों के बारे में सर्वे के जवाब देने वालों की टिप्पणियां.

इस कोडलैब में, पुश नोटिफ़िकेशन सर्वर बनाने का तरीका जानें.

कोड को अलग-अलग हिस्सों में बांटने और स्मार्ट लोडिंग की रणनीतियों की मदद से, अपने Next.js ऐप्लिकेशन को तेज़ करने का तरीका. इस पोस्ट में, कोड को अलग-अलग हिस्सों में बांटने के अलग-अलग तरीकों के बारे में बताया गया है. साथ ही, Next.js ऐप्लिकेशन की स्पीड

Web Share API की मदद से, वेब ऐप्लिकेशन भी सिस्टम से मिलने वाली उन ही सुविधाओं का इस्तेमाल कर सकते हैं जो प्लैटफ़ॉर्म के हिसाब से शेयर करने वाले ऐप्लिकेशन में शेयर की जा सकती हैं. Web Share API की मदद से, डिवाइस पर इंस्टॉल किए गए अन्य ऐप्लिकेशन के साथ लिंक, टेक्स्ट, और फ़ाइलें, प्लैटफ़ॉर्म के लिए इस्तेमाल होने वाले ऐप्लिकेशन की तरह ही शेयर की जा सकती हैं.

अपने Next.js ऐप्लिकेशन में एएमपी का इस्तेमाल करने के फ़ायदों और समस्याओं के बारे में जानें AMP एक वेब कॉम्पोनेंट फ़्रेमवर्क है. इससे, पेज तेज़ी से लोड होने की गारंटी मिलती है. Next.js में एएमपी के लिए पहले से ही सहायता मौजूद है. इस गाइड में, सबसे

Next.js आपके React ऐप्लिकेशन में कई ऑप्टिमाइज़ेशन करता है, ताकि आपको Next.js, React के हिसाब से बनाया गया फ़्रेमवर्क है. इसमें परफ़ॉर्मेंस को ऑप्टिमाइज़ करने के कई तरीके पहले से मौजूद होते हैं. फ़्रेमवर्क के पीछे का मुख्य मकसद यह पक्का करना है कि

Next.js, रूट को पहले से लोड करके नेविगेशन की स्पीड कैसे बढ़ाता है और इसे पसंद के मुताबिक कैसे बनाया जा सकता है. इस पोस्ट में, आपको Next.js में रूटिंग के काम करने के तरीके के बारे में जानकारी मिलेगी. साथ ही, यह भी बताया जाएगा कि इसे स्पीड के लिए कैसे

Chrome 79 में वर्चुअल रिएलिटी की सुविधा वेब पर उपलब्ध हुई. WebXR Devicer API पर आधारित, यह लॉन्च, ऑगमेंटेड और वर्चुअल रिएलिटी, दोनों के लिए आधार तैयार किया गया है. यह लेख इस सीरीज़ का पहला लेख है. इसमें बुनियादी सिद्धांतों के बारे में जानकारी दी गई है और XR सेशन में शामिल होने का तरीका बताया गया है. जल्द ही, अन्य ब्राउज़र WebXR Device API के साथ काम करेंगे. इनमें Firefox रिएलिटी, Oculus Browser, Edge, और Magic Leap's Heio ब्राउज़र वगैरह शामिल हैं.

साइटें अब अलग-अलग साइटों पर इस्तेमाल के लिए, अपनी कुकी को साफ़ तौर पर मार्क कर सकती हैं. अपनी कुकी को मार्कअप करने का तरीका जानें, ताकि यह पक्का किया जा सके कि इस बदलाव के लागू होने के बाद, आपके पहले और तीसरे पक्ष की कुकी काम करती रहेंगी.

जानें कि कुकी कैसे काम करती हैं. साथ ही, पहले और तीसरे पक्ष की कुकी क्या होती हैं.

तेज़ी से चलने वाले विज्ञापनों की अहमियत समझें और विज्ञापन स्पीड का इस्तेमाल करने का तरीका जानें.

टारगेट किए गए और समय पर अपडेट पाने के लिए, पुश नोटिफ़िकेशन का इस्तेमाल करें.

इस कोडलैब में, उपयोगकर्ता की अनुमति के लिए अनुरोध करने और सूचनाएं भेजने का तरीका जानें.

इस कोडलैब में, सर्विस वर्कर से सूचनाएं मैनेज करने का तरीका जानें.

लेआउट के अस्थिरता से जुड़ी समस्याओं की पहचान करने और उन्हें ठीक करने के लिए, WebPageTest का इस्तेमाल करने के बारे में कदम-दर-कदम निर्देश.

फ़ीचर फ़ोन फिर से लोकप्रिय हो रहे हैं. खास तौर पर, ऐसे उभरते हुए बाज़ारों में जहां 2G नेटवर्क का इस्तेमाल किया जाता है. यहां हमने 2G नेटवर्क पर फ़ीचर फ़ोन पर तेज़ी से लोड होने वाले, मोबाइल Minesweeper क्लोन PROXX को बनाने से मिली अपनी सीखों के बारे में बताया है.

हालांकि, सीएसएस वैरिएबल काम के हैं, लेकिन इनके साथ काम करना मुश्किल है. ऐसा इसलिए, क्योंकि वे कोई भी वैल्यू ले सकते हैं और उन्हें ओवरराइड किया जा सकता है. साथ ही, उनके साथ ट्रांज़िशन का इस्तेमाल नहीं किया जा सकता. इन समस्याओं को ठीक किया गया है: सीएसएस प्रॉपर्टी और वैल्यू एपीआई लेवल 1.

संसाधनों को प्रीफ़ेच करके, आने वाले समय में नेविगेट करने की रफ़्तार बढ़ाने का तरीका जानें.

अपनी वेबसाइट पर, मिले-जुले कॉन्टेंट की गड़बड़ियों को ठीक करने का तरीका जानें. इससे उपयोगकर्ताओं को सुरक्षित रखने में मदद मिलेगी. साथ ही, यह भी पक्का किया जा सकेगा कि आपका पूरा कॉन्टेंट लोड हो.

मिला-जुला कॉन्टेंट तब होता है, जब शुरुआती एचटीएमएल को किसी सुरक्षित एचटीटीपीएस कनेक्शन पर लोड किया जाता है, लेकिन अन्य रिसॉर्स असुरक्षित एचटीटीपी कनेक्शन पर लोड होते हैं.

रिसर्च से पता चलता है कि वेब वीडियो से दर्शकों की दिलचस्पी और बिक्री में बढ़ोतरी होती है. भले ही आपने अभी तक अपनी साइटों पर वीडियो नहीं जोड़ा है, फिर भी इसे जोड़ने में थोड़ा समय लगेगा.

इस सुविधा की मदद से, यह जानकारी दी जा सकती है कि iOS की होम स्क्रीन पर कौनसा आइकॉन दिखेगा.

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

एक से ज़्यादा ऑरिजिन वाले आर्किटेक्चर, PWA बनाते समय कई चुनौतियों का सामना करते हैं. एक से ज़्यादा ऑरिजिन के अच्छे और खराब इस्तेमाल के बारे में जानें. साथ ही, कई ऑरिजिन वाली साइटों में PWA बनाने के कुछ तरीके जानें.

यह पोस्ट बताती है कि अपनी साइट पर इस्तेमाल किए जाने वाले WebFonts के साइज़ को कैसे कम किया जा सकता है, ताकि अच्छी टाइपोग्राफ़ी का मतलब यह न हो कि आपकी साइट धीमी है.

इस पोस्ट में बताया गया है कि पेज लोड होने पर WebFonts उपलब्ध न होने पर, लेआउट शिफ़्ट और खाली पेजों को रोकने के लिए WebFonts कैसे लोड किए जाते हैं.

इंस्टॉल किए जा सकने वाले प्रोग्रेसिव Angular ऐप्लिकेशन बनाने का तरीका जानें.

अपनी साइट की इमेज को ऑप्टिमाइज़ करने और उपयोगकर्ताओं के लिए इसकी डेटा लागत कम करने के लिए, इमेज सीडीएन का इस्तेमाल करें.

तीसरे पक्ष की स्क्रिप्ट का इस्तेमाल करने में होने वाली आम दिक्कतों से बचने के लिए, लोड होने में लगने वाले समय और उपयोगकर्ता अनुभव को बेहतर बनाने का तरीका जानें.

धीमे तीसरे पक्ष के रिसॉर्स की पहचान करने के लिए, Lighthouse और Chrome DevTools इस्तेमाल करने का तरीका जानें.

इस पोस्ट में तीसरे पक्ष की JavaScript के सामान्य टाइप और उनकी परफ़ॉर्मेंस से जुड़ी समस्याओं के बारे में बताया गया है. इसमें तीसरे पक्ष की स्क्रिप्ट को ऑप्टिमाइज़ करने के बारे में सामान्य दिशा-निर्देश भी दिए गए हैं.

Lighthouse की मदद से, तीसरे पक्ष के धीमे संसाधनों को ऑप्टिमाइज़ करने की तकनीकों के बारे में जानें.

वेब प्लैटफ़ॉर्म की नई सुविधाएं, कस्टम एलिमेंट बनाना आसान बनाती हैं, जो बिल्ट-इन फ़ॉर्म कंट्रोल की तरह काम करते हैं.

rel=preconnect और rel=dns-prefetch संसाधन संकेतों और उन्हें इस्तेमाल करने के तरीके के बारे में जानें.

सीएसएस बैकग्राउंड-फ़िल्टर प्रॉपर्टी का इस्तेमाल करके, वेब पर यूज़र इंटरफ़ेस (यूआई) एलिमेंट में बैकग्राउंड को धुंधला करने और पारदर्शिता जैसे बैकग्राउंड इफ़ेक्ट जोड़ने का तरीका जानें.

पुरानी-पुष्टि की प्रक्रिया के दौरान, डेवलपर को तुरंत कैश मेमोरी में सेव किए गए कॉन्टेंट को तुरंत लोड करने और अपडेट किए जाने के बीच संतुलन बनाने में मदद मिलती है. इससे यह पक्का किया जाता है कि कैश मेमोरी में सेव किए गए कॉन्टेंट के अपडेट, आने वाले समय में इस्तेमाल किए जाएं.

ऐंगुलर कॉम्पोनेंट डेवलपर किट की मदद से वर्चुअल स्क्रोलिंग लागू करके, बड़ी सूचियों को ज़्यादा रिस्पॉन्सिव बनाने का तरीका जानें.

ज़्यादा तेज़ ऐप्लिकेशन के लिए, Angular' पेजों को पहले से लोड करने की रणनीतियों का इस्तेमाल करने का तरीका जानें.

अपने Angular ऐप्लिकेशन को और बेहतर बनाने के लिए, बदलाव की पहचान करने की सुविधा को ऑप्टिमाइज़ करने का तरीका जानें.

नेटवर्क की क्वालिटी के हिसाब से अपने कॉन्टेंट में बदलाव करने के लिए, Network Information API इस्तेमाल करने का तरीका जानें.

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

कोडलाइज़र का इस्तेमाल करके, अपने Angular ऐप्लिकेशन को ऐक्सेस करने का तरीका जानें.

अपने ऐप्लिकेशन में स्टैटिक ऐसेट को पहले से कैश मेमोरी में सेव करने के लिए, Angular सर्विस वर्कर का इस्तेमाल करने का तरीका जानें.

सीधे Angular CLI में परफ़ॉर्मेंस बजट को इस्तेमाल करने का तरीका जानें!

कई डिवाइसों पर, अब वाइड गहरे रंग वाला मोड या गहरे रंग वाली थीम का इस्तेमाल किया जा सकता है. इस पोस्ट में बताया गया है कि वेब पेजों पर गहरे रंग वाले मोड का इस्तेमाल कैसे किया जा सकता है. इसमें डार्क मोड-टॉगल नाम के एक कस्टम एलिमेंट के बारे में भी बताया गया है. इसकी मदद से वेब डेवलपर, लोगों को किसी खास वेब पेज पर अपने ऑपरेटिंग सिस्टम के लेवल की प्राथमिकता बदलने का तरीका बता सकते हैं.

अपने Angular ऐप्लिकेशन को ज़्यादा तेज़, ज़्यादा भरोसेमंद, खोजे जाने लायक, इंस्टॉल करने लायक, और ऐक्सेस करने लायक बनाने का तरीका जानें!

रूट-लेवल पर कोड को बांटने की सुविधा का इस्तेमाल करके, अपने शुरुआती ऐप्लिकेशन बंडल को छोटा करने का तरीका जानें.

इमेज का सही साइज़ अपने-आप चुनने के लिए, srcset का इस्तेमाल करें.

इस पोस्ट में, साल 2019 में वेब कॉम्पोनेंट की स्थिति के बारे में एक बातचीत दी गई है. यह जानकारी Polymer Project के केविन शाफ़ और Salesforce के कैरिडी पैटीनो ने दी है.

लाइटहाउस अब परफ़ॉर्मेंस बजट के साथ काम करता है. LightWallet नाम की इस सुविधा को पांच मिनट से भी कम समय में सेट अप किया जा सकता है. इससे पेज रिसॉर्स के साइज़ और संख्या के बारे में फ़ीडवैक मिलता है.

Chrome 53 में पेमेंट अनुरोध एपीआई और Chrome 68 में पेमेंट हैंडलर एपीआई लॉन्च किए जाने के बाद से, इनसे जुड़ी खास जानकारी में कुछ बदलाव किए गए हैं. इस पोस्ट में, उन अपडेट की खास जानकारी दी गई है. साथ ही, एपीआई में हुए बदलावों को लागू करना जारी रहेगा.

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

Chrome के पता बार (खोज वाली पट्टी) में दिए गए नए 'इंस्टॉल करें' बटन से, प्रोग्रेसिव वेब ऐप्लिकेशन आसानी से इंस्टॉल किए जा सकते हैं.

ई-कॉमर्स फ़नल के अलग-अलग हिस्सों पर, वेबसाइट की परफ़ॉर्मेंस के असर के बारे में जानें

प्रोग्रेसिव वेब ऐप्लिकेशन इंस्टॉल करने और सबसे सही तरीकों का प्रमोशन करने के बारे में जानकारी.

प्रोग्रेसिव वेब ऐप्लिकेशन इंस्टॉल करने और सबसे सही तरीकों का प्रमोशन करने के बारे में जानकारी.

सर्विस वर्कर के साथ काम करना कई वेब डेवलपर के लिए नया और अनजाना काम है. यह पोस्ट आपके दिमाग को व्यवस्थित करने के लिए कुछ सुझाव देती है.

इमेज में ज़्यादा विज़ुअल स्पेस लगता है और ये किसी वेबसाइट पर डाउनलोड की गई ज़्यादातर बाइट का हिस्सा होती हैं. तय साइज़ से बड़ी इमेज की पहचान करने के लिए, सुविधा से जुड़ी नई नीतियों का इस्तेमाल करें.

ज़रूरी सीएसएस तकनीक की मदद से, रेंडर होने में लगने वाले समय को बेहतर बनाने का तरीका और अपने प्रोजेक्ट के लिए सबसे अच्छा टूल चुनने का तरीका जानें.

जानें कि क्रिटिकल सीएसएस को एक्सट्रैक्ट करने और इनलाइन करने के लिए, ज़रूरी टूल का इस्तेमाल कैसे करें. साथ ही, रेंडर होने में लगने वाले समय को बेहतर बनाने का तरीका जानें.

महंगे और काम में रुकावट डालने वाले उपयोगकर्ता इंटरैक्शन का पता लगाने का तरीका जानें.

Google I/O 2019 के लिए, हमने वेब परफ़ॉर्मेंस की तीन नई पहल शुरू की हैं. हमें उम्मीद है कि इनसे सभी को बेहतर उपयोगकर्ता अनुभव मिलेगा.

PROXX, एक ऐसा गेम है जो PWA के तौर पर बनाया गया है और माइनस्वीपर गेम जैसा है. यह कई तरह के डिवाइसों पर काम करता है. साथ ही, डिवाइस की परफ़ॉर्मेंस जितनी बेहतर होगी, विज़ुअल की क्वालिटी उतनी ही बेहतर होगी.

क्या यह बढ़िया नहीं होगा कि उपयोगकर्ता अपने कैमरे का इस्तेमाल करके आपकी साइट खोजें?

अपनी कुकी को पहले पक्ष और तीसरे पक्ष के इस्तेमाल के लिए, SameSite एट्रिब्यूट का इस्तेमाल करके मार्क करना जानें. CSRF हमलों से सुरक्षा को बेहतर बनाने के लिए, SameSite' के Lax और Strict मानों का इस्तेमाल करके, अपनी साइट की सुरक्षा को बेहतर बनाया जा सकता है. 'कोई नहीं' एट्रिब्यूट का नया एट्रिब्यूट तय करने से, आपको क्रॉस-साइट इस्तेमाल के लिए अपनी कुकी को साफ़ तौर पर मार्क करने में मदद मिलती है.

Network Information API का इस्तेमाल करके, उपयोगकर्ताओं को उनके कनेक्शन की क्वालिटी के हिसाब से विज्ञापन दिखाए जा सकते हैं.

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

इस कोडलैब में, जानें कि Brotli का कंप्रेस करने से, कंप्रेस करने का अनुपात और आपके ऐप्लिकेशन का कुल साइज़ कैसे कम हो सकता है.

Google I/O 2019 के लिए, web.dev टीम के लोगों ने कई अपडेट भेजे हैं. इनमें, रीफ़्रेश किया गया डिज़ाइन, ज़्यादा लाइटहाउस दस्तावेज़, और एक बिलकुल नया ब्लॉग शामिल है.

जो ब्रैंड विज्ञापन की स्पीड को ऑप्टिमाइज़ करते हैं, वे अक्सर तेज़ी से रिग्रेशन करते हैं. इस पोस्ट में, हमने यह तय करने का तरीका बताया है कि तेज़ी से काम करने के लिए आपको बेहतर अनुभव कैसे मिलेगा.

गति मायने रखती है, लेकिन असल में इसका क्या मतलब है? साइट तेज़ी से लोड होने का क्या मतलब है?

उपयोगकर्ताओं के डिवाइस, नेटवर्क कनेक्शन, और दूसरी चीज़ों में अंतर की वजह से, असल दुनिया में गेम की परफ़ॉर्मेंस में बहुत ज़्यादा अंतर होता है. इस पोस्ट में, हमने ऐसे टूल के बारे में बताया है जो पेज की परफ़ॉर्मेंस का आकलन करने के लिए, लैब या फ़ील्ड डेटा इकट्ठा करने में आपकी मदद कर सकते हैं.

Create React ऐप्लिकेशन में, डिफ़ॉल्ट रूप से वेब ऐप्लिकेशन मेनिफ़ेस्ट शामिल होता है. इस फ़ाइल में बदलाव करने से आपको यह बदलाव करने की अनुमति मिलेगी कि उपयोगकर्ता के डिवाइस पर इंस्टॉल होने पर आपका ऐप्लिकेशन कैसा दिखेगा.

प्रतिक्रिया-स्नैप तीसरे पक्ष की ऐसी लाइब्रेरी है जो आपकी साइट के पेजों को स्टैटिक एचटीएमएल फ़ाइलों में पहले से रेंडर करती है. इससे आपके ऐप्लिकेशन में फ़र्स्ट पेंट के समय में सुधार हो सकता है.

exact-ऐक्सिस ऐसी लाइब्रेरी है जो React ऐप्लिकेशन को ऑडिट करती है और Chrome DevTools कंसोल में सुलभता से जुड़ी किसी भी समस्या को लॉग करती है. eslint-plugin-jsx-a11y एक ESLint प्लग इन है, जो सीधे आपके JSX में सुलभता के कई नियमों की पहचान करके उन्हें लागू करता है. इन दोनों का एक साथ इस्तेमाल करने से आपको अपने ऐप्लिकेशन में सुलभता से जुड़ी किसी भी समस्या का पता लगाने और उसे ठीक करने के लिए, एक बेहतर ऑडिटिंग तरीका मिल सकता है.

React एक ओपन सोर्स लाइब्रेरी है, जिसकी मदद से यूज़र इंटरफ़ेस (यूआई) बनाना आसान हो जाता है. इस लर्निंग पाथ में, नेटवर्क में मौजूद अलग-अलग एपीआई और टूल शामिल होंगे. आपको अपने ऐप्लिकेशन की परफ़ॉर्मेंस और उसे इस्तेमाल करने के तरीके को बेहतर बनाने के लिए, इन एपीआई और टूल का इस्तेमाल करना चाहिए.

response-विंडो एक ऐसी लाइब्रेरी है जिसकी मदद से, बड़ी सूचियों को बेहतर तरीके से रेंडर किया जा सकता है.

React.lazy तरीके से, डाइनैमिक इंपोर्ट का इस्तेमाल करके कॉम्पोनेंट लेवल पर, React ऐप्लिकेशन को आसानी से कोड के तौर पर स्प्लिट किया जा सकता है. अपने उपयोगकर्ताओं को कॉन्टेंट लोड होने की सही स्थिति दिखाने के लिए, सस्पेंस के साथ इसका इस्तेमाल करें.

Workbox को डिफ़ॉल्ट कॉन्फ़िगरेशन के साथ Create React ऐप्लिकेशन में बनाया गया है, जो हर बिल्ड के साथ आपके ऐप्लिकेशन में मौजूद सभी स्टैटिक एसेट को पहले से कैश मेमोरी में सेव करता है.

इस कोडलैब में, संसाधनों को पहले से लोड करके और प्रीफ़ेच करके, किसी पेज की परफ़ॉर्मेंस को बेहतर बनाने का तरीका जानें.

Pres-reduced-motion मीडिया क्वेरी से यह पता चलता है कि उपयोगकर्ता ने सिस्टम से इस्तेमाल किए जाने वाले ऐनिमेशन या मोशन को कम से कम करने का अनुरोध किया है या नहीं. यह उन उपयोगकर्ताओं के लिए है जिन्हें छोटे ऐनिमेशन की ज़रूरत होती है या जिन्हें छोटे ऐनिमेशन इस्तेमाल करने होते हैं; उदाहरण के लिए, ऐसा हो सकता है कि वेस्टिबुलर डिसऑर्डर से जूझ रहे लोग, ऐनिमेशन का कम से कम इस्तेमाल करना पसंद करें.

क्रिटिकल रेंडरिंग पाथ को ऑप्टिमाइज़ करने और पहली बार कॉन्टेंटफ़ुल पेंट (एफ़सीपी) को बेहतर बनाने के मकसद से, गैर-ज़रूरी सीएसएस को रोकने का तरीका जानें.

इंटरसेक्शन ऑब्ज़र्वर v2, न सिर्फ़ हर चौराहे के हिसाब से चौराहों का पता लगाने की सुविधा देता है, बल्कि यह भी पता लगाने में मदद करता है कि इंटरसेक्शन के समय कोई एलिमेंट दिख रहा था या नहीं.

ऐसी साइटें बनाएं जो उस डिवाइस की ज़रूरतों और क्षमताओं को पूरा करती हों जिस पर उन्हें देखा जाता है.

बनाने में इस्तेमाल होने वाली स्टाइलशीट, FOUC की चिंता किए बिना, दस्तावेज़ों या शैडो रूट के लिए स्टाइल बनाने और उन्हें डिस्ट्रिब्यूट करने का आसान तरीका देती हैं.

ऐप्लिकेशन में लॉजिक और रेंडरिंग को लागू करने के सुझाव.

अपने परफ़ॉर्मेंस बजट पर नज़र रखने का सबसे अच्छा तरीका है, उसे ऑटोमेट करना. अपनी ज़रूरतों और मौजूदा सेटअप के हिसाब से, टूल चुनने का तरीका जानें.

कम से कम सेटअप के साथ परफ़ॉर्मेंस बजट तय करें और Travi CI के साथ बंडलसाइज़ का इस्तेमाल करके, उन्हें अपने डेवलपमेंट वर्कफ़्लो के हिस्से के तौर पर लागू करें.

वेबपैक की मदद से, परफ़ॉर्मेंस बजट सेट करने और बंडल साइज़ की जांच करने का तरीका जानें.

आपने तेज़ी से विज्ञापन दिखाने के लिए कड़ी मेहनत की है. अब लाइटहाउस बॉट की मदद से Trawis CI में परफ़ॉर्मेंस टेस्टिंग को ऑटोमेट करें. इससे, आपको अपनी परफ़ॉर्मेंस को बेहतर बनाने में मदद मिलेगी.

इस सेटअप में WebAssembly को कैसे इंटिग्रेट किया जाता है? इस लेख में, हम C/C++ और Emscripten के उदाहरण लेकर इस पर काम करेंगे.

getInstalledRelatedApps() एपीआई एक वेब प्लैटफ़ॉर्म एपीआई है. इसकी मदद से, यह देखा जा सकता है कि उपयोगकर्ता के डिवाइस पर, आपका iOS/Android/डेस्कटॉप ऐप्लिकेशन या PWA इंस्टॉल है या नहीं.

इस कोडलैब में, जानें कि किसी ऐप्लिकेशन की परफ़ॉर्मेंस को कैसे बेहतर बनाया जाए. इसके लिए, यह तय करें कि कितने कोड को ट्रांसपाइल किया जा सकता है.

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

क्या आपने कभी सोचा है कि स्क्रीन रीडर जैसी सहायक टेक्नोलॉजी को कैसे पता है कि उपयोगकर्ताओं को क्या सूचना देनी है? इसका जवाब है कि ये टेक्नोलॉजी, अपने पेजों को सिमैंटिक एचटीएमएल से मार्कअप करने के लिए, डेवलपर पर निर्भर करती हैं. सिमेंटिक्स क्या हैं और स्क्रीन रीडर इनका इस्तेमाल कैसे करते हैं?

स्टैंडर्ड एचटीएमएल एलिमेंट में कीबोर्ड की सुलभता सुविधा पहले से मौजूद होती है. कस्टम इंटरैक्टिव कॉम्पोनेंट बनाते समय, tabindex का इस्तेमाल करें. इससे यह पक्का किया जा सकेगा कि कीबोर्ड को ऐक्सेस किया जा सकता है.

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

फ़ोकस इंंडिकेटर (जिसे अक्सर "फ़ोकस रिंग" से दिखाया जाता है) वर्तमान में फ़ोकस किए गए एलिमेंट की पहचान करता है. माउस का इस्तेमाल नहीं कर पाने वाले उपयोगकर्ताओं के लिए, यह इंडिकेटर बहुत अहम होता है, क्योंकि यह उनके माउस-पॉइंटर के लिए स्टैंड-इन की तरह काम करता है.

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

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

सही सिमेंटिक एचटीएमएल एलिमेंट का इस्तेमाल करके, कीबोर्ड से ऐक्सेस करने की ज़्यादातर या सभी ज़रूरतों को पूरा किया जा सकता है. इसका मतलब है कि tabindex के साथ कम समय बिताना पड़ेगा और उपयोगकर्ता ज़्यादा खुश होंगे!

ऐक्सेस की जा सकने वाली साइट वह होती है जिसका कॉन्टेंट ऐक्सेस किया जा सकता है, भले ही उसका इस्तेमाल करने वाला कोई भी व्यक्ति

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

बिना कंप्रेस की गई इमेज आपके पेजों को बेवजह बाइट बढ़ा देती हैं. इमेज को कंप्रेस करके, पेज लोड होने की प्रोसेस को बेहतर बनाने के अवसरों का पता लगाने के लिए Lighthouse चलाएं.

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

अपने वेब ऐप्लिकेशन के लिए कैश मेमोरी में सेव करने की सही रणनीति लागू करने के लिए, यह तय करना ज़रूरी है कि आप क्या लोड कर रहे हैं. भरोसेमंद वेब ऐप्लिकेशन बनाते समय, नेटवर्क पर हर तरह की डार्क फ़ोर्स आ सकती हैं. अगर आपको अपने ऐप्लिकेशन में नेटवर्क की जोखिम की आशंकाओं का सामना करने की उम्मीद है, तो आपको उन्हें समझना होगा.

इस कोडलैब में, डिवाइस के डिसप्ले साइज़ के आधार पर पूरी तरह से अलग-अलग इमेज लोड करने का तरीका जानें.

PRPL एक शॉर्ट फ़ॉर्म है, जो वेब पेजों को लोड करने और इंटरैक्टिव और तेज़ बनाने में इस्तेमाल होने वाले पैटर्न के बारे में बताता है. इस गाइड में जानें कि ये सभी तकनीकें एक साथ कैसे काम करती हैं, लेकिन फिर भी इन्हें अलग-अलग तरीके से इस्तेमाल करके, परफ़ॉर्मेंस के नतीजे पाए जा सकते हैं.

इस कोडलैब में, नेटवर्क की परफ़ॉर्मेंस को बेहतर बनाने के लिए, सही डाइमेंशन वाली इमेज दिखाने का तरीका जानें.

हम सभी को यह अनुभव रहा है—आप किसी इमेज को पेज पर जोड़ने से पहले उसका साइज़ छोटा करना भूल गए. यह इमेज ठीक लग रही है, लेकिन इससे उपयोगकर्ताओं का डेटा बर्बाद हो रहा है और पेज की परफ़ॉर्मेंस पर बुरा असर पड़ रहा है.

इस कोडलैब में, before installprompt इवेंट का इस्तेमाल करके किसी साइट को इंस्टॉल करने का तरीका जानें.

इस कोडलैब में, जानें कि उपयोगकर्ता के डिवाइस के लिए, सही पिक्सल डेंसिटी वाली इमेज लोड करने के लिए, डेंसिटी डिस्क्रिप्टर और srcset का इस्तेमाल कैसे करें.

इस कोडलैब में, जानें कि संसाधनों को फ़ेच करने के दौरान, एक ही ऑरिजिन की नीति कैसे काम करती है.

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

अच्छा परफ़ॉर्मेंस बहुत कम ही बुरा असर होता है. परफ़ॉर्मेंस बजट के बारे में जानें. साथ ही, यह भी जानें कि इनकी मदद से, कारोबार को सफल कैसे बनाया जा सकता है.

WebP इमेज, अपने JPEG और PNG वर्शन से छोटे होती हैं. आम तौर पर, इन इमेज के साइज़ में 25 से 35% की कमी आती है. इससे पेज का साइज़ घटता है और परफ़ॉर्मेंस बेहतर होती है.

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

सर्च इंजन, लाइब्रेरियन के डिजिटल वर्शन होते हैं. वे किसी क्वेरी के लिए सही जानकारी ढूंढने में मदद करने के लिए, एक व्यापक इंडेक्स का इस्तेमाल करते हैं. खोज करने से जुड़ी बुनियादी बातों को समझने से, आपको अपना कॉन्टेंट उपयोगकर्ताओं के लिए आसानी से खोजे जाने लायक बनाने में मदद मिलती है.

ब्राउज़र की एक ही ऑरिजिन से जुड़ी नीति, सुरक्षा के मकसद से किसी संसाधन को किसी दूसरे ऑरिजिन से पढ़ने पर रोक लगाती है. सीओआरएस को चालू करने से सर्वर, ब्राउज़र को यह बता पाता है कि वह किसी दूसरे ऑरिजिन का इस्तेमाल कर सकता है.

पक्का करें कि आपकी साइट तेज़ी से लोड होती हो. साथ ही, इन सिलसिलेवार निर्देशों में, ऐसी परफ़ॉर्मेंस मेट्रिक के लिए थ्रेशोल्ड तय करें जो आपकी साइट के लिए काम के हों.

Workbox एक हाई-लेवल सर्विस वर्कर टूलकिट है, जो सर्विस वर्कर और कैश स्टोरेज एपीआई पर आधारित है. यह वेब ऐप्लिकेशन में ऑफ़लाइन इस्तेमाल करने की सुविधा देने के लिए, प्रोडक्शन के लिए तैयार लाइब्रेरी का सेट उपलब्ध कराता है.

इस कोडलैब में, जानें कि किसी iframe के अंदर डेटा ऐक्सेस करते समय, एक जैसी ऑरिजिन से जुड़ी नीति कैसे काम करती है.