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

I/O 2019 से लॉन्च हुए तीन नए वेब परफ़ॉर्मेंस के बारे में जानें.

Addy Osmani

Katie Hempenius

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

लाइटहाउस अब परफ़ॉर्मेंस बजट के साथ काम करता है

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

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

क्या आपको नहीं पता कि आपका बजट कितना होना चाहिए? हमारा एक्सपेरिमेंटल परफ़ॉर्मेंस बजट कैलकुलेटर आज़माएं. इससे, 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 कैनरी में फ़्लैग के पीछे लागू किया जाता है. Chrome 75 या इसके बाद के वर्शन पर यह डेमो आज़माया जा सकता है. इसके लिए, about://flags/#enable-lazy-image-loading और about://flags/#enable-lazy-frame-loading फ़्लैग चालू होने चाहिए.

लेज़ी लोडिंग की सुविधा के बारे में राइट-अप ज़्यादा जानकारी के साथ उपलब्ध है.

Google Fonts, अब क्वेरी पैरामीटर के तौर पर फ़ॉन्ट-डिसप्ले के साथ काम करता है

हमने एलान किया था कि font-display फ़ंक्शन अब डिसप्ले क्वेरी-स्ट्रिंग पैरामीटर के ज़रिए सभी Google फ़ॉन्ट के लिए प्रोडक्शन में उपलब्ध है:

https://fonts.googleapis.com/css?family=Lobster&display=swap

font-display डिस्क्रिप्टर से यह तय किया जा सकता है कि आपके वेब फ़ॉन्ट कैसे रेंडर होंगे या फिर से वापस आएंगे. यह इस बात पर निर्भर करता है कि उन्हें लोड होने में कितना समय लगता है. यह auto, block, swap, fallback, और optional जैसी कई वैल्यू के साथ काम करता है.

पहले, Google Fonts से वेब फ़ॉन्ट के लिए font-display तय करने का सिर्फ़ एक तरीका था, उन्हें खुद होस्ट करना. हालांकि, इस बदलाव से ऐसा करने की ज़रूरत नहीं होती.

डिफ़ॉल्ट कोड एम्बेड में font-display को शामिल करने के लिए, Google Fonts दस्तावेज़ को अपडेट किया गया है (जैसा कि नीचे दिख रहा है). हमें उम्मीद है कि इससे और डेवलपर को भी इस शानदार जोड़ को आज़माने के लिए बढ़ावा मिलेगा.

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

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

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