I/O 2019 में लॉन्च की गई, वेब की परफ़ॉर्मेंस से जुड़ी तीन नई सुविधाओं के बारे में जानें.
Google I/O 2019 में "Speed at Scale" टॉक के दौरान, हमने तीन चीज़ों का एलान किया था. हमें उम्मीद है कि इनसे आने वाले साल में वेब की परफ़ॉर्मेंस बेहतर होगी.
Lighthouse में अब परफ़ॉर्मेंस बजट की सुविधा उपलब्ध है
LightWallet, Lighthouse में मौजूद एक नई सुविधा है. इससे परफ़ॉर्मेंस बजट के लिए सहायता मिलती है. परफ़ॉर्मेंस बजट से, आपकी साइट की परफ़ॉर्मेंस के लिए स्टैंडर्ड तय होते हैं. इससे भी अहम बात यह है कि इससे आपको परफ़ॉर्मेंस में होने वाली गिरावट की पहचान करने और उसे ठीक करने में मदद मिलती है.
LightWallet, Lighthouse सीएलआई के सबसे नए वर्शन में उपलब्ध है. इसे सेट अप करने में सिर्फ़ कुछ मिनट लगते हैं. इन निर्देशों में ज़्यादा जानकारी दी गई है.
क्या आपको नहीं पता कि आपका बजट कितना होना चाहिए? एक्सपेरिमेंट के तौर पर उपलब्ध हमारा परफ़ॉर्मेंस बजट कैलकुलेटर आज़माएं. यह LightWallet के साथ काम करने वाला बजट कॉन्फ़िगरेशन जनरेट कर सकता है.
ब्राउज़र-लेवल पर इमेज और iframe की लेज़ी लोडिंग की सुविधा, वेब पर उपलब्ध है
वेब पेजों पर अक्सर बड़ी संख्या में इमेज होती हैं. इनकी वजह से, डेटा का इस्तेमाल बढ़ जाता है, पेज-ब्लोट होता है, और पेज लोड होने में ज़्यादा समय लगता है. इनमें से कई इमेज ऑफ़स्क्रीन होती हैं. इन्हें देखने के लिए, उपयोगकर्ता को स्क्रोल करना पड़ता है.
अब तक, आपको JavaScript लाइब्रेरी का इस्तेमाल करके, लेज़ी लोडिंग इमेज की समस्या को हल करना पड़ता था. हालांकि, जल्द ही इसमें बदलाव हो सकता है. इस गर्मी में, Chrome loading एट्रिब्यूट के लिए सहायता लॉन्च करेगा, जो वेब पर स्टैंडर्ड <img> और <iframe> लेज़ी लोडिंग लाता है.
loading एट्रिब्यूट की मदद से, ब्राउज़र को ऑफ़स्क्रीन इमेज और iframe को लोड करने में तब तक देरी करने की अनुमति मिलती है, जब तक उपयोगकर्ता उनके आस-पास स्क्रोल नहीं करते. loading में तीन वैल्यू इस्तेमाल की जा सकती हैं:
lazy: लेज़ी लोडिंग के लिए एक अच्छा विकल्प है.eager: लेज़ी लोडिंग के लिए सही नहीं है. तुरंत लोड हो जाते हैं.auto: ब्राउज़र यह तय करेगा कि लेज़ी लोड करना है या नहीं.
<img src="io2019.jpg" loading="lazy" alt="..." />
<iframe src="video-player.html" loading="lazy"></iframe>
"जब उपयोगकर्ता स्क्रोल करता है" के लिए सटीक ह्यूरिस्टिक, ब्राउज़र पर निर्भर करता है. आम तौर पर, हमें उम्मीद है कि ब्राउज़र, बाद में लोड होने वाली इमेज और iframe कॉन्टेंट को व्यूपोर्ट में आने से कुछ समय पहले ही फ़ेच करना शुरू कर देंगे.
loading एट्रिब्यूट को Chrome कैनरी में फ़्लैग के पीछे लागू किया गया है. Chrome 75 और इसके बाद के वर्शन में, यह डेमो आज़माया जा सकता है. इसके लिए, about://flags/#enable-lazy-image-loading और about://flags/#enable-lazy-frame-loading फ़्लैग चालू करें.
लेज़ी लोडिंग की सुविधा के बारे में ज़्यादा जानकारी के लिए, यह लेख पढ़ें.
Google Fonts में अब क्वेरी पैरामीटर के तौर पर, font-display का इस्तेमाल किया जा सकता है
हमने एलान किया था कि font-display के लिए सहायता, अब display query-string पैरामीटर के ज़रिए सभी Google Fonts के लिए प्रोडक्शन में उपलब्ध है:
https://fonts.googleapis.com/css?family=Lobster&display=swap
font-display डिस्क्रिप्टर की मदद से, यह तय किया जा सकता है कि आपके वेब फ़ॉन्ट कैसे रेंडर होंगे या फ़ॉलबैक होंगे. यह इस बात पर निर्भर करता है कि उन्हें लोड होने में कितना समय लगता है. इसमें कई वैल्यू इस्तेमाल की जा सकती हैं. जैसे, auto, block, swap, fallback, और optional.
पहले, Google Fonts के वेब फ़ॉन्ट के लिए font-display तय करने का एकमात्र तरीका उन्हें खुद होस्ट करना था. हालांकि, इस बदलाव के बाद ऐसा करने की ज़रूरत नहीं है.
Google Fonts के दस्तावेज़ को अपडेट किया गया है, ताकि डिफ़ॉल्ट कोड एंबेड में font-display को शामिल किया जा सके (जैसा कि नीचे दिखाया गया है). हमें उम्मीद है कि इससे ज़्यादा से ज़्यादा डेवलपर, इस शानदार सुविधा को आज़माएंगे.
यहां Glitch पर, एक से ज़्यादा फ़ॉन्ट फ़ैमिली के साथ डिसप्ले का इस्तेमाल करने का डेमो दिया गया है. font-display: swap का असर देखने के लिए, DevTools नेटवर्क एम्युलेशन का इस्तेमाल करके इसे आज़माएं.
ज़्यादा जानकारी के लिए वीडियो देखें
हमने इस बातचीत में, परफ़ॉर्मेंस के बेहतर पैटर्न का इस्तेमाल करके, उपयोगकर्ता अनुभव को बेहतर बनाने के लिए, प्रोडक्शन से जुड़ी कई केस स्टडी भी शामिल कीं. इनमें ऐसी साइटें शामिल थीं जो अपने पेजों को तेज़ी से लोड करने के लिए, इमेज सीडीएन, Brotli कंप्रेशन, स्मार्ट JavaScript सर्विंग, और प्रीफ़ेचिंग का इस्तेमाल करती हैं. ज़्यादा जानने के लिए, यह बातचीत देखें :)