बड़े पैमाने पर स्पीड: वेब की परफ़ॉर्मेंस में नया क्या है?

I/O 2019 में लॉन्च किए गए, वेब परफ़ॉर्मेंस से जुड़े तीन नए टूल के बारे में जानें.

Katie Hempenius
Katie Hempenius

Google I/O 2019 में "बड़े पैमाने पर स्पीड" के बारे में बताने वाली बातचीत के दौरान, हमने तीन चीज़ों का एलान किया था. हमें उम्मीद है कि इनसे आने वाले साल में वेब की परफ़ॉर्मेंस बेहतर होगी.

Lighthouse में अब परफ़ॉर्मेंस बजटिंग की सुविधा उपलब्ध है

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

LightWallet की रिपोर्ट, जिसमें यह दिखाया गया है कि कौनसी ऐसेट, फ़ाइल साइज़ के बजट से ज़्यादा हैं.

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

क्या आपको नहीं पता कि आपका बजट कितना होना चाहिए? हमारे एक्सपेरिमेंटल परफ़ॉर्मेंस बजट कैलकुलेटर को आज़माएं. यह LightWallet के साथ काम करने वाला बजट कॉन्फ़िगरेशन जनरेट कर सकता है.

वेब पर ब्राउज़र-लेवल पर इमेज और iframe लेज़ी लोडिंग की सुविधा उपलब्ध कराई गई

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

अब तक, आपको JavaScript लाइब्रेरी का इस्तेमाल करके, इमेज को धीरे-धीरे लोड होने की समस्या को हल करना पड़ता था. हालांकि, ऐसा जल्द ही बदल सकता है. इस गर्मी में, Chrome लोडिंग एट्रिब्यूट के लिए सहायता लॉन्च करेगा. इससे वेब पर स्टैंडर्ड <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 और उसके बाद के वर्शन में यह डेमो आज़माया जा सकता है.

लेज़ी लोडिंग की सुविधा के बारे में ज़्यादा जानकारी के लिए, लेख पढ़ें.

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 के साथ Google Fonts का एम्बेड कोड

यहां एक डेमो दिया गया है, जिसमें एक से ज़्यादा फ़ॉन्ट फ़ैमिली के साथ डिसप्ले का इस्तेमाल करने के बारे में बताया गया है. font-display: swap के असर को देखने के लिए, DevTools के नेटवर्क इम्यूलेशन का इस्तेमाल करें.

ज़्यादा जानकारी के लिए देखें

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