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

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

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

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

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

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

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

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

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

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 इवेंट को हैंडल करना अक्सर आसान होता है. यह बात खास तौर पर तब ज़्यादा सही होती है, जब किसी आसान (अपेक्षाकृत फ़्लैट) एचटीएमएल स्ट्रक्चर का इस्तेमाल