I/O 2019 में लॉन्च किए गए, वेब परफ़ॉर्मेंस से जुड़े तीन नए टूल के बारे में जानें.
Google I/O 2019 में "बड़े पैमाने पर स्पीड" के बारे में बताने वाली बातचीत के दौरान, हमने तीन चीज़ों का एलान किया था. हमें उम्मीद है कि इनसे आने वाले साल में वेब की परफ़ॉर्मेंस बेहतर होगी.
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 Canary में फ़्लैग के पीछे लागू किया गया है. about://flags/#enable-lazy-image-loading और
about://flags/#enable-lazy-frame-loading फ़्लैग चालू करके, Chrome के 75 और उसके बाद के वर्शन में यह डेमो आज़माया जा सकता है.
ज़्यादा जानकारी के साथ, लेज़ी लोडिंग की सुविधा के बारे में write-up दिया गया है.
Google Fonts में अब क्वेरी पैरामीटर के तौर पर font-display का इस्तेमाल किया जा सकता है
हमने बताया था कि font-display एट्रिब्यूट अब display क्वेरी-स्ट्रिंग पैरामीटर की मदद से, सभी Google फ़ॉन्ट के लिए प्रोडक्शन में उपलब्ध है:
https://fonts.googleapis.com/css?family=Lobster&display=swap
font-display डिस्क्रिप्टर से यह तय किया जा सकता है कि वेब फ़ॉन्ट कैसे रेंडर होंगे या वापस आएँगे. यह इस बात पर निर्भर करता है कि उन्हें लोड होने में कितना समय लगेगा. इसमें कई वैल्यू इस्तेमाल की जा सकती हैं. जैसे, auto, block, swap, fallback, और optional.
पहले, Google Fonts से वेब फ़ॉन्ट के लिए font-display तय करने का एक ही तरीका था कि उन्हें खुद होस्ट किया जा सके. हालांकि, इस बदलाव के बाद ऐसा करने की ज़रूरत नहीं होगी.
Google Fonts के दस्तावेज़ को अपडेट किया गया है, ताकि डिफ़ॉल्ट कोड एम्बेड में font-display शामिल किया जा सके. इस बारे में यहां बताया गया है. हमें उम्मीद है कि इससे और डेवलपर को इस दिलचस्प सुविधा को आज़माने के लिए बढ़ावा मिलेगा.
यहां एक डेमो दिया गया है, जिसमें एक से ज़्यादा फ़ॉन्ट फ़ैमिली के साथ डिसप्ले का इस्तेमाल करने के बारे में बताया गया है. font-display: swap के असर को देखने के लिए, DevTools के नेटवर्क इम्यूलेशन का इस्तेमाल करें.
ज़्यादा जानकारी के लिए देखें
इस बातचीत में, उपयोगकर्ता अनुभव को बेहतर बनाने के लिए, परफ़ॉर्मेंस के बेहतर पैटर्न का इस्तेमाल करने से जुड़ी कई प्रोडक्शन केस स्टडी भी शामिल थीं. इनमें ऐसी साइटें शामिल हैं जो अपने पेजों को तेज़ करने के लिए, इमेज सीडीएन, Brotli compression, स्मार्ट JavaScript सेवा, और पेज लोड होने से पहले उसे डाउनलोड करने की सुविधा का इस्तेमाल करती हैं. ज़्यादा जानने के लिए, टॉक देखें :)